继承上一篇偷懒的风格,扔下代码就跑,教程下次再补。。。~( ╯□╰ )~

练习效果如下:

此处输入图片的描述

ViewPager可以使View或者Fragment实现左右滑动效果。类似于微信等应用。

ViewPager官方教程:http://developer.android.com/reference/android/support/v4/view/ViewPager.html

ViewPager动画自定义官方教程:http://developer.android.com/training/animation/screen-slide.html

activity_main.xml中:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/myViewPager" />
</LinearLayout>

android.support.v4包是Google公司为了解决Android碎片化的问题,解决兼容问题,是一些高版本的控件可以在低版本Android系统中使用。一般在libs/文件下的jar包,而ViewPager是这个jar包中的一个控件。

定义3个Layout布局,用于测试滑屏效果:

view1.xml:

<?xml version="1.0" encoding="utf-8"?>
<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:background="#f85455">
    <TextView android:text="The First Page."
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#fff"
        android:textSize="40dp"
        android:layout_centerInParent="true"/>
</RelativeLayout>

view2.xml:

<?xml version="1.0" encoding="utf-8"?>
<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:background="#F89E54">
    <TextView android:text="The Second Page."
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#fff"
        android:textSize="40dp"
        android:layout_centerInParent="true"/>
</RelativeLayout>

view3.xml:

<?xml version="1.0" encoding="utf-8"?>
<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:background="#54D4F8">
    <TextView android:text="The Third Page."
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#fff"
        android:textSize="40dp"
        android:layout_centerInParent="true"/>
</RelativeLayout>

MyPageAdapter.java:

配置适配器Adapter的函数如下:

  • (1) PagerAdapter // 数据源:List
  • (2) FragmentPagerAdapter // 数据源:List
  • (3) FragmentStatePagerAdapter // 数据源:List

在本例子中选中View作为数据源。

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;

public class MyPageAdapter extends PagerAdapter {

    private List<View> viewList;

    public MyPageAdapter(List<View>viewList) {
        this.viewList = viewList;
    }

    /*
    * 返回页卡数量
    * */
    @Override
    public int getCount() {
        return viewList.size();
    }

    /*
    * View是否来自于对象
    * */
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    /*
    * 实例化一个页卡
    * */
    @Override
    public Object instantiateItem(ViewGroup container, int position) {

        container.addView(viewList.get(position));
        return viewList.get(position);
    }

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

MainActivity.java:

ViewPage是一个大容器,用于装载View或Fragment,而不能转载Layout。因此需要将Layout布局转换为View对象。

将Layout布局转换成View对象的方法有如下两种:

方法1:

LayoutInflate If = getLayoutInflater().from(this); 
If.inflate(resource, root);

方法2:

View.inflate(context, resource, root);

MainActivity.java代码如下:

package com.dengzhr.viewpageradapter;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity {
    private List<View> viewList;
    private ViewPager myViewPager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        /*
        * 将layout转为View,并将View作为Adapter的数据源
        * */
        viewList = new ArrayList<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);
        viewList.add(view1);
        viewList.add(view2);
        viewList.add(view3);
        // 初始化ViewPager
        MyPageAdapter myPageAdapter = new MyPageAdapter(viewList);
        // 创建PagerAdapter的适配器
        myViewPager = (ViewPager) findViewById(R.id.myViewPager);
        // ViewPager加载适配器
        myViewPager.setAdapter(myPageAdapter);
    }
}

源码包下载

ViewPager源码包

apk下载

ViewPager APK下载

此处输入图片的描述

扩展:在ViewPager中还可以使用PagerTabStrip或PagerTitleStrip作为当前显示View的标题

源码不贴出来了,效果如下:

此处输入图片的描述

源码包如下:

ViewPager-Title源码包

此处输入图片的描述

但是PagerTabStrip或PagerTitleStrip会出现一个无法解决的问题,就是标题文字移位,当前页的标题始终居中。

较佳的实现方式是使用ViewPager + TabView结合。

Just for a Test.
扔下代码就滚,教程下次补上。。。。~( ╯□╰ )~

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/others/mobile/688