即使使用约束布局，设计也不一样
Design does not the same even using constraint layout
我需要帮助。我正在使用 android studio 构建应用程序。我想这样显示我的页面。 Desired display design. But there is an error. The page didn't display as I want. It displays like this even with using constraint layout. Error display design。我希望我的设计与任何尺寸的展示设计相匹配。在这里我附上了我的代码和图片。
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/drawer_layout"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/page">
<include
android:id="@+id/include2"
layout="@layout/main_toolbar" />
<ImageView
android:id="@+id/imageView8"
android:layout_width="58dp"
android:layout_height="52dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:src="@drawable/lynx"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/include2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="@+id/include2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<ImageView
android:id="@+id/imageView"
android:layout_width="157dp"
android:layout_height="182dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.135"
app:srcCompat="@drawable/one" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/adamina"
android:gravity="center_horizontal"
android:text="Leader"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="15dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.504"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/include2"
app:layout_constraintVertical_bias="0.354" />
<ImageView
android:id="@+id/imageView2"
android:layout_width="153dp"
android:layout_height="166dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/imageView3"
app:layout_constraintHorizontal_bias="0.061"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.499"
app:srcCompat="@drawable/two" />
<TextView
android:id="@+id/textMember1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/adamina"
android:gravity="center_horizontal"
android:text="Madi"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="15dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/include2"
app:layout_constraintVertical_bias="0.635" />
<ImageView
android:id="@+id/imageView3"
android:layout_width="153dp"
android:layout_height="166dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.932"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.499"
app:srcCompat="@drawable/three" />
<TextView
android:id="@+id/textMember2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/adamina"
android:gravity="center_horizontal"
android:text="Ain"
android:textSize="15dp"
android:textAlignment="center"
android:textColor="@color/black"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.837"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/include2"
app:layout_constraintVertical_bias="0.627" />
<ImageView
android:id="@+id/imageView4"
android:layout_width="153dp"
android:layout_height="166dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.05"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.834"
app:srcCompat="@drawable/four" />
<TextView
android:id="@+id/textMember3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/adamina"
android:gravity="center_horizontal"
android:text="Syahmina"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="15dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.184"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/include2"
app:layout_constraintVertical_bias="0.911" />
<ImageView
android:id="@+id/imageView5"
android:layout_width="153dp"
android:layout_height="166dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.933"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.834"
app:srcCompat="@drawable/five" />
<TextView
android:id="@+id/textMember4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/adamina"
android:gravity="center_horizontal"
android:text="Adlina"
android:textAlignment="center"
android:textColor="@color/black"
android:textStyle="bold"
android:textSize="15dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.837"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/include2"
app:layout_constraintVertical_bias="0.912" />
</androidx.constraintlayout.widget.ConstraintLayout>
<RelativeLayout
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@color/white">
<include layout="@layout/main_nav_drawer"></include>
</RelativeLayout>
</androidx.drawerlayout.widget.DrawerLayout>
您看到此行为是因为您在视图上使用了固定尺寸，不同的设备会有不同的屏幕尺寸，android:layout_width="157dp"在每台设备上看起来都不一样。
您可以使用百分比 tp 让您的布局响应：
您需要做的就是添加 android:layout_width="0dp" 和
android:layout_height="0dp" 到您的布局项并相应地给它们 app:layout_constraintHeight_percent="0.y" 或
app:layout_constraintWidth_percent="0.x"
例如：
高度等于其父视图大小的 20% 且高度等于其父视图大小的 40% 的视图（对于您的情况，父视图是屏幕）：
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.2"
app:layout_constraintWidth_percent="0.4"
您可以采用包含图像和文本的 LinearLayout。对这些布局应用约束。我认为这会降低您的情况的复杂性。
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/imageView"
android:layout_width="157dp"
android:layout_height="182dp"
android:scaleType="centerCrop"
app:srcCompat="@drawable/one" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/adamina"
android:gravity="center_horizontal"
android:text="Leader"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="15dp"
android:textStyle="bold" />
</LinearLayout>
我需要帮助。我正在使用 android studio 构建应用程序。我想这样显示我的页面。 Desired display design. But there is an error. The page didn't display as I want. It displays like this even with using constraint layout. Error display design。我希望我的设计与任何尺寸的展示设计相匹配。在这里我附上了我的代码和图片。
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/drawer_layout"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/page">
<include
android:id="@+id/include2"
layout="@layout/main_toolbar" />
<ImageView
android:id="@+id/imageView8"
android:layout_width="58dp"
android:layout_height="52dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:src="@drawable/lynx"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/include2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="@+id/include2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<ImageView
android:id="@+id/imageView"
android:layout_width="157dp"
android:layout_height="182dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.135"
app:srcCompat="@drawable/one" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/adamina"
android:gravity="center_horizontal"
android:text="Leader"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="15dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.504"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/include2"
app:layout_constraintVertical_bias="0.354" />
<ImageView
android:id="@+id/imageView2"
android:layout_width="153dp"
android:layout_height="166dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/imageView3"
app:layout_constraintHorizontal_bias="0.061"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.499"
app:srcCompat="@drawable/two" />
<TextView
android:id="@+id/textMember1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/adamina"
android:gravity="center_horizontal"
android:text="Madi"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="15dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/include2"
app:layout_constraintVertical_bias="0.635" />
<ImageView
android:id="@+id/imageView3"
android:layout_width="153dp"
android:layout_height="166dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.932"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.499"
app:srcCompat="@drawable/three" />
<TextView
android:id="@+id/textMember2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/adamina"
android:gravity="center_horizontal"
android:text="Ain"
android:textSize="15dp"
android:textAlignment="center"
android:textColor="@color/black"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.837"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/include2"
app:layout_constraintVertical_bias="0.627" />
<ImageView
android:id="@+id/imageView4"
android:layout_width="153dp"
android:layout_height="166dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.05"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.834"
app:srcCompat="@drawable/four" />
<TextView
android:id="@+id/textMember3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/adamina"
android:gravity="center_horizontal"
android:text="Syahmina"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="15dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.184"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/include2"
app:layout_constraintVertical_bias="0.911" />
<ImageView
android:id="@+id/imageView5"
android:layout_width="153dp"
android:layout_height="166dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.933"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.834"
app:srcCompat="@drawable/five" />
<TextView
android:id="@+id/textMember4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/adamina"
android:gravity="center_horizontal"
android:text="Adlina"
android:textAlignment="center"
android:textColor="@color/black"
android:textStyle="bold"
android:textSize="15dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.837"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/include2"
app:layout_constraintVertical_bias="0.912" />
</androidx.constraintlayout.widget.ConstraintLayout>
<RelativeLayout
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@color/white">
<include layout="@layout/main_nav_drawer"></include>
</RelativeLayout>
</androidx.drawerlayout.widget.DrawerLayout>
您看到此行为是因为您在视图上使用了固定尺寸，不同的设备会有不同的屏幕尺寸，android:layout_width="157dp"在每台设备上看起来都不一样。
您可以使用百分比 tp 让您的布局响应：
您需要做的就是添加 android:layout_width="0dp" 和
android:layout_height="0dp" 到您的布局项并相应地给它们 app:layout_constraintHeight_percent="0.y" 或
app:layout_constraintWidth_percent="0.x"
例如：
高度等于其父视图大小的 20% 且高度等于其父视图大小的 40% 的视图（对于您的情况，父视图是屏幕）：
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.2"
app:layout_constraintWidth_percent="0.4"
您可以采用包含图像和文本的 LinearLayout。对这些布局应用约束。我认为这会降低您的情况的复杂性。
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/imageView"
android:layout_width="157dp"
android:layout_height="182dp"
android:scaleType="centerCrop"
app:srcCompat="@drawable/one" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/adamina"
android:gravity="center_horizontal"
android:text="Leader"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="15dp"
android:textStyle="bold" />
</LinearLayout>