ConstraintLayout Resize views for smaller Screens

问题

What is the best way of supporting different screen sizes when using a constrainLayout?

The problem:

When I change the device to any device with a screen size of less than 4.7" the button at the bottom tends to go below the bottom edge of the screen. I have anchored the button and I thought that all the views will be shrunk to accommodate the rest.

My code:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/background_dark"
    >

  <ImageView
      android:id="@+id/imageView"
      android:layout_width="0dp"
      android:layout_height="0dp"
      android:adjustViewBounds="false"
      android:cropToPadding="false"
      android:scaleType="fitXY"
      app:layout_constraintDimensionRatio="4:3"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      app:srcCompat="@drawable/maziwapp_logo"
      />
  <android.support.constraint.Guideline
      android:id="@+id/guideline"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      app:layout_constraintGuide_percent="0.4"
      />
  <android.support.constraint.Guideline
      android:id="@+id/guideline2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      app:layout_constraintGuide_begin="16dp"
      />
  <android.support.constraint.Guideline
      android:id="@+id/guideline3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      app:layout_constraintGuide_end="16dp"
      />
  <EditText
      android:id="@+id/emailTxt"
      android:layout_width="0dp"
      android:layout_height="48dp"
      android:background="@drawable/edittext_outline"
      android:fontFamily="sans-serif"
      android:hint="Email"
      android:paddingLeft="10dp"
      android:paddingStart="10dp"
      android:textColor="@android:color/white"
      android:typeface="serif"
      app:layout_constraintLeft_toRightOf="@id/guideline2"
      app:layout_constraintRight_toLeftOf="@id/guideline3"
      app:layout_constraintTop_toBottomOf="@id/guideline"
      tools:text="Email"
      />

  <EditText
      android:id="@+id/passwordTxt"
      android:layout_width="0dp"
      android:layout_height="48dp"
      android:layout_marginTop="16dp"
      android:background="@drawable/edittext_outline"
      android:hint="Password"
      android:paddingLeft="10dp"
      android:paddingStart="10dp"
      android:textColor="@android:color/white"
      app:layout_constraintLeft_toRightOf="@id/guideline2"
      app:layout_constraintRight_toLeftOf="@id/guideline3"
      app:layout_constraintTop_toBottomOf="@id/emailTxt"
      tools:text="Password"
      />
  <TextView
      android:id="@+id/textView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginTop="8dp"
      android:text="I forgot my password?"
      android:textColor="@color/colorFont1"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintLeft_toRightOf="@id/guideline2"
      app:layout_constraintRight_toLeftOf="@id/guideline3"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toBottomOf="@id/passwordTxt"
      />
  <Button
      android:id="@+id/button"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginTop="24dp"
      android:background="@drawable/login_button"
      android:text="Login"
      android:textColor="@android:color/white"
      android:textSize="18sp"
      app:layout_constraintBottom_toTopOf="@+id/view2"
      app:layout_constraintEnd_toStartOf="@+id/guideline3"
      app:layout_constraintHorizontal_bias="0.5"
      app:layout_constraintStart_toStartOf="@+id/guideline2"
      app:layout_constraintTop_toBottomOf="@+id/textView"
      tools:textAllCaps="false"
      />

  <view
      android:id="@+id/view2"
      android:layout_width="match_parent"
      android:layout_height="2dp"
      android:layout_marginBottom="8dp"
      android:layout_marginTop="8dp"
      app:layout_constraintBottom_toTopOf="@+id/button2"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintEnd_toStartOf="parent"
      app:layout_constraintHorizontal_bias="0.5"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/button"
      />
  <Button
      android:id="@+id/button2"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginBottom="8dp"
      android:layout_marginTop="8dp"
      android:background="@drawable/create_account_button"
      android:text="Create New Account"
      android:textColor="@android:color/white"
      android:textSize="18sp"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toStartOf="@+id/guideline3"
      app:layout_constraintHorizontal_bias="0.5"
      app:layout_constraintStart_toStartOf="@+id/guideline2"
      app:layout_constraintTop_toBottomOf="@+id/view2"
      tools:textAllCaps="false"
      />
</android.support.constraint.ConstraintLayout>

Captures:

回答1:

I thought that all the views will be shrunk to accommodate the rest.

No. You have to design it so that it supports a certain minimum screen size. And this is not specific only to ConstraintLayout, it will happen with RelativeLayout or any other layout.

Please see supporting different screen sizes.

In your case you can use a ScrollView, so that the content will scroll when it exceed the size of the screen.

回答2:

Whenever I run into this I simply wrap my ConstraintLayout in a ScrollView. Most designs are made for one screen size in mind, I don't think your minimum screen size should need to be so large.

Hope this helps.

来源：https://stackoverflow.com/questions/48264812/constraintlayout-resize-views-for-smaller-screens