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

最新推荐文章于 2022-05-11 16:43:35 发布

神是念着倒

最新推荐文章于 2022-05-11 16:43:35 发布

阅读量300

点赞数

分类专栏： Android 文章标签： android viewpager 用户界面优化

Android 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

以下内容纯粹为本人学习笔记【记录】之用，所听课程(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>