一手遮天 Android - view(集合类): ViewPager 基础 1
一手遮天 Android - view(集合类): ViewPager 基础 1
示例如下:
/view/collection/ViewPagerDemo1.java
/**
* ViewPager - 页面切换控件
* setCurrentItem() - 指定 ViewPager 当前显示的页面的索引位置
* setAdapter() - 指定用于为 ViewPager 呈现数据的 PagerAdapter 对象
*
* 本例演示
* 1、如何通过自定义的 PagerAdapter 来为 ViewPager 对象提供数据
* 2、PagerAdapter 会缓存 3 个页,即当前页、左边页和右边页
* 需要被缓存就调用 instantiateItem(),不需要被缓存就调用 destroyItem()
* 3、如何为 ViewPager 的每个页面添加类似 Tab 控件的标题
*/
package com.webabcd.androiddemo.view.collection;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.webabcd.androiddemo.R;
import java.util.ArrayList;
public class ViewPagerDemo1 extends AppCompatActivity {
private final String LOG_TAG = "ViewPagerDemo1";
private ViewPager mViewPager1;
private ViewPager mViewPager2;
private ViewPager mViewPager3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_collection_viewpagerdemo1);
mViewPager1 = findViewById(R.id.viewPager1);
mViewPager2 = findViewById(R.id.viewPager2);
mViewPager3 = findViewById(R.id.viewPager3);
sample();
}
private void sample() {
ViewPager[] viewPagerList = {mViewPager1, mViewPager2, mViewPager3};
for (ViewPager viewPager: viewPagerList) {
// 用于保存 ViewPager 的每个 view
ArrayList viewList = new ArrayList<View>();
LayoutInflater layoutInflater = getLayoutInflater();
viewList.add(layoutInflater.inflate(R.layout.activity_view_collection_viewpagerdemo1_page1, null, false));
viewList.add(layoutInflater.inflate(R.layout.activity_view_collection_viewpagerdemo1_page2, null, false));
viewList.add(layoutInflater.inflate(R.layout.activity_view_collection_viewpagerdemo1_page3, null, false));
// 用于保存 ViewPager 的每个 view 的标题
ArrayList titleList = new ArrayList<String>();
titleList.add("红色");
titleList.add("绿色");
titleList.add("蓝色");
// 实例化自定义的 PagerAdapter
MyPagerAdapter myPagerAdapter = new MyPagerAdapter(viewList, titleList);
// 指定 ViewPager 的 PagerAdapter
viewPager.setAdapter(myPagerAdapter);
}
}
/**
* 自定义 PagerAdapter 用于为 ViewPager 提供数据
*/
class MyPagerAdapter extends PagerAdapter {
private ArrayList<View> mViewList;
private ArrayList<String> mTitleList;
public MyPagerAdapter() {
}
public MyPagerAdapter(ArrayList<View> viewList, ArrayList<String> titleList) {
super();
this.mViewList = viewList;
this.mTitleList = titleList;
}
// ViewPager 的页面的数量
@Override
public int getCount() {
return mViewList.size();
}
// 固定这么写就好
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
// 将 ViewPager 的指定索引位置的 view 添加进容器,并返回这个 view
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = mViewList.get(position);
container.addView(view);
// 用于验证 PagerAdapter 会缓存 3 个页,即当前页、左边页和右边页
Log.d(LOG_TAG, "instantiateItem: " + position);
return view;
}
// 将 ViewPager 的指定索引位置的 view 从容器中删除
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mViewList.get(position));
// 用于验证 PagerAdapter 会缓存 3 个页,即当前页、左边页和右边页
Log.d(LOG_TAG, "destroyItem: " + position);
}
// 返回 ViewPager 的指定索引位置的 view 的标题
@Override
public CharSequence getPageTitle(int position) {
return mTitleList.get(position);
}
}
}
/layout/activity_view_collection_viewpagerdemo1.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--
ViewPager - 页面切换控件
-->
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
</androidx.viewpager.widget.ViewPager>
<!--
ViewPager - 页面切换控件
PagerTitleStrip - 为 ViewPager 增加不同页面的标题(类似 Tab 控件),标题无下划线
-->
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<androidx.viewpager.widget.PagerTitleStrip
android:layout_width="wrap_content"
android:layout_height="32dp"
android:background="@color/orange"
android:textColor="@color/white" />
</androidx.viewpager.widget.ViewPager>
<!--
ViewPager - 页面切换控件
PagerTabStrip - 为 ViewPager 增加不同页面的标题(类似 Tab 控件),标题有下划线
-->
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<androidx.viewpager.widget.PagerTabStrip
android:layout_width="wrap_content"
android:layout_height="32dp"
android:background="@color/orange"
android:textColor="@color/white" />
</androidx.viewpager.widget.ViewPager>
</LinearLayout>
/layout/activity_view_collection_viewpagerdemo1_page1.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/red"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="page 1"
android:textColor="@color/white"
android:textSize="24sp"/>
</LinearLayout>
/layout/activity_view_collection_viewpagerdemo1_page2.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/green"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="page 2"
android:textColor="@color/white"
android:textSize="24sp"/>
</LinearLayout>
/layout/activity_view_collection_viewpagerdemo1_page3.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/blue"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="page 3"
android:textColor="@color/white"
android:textSize="24sp"/>
</LinearLayout>