关闭

Android入门(33)——第十章 使用ViewPager实现导航

241人阅读 评论(0) 收藏 举报
分类:

第一部分:

1. 效果图:聊天、发现、通讯录。

ViewPager是一种容器,里面可以包含两种东西,一种是View的对象,一种是Fragment。


2. 加入ViewPager:


3. 加载显示的页卡:


4. 配置适配器Adapter:


第二部分:

5. 案例:做一个四个页面的滑动:

第一步:创建四个布局页面,分别叫view1、view2、view3和view4.下面是view1.xml的内容:

<?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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一个界面"/>
    
</LinearLayout>
第二步:配置适配器PagerAdapter,我们新建一个MyPagerAdapter.java文件来继承实现PagerAdapter。页卡就代表着页面。
package com.example.viewpager;

import java.util.List;

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

public class MyPagerAdapter extends PagerAdapter{

	private List<View> viewList;
	
	public MyPagerAdapter(List<View> viewList){
		this.viewList = viewList;		// 构造函数,用来获取数据源
	}
	
	/*
	 * 返回的是页卡的数量
	 * */
	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return viewList.size();
	}

	/*
	 * 判断当前View是否来自于对象
	 * */
	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		// TODO Auto-generated method stub
		return arg0 == arg1;	// 官方文档
	}

	/*
	 * 实例化一个页卡
	 * */
	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		// TODO Auto-generated method stub
		container.addView(viewList.get(position));
		return viewList.get(position);
	}
	
	/*
	 * 销毁一个页卡
	 * */
	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		// TODO Auto-generated method stub
		container.removeView(viewList.get(position));
	}
}
第三步:创建MainActivity的Activity,用来实现ViewPager:

package com.example.viewpager;

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

import android.os.Bundle;
import android.app.Activity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import android.view.View;

public class MainActivity extends Activity {

	private List<View> viewList;
	private ViewPager pager;
	
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        /*
         * 通过View对象作为ViewPager的数据源
         * */
        // 先新建一个ViewList集合
        viewList = new ArrayList<View>();
        // 将布局转成View对象:
        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);
        View view4 = View.inflate(this, R.layout.view4, null);
        // 将上面的View对象加入到ViewList集合中:
        viewList.add(view1);
        viewList.add(view2);
        viewList.add(view3);
        viewList.add(view4);
        
        /*
         * 配置适配器,如果数据源是List<View>的话,适配器用PagerAdapter。
         * */
        // 初始化ViewPager
        pager = (ViewPager) findViewById(R.id.pager);
        // 创建PagerAdapter的适配器,适配器先获取数据源,然后由ViewPager加载该适配器。
        MyPagerAdapter adapter = new MyPagerAdapter(viewList);
        // ViewPager加载适配器
        pager.setAdapter(adapter);
        
    }
}
效果图:没什么特别之处,就是可以左右滑动,一共四个页面。


6. 案例二:添加标题:

第一步:改写main页面布局:在ViewPager中添加<android.support.v4.view.PagerTabStrip>控件,id为tab:

<?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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:id="@+id/pager"
        >
        
        <android.support.v4.view.PagerTabStrip
            android:id="@+id/tab"
            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>
第二步:改写适配器文件MyPagerAdapter,让构造函数可以接收titleList,同时添加方法getPageTitle用来设置ViewPager页卡的标题:

package com.example.viewpager;

import java.util.List;

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

public class MyPagerAdapter extends PagerAdapter {

	private List<View> viewList;
	private List<String> titleList;

	public MyPagerAdapter(List<View> viewList, List<String> titleList) {
		this.viewList = viewList; // 构造函数
		this.titleList = titleList;
	}

	/*
	 * 返回的是页卡的数量
	 */
	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return viewList.size();
	}

	/*
	 * 判断当前View是否来自于对象
	 */
	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		// TODO Auto-generated method stub
		return arg0 == arg1; // 官方文档
	}

	/*
	 * 实例化一个页卡
	 */
	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		// TODO Auto-generated method stub
		container.addView(viewList.get(position));
		return viewList.get(position);
	}

	/*
	 * 销毁一个页卡
	 */
	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		// TODO Auto-generated method stub
		container.removeView(viewList.get(position));
	}

	/*
	 * 设置ViewPager页卡的标题,获取标题,有标题的前提是必须要在ViewPager布局中加入android.support.v4.view.
	 * PagerTabStrip控件。
	 */
	@Override
	public CharSequence getPageTitle(int position) {
		// TODO Auto-generated method stub
		return titleList.get(position);
	}
}
第三步:改写MainActivity的活动文件,为ViewPager页卡设置标题内容,为PagerTabStrip设置一些颜色格式属性,因为tab是设置在ViewPager布局里面的,所以这里不需要有语句进行特殊的关联,只需要设置属性即可。
package com.example.viewpager;

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

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import android.view.View;

public class MainActivity extends Activity {

	private List<View> viewList;
	private ViewPager pager;
	private PagerTabStrip tab;		// 标题
	private List<String> titleList;
	
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        /*
         * 通过View对象作为ViewPager的数据源
         * */
        // 先新建一个ViewList集合
        viewList = new ArrayList<View>();
        // 将布局转成View对象的方法:
        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);
        View view4 = View.inflate(this, R.layout.view4, null);
        // 将上面的View对象加入到ViewList集合中:
        viewList.add(view1);
        viewList.add(view2);
        viewList.add(view3);
        viewList.add(view4);
        
        // 为ViewPager页卡设置标题:
        titleList = new ArrayList<String>();
        titleList.add("第一页");
        titleList.add("第二页");
        titleList.add("第三页");
        titleList.add("第四页");
        
        // 为PagerTabStrip设置一些属性
        tab = (PagerTabStrip) findViewById(R.id.tab);// 初始化
        tab.setBackgroundColor(Color.YELLOW);	// 背景颜色
        tab.setTextColor(Color.RED);			// 文字颜色
        tab.setDrawFullUnderline(false);		// 去掉下面的长线
        tab.setTabIndicatorColor(Color.GREEN);	// 设置下面的小标线颜色
        
        /*
         * 配置适配器,如果数据源是List<View>的话,适配器用PagerAdapter。
         * */
        // 初始化ViewPager
        pager = (ViewPager) findViewById(R.id.pager);
        // 创建PagerAdapter的适配器
        MyPagerAdapter adapter = new MyPagerAdapter(viewList,titleList);
        // ViewPager加载适配器
        pager.setAdapter(adapter);
        
    }
    
}

效果图:丑丑的,哈哈。


第四步:还有另一种显示标题的方法,在main布局页面中添加<android.support.v4.view.PagerTitleStrip>控件,别的不需要改,因为适配器前面已经接收了标题数据源。

<?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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:id="@+id/pager"
        >
        
        <android.support.v4.view.PagerTabStrip
            android:id="@+id/tab"
            android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:layout_gravity="top">            
        </android.support.v4.view.PagerTabStrip>
        
        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/title"
            android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:layout_gravity="bottom">            
        </android.support.v4.view.PagerTitleStrip>
        
    </android.support.v4.view.ViewPager>
        

</LinearLayout>
效果图:注意:两者都存在的时候,上面那个会失效的。


7. Adapter里的常用方法:

第三部分:

8. 使用适配器FragmentPagerAdapter实现:

案例三:

第一步:首先在前面的基础上,我们有四个布局页面分别为view1,view2,view3,view4,然后我们创建四个java文件分别是:fragment1,fragment2,fragment3和fragment4:其中fragment1中的内容为:

package com.example.viewpager;
import com.example.viewpager.R;

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

// Fragment在导包的时候可以选用android.support.v4.app的包
public class fragment1 extends Fragment{// 继承于Fragment

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		return inflater.inflate(R.layout.view1, container,false);// 这里设定了这个Fragment的布局页面为view1.
	}
}

第二步:

创建MyFragmentPagerAdapter.java文件,

package com.example.viewpager;

import java.util.List;

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

/*
 * FragmentPagerAdapter和PagerAdapter的区别:
 * 前者是一次性加载所有的页卡,而后者是默认加载三个页卡。
 * 后者在页卡数量超过三个的时候,滑动的时候就存在动态销毁和创建的过程
 * 而前者不存在这个问题。
 * */
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

	private List<Fragment> fragList;
	private List<String> titleList;
	// 构造函数
	public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> fragList,
			List<String> titleList) {
		super(fm);
		// TODO Auto-generated constructor stub
		this.fragList = fragList;
		this.titleList = titleList;
	}

	/*
	 * 获取Fragment对象
	 * */
	@Override
	public Fragment getItem(int arg0) {
		// TODO Auto-generated method stub
		return fragList.get(arg0);
	}

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

}


第三步:修改MainActivity的活动文件:主要是修改了后来适配器的加载:

package com.example.viewpager;

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

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import android.view.View;

// 这里的继承改了,不是继承Activity了
public class MainActivity extends FragmentActivity {

	private List<View> viewList;
	private ViewPager pager;
	private PagerTabStrip tab;		// 标题
	private List<String> titleList;
	private List<Fragment> fragList;
	
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        /*
         * 通过View对象作为ViewPager的数据源
         * */
        // 先新建一个ViewList集合
        viewList = new ArrayList<View>();
        // 将布局转成View对象的方法:
        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);
        View view4 = View.inflate(this, R.layout.view4, null);
        // 将上面的View对象加入到ViewList集合中:
        viewList.add(view1);
        viewList.add(view2);
        viewList.add(view3);
        viewList.add(view4);
        
        /*
         * 通过Fragment作为ViewPager的数据源
         * */
        fragList = new ArrayList<Fragment>();
        fragList.add(new fragment1());
        fragList.add(new fragment2());
        fragList.add(new fragment3());
        fragList.add(new fragment4());
        
        // 为ViewPager页卡设置标题:
        titleList = new ArrayList<String>();
        titleList.add("第一页");
        titleList.add("第二页");
        titleList.add("第三页");
        titleList.add("第四页");
        
        // 为PagerTabStrip设置一些属性
        tab = (PagerTabStrip) findViewById(R.id.tab);// 初始化
        tab.setBackgroundColor(Color.YELLOW);	// 背景颜色
        tab.setTextColor(Color.RED);			// 文字颜色
        tab.setDrawFullUnderline(false);		// 去掉下面的长线
        tab.setTabIndicatorColor(Color.GREEN);	// 设置下面的小标线颜色
        
        /*
         * 配置适配器,如果数据源是List<View>的话,适配器用PagerAdapter。
         * */
        // 初始化ViewPager
        pager = (ViewPager) findViewById(R.id.pager);
        // 创建FragmentPagerAdapter的适配器
        // 关于第一个参数fm,如果是以前用getFragmentManager()。
        // 现在是import android.support.v4.app.FragmentManager;,所以用getSupportFragmentManager
        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragList, titleList);
        // ViewPager加载适配器
        pager.setAdapter(adapter); 
    }
    
}

效果图:与案例二的效果图一样的:



这里有一个注意点:

但下面如果继承的是FragmentStatePagerAdapter类的话,就会和PagerAdapter一样会动态销毁和创建。它还需要多创建两个方法

package com.example.viewpager;

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.ViewGroup;

/*
 * FragmentPagerAdapter和PagerAdapter的区别:
 * 前者是一次性加载所有的页卡,而后者是默认加载三个页卡。
 * 后者在页卡数量超过三个的时候,滑动的时候就存在动态销毁和创建的过程
 * 而前者不存在这个问题。
 * 但下面如果继承的是FragmentStatePagerAdapter类的话,就会和PagerAdapter一样会动态销毁和创建。它还需要多创建两个方法
 * 
 * */
public class MyFragmentPagerAdapter extends FragmentStatePagerAdapter {

	private List<Fragment> fragList;
	private List<String> titleList;

	public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> fragList,
			List<String> titleList) {
		super(fm);
		// TODO Auto-generated constructor stub
		this.fragList = fragList;
		this.titleList = titleList;
	}

	/*
	 * 获取Fragment对象
	 * */
	@Override
	public Fragment getItem(int arg0) {
		// TODO Auto-generated method stub
		return fragList.get(arg0);
	}

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

	@Override
	public Object instantiateItem(ViewGroup arg0, int arg1) {
		// TODO Auto-generated method stub
		return super.instantiateItem(arg0, arg1);
	}
	
	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		// TODO Auto-generated method stub
		super.destroyItem(container, position, object);
	}
}


9. 监听器的使用:

修改MainActivity页面即可:

package com.example.viewpager;

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

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Toast;

// 添加监听器,监听页卡切换到多少页
public class MainActivity extends FragmentActivity implements OnPageChangeListener{

	private List<View> viewList;
	private ViewPager pager;
	private PagerTabStrip tab;		// 标题
	private List<String> titleList;
	private List<Fragment> fragList;
	
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        /*
         * 通过View对象作为ViewPager的数据源
         * */
        // 先新建一个ViewList集合
        viewList = new ArrayList<View>();
        // 将布局转成View对象的方法:
        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);
        View view4 = View.inflate(this, R.layout.view4, null);
        // 将上面的View对象加入到ViewList集合中:
        viewList.add(view1);
        viewList.add(view2);
        viewList.add(view3);
        viewList.add(view4);
        
        /*
         * 通过Fragment作为ViewPager的数据源
         * */
        fragList = new ArrayList<Fragment>();
        fragList.add(new fragment1());
        fragList.add(new fragment2());
        fragList.add(new fragment3());
        fragList.add(new fragment4());
        
        // 为ViewPager页卡设置标题:
        titleList = new ArrayList<String>();
        titleList.add("第一页");
        titleList.add("第二页");
        titleList.add("第三页");
        titleList.add("第四页");
        
        // 为PagerTabStrip设置一些属性
        tab = (PagerTabStrip) findViewById(R.id.tab);// 初始化
        tab.setBackgroundColor(Color.YELLOW);	// 背景颜色
        tab.setTextColor(Color.RED);			// 文字颜色
        tab.setDrawFullUnderline(false);		// 去掉下面的长线
        tab.setTabIndicatorColor(Color.GREEN);	// 设置下面的小标线颜色
        
        /*
         * 配置适配器,如果数据源是List<View>的话,适配器用PagerAdapter。
         * */
        // 初始化ViewPager
        pager = (ViewPager) findViewById(R.id.pager);
        // 创建FragmentPagerAdapter的适配器
        // 关于第一个参数fm,如果是以前用getFragmentManager()。
        // 现在是import android.support.v4.app.FragmentManager;,所以用
        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragList, titleList);
        // ViewPager加载适配器
        pager.setAdapter(adapter);
        // 加载监听器
        pager.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) {
		// 从0开始计算的。
		Toast.makeText(this, "当前是第"+(arg0+1)+"个页面", Toast.LENGTH_SHORT).show();
	}
    
}
效果图:









0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:89372次
    • 积分:1869
    • 等级:
    • 排名:千里之外
    • 原创:104篇
    • 转载:15篇
    • 译文:4篇
    • 评论:20条
    最新评论