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。