一、ViewPage簡介
ViewPage是一個內置滑動效果的控件，可以容納多個子頁面（Fragment或View），通過左右滑動手勢，在多個子頁面間進行切換。其具有以下特點：
- 使用簡單方便，易於實現多個頁面的滑動切換
- 使用ViewPage可以方便的實現引導頁面、輪播圖等功能
- ViewPage支持自定義頁面切換的動畫效果，可以在應用中提供更好的用戶體驗
二、ViewPage的基本使用
使用ViewPage需要藉助PagerAdapter類，PagerAdapter負責為ViewPage提供子頁面，同時也負責為子頁面設置標識，以便於ViewPage在滑動切換時進行頁面的索引和頁面緩存。下面代碼展示了如何使用ViewPage，其中提供了三個頁面，每個頁面內包含一個簡單的TextView：
// 布局文件中引用ViewPage
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
// ViewPager使用的PagerAdapter，其中getPageTitle()返回頁面的標識
class MyPagerAdapter extends PagerAdapter {
private List<View> mViews;
public MyPagerAdapter(List<View> views) {
mViews = views;
}
@Override
public int getCount() {
return mViews.size();
}
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == object;
}
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
View view = mViews.get(position);
container.addView(view);
return view;
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView(mViews.get(position));
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return "Page " + (position + 1);
}
}
// 實例化ViewPage和PagerAdapter，設置Adapter
ViewPager viewPager = findViewById(R.id.view_pager);
List<View> views = new ArrayList<>();
LayoutInflater inflater = LayoutInflater.from(this);
View view1 = inflater.inflate(R.layout.page_1, null);
View view2 = inflater.inflate(R.layout.page_2, null);
View view3 = inflater.inflate(R.layout.page_3, null);
views.add(view1);
views.add(view2);
views.add(view3);
MyPagerAdapter adapter = new MyPagerAdapter(views);
viewPager.setAdapter(adapter);
三、ViewPage的進階使用
1、實現ViewPagerIndicator
ViewPagerIndicator 可以在TabLayout的下方建立一個ViewPager的Indicator，也可以叫HeaderViewPager。其中，TabLayout 和 ViewPager 都是 Android SDK 中的原生組件。而 ViewPagerIndicator 則是一個能實現類似於 iOS 中的組件的 Android 三方庫。下面代碼展示了如何使用ViewPagerIndicator，在TabLayout下面展示當前ViewPage的位置：
// 布局文件中引用ViewPager、TabLayout和ViewPagerIndicator
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.viewpagerindicator.CirclePageIndicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingTop="10dp" />
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:tabIndicatorColor="@android:color/white"
app:tabMode="fixed"
app:tabSelectedTextColor="@android:color/white"
app:tabTextColor="#ffffff" />
// ViewPager使用的PagerAdapter
class MyPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> mFragments;
public MyPagerAdapter(FragmentManager fm, List<Fragment> fragments) {
super(fm, FragmentPagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
mFragments = fragments;
}
@Override
public int getCount() {
return mFragments.size();
}
@NonNull
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
}
// 實例化ViewPager、ViewPagerIndicator和TabLayout，並設置PagerAdapter
ViewPager viewPager = findViewById(R.id.view_pager);
List<Fragment> fragments = new ArrayList<>();
fragments.add(new Fragment1());
fragments.add(new Fragment2());
fragments.add(new Fragment3());
MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager(), fragments);
viewPager.setAdapter(adapter);
CirclePageIndicator indicator = findViewById(R.id.indicator);
indicator.setViewPager(viewPager);
TabLayout tabLayout = findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(viewPager);
2、自定義頁面切換效果
由於ViewPage內置的頁面切換效果有限，我們有時需要自定義一些頁面切換效果以提供更好的用戶體驗。下面代碼展示了如何自定義一種漸變的頁面切換效果，即在頁面滑動過程中，前一頁逐漸淡出，後一頁逐漸淡入：
// 布局文件中引用ViewPager
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
// 自定義的頁面切換效果
class FadePageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.7f;
private static final float MIN_ALPHA = 0.5f;
@Override
public void transformPage(@NonNull View view, float position) {
if (position < -1) {
view.setAlpha(0);
} else if (position <= 1) {
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else {
view.setAlpha(0);
}
}
}
// 實例化ViewPager和PagerAdapter，並設置頁面切換效果
ViewPager viewPager = findViewById(R.id.view_pager);
List<View> views = new ArrayList<>();
LayoutInflater inflater = LayoutInflater.from(this);
View view1 = inflater.inflate(R.layout.page_1, null);
View view2 = inflater.inflate(R.layout.page_2, null);
View view3 = inflater.inflate(R.layout.page_3, null);
views.add(view1);
views.add(view2);
views.add(view3);
MyPagerAdapter adapter = new MyPagerAdapter(views);
viewPager.setAdapter(adapter);
FadePageTransformer transformer = new FadePageTransformer();
viewPager.setPageTransformer(true, transformer);
3、利用ViewPager實現輪播圖
使用ViewPager可以非常輕鬆地實現一個輪播圖，只需要將ViewPager的頁面設置為圖片即可。下面代碼展示了如何利用ViewPager實現一個簡單的輪播圖，並在頁面切換時展示頁面的位置：
// 布局文件中引用ViewPager、TextView和ViewPagerIndicator
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" />
<TextView
android:id="@+id/tv_index"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Index: 1"
android:textColor="#333333"
android:textSize="16sp" />
<com.viewpagerindicator.CirclePageIndicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingTop="10dp" />
// 自定義的PagerAdapter，其中展示的頁面數據為圖片
class MyPagerAdapter extends PagerAdapter {
private List<Integer> mImages;
public MyPagerAdapter(List<Integer> images) {
mImages = images;
}
@Override
public int getCount() {
return mImages.size();
}
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == object;
}
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
ImageView imageView = new ImageView(container.getContext());
imageView.setImageResource(mImages.get(position));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
container.addView(imageView);
return imageView;
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView((ImageView) object);
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return "Page " + (position + 1);
}
}
// 實例化ViewPager、PagerIndicator和PagerAdapter，設置Adapter和indicator
ViewPager viewPager = findViewById(R.id.view_pager);
List<Integer> images = new ArrayList<>();
images.add(R.drawable.pic_1);
images.add(R.drawable.pic_2);
images.add(R.drawable.pic_3);
MyPagerAdapter adapter = new MyPagerAdapter(images);
viewPager.setAdapter(adapter);
CirclePageIndicator indicator = findViewById(R.id.indicator);
indicator.setViewPager(viewPager);
TextView tvIndex = findViewById(R.id.tv_index);
tvIndex.setText("Index: 1");
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
tvIndex.setText("Index: " + (position + 1));
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
四、總結
ViewPage是Android SDK中一個非常實用的控件，可以方便地實現多個子頁面的滑動切換。通過學習本文的介紹，我們可以初步掌握ViewPage的基本使用、ViewPagerIndicator的實現、頁面切換效果的自定義以及利用ViewPage實現輪播圖等知識。在實際開發中，我們可以根據業務需要結合ViewPage進行更豐富的頁面構建和多樣化的應用實現。
原創文章，作者：LQXB，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/144335.html
微信掃一掃 
支付寶掃一掃 