ViewPager實(shí)現(xiàn)實(shí)現(xiàn)APP引導(dǎo)頁

一：摘要

這篇文章主要為大家介紹了使用ViewPager來實(shí)現(xiàn)android中常見的引導(dǎo)頁，具有一定的參考價值抄囚，感興趣的小伙伴們可以參考一下。

下面我們先來看一下要實(shí)現(xiàn)的效果吧!

二：具體實(shí)現(xiàn)過程

1.創(chuàng)建一個工程王污，修改主布局為線性布局描滔，

加入androidx.viewpager.widget.ViewPager標(biāo)簽，id為view_pager

部分代碼：

<androidx.viewpager.widget.ViewPager

    android:id="@+id/view_pager"

    android:layout_width="match_parent"

    android:layout_height="0dp"

    android:layout_weight="1">

</androidx.viewpager.widget.ViewPager>

2.在MainActivity把ViewPager引用出來并提取為全局變量露氮。

部分代碼：

mViewPager = findViewById(R.id.view_pager);

3. 在調(diào)用mViewPager.setAdapter();之前祖灰，我們要創(chuàng)建視圖數(shù)據(jù)。接下來創(chuàng)建視圖數(shù)據(jù)畔规。

4.添加全局變量int[] mLayoutIDs

部分代碼：

private int[] mLayoutIDs={
       R.layout.view_first,
       R.layout.view_second,
       R.layout.view_third

};

5.新建R.layout.view_first局扶，……相對布局文件并設(shè)置內(nèi)容。alt+enter快捷鍵

6. List<View> mViews=new ArrayList<>();創(chuàng)建一個視圖集合保存視圖對象叁扫。ctrl+alt+F提取為全局變量

部分代碼：

mViews = new ArrayList<>();

7.利用for循環(huán)添加視圖對象到視圖集合三妈。fori快捷鍵

8.通過.xml文件反向生成視圖對象并添加視圖對象到視圖集合

部分代碼：

for (int index = 0; index < mLayoutIDs.length; index++) {

    //通過.xml文件反向生成視圖對象并添加視圖對象到視圖集合
    //寫法1：

    //views.add(getLayoutInflater().inflate(mLayoutIDs[index],null));
    //寫法2：

    //利用ctrl+alt+v快捷鍵

    //把getLayoutInflater().inflate(mLayoutIDs[index],null)提取為變量
   View inflate = getLayoutInflater().inflate(mLayoutIDs[index], null);
   mViews.add(inflate);

9.視圖有了，就要創(chuàng)建一個Adapter(全局變量)

10.創(chuàng)建一個PagerAdapter, 手動添加兩個要實(shí)現(xiàn)的方法destroyItem & instantiateItem莫绣。ctrl+o

部分代碼：

//創(chuàng)建一個PagerAdapter,注意結(jié)尾的分號畴蒲。
// 手動添加兩個要實(shí)現(xiàn)的方法destroyItem & instantiateItem
//重寫好mPagerAdapter的方法就可以設(shè)置mViewPager的適配器了
PagerAdapter mPagerAdapter=new PagerAdapter() {
   @Override
   public int getCount() {
       //返回頁面的數(shù)量
       return mLayoutIDs.length;
   }

   @Override
   public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
       //判斷當(dāng)前視圖是不是該對象，object是instantiateItem返回的对室。相同的話后面就可以復(fù)用饿凛。
       return view==object;
   }

   @Override
   public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
       //把視圖移除
       container.removeView(mViews.get(position));
   }

   @NonNull
   @Override
   public Object instantiateItem(@NonNull ViewGroup container, int position) {
       //獲取當(dāng)前的視圖
       View child=mViews.get(position);
       //把視圖加載進(jìn)來
       container.addView(child);
       //同時把該視圖返回
       return child;
   }
};

11.重寫好mPagerAdapter的方法就可以設(shè)置mViewPager的適配器了。

mViewPager.setAdapter(mPagerAdapter);

至此软驰，就可以出現(xiàn)3個滑動頁面了涧窒。

我們可以看一下效果。

12.主布局添加一個id為dot_layout的LinearLayout锭亏。

部分代碼：

  android:layout_width="match_parent"

  android:layout_height="100dp"

13. 主布局ViewPager的寬高修改為

部分代碼：

    android:layout_width="match_parent"

    android:layout_height="0dp"

    android:layout_weight="1"

14.MainActivity中添加設(shè)置點(diǎn)要用到的兩個全局變量

部分代碼：

private ViewGroup mDotViewGroup;

private List<ImageView> mDotViews = new ArrayList<>();

//在MainActivity的onCreate方法中先把mDotViewGroup初始化

mDotViewGroup = findViewById(R.id.dot_layout);

15.開始在for循環(huán)里添加點(diǎn)纠吴，為每個點(diǎn)創(chuàng)建一個ImageView對象

ImageView dot = new ImageView(this);

16.設(shè)置點(diǎn)的圖片,修改一下圖片大小

部分代碼：

dot.setImageResource(R.mipmap.ic_launcher);
dot.setMaxHeight(100);
dot.setMaxWidth(100);

17.創(chuàng)建LinearLayout.LayoutParams對象并做屬性設(shè)置

部分代碼：

LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(40, 40);

18.把dot加進(jìn)mDotViews，mDotViewGroup

mDotViews.add(dot);
mDotViewGroup.addView(dot);

19.給mViewPager設(shè)置監(jiān)聽器慧瘤。

addOnPageChangeListener

部分代碼：

 //在onPageSelected中設(shè)置點(diǎn)的圖片戴已，可利用for循環(huán)

for (int index = 0; index < mDotViews.size(); index++) {

    mDotViews.get(index).setImageResource(position == index ?R.mipmap.star:R.mipmap.ic_launcher);
    //a ? b:c a 三目運(yùn)算符固该，右結(jié)合，a為真時糖儡，選b,否則選c

}

//然后crtl+alt_m提取該循環(huán)為一個函數(shù)伐坏。

private void setDotViews(int position) {

for (int index = 0; index < mDotViews.size(); index++) {

    mDotViews.get(index).setImageResource(position == index ?R.mipmap.star:R.mipmap.ic_launcher);
    //a ? b:c a 三目運(yùn)算符，右結(jié)合握联，a為真時桦沉，選b,否則選c

}
}

20.設(shè)置默認(rèn)的頁面序號

mViewPager.setCurrentItem(0);把0提取為常量。ctrl+alt+c金闽。

同時注意默認(rèn)的頁面序號設(shè)置為0時請調(diào)用一次setDotViews

至此纯露，全部功能已實(shí)現(xiàn)。

我們先看看默認(rèn)的頁面序號設(shè)置為0時沒有調(diào)用setDotViews的情況代芜。

有沒有發(fā)現(xiàn)一開始在0頁面時沒有小星星呢埠褪？

tips:默認(rèn)的頁面序號設(shè)置為0時，調(diào)用setDotViews的效果就是文章開篇是展示的效果圖挤庇，小伙伴們可以比較一下哦钞速。

下面附上全部代碼，僅供學(xué)習(xí)交流嫡秕。

MainActivity.java

package com.wxdgut.viewpager;

import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

   public static final int INIT_POSITION = 0;
   private ViewPager mViewPager;
   private int[] mLayoutIDs={
           R.layout.view_first,
           R.layout.view_second,
           R.layout.view_third
           //新建R.layout.view_first渴语，……相對布局文件并設(shè)置內(nèi)容。alt+enter快捷鍵
   };
   private List<View> mViews;
   //添加設(shè)置點(diǎn)要用到的兩個全局變量
   private ViewGroup mDotViewGroup;
   private List<ImageView> mDotViews = new ArrayList<>();

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       mViewPager = findViewById(R.id.view_pager);
       //mViewPager.setAdapter();前要創(chuàng)建視圖數(shù)據(jù)
       //創(chuàng)建視圖數(shù)據(jù),添加全局變量int[] mLayoutIDs
       //List<View> mViews=new ArrayList<>();創(chuàng)建一個視圖集合保存視圖對象淘菩。ctrl+alt+F提取為全局變量
       mViews = new ArrayList<>();

       //設(shè)置點(diǎn)之前mDotViewGroup先把初始化
       mDotViewGroup = findViewById(R.id.dot_layout);

       //利用for循環(huán)添加視圖對象到視圖集合遵班。fori快捷鍵
       for (int index = 0; index < mLayoutIDs.length; index++) {
           //通過.xml文件反向生成視圖對象并添加視圖對象到視圖集合
           //寫法1：views.add(getLayoutInflater().inflate(mLayoutIDs[index],null));
           //寫法2：利用ctrl+alt+v快捷鍵把getLayoutInflater().inflate(mLayoutIDs[index],null)提取為變量
           View inflate = getLayoutInflater().inflate(mLayoutIDs[index], null);
           mViews.add(inflate);

           /*如果只是想簡單放張圖片的話也可以直接new對象
           ImageView imageView = new ImageView(this);
           imageView.setImageResource(R.mipmap.ic_launcher);
           mViews.add(imageView);
           */

           //開始在for循環(huán)里添加點(diǎn)屠升，為每個點(diǎn)創(chuàng)建一個ImageView對象
           ImageView dot = new ImageView(this);
           //設(shè)置點(diǎn)的圖片,修改一下圖片大小
           dot.setImageResource(R.mipmap.ic_launcher);
           dot.setMaxHeight(100);
           dot.setMaxWidth(100);
           //創(chuàng)建LinearLayout.LayoutParams對象并做屬性設(shè)置
           LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(40, 40);
           layoutParams.leftMargin = 20;//點(diǎn)距離左邊的點(diǎn)為20
           dot.setLayoutParams(layoutParams);
           dot.setEnabled(false);//設(shè)置不可用
           //把dot加進(jìn)mDotViews潮改，mDotViewGroup
           mDotViews.add(dot);
           mDotViewGroup.addView(dot);

       }
       //視圖有了，就要創(chuàng)建一個PagerAdapter(全局)

       //設(shè)置mViewPager的適配器
       mViewPager.setAdapter(mPagerAdapter);

       //設(shè)置默認(rèn)的頁面序號mViewPager.setCurrentItem(0);腹暖。把0提取為常量汇在。ctrl+alt+c
       mViewPager.setCurrentItem(INIT_POSITION);
       //默認(rèn)的頁面序號設(shè)置為0時請調(diào)用一次setDotViews
       setDotViews(INIT_POSITION);

       //給mViewPager設(shè)置監(jiān)聽器。
       mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
           @Override
           public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

           }

           @Override
           public void onPageSelected(int position) {
               setDotViews(position);

           }

           @Override
           public void onPageScrollStateChanged(int state) {

           }
       });

   }

   private void setDotViews(int position) {
       for (int index = 0; index < mDotViews.size(); index++) {
           mDotViews.get(index).setImageResource(index==position ? R.mipmap.star:R.mipmap.ic_launcher);
       }
   }

   //創(chuàng)建一個PagerAdapter,注意結(jié)尾的分號脏答。
   // 手動添加兩個要實(shí)現(xiàn)的方法destroyItem & instantiateItem糕殉。ctrl+o
   //重寫好mPagerAdapter的方法就可以設(shè)置mViewPager的適配器了
   PagerAdapter mPagerAdapter=new PagerAdapter() {
       @Override
       public int getCount() {
           //返回頁面的數(shù)量
           return mLayoutIDs.length;
       }

       @Override
       public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
           //判斷當(dāng)前視圖是不是該對象，object是instantiateItem返回的殖告。相同的話后面就可以復(fù)用阿蝶。
           return view==object;
       }

       @Override
       public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
           //把視圖移除
           container.removeView(mViews.get(position));
       }

       @NonNull
       @Override
       public Object instantiateItem(@NonNull ViewGroup container, int position) {
           //獲取當(dāng)前的視圖
           View child=mViews.get(position);
           //把視圖加載進(jìn)來
           container.addView(child);
           //同時把該視圖返回
           return child;
       }
   };
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".MainActivity"
   android:orientation="vertical">

   <androidx.viewpager.widget.ViewPager
       android:id="@+id/view_pager"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1">
   </androidx.viewpager.widget.ViewPager>

   <LinearLayout
       android:id="@+id/dot_layout"
       android:layout_width="match_parent"
       android:layout_height="100dp"
       android:orientation="horizontal"
       android:layout_marginBottom="20dp"
       android:gravity="center"
       ></LinearLayout>

</LinearLayout>

view_first.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">
   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="頁面1"
       android:textSize="25sp"
       android:layout_centerInParent="true"/>

</RelativeLayout>

view_second.xml與view_third.xml和上面的類似。

歡迎小伙伴們批評指正黄绩！