Android 布局：LinearLayout 大小相等的圆圈

Question

我正在尝试创建如下所示的布局。

到目前为止我有以下内容，但是我担心，根据屏幕分辨率，圆圈可能会倾斜，因为我在主容器上对高度进行了硬编码。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="85dp"
    android:baselineAligned="false"
    android:padding="10dp"
    android:weightSum="5">

    <RelativeLayout
        android:id="@+id/layoutAvatarItem1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="5dp"
        android:layout_weight="1"
        android:background="@drawable/circle_drawable_color_1">

        <CircleImageView
            android:id="@+id/imgAvatarItem1"
            android:layout_width="80dp"
            android:layout_height="match_parent"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:contentDescription="@string/general_content_desc"
            app:civ_border_color="@color/AppRed"
            app:civ_border_width="2dp" />

        <com.wang.avi.AVLoadingIndicatorView
            android:id="@+id/imgAvatarLoader1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="20dp"
            android:visibility="gone"
            app:indicatorColor="@color/White"
            app:indicatorName="BallPulseIndicator" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/layoutAvatarItem2"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:layout_weight="1"
        android:background="@drawable/circle_drawable_color_1">

        <CircleImageView
            android:id="@+id/imgAvatarItem2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:contentDescription="@string/general_content_desc"
            app:civ_border_color="@color/AppRed"
            app:civ_border_width="2dp" />

        <com.wang.avi.AVLoadingIndicatorView
            android:id="@+id/imgAvatarLoader2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="20dp"
            android:visibility="gone"
            app:indicatorColor="@color/White"
            app:indicatorName="BallPulseIndicator" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/layoutAvatarItem3"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:layout_weight="1"
        android:background="@drawable/circle_drawable_color_1">

        <CircleImageView
            android:id="@+id/imgAvatarItem3"
            android:layout_width="80dp"
            android:layout_height="match_parent"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:contentDescription="@string/general_content_desc"
            app:civ_border_color="@color/AppRed"
            app:civ_border_width="2dp" />

        <com.wang.avi.AVLoadingIndicatorView
            android:id="@+id/imgAvatarLoader3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="20dp"
            android:visibility="gone"
            app:indicatorColor="@color/White"
            app:indicatorName="BallPulseIndicator" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/layoutAvatarItem4"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:layout_weight="1"
        android:background="@drawable/circle_drawable_color_1">

        <CircleImageView
            android:id="@+id/imgAvatarItem4"
            android:layout_width="80dp"
            android:layout_height="match_parent"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:contentDescription="@string/general_content_desc"
            app:civ_border_color="@color/AppRed"
            app:civ_border_width="2dp" />

        <com.wang.avi.AVLoadingIndicatorView
            android:id="@+id/imgAvatarLoader4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="20dp"
            android:visibility="gone"
            app:indicatorColor="@color/White"
            app:indicatorName="BallPulseIndicator" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/layoutAvatarItem5"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_marginStart="5dp"
        android:layout_weight="1"
        android:background="@drawable/circle_drawable_color_1">

        <CircleImageView
            android:id="@+id/imgAvatarItem5"
            android:layout_width="80dp"
            android:layout_height="match_parent"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:contentDescription="@string/general_content_desc"
            app:civ_border_color="@color/AppRed"
            app:civ_border_width="2dp" />

        <com.wang.avi.AVLoadingIndicatorView
            android:id="@+id/imgAvatarLoader5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="20dp"
            android:visibility="gone"
            app:indicatorColor="@color/White"
            app:indicatorName="BallPulseIndicator" />

    </RelativeLayout>

</LinearLayout>

Circle_drawable_color_1 XML

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/BackgroundColor1" />
    <stroke
        android:width="1dp"
        android:color="@color/AppRed"/>
</shape>

如何将上面的布局创建为 LinearLayout，其中包含 5 个相对布局的水平方向，以便屏幕尺寸 grows/shrinks 时，圆圈也会 grow/shrink？

谢谢！

Answer 1

要实现响应式 UI，首先您需要摆脱硬编码值

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" <!-- make it wrap so it can grow -->
    android:baselineAligned="false"
    android:padding="10dp"
    android:weightSum="5">

    <RelativeLayout
        android:id="@+id/layoutAvatarItem1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="5dp"
        android:layout_weight="1"
        android:background="@drawable/circle_drawable_color_1">

        <CircleImageView
            android:id="@+id/imgAvatarItem1"
            android:layout_width="match_parent" 
           <!-- make it match, so it stretches to fit -->
            android:layout_height="match_parent"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:contentDescription="@string/general_content_desc"
            app:civ_border_color="@color/AppRed"
            app:civ_border_width="2dp" />

        <com.wang.avi.AVLoadingIndicatorView
            android:id="@+id/imgAvatarLoader1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="20dp"
            android:visibility="gone"
            app:indicatorColor="@color/White"
            app:indicatorName="BallPulseIndicator" />

    </RelativeLayout>
    <!-- repeat for other four circles -->
</LinearLayout>

现在 LinearLayout 将适合 width 并根据可用的屏幕宽度平均分配项目，因此 width 的圈子是根据屏幕尺寸计算的，现在您需要要做的是将圆的 height 与 Java/kotlin

中的 width 相匹配

layoutAvatarItem1.post { 
    layoutAvatarItem1.layoutParams = (layoutAvatarItem1.layoutParams as LinearLayout.LayoutParams).apply { 
        height = width
    }
}

你可以对所有其他圈子做同样的事情

Android 布局：LinearLayout 大小相等的圆圈

Android Layout : LinearLayout equal size circles

android

android-layout

android-layout-weight