使用约束布局等距排列的四个图像 [英] Equally spaced four images using constraint layout
本文介绍了使用约束布局等距排列的四个图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用约束布局将四个图像等距放置...我已经使用了准则，但是它给了我图像之间的大量空间，并且右上角的图像不在屏幕上
i want to equally spaced four images using constraint layout...i have used guidelines but it is giving me a lot of space between the images and right corner images are going out of the screen
我想要这样的东西->
i want something like this -->
但是从下面的代码中我得到了这个->
but from following code im getting this -->
我尝试运行的另一台设备未提供预期的结果
from another device i tried running it is not giving desired result
以下是代码:-
<androidx.drawerlayout.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/holder"
android:layout_width="match_parent"
android:background="#000000"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:background="#ffffff"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/toolbar"
app:titleTextColor="#ffffff"
app:title="@string/app_name"
android:background="@color/colorPrimary"
tools:ignore="MissingConstraints" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/cvcxv"
android:layout_below="@id/toolbar"
app:layout_constraintTop_toBottomOf="@id/toolbar"
tools:ignore="MissingConstraints">
<androidx.viewpager.widget.ViewPager
android:layout_width="match_parent"
android:layout_height="687px"
android:id="@+id/viewpagerhome"
tools:ignore="MissingConstraints" />
<com.viewpagerindicator.CirclePageIndicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="-30dp"
android:layout_marginBottom="-3dp"
android:gravity="bottom"
app:layout_constraintBottom_toBottomOf="parent"
android:padding="10dip"
app:centered="true"
app:fillColor="@color/colorPrimary"
app:pageColor="#FFFFFF"
app:snap="false"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="bottom"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:gravity="bottom"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent">
<Button
android:id="@+id/image1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="4dp"
android:layout_marginRight="4dp"
android:background="@drawable/chairsicon"
app:layout_constraintDimensionRatio="h,1:1"
app:layout_constraintEnd_toStartOf="@id/image2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/image2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:background="@drawable/chairsicon"
app:layout_constraintDimensionRatio="h,1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/image1"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/image3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="4dp"
android:layout_marginRight="4dp"
android:background="@drawable/chairsicon"
app:layout_constraintDimensionRatio="h,1:1"
app:layout_constraintEnd_toStartOf="@id/image4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/image1" />
<Button
android:id="@+id/image4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:layout_marginTop="8dp"
android:background="@drawable/chairsicon"
app:layout_constraintDimensionRatio="h,1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/image3"
app:layout_constraintTop_toBottomOf="@id/image2" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@android:color/transparent"
android:layout_gravity="start"
app:itemTextColor="#ffffff"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/menu"
app:itemIconTint="#ffffff"
app:itemBackground="@drawable/drawer_item_bg"
/>
</drawer>
不同的设备提供不同的输出，但输出不理想(第一张图片)
需要帮助，以使其适合所有设备(小设备到大设备)
need help so that it can fit every device(small device to big device)
推荐答案
不确定问题的确切要求，但我可以看到您需要显示4个等宽且正方形的正方形.设备上的高度.
Not sure about your exact requirement from question, but I can see that you need to display 4 squares with equal width & height across devices.
您无需同时使用垂直和水平方向的指南，而是垂直放置它，可以使用障碍物将它们正确对齐.
You don't need to use guideline for both vertical and horizontal but instead to distribute it vertically you can use barrier to align them properly.
查看以下代码:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.viewpager.widget.ViewPager
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
app:layout_constraintBottom_toTopOf="@id/image_divider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/vertical_divider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".5" />
<androidx.constraintlayout.widget.Barrier
android:id="@+id/image_divider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="view1, view2" />
<androidx.constraintlayout.widget.Barrier
android:id="@+id/horizontal_divider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="view3, view4" />
<View
android:id="@+id/view1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="@android:color/holo_orange_dark"
app:layout_constraintBottom_toTopOf="@id/horizontal_divider"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="@id/vertical_divider"
app:layout_constraintStart_toStartOf="parent" />
<View
android:id="@+id/view2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="@android:color/holo_orange_light"
app:layout_constraintBottom_toTopOf="@id/horizontal_divider"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/vertical_divider" />
<View
android:id="@+id/view3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="@android:color/holo_red_light"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="@id/vertical_divider"
app:layout_constraintStart_toStartOf="parent" />
<View
android:id="@+id/view4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="@android:color/holo_red_dark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/vertical_divider" />
</androidx.constraintlayout.widget.ConstraintLayout>
输出:
(这将在不同的屏幕尺寸上保持一致)
(This will be consistent across different screen sizes)
此处，垂直指导线用于在水平方向上均匀分布视图，而障碍物用于在垂直方向上对齐两个视图.
Here, vertical guideline is used to distribute views evenly on horizontal direction while barrier is used to align two views in vertical direction.
尺寸比用于使与 0dp 一致的正方形的高度&宽度.
Dimension ratio is used to make square consistent with 0dp as height & width.
O.P.寻求解决方案，将整个视图层次结构安排在底部带有方形框，下面给出了完整的代码:
O.P. seeks for solution on arranging entire view hierarchy with square boxes at bottom, given below is complete code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:title="@string/app_name"
app:titleTextColor="#ffffff"
tools:ignore="MissingConstraints" />
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewpagerhome"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
app:layout_constraintBottom_toTopOf="@id/image_divider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/toolbar"
tools:ignore="NotSibling" />
<com.viewpagerindicator.CirclePageIndicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="-30dp"
android:layout_marginBottom="-3dp"
android:gravity="bottom"
android:padding="10dip"
app:centered="true"
app:fillColor="@color/colorPrimary"
app:layout_constraintBottom_toBottomOf="@id/viewpagerhome"
app:layout_constraintEnd_toEndOf="@id/viewpagerhome"
app:layout_constraintStart_toStartOf="@id/viewpagerhome"
app:pageColor="#FFFFFF"
app:snap="false" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/vertical_divider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".5" />
<androidx.constraintlayout.widget.Barrier
android:id="@+id/image_divider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="view1, view2" />
<androidx.constraintlayout.widget.Barrier
android:id="@+id/horizontal_divider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="view3, view4" />
<View
android:id="@+id/view1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="@drawable/tableicon"
app:layout_constraintBottom_toTopOf="@id/horizontal_divider"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="@id/vertical_divider"
app:layout_constraintStart_toStartOf="parent" />
<View
android:id="@+id/view2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="@drawable/sofaicon"
app:layout_constraintBottom_toTopOf="@id/horizontal_divider"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/vertical_divider" />
<View
android:id="@+id/view3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="@drawable/chairsicon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="@id/vertical_divider"
app:layout_constraintStart_toStartOf="parent" />
<View
android:id="@+id/view4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="@drawable/cupboardicon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/vertical_divider" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@android:color/transparent"
app:headerLayout="@layout/nav_header_main"
app:itemBackground="@drawable/drawer_item_bg"
app:itemIconTint="#ffffff"
app:itemTextColor="#ffffff"
app:menu="@menu/menu" />
</androidx.drawerlayout.widget.DrawerLayout>
这篇关于使用约束布局等距排列的四个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
