ViewPager和Fragment一样是在Android 3.0版本新添加的控件。现
在我们先来看一个基本的示例了解一下ViewPager的基本功能。
先再Activity的布局文件中通过全类名的方式引入ViewPager。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/viewpager_review"/>
</LinearLayout>
因为ViewPager的主要作用是实现在一个Activity的分页功能,所以我们先要准备两个不同的页面。
layout1.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="1"
android:textColor="#000000"
android:textSize="28sp" />
</RelativeLayout>
layout2.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ffff00">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="2"
android:textColor="#000000"
android:textSize="28sp" />
</RelativeLayout>
Activity的代码:
package com.egotrip.wcc.ui;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.egotrip.wcc.R;
import java.util.ArrayList;
import java.util.List;
public class ViewPagerReviewActivity extends AppCompatActivity {
private ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_pager_review);
initView();
initData();
}
private void initView()
{
viewPager = (ViewPager) findViewById(R.id.viewpager_review);
}
private void initData()
{
LayoutInflater inflater = LayoutInflater.from(this);
List<View> list = new ArrayList<View>();
list.add(inflater.inflate(R.layout.layout1, null));
list.add(inflater.inflate(R.layout.layout2, null));
MyPagerAdapter adapter = new MyPagerAdapter(list);
viewPager.setAdapter(adapter);
}
public class MyPagerAdapter extends PagerAdapter{
private List<View> list;
public MyPagerAdapter(List<View> list)
{
this.list = list;
}
@Override
public int getCount() {
return list.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(list.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(list.get(position));
return list.get(position);
}
}
}
效果图是这样的:
现在来看看Activity中代码的含义。首先通过findViewById(ID)的方式获取了ViewPager的引用,然后通过setAdapter(Adapter)方法给ViewPager设置了Adapter。其中的重点就是Adapter。一般情况下,我们只要通过重写PagerAdapter的四个方法就能做到自定义一个自己的PagerAdapter。这里的自定义Adapter有些类似于ListView的自定义Adapter。下面我们来分别具体看看这四个方法的含义:
getCount():返回值代表了要在此Activity中分页的总数,这里就是list的size
destroyItem():移除一个给定位置的页面
instantiateItem():创建一个给定位置的页面。值得注意的是,这个方法的返回值是Object,我们这里返回的是创建好的页面,其实也可以返回其他值,比如说position。只要是代表这个页面的唯一标识,都可以做为此方法的返回值。
isViewFromObject():
此方法用来判断上一个方法的返回值与一个页面是否代表的是同一个页面。
下面介绍一下给ViewPager添加标题栏的两个控件:PagerTabStrip和PagerTitleStrip。
先来看看PagerTitleStrip:首先我们要把PagerTitleStrip作为ViewPager的子控件添加到布局文件中。
<?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">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager_review"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v4.view.PagerTitleStrip
android:id="@+id/pts_review"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"/>
</android.support.v4.view.ViewPager>
</LinearLayout>
上面我们给PagerTitleStrip设置了
android:layout_gravity="top"
属性,它的属性值可以是"top"或者"bottom"。
下面是Activity修改过后的代码:
package com.egotrip.wcc.ui;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.egotrip.wcc.R;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
public class ViewPagerReviewActivity extends AppCompatActivity {
private ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_pager_review);
initView();
initData();
}
private void initView()
{
viewPager = (ViewPager) findViewById(R.id.viewpager_review);
}
List<String> titles;
private void initData()
{
LayoutInflater inflater = LayoutInflater.from(this);
List<View> list = new ArrayList<View>();
list.add(inflater.inflate(R.layout.layout1, null));
list.add(inflater.inflate(R.layout.layout2, null));
MyPagerAdapter adapter = new MyPagerAdapter(list);
viewPager.setAdapter(adapter);
titles = Arrays.asList("Hello","Hi");
}
public class MyPagerAdapter extends PagerAdapter{
private List<View> list;
public MyPagerAdapter(List<View> list)
{
this.list = list;
}
@Override
public CharSequence getPageTitle(int position) {
return titles.get(position);
}
@Override
public int getCount() {
return list.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(list.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(list.get(position));
return list.get(position);
}
}
}
其实我只是在自定义的Adapter中多复写了一个getPageTitle(),此方法的作用就是设置对应页面的标题。其他都没有变动。
效果图如下:
接着介绍以下PagerTabStrip:跟PagerTitleStrip一样,现在布局文件中将其作为ViewPager的子控件添加进去。
<?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">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager_review"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v4.view.PagerTabStrip
android:id="@+id/pts_review"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"/>
</android.support.v4.view.ViewPager>
</LinearLayout>
Activity的代码先不动,先来看一下效果图:
PagerTabStrip和PagerTitleStrip有两点不同:
1、PagerTabStrip的标题下面会有一条下划线,提示当前的Tab是哪个,而PagerTitleStrip没有
2、
PagerTabStrip的Tab是可以点击的,点击哪个Tab就跳到对应的页面,而PagerTitleStrip没有此功能
除此之外,PagerTabStrip还可以设置标题和下滑线的颜色,只要在Activity中添加如下代码就可以:
pts = (PagerTabStrip) findViewById(R.id.pts_review);
pts.setTabIndicatorColor(Color.RED);
其他代码不用改动,下面是效果图:
虽然它们可以实现标题栏的效果,但它们实现的标题栏效果很不好,不能指定一个页面一次显示一个,或者全部显示,而且标题还滑动。所以主流的App都没有用这个玩意的。在开发中,我们也不建议使用这两个控件。这里只是介绍一下。
下面我们来看看,使用Fragment实现ViewPager的滑动:
先来看一个例子。
因为要使用Fragment,所以我们先来创建两个Fragment的布局:
fragment_viewpager_review1.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#33f32422"
android:gravity="center"
android:text="This is Fragment Layout 1"
android:textColor="#000000"
android:textSize="18sp" />
</RelativeLayout>
FragmentReview1.java
package com.egotrip.wcc.fragment;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.egotrip.wcc.R;
/**
* Created by wcc on 2015/12/7.
*/
public class FragmentReview1 extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_viewpager_review1, container, false);
}
}
fragment_viewpager_review2.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#66ffff22"
android:gravity="center"
android:text="This is Fragment Layout 2"
android:textColor="#000000"
android:textSize="18sp" />
</RelativeLayout>
FragmentReview2.java
package com.egotrip.wcc.fragment;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.egotrip.wcc.R;
/**
* Created by wcc on 2015/12/7.
*/
public class FragmentReview2 extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_viewpager_review2, container, false);
}
}
下面是自定义的PagerAdapter:
package com.egotrip.wcc.adapter;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;
/**
* Created by wcc on 2015/12/7.
*/
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> fragments;
public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> fragments) {
super(fm);
this.fragments = fragments;
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
}
Activity的布局文件就是开头的那个。下面是Activity的代码:
package com.egotrip.wcc.ui;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import com.egotrip.wcc.R;
import com.egotrip.wcc.adapter.MyFragmentPagerAdapter;
import com.egotrip.wcc.fragment.FragmentReview1;
import com.egotrip.wcc.fragment.FragmentReview2;
import java.util.ArrayList;
import java.util.List;
public class ViewPagerReviewActivity extends AppCompatActivity {
private ViewPager viewPager;
private PagerTabStrip pts;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_pager_review);
initView();
initData();
}
private void initView()
{
viewPager = (ViewPager) findViewById(R.id.viewpager_review);
}
private void initData()
{
List<Fragment> fragments = new ArrayList<Fragment>();
fragments.add(new FragmentReview1());
fragments.add(new FragmentReview2());
MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragments);
viewPager.setAdapter(adapter);
}
}
注意以上的所有关于Fragment要引入的包全部都是android.support.v4,因为FragmentPagerAdapter在v4包里。至于自定义PagerAdapter和Activity里的一些操作比较简单,这里就不多做介绍了。
看下效果图吧: