使用 HorizontalScrollerView 完成 水平可滑动的分类栏效果

在分类中我们时常要用到这种效果

特点：

1.每行第一个和后面的不一样，第一个没有边框

2.除了每行第一个，其他的都可以点击，且有颜色的变换

3.每一行都可以单独的水平滑动

4.有多行，每行相互独立

其实它的实现很简单，下面让我们开始：

还是那句话，不要想一口气吃成一个大胖子，我们先来完成一个~

第一步：布局里写一个HorizontalScrollView，里面包含一个水平的线性布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.example.horizontalscrollerview.MainActivity">    <TextView        android:layout_width="match_parent"        android:layout_height="50dp"        android:background="#ed3f3f"        android:gravity="center"        android:text="HorizontalScrollView的使用"        android:textColor="#ffffff"        android:textSize="18sp" />    <!--HorizontalScrollView，里面包含一个水平线性-->    <HorizontalScrollView        android:layout_width="match_parent"        android:layout_height="50dp"        android:layout_gravity="center_vertical"        android:background="#ffffff"        android:scrollbars="none">        <!--水平线性布局-->        <LinearLayout            android:id="@+id/hscrollerview"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:layout_marginTop="5dp"            android:orientation="horizontal"></LinearLayout>    </HorizontalScrollView></LinearLayout>

第二步：实例化它的直接子孩子--线性布局

 LinearLayout hscrollerview= (LinearLayout)findViewById(R.id.hscrollerview); 

第三步：准备数据--> 这里我们以String数组的形式直接提供

               (实际开发中一般都会从网络来获取数据)

private String[] titles1 = {"类型", "爱情", "喜剧", "动画", "剧情", "恐怖", "惊悚", "科幻", "动作", "悬疑", "冒险", "战争", "奇幻", "运动", "家庭", "古装", "武侠", "西部", "历史", "传记", "情色", "歌舞", "短片", "纪录片", "其他"};private String[] titles2 = {"地区", "大陆", "美国", "韩国", "日本", "中国", "中国香港", "中国台湾", "泰国", "印度", "法国", "英国", "澳大利亚", "其他"};private String[] titles3 = {"年代", "2017以后", "2017", "2016", "2015", "2014", "2013", "2012", "2011", "90年代", "80年代", "70年代", "其他"};

第四步：设置数据

setData(hscrollerview);

private void setData(LinearLayout hscrollerview) {        //① 创建item布局，并添加到水平线性布局中        //由于第一个和其他的item不一样所以我们分别添加，相应的为其添加两种不同的item布局        //第一种item布局不要加边框背景        //第二种item布局要加边框背景                // ② 先添加第一个数据        view0 = View.inflate(mContext, R.layout.item_hscollerview0, null);        tv0 = (TextView) view0.findViewById(R.id.tv0);        tv0.setText(titles1[0]);        //添加进去        hscrollerview.addView(view0);        // ③ 再循环添加后面的数据        for (int i = 1; i < titles1.length; i++)        {            View view = View.inflate(mContext,R.layout.item_hscollerview1, null);            TextView tv1 = (TextView) view.findViewById(R.id.tv1);            //创建好TextView后就立马给它设置点击事件的监听            setListener(tv1);            tv1.setText(titles1[i]);                        //添加进去            hscrollerview.addView(view);        }    }

private void setListener(final TextView tv1) {        tv1.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                Toast.makeText(mContext, tv1.getText(), Toast.LENGTH_SHORT).show();            }        });    }

对应的第一种item的布局（背景没有边框）：item_hscollerview0.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="#ffffff"    android:orientation="horizontal">    <TextView        android:id="@+id/tv0"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="5dp"        android:layout_marginRight="5dp"        android:layout_marginTop="2dp"        android:gravity="center_vertical"        android:text="类型"        android:textColor="#99000000"        android:textSize="16sp" /></LinearLayout>

对应的第一种item的布局（背景添加了边框）：item_hscollerview1.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="#ffffff"    android:orientation="horizontal">    <TextView        android:id="@+id/tv1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="5dp"        android:layout_marginRight="5dp"        android:background="@drawable/tvbg_mvfind_sector"        android:clickable="true"        android:text="爱情"        android:textColor="#000000"        android:textSize="15sp" /></LinearLayout>

对应的选择器：tvbg_mvfind_sector.xml

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

对应的两个shape：hscroll_shape_unchecked.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <solid android:color="#fff" />    <corners android:radius="35dp" />    <stroke        android:width="1dp"        android:color="#33000000"        android:dashWidth="1dp" />    <padding        android:bottom="3dp"        android:left="18dp"        android:right="18dp"        android:top="3dp" /></shape>

hscroll_shape_checked.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <solid android:color="#ed3f3f" />    <corners android:radius="35dp" />    <stroke        android:width="1dp"        android:color="#11000000"        android:dashWidth="1dp" />    <padding        android:bottom="3dp"        android:left="18dp"        android:right="18dp"        android:top="3dp" /></shape>

好了这样第一个就做好了

效果如下图：

下面开始做第二、三个：

布局上：我们只要再复制两个HorizontalScrollerView,改下id

代码上：同样的初始化

 LinearLayout hscrollerview1 = (LinearLayout) findViewById(R.id.hscrollerview1); LinearLayout hscrollerview2 = (LinearLayout) findViewById(R.id.hscrollerview2); LinearLayout hscrollerview3 = (LinearLayout) findViewById(R.id.hscrollerview3);

然后我们把setData()方法多添加一个参数，抽取为一个公共的方法：

private void setData(LinearLayout hscrollerview, String[] titles) {        view0 = View.inflate(mContext, R.layout.item_hscollerview0, null);        tv0 = (TextView) view0.findViewById(R.id.tv0);        tv0.setText(titles[0]);        hscrollerview.addView(view0);        for (int i = 1; i < titles.length; i++) {            View view = View.inflate(mContext, R.layout.item_hscollerview1, null);            TextView tv1 = (TextView) view.findViewById(R.id.tv1);            setListener(tv1);            tv1.setText(titles[i]);            hscrollerview.addView(view);        }    }

最后调用方法：

setData(hscrollerview1, titles1);setData(hscrollerview2, titles2);setData(hscrollerview3, titles3);

完成~

再看下最终效果：