ConstraintLayout调整视图尺寸以适应较小的屏幕 [英] ConstraintLayout Resize views for smaller Screens

查看:91
本文介绍了ConstraintLayout调整视图尺寸以适应较小的屏幕的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

使用constrainLayout时支持不同屏幕尺寸的最佳方法是什么?

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

问题:

当我将设备更改为屏幕尺寸小于4.7的任何设备时,底部的按钮通常会位于屏幕底部下方.我已经固定了按钮,并认为所有视图都将缩小以容纳其余部分.

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.

我的代码:

<?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>

捕获:

推荐答案

我认为所有视图都会缩小以容纳其余视图.

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

不.您必须对其进行设计,以使其supports a certain minimum screen size. 而且,这不仅是ConstraintLayout所特有的,它还会在RelativeLayout或任何其他布局中发生.

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.

请参见支持不同的屏幕尺寸.

您可以使用 ScrollView ,当内容超过屏幕大小时,内容将滚动.

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

这篇关于ConstraintLayout调整视图尺寸以适应较小的屏幕的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆