文章目錄

• 1 ViewPager2簡介
• • 1.1 ViewPager2應用場合
  • 1.2 ViewPager2應用背景
• 2 應用案例
• • 2.1 圖片輪播
  • 2.2 導航

1 ViewPager2簡介

1.1 ViewPager2應用場合

ViewPager2的應用場景：

引導界面、相冊多圖片預覽

多Tab頁面、 App導航

廣告播放展示

1.2 ViewPager2應用背景

ViewPager2的應用背景：

androidx.viewpager2:viewpager2

Names: V4 V7 Androidx etc.

Android Support Libraries（需要手動加入庫）

---

2 應用案例

2.1 圖片輪播

先看看下使用步驟：

添加依賴

xml布局中引用viewpager

聲明數組，將圖片存入

創建適配器，完成資源配置

為viewpager設置適配器

添加的依賴如下：

要實現的效果如下：

我們首先看下主頁面的xml文件：

<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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/pagers"android:layout_width="match_parent"android:layout_height="180dp"android:orientation="horizontal"app:layout_constraintTop_toTopOf="parent"></androidx.viewpager2.widget.ViewPager2><LinearLayoutandroid:id="@+id/dots"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:gravity="center_horizontal"app:layout_constraintTop_toTopOf="parent"android:layout_marginTop="160dp"><ImageViewandroid:layout_width="10dp"android:layout_height="10dp"android:background="@drawable/dot_selected"/><ImageViewandroid:layout_width="10dp"android:layout_height="10dp"android:background="@drawable/dot_unselected"/><ImageViewandroid:layout_width="10dp"android:layout_height="10dp"android:background="@drawable/dot_unselected"/><ImageViewandroid:layout_width="10dp"android:layout_height="10dp"android:background="@drawable/dot_unselected"/></LinearLayout></androidx.constraintlayout.widget.ConstraintLayout>

其中用到了給ImageView設置背景的drawable文件，內容如下：

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><solid android:color="#cccccc"/></shape> <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><solid android:color="#777777" /></shape>

然后看下Java文件：

package com.example.viewpagerdemo;import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import androidx.recyclerview.widget.RecyclerView; import androidx.viewpager2.widget.ViewPager2;import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.LinearLayout;import java.util.ArrayList; import java.util.List;public class MainActivity extends AppCompatActivity {List<Integer> pics = new ArrayList<>();LinearLayout dots;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);pics.add(R.mipmap.bg1);pics.add(R.mipmap.bg2);pics.add(R.mipmap.bg3);pics.add(R.mipmap.bg4);//實例化適配器(RecyclerView.Adapter)RecyclerView.Adapter adapter = new RecyclerView.Adapter() {//創建@NonNull@Overridepublic RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {//此時用的布局是ViewPager每一頁中用來盛放圖片的布局//該布局不設置任何控件，因為待會我們會直接將圖片作為跟布局的背景//R.layout.item就是一個簡單的線性布局，不設置任何控件View v = LayoutInflater.from(MainActivity.this).inflate(R.layout.item,parent,false);return new ViewHolder(v);}//綁定(為ViewHolder里面的控件設置顯示內容)@Overridepublic void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {ViewHolder h = (ViewHolder) holder;h.container.setBackgroundResource(pics.get(position));}//數量@Overridepublic int getItemCount() {return pics.size();}};//找到ViewPager，設置適配器ViewPager2 pagers = findViewById(R.id.pagers);pagers.setAdapter(adapter);dots = findViewById(R.id.dots);pagers.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {@Overridepublic void onPageSelected(int position) {super.onPageSelected(position);for(int i = 0 ;i < dots.getChildCount() ; i++){//通過循環先將所有的點設為未被選中狀態((ImageView)dots.getChildAt(i)).setBackgroundResource(R.drawable.dot_unselected);}//設置當前位置對應的點為選中狀態((ImageView)dots.getChildAt(position)).setBackgroundResource(R.drawable.dot_selected);}});}public class ViewHolder extends RecyclerView.ViewHolder{public LinearLayout container;public ViewHolder(@NonNull View itemView) {super(itemView);container = itemView.findViewById(R.id.container);}} }

2.2 導航

首先看下需要實現的界面：

需要使用到TabLayout+ViewPager，步驟如下：

添加依賴。

在.xml中分別加入TabLayout和ViewPager。

在.Java中分別指定布局和ViewPager的引用。

通過事件關聯TabLayout和ViewPager（需要使用到FragmentStateAdapter適配器）。

依賴添加如下：

apply plugin: 'com.android.application'android {compileSdkVersion 30buildToolsVersion "30.0.3"defaultConfig {applicationId "com.example.viewpagertest_20210707"minSdkVersion 15targetSdkVersion 30versionCode 1versionName "1.0"testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"}buildTypes {release {minifyEnabled falseproguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'}} }dependencies {implementation fileTree(dir: 'libs', include: ['*.jar'])implementation 'androidx.appcompat:appcompat:1.0.2'implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha02'implementation 'androidx.constraintlayout:constraintlayout:1.1.3'implementation 'com.androidkun:XTabLayout:1.1.4'implementation 'androidx.legacy:legacy-support-v4:1.0.0'testImplementation 'junit:junit:4.12'androidTestImplementation 'androidx.test.ext:junit:1.1.0'androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1' }

首先看下主頁Activity的xml：

<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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"xmlns:app="http://schemas.android.com/apk/res-auto"tools:context=".TabActivity"android:orientation="vertical"><com.androidkun.xtablayout.XTabLayoutandroid:id="@+id/tab"android:layout_width="match_parent"android:layout_height="wrap_content"app:xTabTextColor="#ccc"app:xTabTextSize="15sp"app:xTabSelectedTextColor="#ff0000"app:xTabSelectedTextSize="20sp"></com.androidkun.xtablayout.XTabLayout><androidx.viewpager2.widget.ViewPager2android:id="@+id/pagers"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"></androidx.viewpager2.widget.ViewPager2> </LinearLayout>

Fragment就是指設置了背景圖片而已，這里就不貼代碼了，沒有意義。

下面看一下界面的java代碼：

package com.example.viewpagerdemo;import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import androidx.fragment.app.Fragment; import androidx.viewpager2.adapter.FragmentStateAdapter; import androidx.viewpager2.widget.ViewPager2;import android.os.Bundle; import android.widget.Toast;import com.androidkun.xtablayout.XTabLayout;import java.util.ArrayList; import java.util.List;public class TabActivity extends AppCompatActivity {//XTabLayoutXTabLayout tab;ViewPager2 pagers;List<Fragment> list = new ArrayList<>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_tab);//XTabLayout的操作//1.找到XTablayouttab = findViewById(R.id.tab);//2.動態添加內容(財經，軍事，科技，視頻，體育)//a.實例化導航塊XTabLayout.Tab t1 = tab.newTab();//b.設置名字t1.setText("財經");//c.添加tab.addTab(t1);tab.addTab(tab.newTab().setText("軍事"));tab.addTab(tab.newTab().setText("科技"));tab.addTab(tab.newTab().setText("視頻"));tab.addTab(tab.newTab().setText("體育"));//3.設置切換效果tab.setOnTabSelectedListener(new XTabLayout.OnTabSelectedListener() {@Overridepublic void onTabSelected(XTabLayout.Tab tab) {//獲取當前導航卡的位置及文本int position = tab.getPosition(); // String text = tab.getText().toString(); // Toast.makeText(TabActivity.this,position+"--"+text,Toast.LENGTH_SHORT).show();pagers.setCurrentItem(position);}@Overridepublic void onTabUnselected(XTabLayout.Tab tab) {}@Overridepublic void onTabReselected(XTabLayout.Tab tab) {}});pagers = findViewById(R.id.pagers);//添加Fragmentlist.add(new Fragment1());list.add(new Fragment2());list.add(new Fragment3());list.add(new Fragment4());list.add(new Fragment5());pagers.setAdapter(new FragmentStateAdapter(getSupportFragmentManager()) {@NonNull@Overridepublic Fragment getItem(int position) {return list.get(position);}@Overridepublic int getItemCount() {return list.size();}});pagers.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {@Overridepublic void onPageSelected(int position) {super.onPageSelected(position);tab.getTabAt(position).select(); //設置指定位置上的導航塊被選中}});} }

總結

以上是生活随笔為你收集整理的Android中的ViewPager2的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。