ViewPager + Fragment 实现页面滑动

最新推荐文章于 2018-09-18 11:27:21 发布

时间被海绵吃了

最新推荐文章于 2018-09-18 11:27:21 发布

阅读量1k

点赞数

分类专栏： android 文章标签： Android ViewPager

本文链接：https://blog.csdn.net/sunhengzhe/article/details/39967665

版权

本文介绍了如何利用Android的ViewPager和Fragment轻松创建类似微信界面的左右滑动及选项卡切换页面的效果。首先，通过在布局文件中声明ViewPager，并使用FragmentPagerAdapter适配器配合Fragment实现滑动页面。接着，展示了使用PagerTitleStrip添加标题效果的实现步骤。此外，还讨论了通过点击下方选项卡控制页面滑动的方法，即通过切换选项卡内的图片来达到交互目的。

摘要由CSDN通过智能技术生成

微信的界面可以左右滑动，同时也可以单击下面的选项卡切换页面，这种效果很流畅也很简洁。一开始想做这个效果的时候想的是用TabActivity，结果发现已经过时了，其实用ViewPager和Fragment可以很轻易实现这个效果。与此同时还可以设置上面有标题的效果，效果如下：

下面分别说这两个效果的实现。

一、使用PagerTitleStrip

要使用ViewPager首先当然要在布局文件中声明一个ViewPager：要注意引入了support.v4包

<RelativeLayout 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"
    tools:context=".MainActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true" />
    </android.support.v4.view.ViewPager>

</RelativeLayout>

在声明ViewPager的同时，在ViewPager里面声明PagerTitleStrip，这样就可以在ViewPager上面看到其标题了。

使用ViewPager时，需要设置适配器，我们这里要让每个页面都是一个Fragment，所以应该使用FragmentPagerAdapter适配器，在这个适配器中，我们要用到标题（String数组）和Fragment集合，通过构造方法传递进来。代码如下：

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyFragmentPagerAdapter extends FragmentPagerAdapter{

	/**
	 * 保存页面的队列
	 */
	private List<Fragment> fragments;
	/**
	 * 标题
	 */
	private String[] title;
	
	public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> fragments, String...title) {
		super(fm);
		this.fragments = fragments;
		this.title = title;
	}

	/**
	 * 当前的页面
	 */
	public Fragment getItem(int arg0) {
		return fragments.get(arg0);
	}

	/**
	 * 页面的个数
	 */
	public int getCount() {
		return fragments.size();
	}
	
	/**
	 * 当前的标题
	 */
	public CharSequence getPageTitle(int position) {
		return title[position];
	}

}

那么当然还需要准备三个Fragment，分别如下：

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FirstFragment extends Fragment{