ViewPager2與TabLayout的簡單使用

1. 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;@Overrideprotected 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() {@Overridepublic void onTabSelected(TabLayout.Tab tab) {tab.setIcon(R.drawable.icon2);}@Overridepublic void onTabUnselected(TabLayout.Tab tab) {}@Overridepublic void onTabReselected(TabLayout.Tab tab) {}});TabLayoutMediator mediator = new TabLayoutMediator(mTabLayout, mViewPager, new TabLayoutMediator.TabConfigurationStrategy() {@Overridepublic 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;}
}

2. 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.ViewPager2android:id="@+id/vp2"android:layout_width="250dp"android:layout_height="450dp"android:layout_centerHorizontal="true"android:layout_marginTop="50dp" /><com.google.android.material.tabs.TabLayoutandroid: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>

3. 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@Overridepublic MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {View view = LayoutInflater.from(mContext).inflate(R.layout.item_img, parent, false);return new MyViewHolder(view);}@Overridepublic void onBindViewHolder(@NonNull MyViewHolder holder, int position) {holder.imageView.setImageResource(mList.get(position).getBigPicture());}@Overridepublic 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);}}
}

4. 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;}
}

5. 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"><ImageViewandroid:id="@+id/img"android:layout_width="match_parent"android:layout_height="match_parent" /></RelativeLayout>

6. 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"><ImageViewandroid:id="@+id/icon"android:layout_width="40dp"android:layout_height="40dp"android:layout_centerHorizontal="true"android:layout_marginTop="20dp" /><ImageViewandroid: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" /><TextViewandroid: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>

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