Android ViewPager引導頁的使用

前言：

ViewPager，視圖翻頁工具，提供了多頁面切換的效果，ViewPager使用起來就是我們通過創建adapter給它填充多個view，左右滑動時，切換不同的view。Google官方是建議我們使用Fragment來填充ViewPager的，這樣可以更加方便的生成每個Page，以及管理每個Page的生命週期。

View層佈局：

歡迎頁面：activity_welcome.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".WelcomeActivity">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/welcome_android" />
</android.support.constraint.ConstraintLayout>

安裝後引導頁面：activity_guide.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"
    tools:context=".GuideActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#D4FDF9">

    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        android:layout_alignParentBottom="true">
        <ImageView
            android:id="@+id/iv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/login_point_selected"/>
        <ImageView
            android:id="@+id/iv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/login_point"/>
        <ImageView
            android:id="@+id/iv3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/login_point"/>
    </LinearLayout>
</RelativeLayout>

引導頁面三個vie頁面：

one_view.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/guide_1" />
</android.support.constraint.ConstraintLayout>

two_view.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/guide_2" />
</android.support.constraint.ConstraintLayout>

three_view.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        app:srcCompat="@drawable/guide_3" />

    <Button
        android:id="@+id/btn_main"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_marginStart="110dp"
        android:layout_marginLeft="110dp"
        android:layout_marginEnd="110dp"
        android:layout_marginRight="110dp"
        android:background="#3332CD99"
        android:text="@string/main"
        android:textColor="@color/colorPrimary"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.78"
        tools:ignore="MissingConstraints" />

</android.support.constraint.ConstraintLayout>

主頁面：activity_main.xml        添加GIFView.jar包

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">

    <com.ant.liao.GifView
        android:id="@+id/gifView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>

Control層java代碼：

  WelcomeActivity.java

public class WelcomeActivity extends AppCompatActivity {

    private boolean isFirstIn=false;//判定是否是第一次打開
    private static final int TIME=2000;//聲明延時的時間
    private static final int GO_HOME=1000;//跳轉到Main2Activity的時間
    private static final int GO_GUIDE=1001;//跳轉到MainActivity的時間

    //線程分爲主線程(主線程又叫UI線程，只能有一個主線程）和子線程（可以有多個）Handler只能在主線程裏運行
    //handler是Android給我們提供用來更新UI的一套機制，也是一套消息處理機制，我們可以發消息，也可以通過它處理消息。
    //使用Handler的方式進行延時操作
    @SuppressLint("HandlerLeak")
    private Handler handler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(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.activity_welcome);
        init();
    }
    private void init(){
        //獲取SharedPreferenced對象,用以存儲isFirstIn的當前值
        SharedPreferences preferences=getSharedPreferences("jike",MODE_PRIVATE);
        isFirstIn=preferences.getBoolean("isFirstIn",true);//將isFirstIn獲取爲true
        if (!isFirstIn){
            handler.sendEmptyMessageDelayed(GO_HOME,TIME);//發送消息
        }else {
            handler.sendEmptyMessageDelayed(GO_GUIDE,TIME);
            SharedPreferences.Editor editor=preferences.edit();//對存儲數據進行編輯
            editor.putBoolean("isFirstIn",false);//將isFirstIn存儲爲false
            editor.commit();//編輯提交
        }
    }
    private void goHome(){
        Intent intent=new Intent(WelcomeActivity.this, MainActivity.class);
        startActivity(intent);
        finish();//關掉不用的界面
    }
    private  void goGuide(){
        Intent intent=new Intent(WelcomeActivity.this, GuideActivity.class);
        startActivity(intent);
        finish();//關掉不用的界面
    }
}

  GuideActivity.java

//點隨着view的改變而改變，需要實現改變的監聽方法，重寫ViewPager.OnPageChangeListener
public class GuideActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    private ViewPager viewPager;
    private ViewPagerAdapter adapter;
    private List<View> views;//聲明view集合
    private ImageView[] dots;//聲明圖像點的集合
    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.activity_guide);
        initViews();
        initDots();
    }

    private void initViews() {//初始化view
        LayoutInflater inflater=LayoutInflater.from(this);
        views=new ArrayList<>();
        views.add(inflater.inflate(R.layout.one_view,null));
        views.add(inflater.inflate(R.layout.two_view,null));
        views.add(inflater.inflate(R.layout.three_view,null));
        adapter=new ViewPagerAdapter(views,this);
        viewPager=findViewById(R.id.viewPager);
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(this);//viewPager實現監聽
        //第三個頁面獲取id
        views.get(2).findViewById(R.id.btn_main).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent_main2=new Intent(GuideActivity.this, MainActivity.class);
                startActivity(intent_main2);
            }
        });
    }
    private void initDots(){  //初始化點
        dots=new ImageView[views.size()];//實例化對象
        for (int i=0;i<views.size();i++){
            dots[i]=findViewById(ids[i]);//獲取id
        }
    }

    //頁面被選中時調用
    @Override
    public void onPageSelected(int i) {
        for (int j=0;j<ids.length;j++){
            if (i==j){
                dots[j].setImageResource(R.drawable.login_point_selected);
            }else {
                dots[j].setImageResource(R.drawable.login_point);
            }
        }
    }

    //頁面滑動時調用
    @Override
    public void onPageScrolled(int i, float v, int i1) {

    }
    //頁面滑動狀態改變時調用
    @Override
    public void onPageScrollStateChanged(int i) {

    }
}

引導頁適配器：ViewPagerAdapter.java

public class ViewPagerAdapter extends PagerAdapter {

    private List<View> views;//創建顯示頁面view集合
    private Context context;//創建上下文對象


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

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView(views.get(position));//view切換時移除當前頁面view
    }


    //加載添加view的方法，類似於ListView中的getView（）
    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        container.addView(views.get(position));
        return views.get(position);
    }

    @Override
    public int getCount() {
        return views.size(); //獲取view的數量
    }


    //判斷當前view是不是需要的對象
    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
        return (view==o);
    }
}

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private GifView gifView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gifView = findViewById(R.id.gifView);
        gifView.setGifImage(R.drawable.girl);
        gifView.setShowDimension(getWindowManager().getDefaultDisplay().getWidth(),getWindowManager().getDefaultDisplay().getHeight());//獲取屏幕的寬高
//        gifView.setGifImageType(GifView.GifImageType.WAIT_FINISH);
        //gifView.setGifImageType(GifView.GifImageType.COVER);
    }

}

運行效果：

 

GitHub源碼：https://github.com/dpl12/ViewPagerDemo