如何将 Android 中的布局大小设置为屏幕大小的百分比

我在 Android 中有一个带有内部 ConstraintLayout 和内部线性布局的 ConstraintLayout。在这里你可以看到我的代码:

<?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:id="@+id/outerConstraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_marginTop="@dimen/_5sdp"
        android:layout_marginBottom="@dimen/_8sdp"
        android:layout_width="@dimen/_235sdp"
        android:layout_height="0dp"
        android:orientation="vertical"
        android:background="@drawable/rim"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.93"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.75">

    </LinearLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/innerConstraintLayout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="@+id/linearLayout"
        app:layout_constraintEnd_toStartOf="@+id/linearLayout"
        android:layout_marginLeft="@dimen/_10sdp"
        android:layout_marginRight="@dimen/_30sdp"
        android:background="@drawable/rim"
        android:padding="12dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/linearLayout"
        >

        <TextView
            android:id="@+id/textView_Name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Inner Constrained Layout"
            android:textColor="#000000"
            android:textSize="@dimen/_10ssp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/button_okay"
            android:layout_width="match_parent"
            android:layout_height="@dimen/_25sdp"
            android:background="@color/colorGreen"
            android:text="Okay"
            android:textAllCaps="false"
            android:textColor="#121212"
            android:textSize="@dimen/_8ssp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.553"
            app:layout_constraintStart_toStartOf="parent"/>
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

问题是两种布局在不同屏幕上显示的比例不同(见截图):

如何将 Android 中的布局大小设置为屏幕大小的百分比

这看起来不太好,因为根据所使用的设备,布局在比例(宽度和高度)方面看起来完全不同。现在我的问题是是否有一种方法可以将布局的宽度和高度设置为屏幕尺寸的百分比,从而使布局的宽度和高度的比例与屏幕尺寸无关?或者你会如何设计布局,使其宽度和高度之间的比例或多或少独立于屏幕尺寸?

感谢您的每一条评论,如果您分享您在该问题上的经验,我会很高兴吗?

wurui126 回答:如何将 Android 中的布局大小设置为屏幕大小的百分比

<LinearLayout
        ...
        android:layout_width="@dimen/_235sdp"
        ...
>

我假设在 @dimen/_235sdp 中您的值为 235dp。如果是这样,该行在所有设备上为您的 LinearLayout 固定宽度 235dp,因此您不能期望它按百分比缩放。

尝试使用带有百分比值的垂直 Guideline 并删除所有其他固定尺寸:

<?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"
    android:id="@+id/outerConstraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.3"/>

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_marginTop="@dimen/_5sdp"
        android:layout_marginBottom="@dimen/_8sdp"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        android:background="@android:color/holo_red_dark"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@id/guideline"
        app:layout_constraintEnd_toEndOf="parent">

    </LinearLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/innerConstraintLayout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="@dimen/_10sdp"
        android:layout_marginEnd="@dimen/_30sdp"
        android:background="@android:color/holo_blue_dark"
        android:padding="12dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/guideline">

        <TextView
            android:id="@+id/textView_Name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Inner Constrained Layout"
            android:textColor="#000000"
            android:textSize="@dimen/_10ssp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/button_okay"
            android:layout_width="match_parent"
            android:layout_height="@dimen/_25sdp"
            android:background="@android:color/holo_green_light"
            android:text="Okay"
            android:textAllCaps="false"
            android:textColor="#121212"
            android:textSize="@dimen/_8ssp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"/>
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

在更新后的代码中,我添加了一条垂直引导线,将屏幕拆分为 0.3 和 0.7,然后我根据引导线约束内部布局以保持比例。现在在任何设备上,您都应该看到左侧内部布局始终占据宽度的 0.3,右侧内部布局始终占据宽度的 0.7。

提示:尽量避免ConstraintLayout内的ConstraintLayout,应该完全可以在不破坏布局的情况下将内部内容(即TextView、Button)限制在父ConstraintLayout上。>

,

现在我的问题是是否有一种方法可以将布局的宽度和高度设置为屏幕尺寸的百分比

可以像这样使用constarintLayout来完成:

  • 采取任何观点,给它 android:layout_height="0dp" - 现在它会尊重你的约束,另外添加它 app:layout_constraintHeight_percent="0.15"

现在视图的高度是父尺寸的 15%。

  • 同样可以对宽度 android:layout_width="0dp"app:layout_constraintWidth_percent="0.5" 一起使用,现在您的视图将占据父尺寸的 50%。

你可以像这样组合这两个:

 android:layout_width="0dp"
 android:layout_height="0dp"
 app:layout_constraintWidth_percent="0.5"
 app:layout_constraintHeight_percent="0.15"

现在您的视图既是父级宽度的 15%,又是父级高度的 50%,更改这些数字,您就可以根据需要控制视图大小。

,

我遇到了几乎相同的问题,为了解决这个问题,我将每一层分为两种模式(手机和平板电脑)(Android系统本身可以识别大小)并扩展两者。 这样,我的工作就更有规律了,接下来的模式对我来说也很容易改变。

我的解决方案:

像这样制作您的资源。

res/布局/my_layout.xml

普通屏幕尺寸的布局(“默认”)

res/layout-large/my_layout.xml

大屏幕尺寸

的布局

如果您不知道如何创建布局大文件夹,您所要做的就是在项目资源管理器路径中创建一个同名文件夹并将您的图层放在那里。 然后 Android 本身将自动放置在您在 Android Studio Live 文件夹中的每个图层的单独文件夹中。 比如activity_main文件夹下图由两层组成

enter image description here enter image description here

,

首先简化视图树。使用虚拟布局而不是嵌套。您可以使用 GuidelineFlow、属性 app:layout_constraintDimensionRatio 或带权重的链,让 ConstraintLayout 的子项使用所需的比例。 这article可能对您有帮助

另一种方法是创建不同的 layout with qualifiers。为了更好的设计管理,最好使用单一布局。

本文链接:https://www.f2er.com/44100.html

大家都在问