Android之ViewPager（引导界面）（0）



创造机会的人是勇者，等待机会的人是愚者。

本讲内容：ViewPager控件的用法

一、ViewPager的介绍

ViewPager如同容器可装载俩类东西，一种是View对象，另一种是Fragment。

将Layout布局转换为View对象的两种方式
1、LayoutInflater lf=getLayoutInflater().from(this);
     lf.inflate(resource,root);
2、View.inflate(context,resource,root);

二、适配器（根据数据源可分为两类，一种View对象，另一种Fragment对象）

1、PagerAdapter  数据源：List<View>    （第次加载三个页卡一组管理）
2、FragmentPagerAdapter 数据源：List<Fragment> （所有页卡都加载进去管理，不能销毁页卡，即每个页卡（Fragment）中的onDestroy()方法永远不能执行）
3、FragmentStatePagerAdapter 数据源：List<Fragment> （与2的区别，可动态销毁页卡）

三、使用步骤：

1、在布局文件里加入

<android.support.v4.view.ViewPager          android:id="@+id/viewPager"          android:layout_width="match_parent"          android:layout_height="match_parent" />  <!-- 注意这个组件是用来显示左右滑动的界面的,如果不加载xml布局文件,他是不会显示内容的。   -->  

2、加载要显示的页卡

3、需要一个适配器

示例一：

  

下面是res/layout/activity_main.xml 布局文件：

<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" >    <android.support.v4.view.ViewPager        android:id="@+id/id_viewPager"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"/></RelativeLayout>

下面是res/layout/view1.xml 布局文件：(view2、view3类似)

<?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="match_parent"        android:layout_height="wrap_content"        android:text="第一个界面"        android:gravity="center"        android:textSize="30sp"/>    </LinearLayout>

下面是ViewPagerAdapter.java文件：

public class ViewPagerAdapter extends PagerAdapter{private List<View> viewList;public ViewPagerAdapter(List<View> viewList) {this.viewList=viewList;}/** * 获得当前页卡的数量     */public int getCount() {return viewList.size();}/** * 判断视图是否由对象产生 */public boolean isViewFromObject(View arg0, Object arg1) {return arg0==arg1;}/** * 实例化页卡   */public Object instantiateItem(ViewGroup container, int position) {container.addView(viewList.get(position));return viewList.get(position);}/** * 删除页卡   */public void destroyItem(ViewGroup container, int position, Object object) {container.removeView(viewList.get(position));}}

下面是MainActivity.java主界面文件：

public class MainActivity extends Activity {private List<View> viewList;private ViewPager pager;private ViewPagerAdapter adapter;protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);pager=(ViewPager) findViewById(R.id.id_viewPager);viewList=getData();adapter=new ViewPagerAdapter(viewList);pager.setAdapter(adapter);}/** * 数据源 */private List<View> getData(){viewList=new ArrayList<View>();/** * 通过View对象作为ViewPager的数据源 */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);viewList.add(view1);viewList.add(view2);viewList.add(view3);return viewList;}}

示例二：PagerTabStrip和PagerTitleStrp的用法（两者用法一样）

  

下面是res/layout/activity_main.xml 布局文件：

<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" >    <android.support.v4.view.ViewPager        android:id="@+id/id_viewPager"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true" >        <android.support.v4.view.PagerTabStrip            android:id="@+id/id_tab"            android:layout_width="wrap_content"            android:layout_height="wrap_content" >        </android.support.v4.view.PagerTabStrip>    </android.support.v4.view.ViewPager></RelativeLayout>

下面是ViewPagerAdapter.java文件：

public class ViewPagerAdapter extends PagerAdapter{private List<View> viewList;private List<String> titleList;public ViewPagerAdapter(List<View> viewList,List<String>titleList) {this.viewList=viewList;this.titleList=titleList;}/** * 获得当前页卡的数量     */public int getCount() {return viewList.size();}/** * 判断视图是否由对象产生 */public boolean isViewFromObject(View arg0, Object arg1) {return arg0==arg1;}/** * 实例化页卡   */public Object instantiateItem(ViewGroup container, int position) {container.addView(viewList.get(position));return viewList.get(position);}/** * 删除页卡   */public void destroyItem(ViewGroup container, int position, Object object) {container.removeView(viewList.get(position));}/** * 页卡标题 */public CharSequence getPageTitle(int position) {return titleList.get(position);}}

下面是MainActivity.java主界面文件：

public class MainActivity extends Activity {private List<View> viewList;private List<String>titleList;private ViewPager pager;private ViewPagerAdapter adapter;private PagerTabStrip tab;protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initViews();viewList=getData();adapter=new ViewPagerAdapter(viewList,titleList);pager.setAdapter(adapter);}/** * 初始化控件 */private void initViews() {pager=(ViewPager) findViewById(R.id.id_viewPager);tab=(PagerTabStrip) findViewById(R.id.id_tab);titleList=new ArrayList<String>();titleList.add("第一页");titleList.add("第二页");titleList.add("第三页");tab.setBackgroundColor(Color.YELLOW);tab.setTabIndicatorColor(Color.BLUE);tab.setDrawFullUnderline(false);//不显示分隔线tab.setTextColor(Color.RED);}/** * 数据源 */private List<View> getData(){viewList=new ArrayList<View>();/** * 通过View对象作为ViewPager的数据源 */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);viewList.add(view1);viewList.add(view2);viewList.add(view3);return viewList;}}

示例三：ViewPager装载Fragment

  

下面是Fragment1.java文件：(Fragment2、Fragment3类似)

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

下面是MyFragmentPagerAdapter.java文件：

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {private List<Fragment> fragments;private List<String> titleList;public MyFragmentPagerAdapter(FragmentManager fm,List<Fragment> fragments,List<String>titleList) {super(fm);this.fragments=fragments;this.titleList=titleList;}public Fragment getItem(int position) {return fragments.get(position);  }public int getCount() {return fragments.size();}public CharSequence getPageTitle(int position) {return titleList.get(position);}}

下面是MainActivity.java主界面文件：

<pre class="java" name="code">public class MainActivity extends FragmentActivity implements OnPageChangeListener{private List<Fragment> fragList;private List<String> titleList;private ViewPager pager;private MyFragmentPagerAdapter adapter;private PagerTabStrip tab;protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initViews();fragList=getData();adapter=new MyFragmentPagerAdapter(getSupportFragmentManager(),fragList,titleList);pager.setAdapter(adapter);pager.setOnPageChangeListener(this);}/** * 初始化控件 */private void initViews() {pager=(ViewPager) findViewById(R.id.id_viewPager);tab=(PagerTabStrip) findViewById(R.id.id_tab);titleList=new ArrayList<String>();titleList.add("第一页");titleList.add("第二页");titleList.add("第三页");tab.setBackgroundColor(Color.YELLOW);tab.setTabIndicatorColor(Color.BLUE);tab.setDrawFullUnderline(false);//不显示分隔线tab.setTextColor(Color.RED);}/** * 数据源 */private List<Fragment> getData(){/** * 通过Fragment作为ViewPager的数据源 */fragList=new ArrayList<Fragment>();fragList.add(new Fragment1());fragList.add(new Fragment2());fragList.add(new Fragment3());return fragList;}//当滑动状态改变时调用 public void onPageScrollStateChanged(int state) {}//当前页面被滑动时调用   public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}//当新的页面被选中时调用  public void onPageSelected(int position) {Toast.makeText(this, "这是第"+(position+1)+"个界面", Toast.LENGTH_SHORT).show();}}

Take your time and enjoy it 要原码的、路过的、学习过的请留个言，顶个呗～～