RadioButton和HorizontalScrollView实现分类标签

最近一周学习一个项目，需要实现一个电影的分类查找如下图（下图是自己实现的效果~~）：

下面就用HorizontalScrollView和RadioButton来实现这个效果：

1、布局：

首先，我们放三个HorizontalScrollView，在每个HorizontalScrollView中放一个水平的RadioGroup。

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="160dp"
    android:background="@android:color/white"
    android:orientation="vertical"
    android:paddingTop="10dp">

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:scrollbars="none">

        <RadioGroup
            android:id="@+id/ll_type"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <RadioButton xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/line1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/tag_text_selector"
                android:button="@null"
                android:gravity="center"
                android:paddingBottom="5dp"
                android:paddingLeft="15dp"
                android:paddingRight="15dp"
                android:paddingTop="5dp"
                android:text="全部"
                android:textColor="@color/tag_text_selector"
                android:textSize="10sp"></RadioButton>

        </RadioGroup>

    </HorizontalScrollView>

        <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:scrollbars="none">

        <RadioGroup
            android:id="@+id/ll_area"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <RadioButton xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/line2"

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/tag_text_selector"
                android:button="@null"
                android:gravity="center"
                android:paddingBottom="5dp"
                android:paddingLeft="15dp"
                android:paddingRight="15dp"
                android:paddingTop="5dp"
                android:text="全部"
                android:textColor="@color/tag_text_selector"
                android:textSize="10sp"></RadioButton>

        </RadioGroup>

    </HorizontalScrollView>

    <HorizontalScrollView
        android:layout_width="match_parent"

        android:layout_height="40dp"
        android:scrollbars="none">

        <RadioGroup
            android:id="@+id/ll_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <RadioButton xmlns:android="http://schemas.android.com/apk/res/android"

                android:id="@+id/line3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/tag_text_selector"
                android:button="@null"
                android:gravity="center"
                android:paddingBottom="5dp"
                android:paddingLeft="15dp"
                android:paddingRight="15dp"
                android:paddingTop="5dp"

                android:text="全部"
                android:textColor="@color/tag_text_selector"
                android:textSize="10sp"></RadioButton>

        </RadioGroup>

    </HorizontalScrollView>

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:scrollbars="none">

        <RadioGroup
            android:id="@+id/ll_sort"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">


         </RadioGroup>

        </HorizontalScrollView>
    </LinearLayout>

2、 每一个标签的布局：

然后在写一个RadioButton的布局，这个布局就是标签的布局

    <RadioButton xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rb_tag"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@null"
    android:gravity="center"
    android:text="你好"
    android:paddingBottom="5dp"
    android:paddingTop="5dp"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"

    android:textSize="10sp"
    android:textColor="@color/tag_text_selector"
    android:background="@drawable/tag_text_shape"
    ></RadioButton>

tag_text_selector和tag_text_shape是按下去的颜色选择器和button的形状shape。

tag_text_selector：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#000000" android:state_checked="false"></item>
    <item android:color="#ffffff" android:state_checked="true"></item>
</selector>

tag_text_shape：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:drawable="@drawable/type_text_shape"></item>
    <item android:state_checked="true" android:drawable="@drawable/type_text_press_shape"></item>
</selector>

type_text_shape：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners android:radius="20dp"></corners>
    <solid android:color="#ffffff"></solid>
    <stroke
        android:color="#22000000"
        android:width="1dp"
        ></stroke>
</shape>

type_text_press_shape：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners android:radius="20dp"></corners>
    <solid android:color="@android:color/holo_red_dark"></solid>
    <stroke
        android:color="#22000000"
        android:width="1dp"
        ></stroke>
</shape>

3、动态添加标签

在这里注意要想设置单选效果必须给每一个RadioButton设置一个id；

    private void initSelectCndition(LinearLayout linearLayout, int i, String name) {

        View view = View.inflate(this, R.layout.item_tag, null);
        RadioButton rb = (RadioButton) view;

        rb.setText(name.trim());
        //设置id后这样才能选中设置为单选效果
        rb.setId(i);
        rb.setTag(i);
        //点击事件
        view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                RadioButton rb = (RadioButton) v;
                String text = rb.getText().toString();

                position = (int) rb.getTag();
                checkPosition(text);
               //联网更新数据
                getDataFromNet();

            }
        });
        //这里注意一定要用RadioGroup的，如果用线性的会导致参数设置无效
        RadioGroup.LayoutParams layoutParams = new RadioGroup.LayoutParams(RadioGroup.LayoutParams.WRAP_CONTENT,
                RadioGroup.LayoutParams.WRAP_CONTENT);
        //设置边距：每个标签之间的距离
        layoutParams.setMargins(DensityUtil.dip2px(this, 5), 0, DensityUtil.dip2px(this, 5), 0);

        //添加到我们的布局中
        linearLayout.addView(view, layoutParams);

就这么简单，这里效果就出来了，如果想在点击后做什么，就在点击事件中处理就OK。