ConstraintLayout调整较小屏幕的视图大小

时间:2018-01-15 14:16:53

标签: android android-constraintlayout

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

问题:

当我将设备更改为屏幕尺寸小于4.7的任何设备时,底部的按钮往往低于屏幕的下边缘。我已经固定按钮,我认为所有视图都将是缩小以适应其余部分。

我的代码

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

捕获

enter image description here enter image description here enter image description here

2 个答案:

答案 0 :(得分:1)

  

我认为所有观点都会缩小以适应其他观点。

没有。你必须设计它<IfModule mod_rewrite.c> RewriteEngine On RewriteRule ^$ index [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [L] </IfModule> 。 这不仅仅针对Dim HTMLDoc As HTMLDocument Dim MyBrowser As InternetExplorer Sub MyGmail() Dim MyHTML_Element As IHTMLElement Dim MyURL As String On Error GoTo Err_Clear MyURL = "https://www.gmail.com" Set MyBrowser = New InternetExplorer MyBrowser.Silent = True MyBrowser.navigate MyURL MyBrowser.Visible = True Do Loop Until MyBrowser.readyState = READYSTATE_COMPLETE Set HTMLDoc = MyBrowser.document HTMLDoc.all.identifierId.Value = "testaddress@gmail.com" '''Enter your email idhere '''this where I'm stuck, I can't figure out how to '''select for the Next button on GMAIL! Err_Clear: If Err <> 0 Then Err.Clear Resume Next End If End Sub ,而是supports a certain minimum screen size或任何其他布局。

请参阅supporting different screen sizes

在您的情况下,您可以使用ScrollView,以便内容在超出屏幕大小时滚动。

答案 1 :(得分:0)

每当遇到此时,我都将ConstraintLayout包裹在ScrollView中。 大多数设计都考虑到了一种屏幕尺寸,我认为您的最小屏幕尺寸不必这么大。

希望这会有所帮助。