Question

我来自std::cin和iOS，对Xcode中的布局和约束感到困惑。我的布局当前看起来像这样，这对于小型电话来说很好。但是在高度较大的手机上，它在底部留有很大的空间。我希望布局遵循并匹配手机的高度。

我的android studio如下：

XML

是的，我知道按钮的尺寸是固定的。但是我不知道如何使它们动态地跟随手机的高度。很抱歉遇到这样一个基本问题，但我仍在这里学习基本知识：）

Answer 1

您必须构建垂直的元素链。在此处查看详细说明：https://medium.com/@nomanr/constraintlayout-chains-4f3b58ea15bb

Answer 2

您需要创建一个垂直链，其chainStyle为spread或spread_inside，以实现一点所需的利润，并为顶部和底部的填充物自定义一些填充大多数视图。

XML代码：

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout
    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:theme="@android:style/Theme.NoTitleBar.Fullscreen"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    tools:context="com.stackoverflow.MainActivity">

    <ImageView
        android:id="@+id/logo"
        android:layout_width="80dp"
        android:layout_height="70dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toTopOf="@+id/main_header"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread"
        app:srcCompat="@android:drawable/btn_star_big_on" />

    <TextView
        android:id="@+id/main_header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="3dp"
        android:text="DEMENSVÅRD"
        android:textAlignment="center"
        android:textAppearance="@style/TextAppearance.AppCompat.Title"
        android:textColor="@android:color/black"
        app:layout_constraintBottom_toTopOf="@+id/subHeader"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/logo" />

    <TextView
        android:id="@+id/subHeader"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:text="UTAN TVÅNG"
        android:textAlignment="center"
        android:typeface="monospace"
        app:layout_constraintBottom_toTopOf="@+id/chapter1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/main_header" />

    <TextView
        android:id="@+id/chapter1Header"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:elevation="3dp"
        android:text="Placeholder"
        android:textColor="@android:color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        android:typeface="serif"
        app:layout_constraintBottom_toBottomOf="@+id/chapter1"
        app:layout_constraintEnd_toEndOf="@+id/chapter1"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@+id/iconHolder1"
        app:layout_constraintTop_toTopOf="@+id/chapter1" />

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/iconHolder1"
        android:layout_width="80dp"
        android:layout_height="0dp"
        android:elevation="3dp"
        android:padding="8dp"
        android:src="@drawable/icon1"
        app:civ_border_color="@color/colorPrimary"
        app:civ_border_width="0dp"
        app:layout_constraintBottom_toBottomOf="@+id/chapter1"
        app:layout_constraintStart_toStartOf="@+id/chapter1"
        app:layout_constraintTop_toTopOf="@+id/chapter1" />

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/iconHolder2"
        android:layout_width="80dp"
        android:layout_height="0dp"
        android:elevation="3dp"
        android:padding="8dp"
        android:src="@drawable/icon2"
        app:civ_border_color="@color/chapter1"
        app:civ_border_width="0dp"
        app:layout_constraintBottom_toBottomOf="@+id/chapter2"
        app:layout_constraintStart_toStartOf="@+id/chapter2"
        app:layout_constraintTop_toTopOf="@+id/chapter2" />

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/iconHolder3"
        android:layout_width="80dp"
        android:layout_height="0dp"
        android:elevation="3dp"
        android:padding="8dp"
        android:src="@drawable/icon3"
        app:layout_constraintBottom_toBottomOf="@+id/chapter3"
        app:layout_constraintStart_toStartOf="@+id/chapter3"
        app:layout_constraintTop_toTopOf="@+id/chapter3" />

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/iconHolder4"
        android:layout_width="80dp"
        android:layout_height="0dp"
        android:elevation="3dp"
        android:padding="8dp"
        android:src="@drawable/icon4"
        app:layout_constraintBottom_toBottomOf="@+id/chapter4"
        app:layout_constraintStart_toStartOf="@+id/chapter4"
        app:layout_constraintTop_toTopOf="@+id/chapter4" />

    <Button
        android:id="@+id/chapter1"
        android:layout_width="0dp"
        android:layout_height="75dp"
        android:layout_marginLeft="24dp"
        android:layout_marginRight="24dp"
        android:layout_marginTop="8dp"
        android:background="@android:drawable/spinner_background"
        android:elevation="0dp"
        android:text=""
        app:layout_constraintBottom_toTopOf="@+id/chapter2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/subHeader" />

    <TextView
        android:id="@+id/chapter2Header"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:elevation="3dp"
        android:text="Placeholder"
        android:textColor="@android:color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@+id/chapter2"
        app:layout_constraintEnd_toEndOf="@+id/chapter2"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@+id/iconHolder2"
        app:layout_constraintTop_toTopOf="@+id/chapter2" />

    <Button
        android:id="@+id/chapter2"
        android:layout_width="0dp"
        android:layout_height="75dp"
        android:layout_marginLeft="24dp"
        android:layout_marginRight="24dp"
        android:layout_marginTop="8dp"
        android:background="@android:drawable/spinner_background"
        android:elevation="0dp"
        android:text=""
        app:layout_constraintBottom_toTopOf="@+id/chapter3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chapter1" />

    <TextView
        android:id="@+id/chapter3Header"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:elevation="3dp"
        android:text="Placeholder"
        android:textColor="@android:color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@+id/chapter3"
        app:layout_constraintEnd_toEndOf="@+id/chapter3"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@+id/iconHolder3"
        app:layout_constraintTop_toTopOf="@+id/chapter3" />

    <Button
        android:id="@+id/chapter3"
        android:layout_width="0dp"
        android:layout_height="75dp"
        android:layout_marginLeft="24dp"
        android:layout_marginRight="24dp"
        android:layout_marginTop="8dp"
        android:background="@android:drawable/spinner_background"
        android:elevation="0dp"
        android:text=""
        app:layout_constraintBottom_toTopOf="@+id/chapter4"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chapter2" />

    <TextView
        android:id="@+id/chapter4Header"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:elevation="3dp"
        android:text="Placeholder"
        android:textColor="@android:color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@+id/chapter4"
        app:layout_constraintEnd_toEndOf="@+id/chapter4"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@+id/iconHolder4"
        app:layout_constraintTop_toTopOf="@+id/chapter4" />

    <Button
        android:id="@+id/chapter4"
        android:layout_width="0dp"
        android:layout_height="75dp"
        android:layout_marginLeft="24dp"
        android:layout_marginRight="24dp"
        android:layout_marginTop="8dp"
        android:background="@android:drawable/spinner_background"
        android:elevation="0dp"
        android:text=""
        app:layout_constraintBottom_toTopOf="@+id/about_button"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chapter3" />

    <ImageButton
        android:id="@+id/about_button"
        android:layout_width="15dp"
        android:layout_height="35dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="#0000"
        android:scaleType="fitXY"
        android:src="@android:drawable/btn_star_big_on"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/language_button"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toEndOf="@+id/version_button"
        app:layout_constraintTop_toBottomOf="@+id/chapter4"
        app:layout_constraintVertical_bias="0.0" />

    <Button
        android:id="@+id/version_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="4dp"
        android:background="@android:color/white"
        android:text="version"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chapter4" />

    <Button
        android:id="@+id/language_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="24dp"
        android:layout_marginTop="4dp"
        android:background="@android:color/white"
        android:text="language"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chapter4" />

</android.support.constraint.ConstraintLayout>

屏幕截图（用于以上代码）：

1]对于屏幕尺寸-5.0英寸（1080 x 1920像素）[设备：Nexus 5]

2]屏幕尺寸-7.0英寸（1200 x 1920像素）[设备：Nexus 7]

有关如何在ConstraintLayout中创建链，其正确用法和各种链样式的更多信息，请经历： https://developer.android.com/reference/android/support/constraint/ConstraintLayout#Chains

希望对您有所帮助。

如何使约束匹配手机的高度？（Android Studio）

2 个答案:

如何使约束匹配手机的高度？ （Android Studio）

2 个答案:

如何使约束匹配手机的高度？（Android Studio）