前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【原创】带下划线单选菜单栏-标签Tab

【原创】带下划线单选菜单栏-标签Tab

作者头像
圆号本昊
发布2021-09-24 11:57:09
4990
发布2021-09-24 11:57:09
举报
文章被收录于专栏:github@hornhuang

【本文原创,转载请注明出处】

实际效果:

实现思路:

结合 RecyclerView 实现,横向可拖动 Tab 导航栏。

使用方法:

第一步:一些成员变量:

代码语言:javascript
复制
    private RecyclerView mHorizontalSpeciesRecycler;
    private TextView tv[] = new TextView[10];//用于记录选择了哪个种类商品 灰色变红色
    private int i = 0;
    private String index = "name0";//用于标记tv

第二步:创建 RecyclerView :

代码语言:javascript
复制
public void setmHorizontalSpeciesListView() {
    List data = initHorizontalSpeciesData();
    mHorizontalSpeciesRecycler = (RecyclerView) goodsView.findViewById(R.id.main_goods_page_horizontal_species_list);
    RecyclerView.LayoutManager manager = new LinearLayoutManager(getActivity());
    ((LinearLayoutManager) manager).setOrientation(LinearLayoutManager.HORIZONTAL);
    mHorizontalSpeciesRecycler.setLayoutManager(manager);
    mHorizontalSpeciesRecycler.setAdapter(new HorizontalSpeciesListAdapter(data));
}

第三步:为 RecyclerView 配置 Adapter :

代码语言:javascript
复制
class HorizontalSpeciesListAdapter extends RecyclerView.Adapter{
    //② 创建ViewHolder
    class VH extends RecyclerView.ViewHolder{
        private final TextView name,selectedBar;
        public VH(View v) {
            super(v);
            v.getLayoutParams().width = getActivity().getWindowManager().getDefaultDisplay().getWidth() / 4 + 30;
            v.getLayoutParams().height = v.getLayoutParams().width / 2 ;
            name = (TextView) v.findViewById(R.id.main_goods_species_name);
            tv[i++] = selectedBar = (TextView) v.findViewById(R.id.main_goods_selected_bar);
        }
    }

    private List mDatas;
    public HorizontalSpeciesListAdapter(List data) {
        this.mDatas = data;
    }

    //③ 在Adapter中实现3个方法
    @Override
    public void onBindViewHolder(final HorizontalSpeciesListAdapter.VH holder, int position) {
        holder.name.setText(mDatas.get(position).getSpeciseName());
        if (mDatas.get(position).getSpeciseName().equals(index)){
            holder.selectedBar.setBackgroundColor(Color.RED);
        }else {
            holder.selectedBar.setBackgroundColor(Color.GRAY);
        }
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //item 点击事件
                try {
                    for (TextView j:tv){
                        j.setBackgroundColor(Color.GRAY);
                    }
                }catch (Exception e){

                }
                holder.selectedBar.setBackgroundColor(Color.RED);
                index = holder.name.getText().toString();
                Toast.makeText(getActivity(),"click",Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public int getItemCount() {
        return mDatas.size();
    }

    @Override
    public HorizontalSpeciesListAdapter.VH onCreateViewHolder(ViewGroup parent, int viewType) {
        //LayoutInflater.from指定写法
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.main_goods_horizontal_species_list, parent, false);
        return new HorizontalSpeciesListAdapter.VH(v);
    }
}

第四步:为 RecyclerView 添加测试信息:

代码语言:javascript
复制
private List initHorizontalSpeciesData(){
    List mainHorizontalList = new ArrayList<>();
    for (int i = 0 ; i < 10 ; i++){
        mainHorizontalList.add(new GoodsSpecies("name" + i));
    }
    return mainHorizontalList;
}

【因为是在写项目中用到的,所以如果哪里有疑问,请在评论区留言。】

如果本文对您有用欢迎关注我获得更多信息

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/01/20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 实际效果:
  • 实现思路:
  • 使用方法:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档