约束布局不适用于所有 Android 设备屏幕尺寸

Question

I have the following layout, it works fine for big screens like note 9 Samsung, but it will not shrink to fit the screen size in small phones, please refer to the attached picture and codes. I like to use the constraint layouts , I did choised all items to be in form of WRAPCONTENT or MATCHCONSTRAIN , but still have the start button jump out of screen in small phones .

 <?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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/scroll" tools:context=".teamselect"> <EditText android:id="@+id/team1EdtTxt1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="148dp" android:layout_marginLeft="148dp" android:layout_marginTop="7dp" android:layout_marginEnd="49dp" android:layout_marginRight="49dp" android:layout_marginBottom="22dp" android:ems="10" android:hint="اللاعب 1" android:inputType="textPersonName" app:layout_constraintBottom_toTopOf="@+id/team1EdtTxt2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/textView" /> <EditText android:id="@+id/team1EdtTxt2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="148dp" android:layout_marginLeft="148dp" android:layout_marginTop="7dp" android:layout_marginEnd="49dp" android:layout_marginRight="49dp" android:layout_marginBottom="54dp" android:clickable="false" android:editable="false" android:ems="10" android:hint="اللاعب 2" android:inputType="textPersonName" app:layout_constraintBottom_toTopOf="@+id/textView2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/team1EdtTxt1" /> <EditText android:id="@+id/team2EdtTxt1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="148dp" android:layout_marginLeft="148dp" android:layout_marginTop="7dp" android:layout_marginEnd="49dp" android:layout_marginRight="49dp" android:layout_marginBottom="22dp" android:clickable="false" android:ems="10" android:hint="اللاعب 1" android:inputType="textPersonName" app:layout_constraintBottom_toTopOf="@+id/team2EdtTxt2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/textView2" /> <EditText android:id="@+id/team2EdtTxt2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="148dp" android:layout_marginLeft="148dp" android:layout_marginTop="7dp" android:layout_marginEnd="49dp" android:layout_marginRight="49dp" android:clickable="false" android:ems="10" android:hint="اللاعب 2" android:inputType="textPersonName" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/team2EdtTxt1" /> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="209dp" android:layout_marginLeft="209dp" android:layout_marginTop="129dp" android:layout_marginEnd="41dp" android:layout_marginRight="41dp" android:layout_marginBottom="24dp" android:text="الفريق الاول" android:textSize="36sp" app:fontFamily="@font/advent_pro_thin" app:layout_constraintBottom_toTopOf="@+id/team1EdtTxt1" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="209dp" android:layout_marginLeft="209dp" android:layout_marginTop="44dp" android:layout_marginEnd="41dp" android:layout_marginRight="41dp" android:layout_marginBottom="24dp" android:text="الفريق الثاني" android:textSize="36sp" app:layout_constraintBottom_toTopOf="@+id/team2EdtTxt1" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/team1EdtTxt2" /> <Button android:id="@+id/startBtn" android:layout_width="0dp" android:layout_height="0dp" android:layout_marginStart="110dp" android:layout_marginLeft="110dp" android:layout_marginTop="10dp" android:layout_marginEnd="110dp" android:layout_marginRight="110dp" android:layout_marginBottom="10dp" android:background="@drawable/buttondomeno" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/team2EdtTxt2" /> </androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

由于视图中的固定文本大小和边距，它不适合您可以尝试以下两种方法之一：1) 使用 ScrollView 使布局可滚动 2) 删除硬编码大小并为不同的屏幕尺寸使用不同的尺寸

Answer 2

Adding to @Hamza Khan answer, try to avoid using any fixed sizes on your views, you can use this layout:

 <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="0dp">


    <EditText
        android:id="@+id/team1EdtTxt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="اللاعب 1"
        android:inputType="textPersonName"
        app:layout_constraintBottom_toTopOf="@+id/team1EdtTxt2"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <EditText
        android:id="@+id/team1EdtTxt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:clickable="false"
        android:editable="false"
        android:ems="10"
        android:hint="اللاعب 2"
        android:inputType="textPersonName"
        app:layout_constraintBottom_toTopOf="@+id/textView2"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/team1EdtTxt1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="الفريق الاول"
        android:textSize="36sp"
        app:layout_constraintBottom_toTopOf="@+id/team1EdtTxt1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="الفريق الثاني"
        android:textSize="36sp"
        app:layout_constraintBottom_toTopOf="@+id/team2EdtTxt1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline3" />

    <EditText
        android:id="@+id/team2EdtTxt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:clickable="false"
        android:ems="10"
        android:hint="اللاعب 1"
        android:inputType="textPersonName"
        app:layout_constraintBottom_toTopOf="@+id/team2EdtTxt2"
        app:layout_constraintEnd_toEndOf="@+id/textView2"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <EditText
        android:id="@+id/team2EdtTxt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="false"
        android:ems="10"
        android:hint="اللاعب 2"
        android:inputType="textPersonName"
        app:layout_constraintBottom_toTopOf="@+id/startBtn"
        app:layout_constraintEnd_toEndOf="@+id/textView2"
        app:layout_constraintTop_toBottomOf="@+id/team2EdtTxt1" />

    <Button
        android:id="@+id/startBtn"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="start"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintWidth_percent="0.3" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.50" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.10" />


</androidx.constraintlayout.widget.ConstraintLayout>

It will look like this:

Notice that I have used 2 very useful attributes:

  app:layout_constraintHeight_percent="0.1"
  app:layout_constraintWidth_percent="0.3"

In addition, I have used Guidelines so now if you want to change the look of your layout you can simply change this attrubute:

  app:layout_constraintGuide_percent="0.x"