使用RecyclerView自定义实现二级联动列表

一、需求分析

单各list列表实现很简单直接使用RecyclerView填充列表即可,那么多级列表该怎样实现呢,同样很简单,只需监听第一级列表的item点击事件再填充第二级列表即可实现。

二、代码实现

1、创建布局文件

由两个RecyclerView填充布局,左右分布

<?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="match_parent"
    android:orientation="horizontal">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_recyclerview_one"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:padding="10dp">

    </android.support.v7.widget.RecyclerView>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_recyclerview_two"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:padding="10dp"
        >

    </android.support.v7.widget.RecyclerView>
</LinearLayout>
2、主Activity代码

由于注释写的很清楚,直接贴代码给大家看了

/**
 * 多列list
 * @author petergee
 * @date 2018/7/26
 */
public class MultiColumnListActivity extends Activity {

    private List<String> list;
    private List<String> list2;
    private List<String> list3;
    private List<String> list4;
    private FirstLineAdapter firstLineAdapter,secondLineAdapter;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_multi_column);
        initData();
        initView();
    }

    private void initData() {
        list = new ArrayList<>();
        list.add("于谦");
        list.add("郭德纲");
        list.add("小岳岳");


        list2 = new ArrayList<>();
        list2.add("抽烟");
        list2.add("喝酒");
        list2.add("烫头");


        list3 = new ArrayList<>();
        list3.add("主持");
        list3.add("说相声");
        list3.add("拍电影");


        list4 = new ArrayList<>();
        list4.add("拍电影");
        list4.add("唱歌");
        list4.add("说相声");
        list4.add("做采访");


    }

    private void initView() {
        RecyclerView recyclerView=findViewById(R.id.rv_recyclerview_one);
        final RecyclerView recyclerViewTwo=findViewById(R.id.rv_recyclerview_two);
        // layoutManager
        LinearLayoutManager layoutManager=new LinearLayoutManager(this);
        layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        // set layoutManager
        recyclerView.setLayoutManager(layoutManager);
        recyclerViewTwo.setLayoutManager(new LinearLayoutManager(this));
        // item Decoration
        DividerItemDecoration dividerItemDecoration=new DividerItemDecoration(this,DividerItemDecoration.VERTICAL);
        dividerItemDecoration.setDrawable(getResources().getDrawable(R.drawable.divider_line));
        recyclerView.addItemDecoration(dividerItemDecoration);
        recyclerViewTwo.addItemDecoration(dividerItemDecoration);
        // item Animator
        recyclerView.setItemAnimator(new DefaultItemAnimator());
        recyclerViewTwo.setItemAnimator(new DefaultItemAnimator());
        // adapter
        firstLineAdapter = new FirstLineAdapter(this,list);
        secondLineAdapter = new FirstLineAdapter(this,list2);
        recyclerView.setAdapter(firstLineAdapter);
        // childAdapter
        recyclerViewTwo.setAdapter(secondLineAdapter);
        // add listener
        firstLineAdapter.setRecyclerItemClickListener(new RecyclerItemClickListener() {
            @Override
            public void onItemClickListener(int position) {
                if (position==0){
                    secondLineAdapter=new FirstLineAdapter(getApplicationContext(),list2);
                    recyclerViewTwo.setAdapter(secondLineAdapter);
                }

                if (position==1){
                    secondLineAdapter=new FirstLineAdapter(getApplicationContext(),list3);
                    recyclerViewTwo.setAdapter(secondLineAdapter);
                }

                if (position==2){
                    secondLineAdapter=new FirstLineAdapter(getApplicationContext(),list4);
                    recyclerViewTwo.setAdapter(secondLineAdapter);
                }
            }

            @Override
            public void onItemLongClickListener(int position) {
                Toast.makeText(getApplicationContext(),"LongClicked "+list.get(position),Toast.LENGTH_SHORT).show();
            }
        });

    }
}
3、Adapter实现

由于需要使用ietm的点击事件,添加了接口,进行回调实现

/**
 * @author petergee
 * @date 2018/7/27
 */
public class FirstLineAdapter extends RecyclerView.Adapter<viewHolder> {
    private Context mContext;
    private List<String> mList;
    public RecyclerItemClickListener recyclerItemClickListener;

    public FirstLineAdapter(Context context, List<String> list) {
        this.mContext = context;
        this.mList = list;
    }

    @NonNull
    @Override
    public viewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(mContext).inflate(R.layout.item_multi_column_list,parent,false);
        return new viewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull viewHolder holder, final int position) {
        String str=mList.get(position);
        holder.tvTextFirstLine.setText(str);

        //item listener
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (recyclerItemClickListener==null){
                    return;
                }
                recyclerItemClickListener.onItemClickListener(position);
            }
        });

        // item LongClickListener
        holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                if (recyclerItemClickListener!=null)
                recyclerItemClickListener.onItemLongClickListener(position);
                return false;
            }
        });
    }

    @Override
    public int getItemCount() {
        return mList.size()==0?0:mList.size();
    }


    public void setRecyclerItemClickListener(RecyclerItemClickListener recyclerItemClickListener) {
        this.recyclerItemClickListener = recyclerItemClickListener;
    }
}

class viewHolder extends RecyclerView.ViewHolder {
    TextView tvTextFirstLine;
    public viewHolder(View itemView) {
        super(itemView);
        tvTextFirstLine=itemView.findViewById(R.id.item_text);
    }
}
4、接口

添加了条目点击和长按事件监听回调方法

public interface RecyclerItemClickListener{
    void onItemClickListener(int position);
    void onItemLongClickListener(int position);
}
5、Adapter中item布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
<TextView
    android:id="@+id/item_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="16sp"
    android:textColor="@color/color_black"
    android:layout_centerHorizontal="true"
    android:layout_margin="5dp"
    />
</RelativeLayout>

三、效果图

这里写图片描述

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现二级联动下拉列表,可以通过以下步骤进行: 1. 在HTML中,创建两个下拉列表,一个作为主要的下拉列表,另一个作为次要的下拉列表,例如: ``` <select id="mainList"> <option value="">请选择</option> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> <select id="subList" disabled> <option value="">请选择</option> </select> ``` 2. 使用JavaScript编写代码,以根据主下拉列表的选择更新次下拉列表。例如: ``` var mainList = document.getElementById("mainList"); var subList = document.getElementById("subList"); mainList.addEventListener("change", function() { var selectedValue = mainList.value; // 清空次下拉列表 subList.innerHTML = '<option value="">请选择</option>'; if (selectedValue === "1") { // 如果选择了选项1,则更新次下拉列表的选项 subList.innerHTML += '<option value="11">选项1-1</option>'; subList.innerHTML += '<option value="12">选项1-2</option>'; } else if (selectedValue === "2") { // 如果选择了选项2,则更新次下拉列表的选项 subList.innerHTML += '<option value="21">选项2-1</option>'; subList.innerHTML += '<option value="22">选项2-2</option>'; } else if (selectedValue === "3") { // 如果选择了选项3,则更新次下拉列表的选项 subList.innerHTML += '<option value="31">选项3-1</option>'; subList.innerHTML += '<option value="32">选项3-2</option>'; } // 启用或禁用次下拉列表 if (selectedValue) { subList.disabled = false; } else { subList.disabled = true; } }); ``` 3. 上述代码将监听主下拉列表的“change”事件,并在选择更改时更新次下拉列表的选项。此外,代码还会启用或禁用次下拉列表,以防止用户在未选择主列表时进行选择。 希望这能帮助到你实现二级联动下拉列表

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值