ViewPager2与TabLayout的简单使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了ViewPager2与TabLayout的简单使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

ViewPager2与TabLayout的简单使用

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private ViewPager2 mViewPager;

    private TabLayout mTabLayout;

    private int[] icons = new int[]{R.drawable.icon1, R.drawable.icon2, R.drawable.icon3, R.drawable.icon4};

    private String[] iconDes = new String[]{"白", "黑", "绿", "紫"};
    private ImageView circle;

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

    private void initView() {
        mViewPager = findViewById(R.id.vp2);
        List<ShowBigIdBean> list = new ArrayList<>();
        list.add(new ShowBigIdBean(R.drawable.img1, R.drawable.icon1, "白"));
        list.add(new ShowBigIdBean(R.drawable.img2, R.drawable.icon2, "黑"));
        list.add(new ShowBigIdBean(R.drawable.img3, R.drawable.icon3, "绿"));
        list.add(new ShowBigIdBean(R.drawable.img4, R.drawable.icon4, "紫"));
        ViewPagerAdapter adapter = new ViewPagerAdapter(this, list);
        mViewPager.setAdapter(adapter);
        initTabLayout();
    }

    private void initTabLayout() {
        mTabLayout = findViewById(R.id.tab_layout);
        mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                tab.setIcon(R.drawable.icon2);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
        TabLayoutMediator mediator = new TabLayoutMediator(mTabLayout, mViewPager, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                tab.setCustomView(getViewAtI(position));
            }
        });
        mediator.attach();
    }

    private View getViewAtI(int position) {
        View view = getLayoutInflater().inflate(R.layout.item_icon_layout, null, false);
        ImageView imageView = view.findViewById(R.id.icon);
        TextView textView = view.findViewById(R.id.icon_des);
        imageView.setImageResource(icons[position]);
        textView.setText(iconDes[position]);
        return view;
    }
}

activity_main.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">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/vp2"
        android:layout_width="250dp"
        android:layout_height="450dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="100dp"
        app:tabRippleColor="#00000000"
        app:tabIndicatorColor="#00000000" />

</RelativeLayout>

ViewPagerAdapter.java

public class ViewPagerAdapter extends RecyclerView.Adapter<ViewPagerAdapter.MyViewHolder> {

    private Context mContext;

    private List<ShowBigIdBean> mList;

    public ViewPagerAdapter(Context context, List<ShowBigIdBean> list) {
        mContext = context;
        mList = list;
    }

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

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        holder.imageView.setImageResource(mList.get(position).getBigPicture());
    }

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

    class MyViewHolder extends RecyclerView.ViewHolder {
        private ImageView imageView;

        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.img);
        }
    }
}

ShowBigIdBean.java

public class ShowBigIdBean {

    public ShowBigIdBean(int bigPicture, int icon, String iconTitle) {
        this.bigPicture = bigPicture;
        this.icon = icon;
        this.iconTitle = iconTitle;
    }

    private int bigPicture;

    private int icon;

    private String iconTitle;

    public int getBigPicture() {
        return bigPicture;
    }

    public void setBigPicture(int bigPicture) {
        this.bigPicture = bigPicture;
    }

    public int getIcon() {
        return icon;
    }

    public void setIcon(int icon) {
        this.icon = icon;
    }

    public String getIconTitle() {
        return iconTitle;
    }

    public void setIconTitle(String iconTitle) {
        this.iconTitle = iconTitle;
    }
}

item_img.xml

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

    <ImageView
        android:id="@+id/img"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

item_icon_layout.xml

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

    <ImageView
        android:id="@+id/icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp" />

    <ImageView
        android:id="@+id/circle"
        android:visibility="gone"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:background="@drawable/item_circle_shape" />

    <TextView
        android:id="@+id/icon_des"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/icon"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:textColor="@color/black"
        android:textSize="15sp"
        tool:text="白" />

</RelativeLayout>

item_circle_shape.xml

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

    <corners android:radius="250dp" />
    <solid android:color="#00000000" />
    <stroke android:color="#CD7F32" android:width="1dp"/>
</shape>