如何在线性布局中设置视图,使其适合从开始到结束的屏幕,并在一行中包含一定数量的元素?

Posted

技术标签:

【中文标题】如何在线性布局中设置视图,使其适合从开始到结束的屏幕,并在一行中包含一定数量的元素?【英文标题】:How to set the views in linear layout so that it fits in from start to end screen with a certain number of elements that are in a one row? 【发布时间】:2020-12-15 05:15:42 【问题描述】:

我在 LinearLayout 中有 14 条(视图)水平线,它应该适合任何屏幕,所以是否知道如何设置线之间的宽度以适应任何屏幕尺寸的从头到尾? 查看图像的外观: screenshots




    <LinearLayout
        android:layout_
        android:layout_
        android:orientation="horizontal">


        <View
            android:id="@+id/one"
            android:layout_
            android:layout_
            android:background="@color/blueTextColor" />
        
        <View
            android:id="@+id/two"
            android:layout_
            android:layout_
            android:layout_marginStart="27dp"
            android:background="@color/blueTextColor"/>
        <View/>
        <View/>
        <View/>
        <View/>
        <View/>
        <View/>
        <View/>
        <View/>
        <View/>
        <View/>
        <View
            android:id="@+id/fourteen"
            android:layout_
            android:layout_
            android:layout_marginStart="27dp"
            android:background="@color/blueTextColor" />


    </LinearLayout>

我尝试了这个,但它不起作用

【问题讨论】:

【参考方案1】:

我不确定,但我认为 @GuseeMofiddin 的答案不能如您所愿,因为它将视图扩展到全宽,您希望它只是 1dp。您可以使用约束布局和链来做到这一点。示例:

    像这样创建您的布局:
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_
    android:layout_
    android:orientation="horizontal">

    <View
        android:id="@+id/one"
        android:layout_
        android:layout_
        android:background="#0000AA" />

    <View
        android:id="@+id/two"
        android:layout_
        android:layout_
        android:background="#0000AA" />

    <View
        android:id="@+id/three"
        android:layout_
        android:layout_
        android:background="#0000AA" />

    <View
        android:id="@+id/four"
        android:layout_
        android:layout_
        android:background="#0000AA" />

</androidx.constraintlayout.widget.ConstraintLayout>
    现在您必须创建水平链。

首先,全选(点击one,按住Shift,然后点击four

接下来右击并选择这个:

您的 XML 文件应如下所示:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_
    android:layout_
    android:orientation="horizontal">

    <View
        android:id="@+id/one"
        android:layout_
        android:layout_
        android:background="#0000AA"
        app:layout_constraintEnd_toStartOf="@+id/two"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent" />

    <View
        android:id="@+id/two"
        android:layout_
        android:layout_
        android:background="#0000AA"
        app:layout_constraintEnd_toStartOf="@+id/three"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/one" />

    <View
        android:id="@+id/three"
        android:layout_
        android:layout_
        android:background="#0000AA"
        app:layout_constraintEnd_toStartOf="@+id/four"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/two" />

    <View
        android:id="@+id/four"
        android:layout_
        android:layout_
        android:background="#0000AA"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/three" />

</androidx.constraintlayout.widget.ConstraintLayout>

两个不同设备上的结果:

(此方法不会在左右边缘创建视图。要做到这一点,只需添加左右边缘之一,然后创建链但不包含它们)


编辑以回答评论:将底部和顶部边距添加到特定视图您必须将 height 设置为 0dp 并将顶部和底部约束设置为父级的顶部和底部。视图应如下所示:

<View
    android:id="@+id/two"
    android:layout_
    android:layout_
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    android:background="#0000AA"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/three"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/one"
    app:layout_constraintTop_toTopOf="parent"
    />

【讨论】:

【参考方案2】:

你只需要设置

android:weightSum="14"

到你的父母 LinearLayout 和

android:layout_weight="1"

您的孩子的意见,请试试这个,

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_>

    <LinearLayout
        android:layout_
        android:layout_
        android:orientation="horizontal"
        android:weightSum="14">

        <View
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:background="#000" />

        <View
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:background="#fff" />

        <View
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:background="#000" />

        <View
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:background="#fff" />

        <View
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:background="#000" />

        <View
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:background="#fff" />

        <View
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:background="#000" />

        <View
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:background="#000" />

        <View
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:background="#000" />

        <View
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:background="#000" />

        <View
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:background="#000" />

        <View
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:background="#000" />

        <View
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:background="#000" />

        <View
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:background="#000" />

    </LinearLayout>

</RelativeLayout>

【讨论】:

以上是关于如何在线性布局中设置视图,使其适合从开始到结束的屏幕,并在一行中包含一定数量的元素?的主要内容,如果未能解决你的问题,请参考以下文章

Xcode 自动布局:最适合正方形

如何在线性布局中保持 TextView 为中心

如何在自动布局中设置视图下方不同数量按钮的宽度

React-native:如何在布局(视图)的背景中设置图像

如何在 Android 中设置背景图像并将该图像适合整个卡片以用于卡片视图?

如何以编程方式在顶部和底部的垂直线性布局中设置一个视图?