码迷，mamicode.com
首页 > 移动开发 > 详细

Android实战简易教程-第十八枪（ViewPager组件详解）

时间：2015-06-15 18:58:10      阅读：292      评论：0      收藏：0      [点我收藏+]

标签：android   viewpager   

对于ViewPager组件我们知道：

  1）ViewPager类直接继承了ViewGroup类，所有它是一个容器类，可以在其中添加其他的view类。

  2）ViewPager类需要一个PagerAdapter适配器类给它提供数据。

  3）ViewPager经常和Fragment一起使用，并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。

下面我们通过实例看一下ViewPager的使用。

一 实现ViewPager（数据源为List<View>）

1.先在main.xml文件中添加一个ViewPager:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

</LinearLayout>
2.创建三个View:

<?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/txt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="25dp"
        android:text="第一页" >
    </TextView>

</LinearLayout>
<?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/txt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二页" >
    </TextView>
    
</LinearLayout>

<?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/txt3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第三页" >
    </TextView>
    
</LinearLayout>
3.创建一个ViewPager适配器类：

package com.yayun.viewpagerdemo;

import java.util.ArrayList;
import java.util.List;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

public class ViewPagerAdapter extends PagerAdapter {
	private List<View> lViews=new ArrayList<View>();
	
	public ViewPagerAdapter(List<View> lViews){
		this.lViews=lViews;
	}

	@Override
	public int getCount() {
		return lViews.size();
	}

	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		return arg0==arg1;
	}
	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		container.addView(lViews.get(position));
		return lViews.get(position);
	}
	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		container.removeView(lViews.get(position));
	}

}
4.MainActivity.java:

package com.yayun.viewpagerdemo;

import java.util.ArrayList;
import java.util.List;

import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.os.Build;

public class MainActivity extends ActionBarActivity {
	private ViewPager viewPager;
	private List<View> listViews=null;
	ViewPagerAdapter pagerAdapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		
		viewPager=(ViewPager) findViewById(R.id.pager);
		listViews=new ArrayList<View>();
		/**
		 * 为Adapter创建数据源
		 */
		View view1=View.inflate(this, R.layout.view1, null);
		View view2=View.inflate(this, R.layout.view2, null);
		View view3=View.inflate(this, R.layout.view3, null);
		listViews.add(view1);
		listViews.add(view2);
		listViews.add(view3);
		pagerAdapter=new ViewPagerAdapter(listViews) ;
		viewPager.setAdapter(pagerAdapter);

	}

}

5.运行实例：

技术分享

可以实现翻页效果。

二 添加标题

1.我们需要更改main.xml文件：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/strip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top" >
        </android.support.v4.view.PagerTabStrip>
    </android.support.v4.view.ViewPager>

</LinearLayout>

2.需要更改适配器文件：
package com.yayun.viewpagerdemo;

import java.util.ArrayList;
import java.util.List;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

public class ViewPagerAdapter extends PagerAdapter {
	private List<View> lViews=new ArrayList<View>();
	private List<String> titleList=new ArrayList<String>();
	
	public ViewPagerAdapter(List<View> lViews,List<String> titleList){
		this.lViews=lViews;
		this.titleList=titleList;
	}

	@Override
	public int getCount() {
		return lViews.size();
	}

	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		return arg0==arg1;
	}
	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		container.addView(lViews.get(position));
		return lViews.get(position);
	}
	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		container.removeView(lViews.get(position));
	}
	/**
	 * 标题
	 */
	@Override
	public CharSequence getPageTitle(int position) {
		// TODO Auto-generated method stub
		return titleList.get(position);
	}

}
3.需要更改MainActivity.java文件：
package com.yayun.viewpagerdemo;

import java.util.ArrayList;
import java.util.List;

import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.os.Build;

public class MainActivity extends ActionBarActivity {
	private ViewPager viewPager;
	private List<View> listViews=null;
	ViewPagerAdapter pagerAdapter;
	PagerTabStrip pagerTabStrip;
	private List<String> titleList;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		
		viewPager=(ViewPager) findViewById(R.id.pager);
		pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip);
		listViews=new ArrayList<View>();
		titleList=new ArrayList<String>();
		titleList.add("第一页");
		titleList.add("第二页");
		titleList.add("第三页");
		/**
		 * 为Adapter创建数据源
		 */
		View view1=View.inflate(this, R.layout.view1, null);
		View view2=View.inflate(this, R.layout.view2, null);
		View view3=View.inflate(this, R.layout.view3, null);
		listViews.add(view1);
		listViews.add(view2);
		listViews.add(view3);
		pagerAdapter=new ViewPagerAdapter(listViews,titleList) ;
		viewPager.setAdapter(pagerAdapter);

	}

}

4.运行实例如下：
技术分享

三 实现ViewPager(数据源为List<Fragment>)

1.首先我们要创建三个Fragment:
package com.yayun.viewpagerdemo;

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

public class Fragment1 extends Fragment {
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.view1, container, false);
	}

}

package com.yayun.viewpagerdemo;

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

public class Fragment2 extends Fragment {
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.view2, container, false);
	}

}


package com.yayun.viewpagerdemo;

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

public class Fragment3 extends Fragment {
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.view3, container, false);
	}

}

2.设置Adapter:
package com.yayun.viewpagerdemo;

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 {
	List<Fragment> fragmentsList;
	List<String> titleList;

	public MyFragmentPagerAdapter(FragmentManager fm,List<Fragment> fragmentsList,List<String> titleList) {
		super(fm);
		this.fragmentsList=fragmentsList;
		this.titleList=titleList;
	}

	@Override
	public Fragment getItem(int arg0) {
		// TODO Auto-generated method stub
		return fragmentsList.get(arg0);
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return fragmentsList.size();
	}
@Override
/**
 * 添加标题
 */
public CharSequence getPageTitle(int position) {
	// TODO Auto-generated method stub
	return titleList.get(position);
}

}

3.MainActivity.java:
package com.yayun.viewpagerdemo;

import java.util.ArrayList;
import java.util.List;

import android.graphics.Color;
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.v4.view.ViewPager.PageTransformer;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.Window;

public class MainActivity extends ActionBarActivity {
	private ViewPager viewPager;
	private List<View> listViews=null;
	ViewPagerAdapter pagerAdapter;
	PagerTabStrip pagerTabStrip;
	private List<String> titleList;
	private List<Fragment> fragmentsList;
	MyFragmentPagerAdapter myFragmentPagerAdapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		
		viewPager=(ViewPager) findViewById(R.id.pager);
		pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip);
		
		/**
		 * 设置PagerTabStrip属性
		 */
		pagerTabStrip.setBackgroundColor(Color.GREEN);
		pagerTabStrip.setDrawFullUnderline(false);
		pagerTabStrip.setTextColor(Color.WHITE);
		listViews=new ArrayList<View>();
		titleList=new ArrayList<String>();
		fragmentsList=new ArrayList<Fragment>();
		fragmentsList.add(new Fragment1());
		fragmentsList.add(new Fragment2());
		fragmentsList.add(new Fragment3());
		titleList.add("第一页");
		titleList.add("第二页");
		titleList.add("第三页");
		/**
		 * 为Adapter创建数据源
		 */
		View view1=View.inflate(this, R.layout.view1, null);
		View view2=View.inflate(this, R.layout.view2, null);
		View view3=View.inflate(this, R.layout.view3, null);
		listViews.add(view1);
		listViews.add(view2);
		listViews.add(view3);
		pagerAdapter=new ViewPagerAdapter(listViews,titleList) ;
		myFragmentPagerAdapter=new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList, titleList);
		//viewPager.setAdapter(pagerAdapter);
		viewPager.setAdapter(myFragmentPagerAdapter);

	}

}


4.运行实例：
技术分享

这种方法不会销毁不在当前页面的页面，不能实现页卡的创建和销毁。

四 实现ViewPager(数据源为List<Fragment>实现FargmentStatePagerAdapter)常用

改变Adapter:
package com.yayun.viewpagerdemo;

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.view.View;

public class MyFragmentPagerAdapter2 extends FragmentStatePagerAdapter {
	List<Fragment> fragmentsList;
	List<String> titleList;

	public MyFragmentPagerAdapter2(FragmentManager fm,List<Fragment> fragmentsList,List<String> titleList) {
		super(fm);
		this.fragmentsList=fragmentsList;
		this.titleList=titleList;
	}

	@Override
	public Fragment getItem(int arg0) {
		// TODO Auto-generated method stub
		return fragmentsList.get(arg0);
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return fragmentsList.size();
	}
@Override
/**
 * 添加标题
 */
public CharSequence getPageTitle(int position) {
	// TODO Auto-generated method stub
	return titleList.get(position);
}
@Override
public Object instantiateItem(View container, int position) {
	// TODO Auto-generated method stub
	return super.instantiateItem(container, position);
}
@Override
public void destroyItem(View container, int position, Object object) {
	// TODO Auto-generated method stub
	super.destroyItem(container, position, object);
}

}
将MainActivity.java中的Adapter换一下即可，它可以实现页卡的创建和销毁。

五  onPagerChangeListener 监听使用

只需要修改MainActivity.java:
package com.yayun.viewpagerdemo;

import java.util.ArrayList;
import java.util.List;

import android.graphics.Color;
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.v4.view.ViewPager.OnPageChangeListener;
import android.support.v4.view.ViewPager.PageTransformer;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.Window;
import android.widget.Toast;

public class MainActivity extends ActionBarActivity implements OnPageChangeListener {
	private ViewPager viewPager;
	private List<View> listViews=null;
	ViewPagerAdapter pagerAdapter;
	PagerTabStrip pagerTabStrip;
	private List<String> titleList;
	private List<Fragment> fragmentsList;
	MyFragmentPagerAdapter myFragmentPagerAdapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		
		viewPager=(ViewPager) findViewById(R.id.pager);
		pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip);
		
		/**
		 * 设置PagerTabStrip属性
		 */
		pagerTabStrip.setBackgroundColor(Color.GREEN);
		pagerTabStrip.setDrawFullUnderline(false);
		pagerTabStrip.setTextColor(Color.WHITE);
		listViews=new ArrayList<View>();
		titleList=new ArrayList<String>();
		fragmentsList=new ArrayList<Fragment>();
		fragmentsList.add(new Fragment1());
		fragmentsList.add(new Fragment2());
		fragmentsList.add(new Fragment3());
		titleList.add("第一页");
		titleList.add("第二页");
		titleList.add("第三页");
		/**
		 * 为Adapter创建数据源
		 */
		View view1=View.inflate(this, R.layout.view1, null);
		View view2=View.inflate(this, R.layout.view2, null);
		View view3=View.inflate(this, R.layout.view3, null);
		listViews.add(view1);
		listViews.add(view2);
		listViews.add(view3);
		pagerAdapter=new ViewPagerAdapter(listViews,titleList) ;
		myFragmentPagerAdapter=new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList, titleList);
		//viewPager.setAdapter(pagerAdapter);
		viewPager.setAdapter(myFragmentPagerAdapter);
		viewPager.setOnPageChangeListener(this);//加载监听器

	}

	@Override
	public void onPageScrollStateChanged(int arg0) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void onPageSelected(int arg0) {
		Toast.makeText(this, "当前页面为"+(arg0+1), Toast.LENGTH_SHORT).show();
		
	}

}

运行实例即可以显示当前页面标签。

总结

1.android.support.v4.view.ViewPager全名；
2.android.support.v4.view.PagerTabStrip作为标题名称

喜欢的朋友可以关注，谢谢

Android实战简易教程-第十八枪（ViewPager组件详解）

标签：android   viewpager   

原文地址：http://blog.csdn.net/yayun0516/article/details/46503231
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！