[学习笔记]用户界面优化之Android ViewPager

以下内容纯粹为本人学习笔记【记录】之用，所听课程(Q群群友百度网盘提供)为极客学院一位老师所讲（老师大名我尚未知晓），如有侵权请告知。在此特别感谢这位老师录制的视频资料。
ViewPager两个作用：1）引导页；2）作为应用程序的框架 滑动

一、实例：实现图片左右滑动效果

文档结构

创建一个类，用来承载ViewPager，类名ViewPagerAdapter.java

package com.keen.learnviewpager;import android.content.Context;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;import java.util.List;public class ViewPagerAdapter extends PagerAdapter{    private List<View> views;//声明集合    private Context context;    public ViewPagerAdapter(List<View> views, Context context) {        this.views = views;        this.context = context;    }    @Override    public void destroyItem(View container, int position, Object object) {//        super.destroyItem(container,position,object);        ((ViewPager) container).removeView(views.get(position));    }    @Override    public Object instantiateItem(View container, int position) {        ((ViewPager) container).addView(views.get(position));        return views.get(position);    }    @Override    public int getCount() {        return views.size();    }    @Override    public boolean isViewFromObject(View arg0, Object arg1){        return (arg0 == arg1);    }}

Guide.java

package com.keen.learnviewpager;import android.app.Activity;import android.os.Bundle;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;import java.util.ArrayList;import java.util.List;public class Guide extends Activity {    private ViewPager vp;    private ViewPagerAdapter vpAdapter;    private List<View> views;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.guide);        initViews();    }    private void initViews(){        LayoutInflater inflater = LayoutInflater.from(this);        views = new ArrayList<View>();        views.add(inflater.inflate(R.layout.one, null));        views.add(inflater.inflate(R.layout.two, null));        views.add(inflater.inflate(R.layout.three, null));        vpAdapter = new ViewPagerAdapter(views, this);//实例化        vp = (ViewPager) findViewById(R.id.viewPager);        vp.setAdapter(vpAdapter);    }}

guide.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="#00000000">    </android.support.v4.view.ViewPager></RelativeLayout>

one.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent">    <ImageView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@drawable/guide_1" /></LinearLayout>

two.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent">    <ImageView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@drawable/guide_2" /></LinearLayout>

three.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent">    <ImageView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@drawable/guide_3" /></LinearLayout>

把AndroidManifest.xml MainActivity启动Launcher注释掉，改为Guide启动Launcher

        <activity android:name=".MainActivity">            <!--<intent-filter>-->                <!--<action android:name="android.intent.action.MAIN" />-->                <!--<category android:name="android.intent.category.LAUNCHER" />-->            <!--</intent-filter>-->        </activity>        <activity android:name=".Guide">            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>

二、实例：实现导航点效果

如何实现下方3个小圆点的效果？即【导航点】效果

首先，guide.xml布局文件里添加一个LinearLayout布局，并在内部添加3个ImageView，用于显示3个圆点，修改后的代码：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="#00000000">    </android.support.v4.view.ViewPager>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:id="@+id/dotLeftRight"        android:orientation="horizontal"        android:gravity="center_horizontal"        android:layout_alignParentBottom="true">        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:id="@+id/iv1"            android:src="@drawable/login_point_selected"/>        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:id="@+id/iv2"            android:src="@drawable/login_point"/>        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:id="@+id/iv3"            android:src="@drawable/login_point"/>    </LinearLayout></RelativeLayout>

然后，修改Guide.java文件，来实现小圆点效果。
1）小圆点的改变是根据ViewPager中的view来改变的,需要继承自OnPageChangeListener监听事件
2）声明3个小圆点，以集合形式

 private ImageView[] dots;//找到这3个小圆点    private int[] ids = {R.id.iv1, R.id.iv2, R.id.iv3};//找到id

3）添加对3个小圆点的操作方法

    private void initDots() {//对点的操作方法        dots = new ImageView[views.size()];//实例化        //通过for循环一一找到id        for (int i=0; i< views.size(); i++) {            dots[i] = (ImageView) findViewById(ids[i]);        }    }

4）在对小圆点的监听事件里的onPageSelected()添加for循环用于更改当前小圆点的状态

    @Override    public void onPageSelected(int position) {//当前页面被选中时调用        //用for循环更改当前小圆点的状态        for (int i =0; i<ids.length; i++) {            if(position ==i ) {                dots[i].setImageResource(R.drawable.login_point_selected);            } else {                dots[i].setImageResource(R.drawable.login_point);            }        }    }

修改后的Guide.java如

package com.keen.learnviewpager;import android.app.Activity;import android.os.Bundle;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;import android.widget.ImageView;import java.util.ArrayList;import java.util.List;public class Guide extends Activity implements ViewPager.OnPageChangeListener {    //点的改变是根据ViewPager中的view来改变的,需要继承自OnPageChangeListener监听事件    private ViewPager vp;    private ViewPagerAdapter vpAdapter;    private List<View> views;    private ImageView[] dots;//找到这3个小圆点    private int[] ids = {R.id.iv1, R.id.iv2, R.id.iv3};//找到id    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.guide);        initViews();        initDots();    }    private void initViews(){        LayoutInflater inflater = LayoutInflater.from(this);        views = new ArrayList<View>();        views.add(inflater.inflate(R.layout.one, null));        views.add(inflater.inflate(R.layout.two, null));        views.add(inflater.inflate(R.layout.three, null));        vpAdapter = new ViewPagerAdapter(views, this);//实例化        vp = (ViewPager) findViewById(R.id.viewPager);        vp.setAdapter(vpAdapter);        vp.setOnPageChangeListener(this);    }    private void initDots() {//对点的操作方法        dots = new ImageView[views.size()];//实例化        //通过for循环一一找到id        for (int i=0; i< views.size(); i++) {            dots[i] = (ImageView) findViewById(ids[i]);        }    }    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        //当页面滑动时调用    }    @Override    public void onPageSelected(int position) {//当前页面被选中时调用        //用for循环更改当前小圆点的状态        for (int i =0; i<ids.length; i++) {            if(position ==i ) {                dots[i].setImageResource(R.drawable.login_point_selected);            } else {                dots[i].setImageResource(R.drawable.login_point);            }        }    }    @Override    public void onPageScrollStateChanged(int state) {        //滑动状态改变时调用    }}

效果实现如下：

三、实例：实现进入主界面按钮

在最后一张图时，添加一个按钮，进入主界面
那么，在three.xml操作：把LinearLayout修改为RelativeLayout,并在内部添加一个LinearLayout，再在内部放置一个按钮，用于进入
修改后的three.xml为下：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <ImageView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@drawable/guide_3" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center_horizontal"        android:layout_alignParentBottom="true"        android:orientation="horizontal">        <Button            android:id="@+id/start_btn"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="进入"/>    </LinearLayout></RelativeLayout>

然后，添加对按钮的监听事件：1）声明一个Button按钮；2）寻找按钮id（放在初始化initViews里）。
修改后的Guide.java为：

package com.keen.learnviewpager;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;import android.widget.Button;import android.widget.ImageView;import java.util.ArrayList;import java.util.List;public class Guide extends Activity implements ViewPager.OnPageChangeListener {    //点的改变是根据ViewPager中的view来改变的,需要继承自OnPageChangeListener监听事件    private ViewPager vp;    private ViewPagerAdapter vpAdapter;    private List<View> views;    private ImageView[] dots;//找到这3个小圆点    private int[] ids = {R.id.iv1, R.id.iv2, R.id.iv3};//找到id    private Button start_btn;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.guide);        initViews();        initDots();    }    private void initViews(){        LayoutInflater inflater = LayoutInflater.from(this);        views = new ArrayList<View>();        views.add(inflater.inflate(R.layout.one, null));        views.add(inflater.inflate(R.layout.two, null));        views.add(inflater.inflate(R.layout.three, null));        vpAdapter = new ViewPagerAdapter(views, this);//实例化        vp = (ViewPager) findViewById(R.id.viewPager);        vp.setAdapter(vpAdapter);        start_btn = (Button) views.get(2).findViewById(R.id.start_btn);//找到按钮        //设置监听事件        start_btn.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                Intent i= new Intent(Guide.this, MainActivity.class);//创建intent对象                startActivity(i);                finish();            }        });        vp.setOnPageChangeListener(this);    }    private void initDots() {//对点的操作方法        dots = new ImageView[views.size()];//实例化        //通过for循环一一找到id        for (int i=0; i< views.size(); i++) {            dots[i] = (ImageView) findViewById(ids[i]);        }    }    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        //当页面滑动时调用    }    @Override    public void onPageSelected(int position) {//当前页面被选中时调用        //用for循环更改当前小圆点的状态        for (int i =0; i<ids.length; i++) {            if(position ==i ) {                dots[i].setImageResource(R.drawable.login_point_selected);            } else {                dots[i].setImageResource(R.drawable.login_point);            }        }    }    @Override    public void onPageScrollStateChanged(int state) {        //滑动状态改变时调用    }}

四：实例：添加数据存储

添加欢迎界面：程序已直接跳到引导界面，而对于真正的APP而言，不会每次都跳到引导界面。只有在第一次刚下载应用程序时，刚进入时调引导界面；之后就不不再跳转了。如何实现？
1）新建一个界面（欢迎界面）WelcomeAct.java
2）创建一个新的视图xml文件welcome.xml
3）让欢迎界面沉睡几秒，后跳入主界面或引导页，添加相应的各种方法
4）修改AndroidManifest.xml以WelcomAct为Launcher，同时注释到Guide为Launcher语句
即最后实现的效果是：第1次进入程序，显示的依次是欢迎页–引导页–点[进入]主界面；按返回键退出程序，长按Home，重新启动程序，显示依次是欢迎页–主界面，不经过引导页了。
WelcomeAct.java

package com.keen.learnviewpager;import android.app.Activity;import android.content.Intent;import android.content.SharedPreferences;import android.content.SharedPreferences.Editor;import android.os.Bundle;import android.os.Handler;public class WelcomeAct extends Activity{    private boolean isFirstIn =false;//判断进入哪个界面    private static final int TIME = 2000;//“沉睡"时间    private static final int GO_HOME = 1000;//等待进入首页    private static final int GO_GUIDE = 1001;//等待进入引导页    private Handler mHandler = new Handler(){        public void handleMessage(android.os.Message msg){            switch (msg.what) {                case GO_HOME:                    goHome();                    break;                case GO_GUIDE:                    goGuide();                    break;            }        };    };    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.welcome);        init();    }    //存储进入哪个界面的boolean值，根据它来判定进入的是哪个界面    private void init() {        SharedPreferences perPreferences = getSharedPreferences("sp", MODE_PRIVATE);        isFirstIn = perPreferences.getBoolean("isFirstIn", true);        if(!isFirstIn) {            mHandler.sendEmptyMessageDelayed(GO_HOME, TIME);        } else {            mHandler.sendEmptyMessageDelayed(GO_GUIDE, TIME);            Editor editor = perPreferences.edit();            editor.putBoolean("isFirstIn", false);            editor.commit();        }    }    //跳入主界面的方法    private void goHome(){        Intent i = new Intent(WelcomeAct.this, MainActivity.class);        startActivity(i);        finish();    }    //跳入引导界面的方法    private void goGuide(){        Intent i = new Intent(WelcomeAct.this, Guide.class);        startActivity(i);        finish();    }}

welcome.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent">    <ImageView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@drawable/welcome"/></LinearLayout>

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.keen.learnviewpager">    <application        android:allowBackup="true"        android:icon="@mipmap/ic_launcher"        android:label="@string/app_name"        android:supportsRtl="true"        android:theme="@style/AppTheme">        <activity android:name=".MainActivity">            <!--<intent-filter>-->                <!--<action android:name="android.intent.action.MAIN" />-->                <!--<category android:name="android.intent.category.LAUNCHER" />-->            <!--</intent-filter>-->        </activity>        <activity android:name=".Guide">            <!--<intent-filter>-->                <!--<action android:name="android.intent.action.MAIN" />-->                <!--<category android:name="android.intent.category.LAUNCHER" />-->            <!--</intent-filter>-->        </activity>        <activity android:name=".WelcomeAct">            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application></manifest>