Android UI—引导页ViewPager使用

由于工作需要，准备转型Android开发。对于公司来说，可以集中力量开发Android产品，加快开发进度；对于个人来说，掌握另一门编程语言，也是提升自我的一个机会，正所谓技多不压身^^。

前言

今天学习了ViewPager控件的基本使用方法，实现了引导页的滑动、导航点的添加、进入主页面按钮、首次启动显示引导页，再次启动直接进入主页面等功能。总结如下：

一.引导页XML + Activity

1.引导页布局文件：导航点布局文件：one.xml … 、guide.xml
在layout布局文件中新建one.xml导航点，tow.xml、three.xml类似one.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/guide_1"/>
</LinearLayout>

新建guide.xml，并定义三个ImageView：

<?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">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#00000000"
        >
    </android.support.v4.view.ViewPager>
    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">
        <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>

2. 引导页Activity：Guide，并继承自ViewPager.OnPageChangeListener
   初始化视图数据：

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));
		
		//传views到ViewPagerAdapter
        vpAdapter = new ViewPagerAdapter(views, this);
        vp = (ViewPager) findViewById(R.id.viewpager);
        vp.setAdapter(vpAdapter);

        //设置对pager的监听
        vp.setOnPageChangeListener(this);

        //初始化
        start_btn = views.get(2).findViewById(R.id.start_btn);
        start_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent i = new Intent(Guide.this, MainActivity.class);
                startActivity(i);
                //该Activity结束，并关闭该Activity
                finish();
            }
        });
		//设置导航点
        dots = new ImageView[views.size()];
        for (int i = 0; i < views.size(); i++) {
            dots[i] = (ImageView) findViewById(ids[i]);
        }
    }

重写onCreate方法：

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.guide);
        initViews();
    }

重写ViewPager.OnPageChangeListener相关方法：

//滑动每个pager后调用
    @Override
    public void onPageSelected(int i) {
        for (int j = 0; j < ids.length; j++) {
            if (j == i) {
                dots[j].setImageResource(R.drawable.login_point_selected);
            }
            else {
                dots[j].setImageResource(R.drawable.login_point);
            }
        }
    }

二.ViewPagerAdapter

1.创建ViewPagerAdapter类，继承自PagerAdapter
重写ViewPagerAdapter构造方法：

public ViewPagerAdapter(List<View> views, Context context) {
        this.views = views;
        this.context = context;
    }

重写PagerAdapter相关方法：

//销毁View时调用
    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        ((ViewPager) container).removeView(views.get(position));
    }

    //加载View时调用
    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        ((ViewPager) container).addView(views.get(position));
        return views.get(position);
    }

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

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
        return (view == o);
    }

三.欢迎页：XML + WelcomeAct

1.在layout中新建xml文件

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/welcome_weibo"
        />
</LinearLayout>

2. 创建WelcomeAct

	private boolean isFirstIn = false;
    private static final int TIME = 2000;
    private static final int GO_HOME = 1000;
    private static final int GO_GUIDE = 1001;
    
    //定义Handler：首次启动进入引导页，之后启动直接进入主页面
    private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(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();
    }
    private void init() {
        //使用SharedPreferences记录状态
        SharedPreferences pref = getSharedPreferences("zjf", MODE_PRIVATE);
        isFirstIn = pref.getBoolean("isFirstIn", true);
        if (!isFirstIn) {
            mHandler.sendEmptyMessageDelayed(GO_HOME, TIME);
        }
        else {
            mHandler.sendEmptyMessageDelayed(GO_GUIDE, TIME);
            //存储数据
            SharedPreferences.Editor editor = pref.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();
    }

四.修改AndroidManifest.xml中启动页

1. 启动页为WelcomeAct

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.zjf.viewpaperdemo">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity"></activity>
        <activity android:name=".Guide"></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>

详细代码见GitHub。
上述对于PagerView的基本功能都已实现，后续PagerView其它高级功能继续更新。