如何设计可水平滚动的自定义视图

Question

如何设计这种视图，它应该是水平滚动的，并且也在那个周栏的范围内

Answer 1

如果您将LinearLayout 用作match_parent，则不要获取布局宽度。使用wrap_content。如果它不起作用，请为您的图像设置固定大小。

<HorizontalScrollView android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="15dp"
    android:layout_marginBottom="2dp"
    android:fillViewport="true"
    android:orientation="horizontal"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout
        android:id="@+id/lyt_items"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/iv_icon1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:contentDescription="@string/app_name"
            android:layout_marginRight="1dp"
            android:src="@mipmap/ic_launcher" />
        <ImageView
            android:id="@+id/iv_icon2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:contentDescription="@string/app_name"
            android:layout_marginRight="1dp"
            android:src="@mipmap/ic_launcher" />
        <ImageView
            android:id="@+id/iv_icon3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:contentDescription="@string/app_name"
            android:layout_marginRight="1dp"
            android:src="@mipmap/ic_launcher" />
    </LinearLayout>
</HorizontalScrollView>

更新： 如果您想动态生成此视图，请按照以下步骤操作

1) 将此布局放在您想要查看此滚动条的位置 功能

<LinearLayout
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1">

                <HorizontalScrollView
                    android:id="@+id/horizontal_scrollview"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginBottom="2dp"
                    android:layout_marginTop="2dp"
                    android:scrollbars="none">

                    <LinearLayout
                        android:id="@+id/image_layout"
                        android:layout_width="72dp"
                        android:layout_height="match_parent"
                        android:gravity="center"
                        android:orientation="horizontal" />
                </HorizontalScrollView>

            </LinearLayout>

2) 制作想要在滚动条中显示的自定义布局

<?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="72dp"
    android:layout_height="70dp"
    android:background="@drawable/circle_selector"
    android:gravity="center"
    android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/image_alert_icon_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="3dp"
        android:layout_marginRight="3dp"
        android:background="@drawable/circle_selector">

        <ImageView
            android:id="@+id/imageView_device"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_fences" />

    </RelativeLayout>

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxLength="10"
        android:text="name"
        android:textColor="@color/white"
        android:textSize="12sp" />
</LinearLayout>

3) 使用此 java 代码在运行时生成视图

private void addImagetoLayout( {
        imageLayout.removeAllViews();

        for (int i = 0; i < list.size(); i++) {
            View view = getLayoutInflater().inflate(R.layout.image_layout, null);
            RelativeLayout imageAlertLayout = (RelativeLayout) view.findViewById(R.id.image_alert_icon_layout);
            ImageView imageView = (ImageView) imageAlertLayout.findViewById(R.id.imageView_device);
            TextView name = (TextView) view.findViewById(R.id.name);
            // set image in imageView
       // set text in text View
            imageLayout.addView(view);

        }

    }