android constraintlayout 支持不同的屏幕尺寸答案

【问题标题】：android constrain layout support different screen sizeandroid constraintlayout 支持不同的屏幕尺寸
【发布时间】：2017-12-05 20:21:27
【问题描述】：

亲爱的我正在尝试使用带百分比的约束布局来支持不同的屏幕尺寸，如果我只使用图片或按钮，它可以正常工作，但是当我添加文本时它不会出现在小屏幕上，即使我将其添加为具有中心重心的匹配父级。我添加了xml代码.. 如果我可以使用这种方法来支持不同的屏幕尺寸，你能帮我吗或者我必须创建不同的xml文件。

编辑我

屏幕尺寸为 LDPI API 22 240 × 320：ldpi 22 Android 5.1 (Google APIs) 和 MDPI Small API 22 320 × 480：mdpi 22 Android 5.1 (Google APIs)

布局：

<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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/green_background"
tools:context="com.yaacoach.gymapp.StartExercise">

<android.support.constraint.Guideline
    android:id="@+id/guideline16"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.18" />

<android.support.constraint.Guideline
    android:id="@+id/guideline36"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.2" />

<android.support.constraint.Guideline
    android:id="@+id/guideline37"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentStart="true"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.8" />

<android.support.constraint.Guideline
    android:id="@+id/guideline38"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.03" />

<android.support.constraint.Guideline
    android:id="@+id/guideline40"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.08" />

<android.support.constraint.Guideline
    android:id="@+id/guideline41"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.92" />

<android.support.constraint.Guideline
    android:id="@+id/guideline42"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.27" />

<Button
    android:id="@+id/btn_start"
    style="@style/Base.TextAppearance.AppCompat.Medium"
    android:gravity="center"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="2dp"
    android:background="@drawable/stopwatchstyle"
    android:text="start"
    app:layout_constraintBottom_toTopOf="@+id/guideline43"
    app:layout_constraintEnd_toStartOf="@+id/guideline47"
    app:layout_constraintStart_toStartOf="@+id/guideline36"
    app:layout_constraintTop_toTopOf="@+id/guideline39"
    app:layout_constraintVertical_bias="0.833" />

<android.support.constraint.Guideline
    android:id="@+id/guideline43"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.93" />

<android.support.v7.widget.RecyclerView
    android:id="@+id/rv_startExercise_information"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@+id/guideline39"
    app:layout_constraintEnd_toStartOf="@+id/guideline41"
    app:layout_constraintStart_toStartOf="@+id/guideline40"
    app:layout_constraintTop_toTopOf="@+id/guideline42" />

<android.support.constraint.Guideline
    android:id="@+id/guideline39"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.86" />


<android.support.constraint.Guideline
    android:id="@+id/guideline45"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.25" />

<android.support.constraint.ConstraintLayout
    android:id="@+id/CL_stopWatch"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@drawable/stopwatchstyle"
    android:descendantFocusability="beforeDescendants"
    android:focusableInTouchMode="true"
    android:foregroundGravity="center"
    app:layout_constraintBottom_toTopOf="@+id/guideline45"
    app:layout_constraintEnd_toStartOf="@+id/guideline37"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="@+id/guideline36"
    app:layout_constraintTop_toTopOf="@+id/guideline38"
    app:layout_constraintVertical_bias="1.0">


</android.support.constraint.ConstraintLayout>

<Chronometer
    android:id="@+id/chronometer2"
    style="@android:style/TextAppearance.DeviceDefault.Medium"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:gravity="center"
    android:textColor="@color/btnbrainiac"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@+id/guideline46"
    app:layout_constraintEnd_toStartOf="@+id/guideline37"
    app:layout_constraintStart_toStartOf="@+id/guideline36"
    app:layout_constraintTop_toTopOf="@+id/guideline38" />

<android.support.constraint.Guideline
    android:id="@+id/guideline46"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.11" />

<android.support.constraint.Guideline
    android:id="@+id/guideline47"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.4" />

<android.support.v7.widget.RecyclerView
    android:id="@+id/rv_start_exercise_weight_rep"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@+id/guideline45"
    app:layout_constraintEnd_toStartOf="@+id/guideline37"
    app:layout_constraintStart_toStartOf="@+id/guideline47"
    app:layout_constraintTop_toTopOf="@+id/guideline46" />

<TextView
    android:id="@+id/textView2"
    style="@android:style/TextAppearance.DeviceDefault.Small"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="@string/Weight"
    app:layout_constraintBottom_toTopOf="@+id/guideline16"
    app:layout_constraintEnd_toStartOf="@+id/guideline47"
    app:layout_constraintStart_toStartOf="@+id/guideline36"
    app:layout_constraintTop_toTopOf="@+id/guideline46" />

<TextView
    android:id="@+id/textView4"
    style="@android:style/TextAppearance.DeviceDefault.Small"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="@string/repetition"
    app:layout_constraintBottom_toTopOf="@+id/guideline45"
    app:layout_constraintEnd_toStartOf="@+id/guideline47"
    app:layout_constraintStart_toStartOf="@+id/guideline36"
    app:layout_constraintTop_toTopOf="@+id/guideline16" />

<Button
    android:id="@+id/btn_StartExercies_Pause"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="2dp"
    android:background="@drawable/stopwatchstyle"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/guideline43"
    app:layout_constraintEnd_toStartOf="@+id/guideline37"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="@+id/guideline47"
    app:layout_constraintTop_toTopOf="@+id/guideline39"
    app:layout_constraintVertical_bias="0.0" />

【问题讨论】：

按钮的文字有问题吗？您可以将布局添加为文本而不是图像吗？还有哪个尺寸（设备规格）会导致问题。
感谢您的重播.. 我添加了 xml 代码和不起作用的屏幕尺寸

标签： android xml android-constraintlayout

【解决方案1】：

我将布局粘贴到 Android Studio 中，我看到它渲染正常。注意我替换了颜色和字符串，因为我没有你的资源文件。

下图是您提到的 LDPI 显示器的布局。

无论如何，我在这里为您提供了一种替代方法，您可以使用更少的准则和更少的约束元素来实现相同的布局。

布局：

<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#00FF00"
    >

    <android.support.constraint.Guideline
        android:id="@+id/glTop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.03" />


    <android.support.constraint.Guideline
        android:id="@+id/glBottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.93" />

    <android.support.constraint.Guideline
        android:id="@+id/glLeft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.08" />

    <android.support.constraint.Guideline
        android:id="@+id/glRight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.92" />


    <android.support.constraint.Guideline
        android:id="@+id/glChronoLeft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.2" />

    <android.support.constraint.Guideline
        android:id="@+id/glChronoRight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.8" />


    <LinearLayout
        android:id="@+id/chronometerContainer"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"

        app:layout_constraintEnd_toStartOf="@+id/glChronoRight"
        app:layout_constraintStart_toStartOf="@+id/glChronoLeft"
        app:layout_constraintTop_toTopOf="@+id/glTop">
        <Chronometer
            android:id="@+id/chronometer2"
            style="@android:style/TextAppearance.DeviceDefault.Medium"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="000000"
            android:textStyle="bold"
             />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="12">
            <LinearLayout
                android:layout_width="0dp"
                android:layout_weight="4"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:background="#FF0000">
                <TextView
                    android:id="@+id/textView2"
                    style="@android:style/TextAppearance.DeviceDefault.Small"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="Weight" />
                <TextView
                    android:id="@+id/textView4"
                    style="@android:style/TextAppearance.DeviceDefault.Small"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="Repet" />
            </LinearLayout>
            <android.support.v7.widget.RecyclerView
                android:id="@+id/rv_startExercise_information"
                android:layout_width="0dp"
                android:layout_weight="8"
                android:layout_height="match_parent"/>
        </LinearLayout>
    </LinearLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_start_exercise_weight_rep"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"

        app:layout_constraintStart_toEndOf="@+id/glLeft"
        app:layout_constraintBottom_toTopOf="@+id/btnContainer"
        app:layout_constraintEnd_toStartOf="@+id/glRight"
        app:layout_constraintTop_toBottomOf="@+id/chronometerContainer" />

    <LinearLayout
        android:id="@+id/btnContainer"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="12"

        app:layout_constraintStart_toStartOf="@id/glChronoLeft"
        app:layout_constraintEnd_toEndOf="@+id/glChronoRight"
        app:layout_constraintBottom_toTopOf="@+id/glBottom">

        <Button
            android:id="@+id/btn_start"
            style="@style/Base.TextAppearance.AppCompat.Medium"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_weight="6"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:background="#FF0000"
            android:layout_margin="1px"
            android:text="start" />

        <Button
            android:id="@+id/btn_StartExercies_Pause"
            style="@style/Base.TextAppearance.AppCompat.Medium"
            android:layout_width="0dp"
            android:layout_weight="6"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:background="#FF0000"
            android:layout_margin="1px"
            android:text="Button"
             />

    </LinearLayout>

</android.support.constraint.ConstraintLayout>

【讨论】：

感谢我测试了您的布局，它适用于所有屏幕尺寸我会考虑减少网格线并使用 linerlayouts 非常感谢

【解决方案2】：

屏幕尺寸是 LDPI API 22 240 × 320：ldpi 22 Android 5.1（谷歌 API）和 MDPI 小型 API 22 320 × 480：mdpi 22 Android 5.1（Google API）

【讨论】：

【解决方案3】：

<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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/green_background"
tools:context="com.yaacoach.gymapp.StartExercise">

<android.support.constraint.Guideline
    android:id="@+id/guideline16"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.18" />

<android.support.constraint.Guideline
    android:id="@+id/guideline36"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.2" />

<android.support.constraint.Guideline
    android:id="@+id/guideline37"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentStart="true"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.8" />

<android.support.constraint.Guideline
    android:id="@+id/guideline38"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.03" />

<android.support.constraint.Guideline
    android:id="@+id/guideline40"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.08" />

<android.support.constraint.Guideline
    android:id="@+id/guideline41"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.92" />

<android.support.constraint.Guideline
    android:id="@+id/guideline42"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.27" />

<Button
    android:id="@+id/btn_start"
    style="@style/Base.TextAppearance.AppCompat.Medium"
    android:gravity="center"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="2dp"
    android:background="@drawable/stopwatchstyle"
    android:text="start"
    app:layout_constraintBottom_toTopOf="@+id/guideline43"
    app:layout_constraintEnd_toStartOf="@+id/guideline47"
    app:layout_constraintStart_toStartOf="@+id/guideline36"
    app:layout_constraintTop_toTopOf="@+id/guideline39"
    app:layout_constraintVertical_bias="0.833" />

<android.support.constraint.Guideline
    android:id="@+id/guideline43"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.93" />

<android.support.v7.widget.RecyclerView
    android:id="@+id/rv_startExercise_information"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@+id/guideline39"
    app:layout_constraintEnd_toStartOf="@+id/guideline41"
    app:layout_constraintStart_toStartOf="@+id/guideline40"
    app:layout_constraintTop_toTopOf="@+id/guideline42" />

<android.support.constraint.Guideline
    android:id="@+id/guideline39"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.86" />


<android.support.constraint.Guideline
    android:id="@+id/guideline45"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.25" />

<android.support.constraint.ConstraintLayout
    android:id="@+id/CL_stopWatch"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@drawable/stopwatchstyle"
    android:descendantFocusability="beforeDescendants"
    android:focusableInTouchMode="true"
    android:foregroundGravity="center"
    app:layout_constraintBottom_toTopOf="@+id/guideline45"
    app:layout_constraintEnd_toStartOf="@+id/guideline37"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="@+id/guideline36"
    app:layout_constraintTop_toTopOf="@+id/guideline38"
    app:layout_constraintVertical_bias="1.0">


</android.support.constraint.ConstraintLayout>

<Chronometer
    android:id="@+id/chronometer2"
    style="@android:style/TextAppearance.DeviceDefault.Medium"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:gravity="center"
    android:textColor="@color/btnbrainiac"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@+id/guideline46"
    app:layout_constraintEnd_toStartOf="@+id/guideline37"
    app:layout_constraintStart_toStartOf="@+id/guideline36"
    app:layout_constraintTop_toTopOf="@+id/guideline38" />

<android.support.constraint.Guideline
    android:id="@+id/guideline46"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.11" />

<android.support.constraint.Guideline
    android:id="@+id/guideline47"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.4" />

<android.support.v7.widget.RecyclerView
    android:id="@+id/rv_start_exercise_weight_rep"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@+id/guideline45"
    app:layout_constraintEnd_toStartOf="@+id/guideline37"
    app:layout_constraintStart_toStartOf="@+id/guideline47"
    app:layout_constraintTop_toTopOf="@+id/guideline46" />

<TextView
    android:id="@+id/textView2"
    style="@android:style/TextAppearance.DeviceDefault.Small"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="@string/Weight"
    app:layout_constraintBottom_toTopOf="@+id/guideline16"
    app:layout_constraintEnd_toStartOf="@+id/guideline47"
    app:layout_constraintStart_toStartOf="@+id/guideline36"
    app:layout_constraintTop_toTopOf="@+id/guideline46" />

<TextView
    android:id="@+id/textView4"
    style="@android:style/TextAppearance.DeviceDefault.Small"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="@string/repetition"
    app:layout_constraintBottom_toTopOf="@+id/guideline45"
    app:layout_constraintEnd_toStartOf="@+id/guideline47"
    app:layout_constraintStart_toStartOf="@+id/guideline36"
    app:layout_constraintTop_toTopOf="@+id/guideline16" />

<Button
    android:id="@+id/btn_StartExercies_Pause"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="2dp"
    android:background="@drawable/stopwatchstyle"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/guideline43"
    app:layout_constraintEnd_toStartOf="@+id/guideline37"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="@+id/guideline47"
    app:layout_constraintTop_toTopOf="@+id/guideline39"
    app:layout_constraintVertical_bias="0.0" />

【讨论】：