用RecyclerView实现关注设置效果详解

最新推荐文章于 2019-02-26 11:03:08 发布

原创最新推荐文章于 2019-02-26 11:03:08 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用RecyclerView结合TabLayout和ViewPager实现类似兴趣关注的效果。通过多布局方式展示不同年级班级的内容，并利用Fragment显示具体信息。文章提供了完整的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在各种app中经常有兴趣爱好关注的效果，先贴张图看看效果：

咱一看到图就想到了强大的RecyclerView

1.用RecyclerView的多布局实现如图效果：就得根据position判断条目加载不同的布局，这有点麻烦

2在RecyclerView的单布局在Item中就将布局都不好今天就记录下这种实现方法

详细代码如下：

1.MainActivity中

public class MainActivity extends AppCompatActivity {
    private RecyclerView recy;

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

    private void initView() {
        recy = (RecyclerView) findViewById(R.id.recy);
        recy.setLayoutManager(new LinearLayoutManager(this));
        FragmentManager supportFragmentManager = getSupportFragmentManager();
        List<String> nia = new ArrayList<>();//添加数据
        nia.add("初一");
        nia.add("初二");
        nia.add("n年纪");
        MyAdapter adapter = new MyAdapter(nia, this, supportFragmentManager);
        recy.setAdapter(adapter);
    }
}

MainActivity.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recy"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
</RelativeLayout>

2.MainActivity的适配器 MyAdapter

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.Holder> {

    private List<String> list;
    private Context context;
    FragmentManager supportFragmentManager;


    public MyAdapter(List<String> list, Context context, FragmentManager supportFragmentManager) {
        this.list = list;
        this.context = context;
        this.supportFragmentManager = supportFragmentManager;
    }

    @NonNull
    @Override
    public Holder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        return new Holder(LayoutInflater.from(context).inflate(R.layout.item, null));
    }

    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN_MR1)
    @Override
    public void onBindViewHolder(@NonNull Holder holder, int position) {

        holder.niaji.setText(list.get(position));


        List<Fragment> fragments=new ArrayList<>();
        fragments.add(new ONeFragment());
        fragments.add(new ONeFragment());
        fragments.add(new ONeFragment());
        fragments.add(new ONeFragment());

        List<String> title=new ArrayList<>();
        title.add("1班");
        title.add("2班");
        title.add("3班");
        title.add("4班");


        holder.viewpager.setId(View.generateViewId());//获取动态id
     //   holder.viewpager.setId(position+1);//获取id


        holder.tab.setupWithViewPager(holder.viewpager);
        holder.viewpager.setAdapter(new VpAdapter(supportFragmentManager,fragments,title));



    }

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

    class Holder extends RecyclerView.ViewHolder {
        public TextView niaji;
        public TabLayout tab;
        public ViewPager viewpager;

        public Holder(View itemView) {
            super(itemView);
            niaji = (TextView) itemView.findViewById(R.id.niaji);
            tab = (TabLayout) itemView.findViewById(R.id.tab);
            viewpager = (ViewPager) itemView.findViewById(R.id.viewpager);
        }
    }


}

适配器 MyAdapter的xml布局

<?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="match_parent">

    <TextView
        android:layout_marginTop="5dp"
        android:id="@+id/niaji"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="初一"></TextView>

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tab"
        android:layout_toRightOf="@+id/niaji"
        ></android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:layout_marginLeft="40dp"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:id="@+id/viewpager"
        android:layout_below="@+id/tab"
        ></android.support.v4.view.ViewPager>
</RelativeLayout>

3.OneFragment

public class ONeFragment extends Fragment {
    // TODO: Rename parameter arguments, choose names that match
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    // TODO: Rename and change types of parameters
    private String mParam1;
    private String mParam2;

    private RecyclerView fragment_recy;

    public ONeFragment() {
        // Required empty public constructor
    }

    /**
     * Use this factory method to create a new instance of
     * this fragment using the provided parameters.
     *
     * @param param1 Parameter 1.
     * @param param2 Parameter 2.
     * @return A new instance of fragment ONeFragment.
     */
    // TODO: Rename and change types and number of parameters
    public static ONeFragment newInstance(String param1, String param2) {
        ONeFragment fragment = new ONeFragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        args.putString(ARG_PARAM2, param2);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
            mParam2 = getArguments().getString(ARG_PARAM2);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View inflate = inflater.inflate(R.layout.fragment_one, container, false);
        initView(inflate);
        initData();
        return inflate;
    }

    private void initData() {
        final List<Bean> list = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            list.add(new Bean("天王盖地虎，小鸡炖蘑菇" + i));
        }
        final MyAdapter1 adapter1 = new MyAdapter1(list);
        fragment_recy.setAdapter(adapter1);
        adapter1.setOnItemClickListener(new BaseQuickAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(BaseQuickAdapter adapter, View view, int position) {
                Bean bean = list.get(position);
                bean.setSelect(!bean.isSelect());
                adapter1.notifyDataSetChanged();

            }
        });

    }





    private void initView(View inflate) {
        fragment_recy = (RecyclerView) inflate.findViewById(R.id.fragment_recy);
        fragment_recy.setLayoutManager(new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL));
    }

}

onefragment的xml布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".ONeFragment">


    <android.support.v7.widget.RecyclerView
        android:id="@+id/fragment_recy"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></android.support.v7.widget.RecyclerView>
</RelativeLayout>

4.onefragment中recyclerview的适配器（此处用的万能适配器）

package com.example.chooseclassdemo;

import android.support.annotation.Nullable;
import android.widget.RelativeLayout;

import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.BaseViewHolder;

import java.util.List;

public class MyAdapter1 extends BaseQuickAdapter<Bean,BaseViewHolder> {
    public MyAdapter1( @Nullable List<Bean> data) {
        super(R.layout.item1, data);
    }
    @Override
    protected void convert(BaseViewHolder helper, Bean item) {
        helper.setText(R.id.textView,item.getName());

        RelativeLayout item_rela = helper.getView(R.id.item_rela);

        if (item.isSelect()){
            item_rela.setBackgroundResource(R.drawable.shapes2);

        }else {
            item_rela.setBackgroundResource(R.drawable.shape);
        }

    }


}

万能适配的xml布局

<?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="100dp"
    android:id="@+id/item_rela"
    android:layout_marginLeft="20dp"
    android:layout_marginTop="20dp">

    <TextView
        android:id="@+id/textView"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="@dimen/dp_10"
        android:layout_marginTop="@dimen/dp_10"
        android:text="TextView" />
</RelativeLayout>

5.接下就Bean对象

package com.example.chooseclassdemo;

public class Bean {
    private String name;

    public Bean(String name, boolean isSelect) {
        this.name = name;
        this.isSelect = false;
    }

    private boolean isSelect;

    public boolean isSelect() {
        return isSelect;
    }

    public void setSelect(boolean select) {
        isSelect = select;
    }

    public Bean() {
    }

    public Bean(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

6.Viewpager+Tablayout的适配器

public class VpAdapter extends FragmentStatePagerAdapter {
    private List<Fragment> fragments;
    private List<String> title;

    public VpAdapter(FragmentManager fm, List<Fragment> fragments, List<String> title) {
        super(fm);
        this.fragments = fragments;
        this.title = title;
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return title.get(position);
    }
}

7.选中和未选中的xml

shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners android:radius="5dp"></corners>
    <stroke
        android:width="1dp"
        android:color="#ea00ff99"></stroke>
</shape>

shapes2.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="5dp"></corners>
    <stroke android:color="#ea6dae94" android:width="2dp"></stroke>
    <solid android:color="#ea6dae94"></solid>
</shape>

就此上图效果就完成了