android – 不同屏幕尺寸的约束布局

2019年7月28日 164次阅读

如何使用约束布局自动调整两个小部件之间的间隙或边距,用于不同的屏幕尺寸,例如ios.不同的屏幕尺寸可以是4.7,5.0或5.5.所有这些设备都从维度正常中选择维度,所以有没有其他方法可以自动调整两个小部件之间的边距

《android – 不同屏幕尺寸的约束布局》

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

<ImageView
    android:id="@+id/imageView"
    android:layout_width="0dp"
    android:layout_height="190dp"
    android:layout_marginLeft="16dp"
    android:layout_marginStart="0dp"
    android:layout_marginTop="0dp"
    android:contentDescription="dummy"
    android:scaleType="centerCrop"
    android:src="@drawable/lion"
    app:layout_constraintBottom_creator="1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_creator="1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_creator="1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_creator="1"
    app:layout_constraintTop_toTopOf="parent"
    tools:layout_editor_absoluteX="16dp"
    tools:layout_editor_absoluteY="16dp" />

<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="0dp"
    app:layout_constraintTop_toBottomOf="@+id/imageView"
    tools:layout_editor_absoluteX="8dp">

    <android.support.design.widget.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="abc" />


    <android.support.design.widget.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="xyz" />
</android.support.design.widget.TabLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/til_et_email"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginEnd="24dp"
    android:layout_marginStart="24dp"
    android:layout_marginTop="16dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tabLayout">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/et_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:hint="@string/et_email_hint" />

</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/til_password"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginEnd="24dp"
    android:layout_marginStart="24dp"
    android:layout_marginTop="0dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/til_et_email">

    <EditText
        android:id="@+id/et_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:hint="@string/et_password_hint" />
</android.support.design.widget.TextInputLayout>

<Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginEnd="24dp"
    android:layout_marginStart="24dp"
    android:layout_marginTop="16dp"
    android:text="@string/bt_sign_in"
    app:layout_constraintEnd_toEndOf="@+id/til_password"
    app:layout_constraintStart_toStartOf="@+id/til_password"
    app:layout_constraintTop_toBottomOf="@+id/til_password"
    tools:layout_editor_absoluteY="403dp" />

<TextView
    android:id="@+id/tv_forgot_password"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:autoSizeMaxTextSize="41sp"
    android:autoSizeMinTextSize="17sp"
    android:autoSizeStepGranularity="2sp"
    android:autoSizeTextType="uniform"
    android:gravity="center"
    android:text="@string/tv_forgot_password"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button" />

在上面的部分中,我将边缘值设置为硬编码.所以,如果我在5.0屏幕尺寸上运行代码就可以了.但是,如果我在5.5屏幕尺寸上运行它,而不是调整边距,它会在底部留下空白区域.

最佳答案 使用“指南”约束可根据不同的屏幕大小为视图提供百分比.

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

请参阅以下谷歌链接.
https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html

点赞