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

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

特点：

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

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

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

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

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

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

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

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

 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

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

对应的选择器：tvbg_mvfind_sector.xml

对应的两个shape：hscroll_shape_unchecked.xml

hscroll_shape_checked.xml

好了这样第一个就做好了

效果如下图：

下面开始做第二、三个：

布局上：我们只要再复制两个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);

完成~

再看下最终效果：