如何在水平布局/滚动视图中分离图像？

Question

我使用水平 ScrollView 进行了这个 UI 设计，其中包含运动图标的图像，但它们彼此靠近，我想将它们分开，以便我可以看到它们之间的 ScrollView 的背景......

我尝试将 layout_weight 添加到图像中，但不幸的是，事实并非如此。

Image how it should look and how it looks now..

这是我的 XML 代码

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TestOne"
    android:orientation="vertical">

    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#393939">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">


            <ImageView
                android:id="@+id/imgFudbal"
                android:layout_width="85dp"
                android:layout_height="85dp"
                android:background="#212222"
                android:src="@drawable/fudbal"
                android:onClick="showFudbal"
                tools:ignore="OnClick" />

            <ImageView
                android:id="@+id/imgBasketball"
                android:layout_width="85dp"
                android:layout_height="85dp"

                android:background="#212222"
                android:onClick="showBasketball"
                android:src="@drawable/basketball"
                tools:ignore="OnClick" />

            <ImageView
                android:id="@+id/imgTenis"
                android:layout_width="85dp"
                android:layout_height="85dp"
                android:background="#212222"
                android:clickable="true"
                android:onClick="showTenis"
                android:src="@drawable/tenis"
                tools:ignore="OnClick" />

            <ImageView
                android:id="@+id/imgRagbi"
                android:layout_width="85dp"
                android:layout_height="85dp"
                android:layout_weight="1"

                android:background="#212222"
                android:onClick="showRagbi"
                android:src="@drawable/ragbi"
                tools:ignore="OnClick" />

            <ImageView
                android:id="@+id/imgVaterpolo"
                android:layout_width="85dp"
                android:layout_height="85dp"
                android:layout_weight="1"

                android:background="#212222"
                android:onClick="showVaterpolo"
                android:src="@drawable/vaterpolo"
                tools:ignore="OnClick" />

          

           

        </LinearLayout>
    </HorizontalScrollView>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/testRecycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#393939" />

</LinearLayout>

Answer 1

试试这个代码：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#393939"
        android:paddingTop="10dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">


            <ImageView
                android:id="@+id/imgFudbal"
                android:layout_width="85dp"
                android:layout_height="85dp"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="10dp"
                android:background="#212222"
                android:onClick="showFudbal"
                android:src="@drawable/img_natural"
                tools:ignore="OnClick" />

            <ImageView
                android:id="@+id/imgBasketball"
                android:layout_width="85dp"
                android:layout_height="85dp"
                android:layout_marginRight="10dp"
                android:background="#212222"
                android:onClick="showBasketball"
                android:src="@drawable/img_natural"
                tools:ignore="OnClick" />

            <ImageView
                android:id="@+id/imgTenis"
                android:layout_width="85dp"
                android:layout_height="85dp"
                android:layout_marginRight="10dp"
                android:background="#212222"
                android:clickable="true"
                android:onClick="showTenis"
                android:src="@drawable/img_natural"
                tools:ignore="OnClick" />

            <ImageView
                android:id="@+id/imgRagbi"
                android:layout_width="85dp"
                android:layout_height="85dp"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:background="#212222"
                android:onClick="showRagbi"
                android:src="@drawable/img_natural"
                tools:ignore="OnClick" />

            <ImageView
                android:id="@+id/imgVaterpolo"
                android:layout_width="85dp"
                android:layout_height="85dp"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:background="#212222"
                android:onClick="showVaterpolo"
                android:src="@drawable/img_natural"
                tools:ignore="OnClick" />

        </LinearLayout>
    </HorizontalScrollView>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/testRecycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#393939" />

</LinearLayout>