ViewPager简单使用

ViewPager简单使用_第1张图片

实现viewpager的分页效果 ,你需要重写pageradapder。该类存在与google的兼容包中,在界面中,你需要包进路径 support.V4进去。

重写pageradapter:

public class Pager extends PagerAdapter {

	private List<View> views;
	private Context context;
	private TextView txt;
	private RefreshListView listNews;

	public Pager(Context context, List<View> views) {
		this.context = context;
		this.views = views;
	}

	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		return arg0 == arg1;
	}

	@Override
	public int getCount() {
		return 3;
	}

	@Override
	public void destroyItem(View container, int position, Object object) {
		((ViewPager) container).removeView(views.get(position));
	}

	@Override
	public int getItemPosition(Object object) {

		return super.getItemPosition(object);
	}

	/**
	 * 初始化界面
	 */
	@Override
	public Object instantiateItem(View container, int position) {
		((ViewPager) container).addView(views.get(position));
		View view = views.get(position);
		if (position == 0) {
			txt = (TextView) view.findViewById(R.id.m_text);
			txt.setText("第一个页面");
			listNews = (RefreshListView) view.findViewById(R.id.list_news);
			// 新建适配器对象
			ImportantNews impnews = new ImportantNews(context, position);
			listNews.setAdapter(impnews);

			listNews.setOnRefreshListener(new OnRefreshListener() {
				@Override
				public void onRefresh() {
					// TODO Auto-generated method stub
					listNews.onRefreshComplete();
				}
			});
		} else if (position == 1) {
			txt = (TextView) view.findViewById(R.id.m_text);
			txt.setText("第二个页面");
			listNews = (RefreshListView) view.findViewById(R.id.list_news);
			// 新建适配器对象
			ImportantNews impnews = new ImportantNews(context, position);
			listNews.setAdapter(impnews);

			listNews.setOnRefreshListener(new OnRefreshListener() {
				@Override
				public void onRefresh() {
					// TODO Auto-generated method stub
					listNews.onRefreshComplete();
				}
			});
		} else if (position == 2) {
			txt = (TextView) view.findViewById(R.id.m_text);
			txt.setText("第三个页面");
			listNews = (RefreshListView) view.findViewById(R.id.list_news);
			// 新建适配器对象
			ImportantNews impnews = new ImportantNews(context, position);
			listNews.setAdapter(impnews);

			listNews.setOnRefreshListener(new OnRefreshListener() {
				@Override
				public void onRefresh() {
					// TODO Auto-generated method stub
					listNews.onRefreshComplete();
				}
			});
		}
		return views.get(position);
	}
}

重写的适配器 ,当多个view的界面加载进去的时候,出现可以多页横向滑动的效果。在这里面写具体的适配界面,数据。

主界面:

/**
 * 主界面
 * 
 * @author hongjie
 * 
 */
public class MainActivity extends Activity {
	private RefreshListView listNews;
	private ImportantNews impnews;
	private ViewPager mViewPager;
	private PagerTitleStrip mPagerTitleStrip;
	private View view1;
	private View view2;
	private View view3;
	private TextView txt;
	private Pager mPagerAdapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mViewPager = (ViewPager) findViewById(R.id.viewpager);
		mPagerTitleStrip = (PagerTitleStrip) findViewById(R.id.pagertitle);

		// 分页显示的View
		LayoutInflater mLi = LayoutInflater.from(this);
		view1 = mLi.inflate(R.layout.main, null);
		view2 = mLi.inflate(R.layout.main, null);
		view3 = mLi.inflate(R.layout.main, null);

		// 每个页面的view加到集合中
		final ArrayList<View> views = new ArrayList<View>();

		views.add(view1);
		views.add(view2);
		views.add(view3);
		mPagerAdapter = new Pager(this, views);
		mViewPager.setAdapter(mPagerAdapter);
	}
}
在主界面中,新建pager对象 ,将要分页的页面和数据传递给适配器中。
activity_main:

<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" >

    <RelativeLayout
        android:id="@+id/lay_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/tx_huanqiu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:text="要闻" />

            <TextView
                android:id="@+id/tx_xinlang"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:text="四川" />

            <TextView
                android:id="@+id/tx_wangyi"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:text="娱乐" />
        </LinearLayout>
    </RelativeLayout>

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

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

</RelativeLayout>
将viewpager的路径写正确很重要,这里可以给每页写上标题。当然 ,这次  我没写。(<^>)。
main:

<?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" >

    <TextView
        android:id="@+id/m_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <com.news.utils.RefreshListView
        android:id="@+id/list_news"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:dividerHeight="3dp" >
    </com.news.utils.RefreshListView>

</LinearLayout>

这是每页的布局。


效果:

第一页的效果。

ViewPager简单使用_第2张图片

第二页的效果。

ViewPager简单使用_第3张图片

第一页向第二页切换的过程。

ViewPager简单使用_第4张图片


你可能感兴趣的:(viewpager,分页)