android ViewPager使用(实现横向分页浏览)
参考:
Creating Swipe Views with Tabs:https://developer.android.com/training/implementing-navigation/lateral.html
FragmentPagerAdapter:https://developer.android.com/reference/android/support/v4/app/FragmentPagerAdapter.html
FragmentStatePagerAdapter:https://developer.android.com/reference/android/support/v4/app/FragmentStatePagerAdapter.html
第十七章-ViewPager切换界面:http://wiki.jikexueyuan.com/project/twenty-four-Scriptures/view-pager.html
使用ViewPager实现屏幕滑动:http://wiki.jikexueyuan.com/project/android-training-geek/screen-slide.html
按钮控制 ViewPager 的左右翻页:http://wiki.jikexueyuan.com/project/android-actual-combat-skills/button-control-viewpager-page-turning.html
使用Tabs创建Swipe视图:http://wiki.jikexueyuan.com/project/android-training-geek/lateral.html
使用 android.support.v4.view.ViewPager
可以实现左右页面切换功能
主要内容
ViewPager
基本介绍ViewPager + FragmentPagerAdapter + Fragment
ViewPager + FragmentStatePagerAdapter + Fragment
ViewPager + FragmentPagerAdapter + Fragment + TabLayout
- 完整工程代码链接
ViewPager
基本介绍
ViewPager
基本介绍
参考:
ViewPager
是一个布局管理器,允许用户左右切换页面,通常与 Fragment
进行交互,以更方便管理每个页面的生命周期,它需要使用 PagerAdapter
绑定 ViewPager
和 Fragment
FragmentPagerAdapter
和 FragmentStatePagerAdapter
是 PagerAdapter
的子类,每个类都提供了合适的方法
ViewPager + FragmentPagerAdapter + Fragment
ViewPager + FragmentPagerAdapter + Fragment
FragmentViewPager
表示每个页面均为 Fragment
,当考虑使用少数静态 Fragment
页面时,使用它,否则,考虑使用 FragmentStatePagerAdapter
FragmentViewPager
是一个抽象类,需要子类继承使用,必须实现 getItem(int)
和 getCount()
方法
activity_main.xml
中放置 ViewPager
以及 4
个按钮
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
android:padding="8dp"
tools:context="com.zj.viewpagerdemo.view.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/btn_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first" />
<Button
android:id="@+id/btn_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="left" />
<Button
android:id="@+id/btn_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="right" />
<Button
android:id="@+id/btn_last"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="last" />
</LinearLayout>
</LinearLayout>
MainAcivity.java
实现 ViewPager
以及按钮,4
个按钮用于左右切换界面,以及直接跳转最开始和最后面的界面
public class MainActivity extends BaseActivity implements MainContract.View, View.OnClickListener {
private static final String TAG = MainActivity.class.getSimpleName();
private ViewPager viewPager;
private Button btnFirst;
private Button btnLeft;
private Button btnRight;
private Button btnLast;
...
private MainAdapter adapter;
...
...
@Override
public void initViews() {
viewPager = (ViewPager) findViewById(R.id.view_pager);
btnFirst = (Button) findViewById(R.id.btn_first);
btnLeft = (Button) findViewById(R.id.btn_left);
btnRight = (Button) findViewById(R.id.btn_right);
btnLast = (Button) findViewById(R.id.btn_last);
adapter = new MainAdapter(getSupportFragmentManager());
viewPager.setAdapter(adapter);
btnFirst.setOnClickListener(this);
btnLeft.setOnClickListener(this);
btnRight.setOnClickListener(this);
btnLast.setOnClickListener(this);
}
...
...
@Override
public void onClick(View v) {
int index = viewPager.getCurrentItem();
int maxNUM = 5;
Log.d(TAG, "onClick: index = " + index + " maxNUM = " + maxNUM);
switch (v.getId()) {
case R.id.btn_first:
viewPager.setCurrentItem(0);
break;
case R.id.btn_left:
viewPager.setCurrentItem(index - 1);
break;
case R.id.btn_right:
viewPager.setCurrentItem(index + 1);
break;
case R.id.btn_last:
viewPager.setCurrentItem(maxNUM - 1);
break;
}
}
}
MainAdapter
类继承 FragmentPagerAdapter
,继承了函数 getItem(int)
以及 getCount
(Note:getCount
必须返回正确的页面数)
public class MainAdapter extends FragmentPagerAdapter {
private static final String[] Tabs = {"first", "left", "middle", "right", "last"};
public MainAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return MainFragment.newInstance(Tabs[position]);
}
@Override
public int getCount() {
return Tabs.length;
}
}
MainFragment.java
显示一个文本框,布局文件代码不再展示
public class MainFragment extends Fragment {
private TextView textView;
private String status;
public static MainFragment newInstance(String status) {
MainFragment fragment = new MainFragment();
Bundle bundle = new Bundle();
bundle.putString("status", status);
fragment.setArguments(bundle);
return fragment;
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
status = getArguments().getString("status");
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
// return super.onCreateView(inflater, container, savedInstanceState);
View view = LayoutInflater.from(container.getContext()).inflate(R.layout.fragment_main, container, false);
textView = (TextView) view.findViewById(R.id.text_view);
textView.setText("#Fragment: " + status);
return view;
}
}
运行画面:
ViewPager + FragmentStatePagerAdapter + Fragment
ViewPager + FragmentStatePagerAdapter + Fragment
PagerAdapter
的实现之一,同样表示每个页面均为 Fragment
,FragmentStatePagerAdapter
同时处理 Fragment
的状态保存和恢复
当需要展示许多个页面时,推荐使用 FragmentStatePagerAdapter
。当页面不可见时,整个 Fragment
将被销毁,仅保留其状态
FragmentStatePagerAdapter
是抽象类,需要继承使用,同样需要实现 getItem(int)
和 getCount
方法
将上面的代码中的 FragmentPagerAdapter
改成 FragmentStatePagerAdapter
即可,不再展示代码
ViewPager + FragmentPagerAdapter + Fragment + TabLayout
ViewPager + FragmentPagerAdapter + Fragment + TabLayout
之前使用按钮来对 ViewPager
进行跨页面跳转,使用 TabLayout
可以实现更好更方便的展示
参考: android.support.design.widget.TabLayout
需要添加依赖库:com.android.support:design
在 app->build.gradle
中,加入:
dependencies {
...
compile 'com.android.support:design:25.3.1'
}
Note:当前最新版本
activity_main2.xml
中仅需添加一个 TabLayout
和 ViewPager
即可
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context="com.zj.viewpagerdemo.view.Main2Activity">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
Main2Activity.java
中需要将 TabLayout
和 ViewPager
进行绑定
public class Main2Activity extends AppCompatActivity implements Main2Contract.View {
private TabLayout tabLayout;
private ViewPager viewPager;
...
private Main2Adapter adapter;
...
@Override
public void initViews() {
tabLayout = (TabLayout)findViewById(R.id.tab_layout);
viewPager = (ViewPager)findViewById(R.id.view_pager);
adapter = new Main2Adapter(this, getSupportFragmentManager());
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
}
...
}
Main2Adapter.java
中除了需要继承 getCount
和 getItem(int)
,还需要实现函数 getPageTitle(int)
,将每页标题传给 TabLayout
public class Main2Adapter extends FragmentPagerAdapter {
private Context context;
public static String[] Tabs;
public Main2Adapter(Context context, FragmentManager fm) {
super(fm);
this.context = context;
Tabs = context.getResources().getStringArray(R.array.arrays);
}
@Override
public Fragment getItem(int position) {
return MainFragment.newInstance(Tabs[position]);
}
@Override
public int getCount() {
return Tabs.length;
}
@Override
public CharSequence getPageTitle(int position) {
// return super.getPageTitle(position);
return Tabs[position];
}
}
Fragment
复用 MainFragment.java
,仅显示单个文本
运行画面:
完整工程代码链接
完整工程代码链接: