android使用ViewPager組件實現app引導查看頁面

2019-10-21 21:47:49

字體：大中小

來源：轉載

供稿：網友

我們安裝完app后第一次打開app，通常都會有一個翻頁圖片形式的app引導簡介說明。下面我們來實現這個功能.ViewPager這個組件與ListView和RecyclerView在使用上有很高的相似處，所以你如果學習過以上兩種列表滾動控件，可以基于它們幫助你理解ViewPager的使用。

實現步驟：

1.在左右滑動頁面的界面中，通常在屏幕下方都會有一個小圓點，我們需要給這些小圓點的實現準備一些東西。在drawable目錄下創建兩個xml文件，一個畫出未選中的圓點，一個畫出選中后的圓點。

2.準備若干張圖片，他們將用于引導界面上顯示的部分。（圖片有一些要求，為了自適應各自尺寸屏幕（平板暫時不考慮），請選擇盡可能長的圖片，并且重點信息在圖片的上面，次要信息在下方，我們在自適應屏幕的時候會使用不顯示圖片下方的縮略方式，所以顯示的時候以圖片上半部分為核心）

3.實現ViewPager的適配器類，寫一個新的類繼承適配器類，并且重寫一些關鍵方法。

4.創建一個ViewPager的顯示活動類（1.活動類里的xml最好使用幀布局，可以讓其他控件顯示在ViewPager布局的上面。

2.活動類的xml包含一個ViewPager ，一個LinerLayout布局實現圓點，一個用于引導頁面最后一頁進入到app的button）

1.繪制圓點：

選中狀態的圓點：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <size android:height="10dp" android:width="10dp"></size> <solid android:color="@color/colorDownBlue"/> </shape>

效果：

android,ViewPager,app,引導頁面

未選中狀態下的圓點：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <size android:height="5dp" android:width="5dp"/> <stroke android:width="0.5dp" android:color="@color/colorBlue"/></shape>

效果：

android,ViewPager,app,引導頁面

2.圖片準備

3.實現ViewPager的適配器類，寫一個新的類繼承適配器類，并且重寫一些關鍵方法。

package com.example.lenovo.mydemoapp.myPagerAdapter; import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup; import java.util.List; /** * Created by lenovo on 2018/5/15. */ public class MyPagerAdapter extends PagerAdapter { List<View> list; /** 外部的list將從下面的構造方法中傳入 */ public MyPagerAdapter(List<View> list){ this.list = list;  }  @Override public int getCount() { return list.size(); }  @Override public boolean isViewFromObject(View view, Object object) { return view == object; } /** 銷毀項目 */ @Override public void destroyItem(ViewGroup container, int position, Object object) { //在方法參數中導入視圖組container，導入已經不在當前位置的int參數position 并且從list中獲取它。 //然后在刪除這個得到的ImageView的布局 container.removeView(list.get(position)); } /** 實例化項目 */ @Override public Object instantiateItem(ViewGroup container, int position) { //得到當前位置，并且從list中獲取布局，在添加到視圖組里 container.addView(list.get(position)); //返回一個當前位置的ImageView return list.get(position); } }

4.創建一個ViewPager的顯示活動類（1.活動類里的xml最好使用幀布局FrameLayout，可以讓其他控件顯示在ViewPager布局的上面。

2.活動類的xml包含一個ViewPager ，一個LinerLayout布局實現圓點，一個用于引導頁面最后一頁進入到app的button

活動類的xml：

<?xml version="1.0" encoding="utf-8"?><FrameLayout 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" android:orientation="vertical"> <android.support.v4.view.ViewPager android:id="@+id/GuidePage_ViewPager" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager> <Button android:id="@+id/GuidePage_EnterButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_marginBottom="50dp" android:layout_marginLeft="50dp" android:layout_marginRight="50dp" android:text="馬上體驗" android:textColor="@color/colorWhite" android:background="@drawable/button_background" android:visibility="gone"/> <LinearLayout android:id="@+id/GuidePage_point" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|center_horizontal" android:layout_marginBottom="20dp" android:gravity="bottom" > </LinearLayout>  </FrameLayout>

活動類的Java：

package com.example.lenovo.mydemoapp;  import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import android.widget.ImageView; import android.widget.LinearLayout;  import com.example.lenovo.mydemoapp.myPagerAdapter.MyPagerAdapter;  import java.util.ArrayList; import java.util.List;  import static com.example.lenovo.mydemoapp.R.layout.activity_guide_page_the_last_page;  /** 備注：這個布局沒有添加再次進入app不再顯示引導布局的邏輯判斷  */ public class GuidePage extends AppCompatActivity {  private List<View> list;  private int [] imageView = {R.drawable.ic_splash_1,R.drawable.ic_splash_2,R.drawable.ic_splash_3,  R.drawable.ic_splash_4,R.drawable.ic_splash_5};  private Button guidePage_EnterButton;  private LinearLayout guidePage_point;  private ViewPager guidePage_ViewPager;     @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_guide_page);  guidePage_EnterButton = (Button)findViewById(R.id.GuidePage_EnterButton);  guidePage_point = (LinearLayout)findViewById(R.id.GuidePage_point);  guidePage_ViewPager = (ViewPager)findViewById(R.id.GuidePage_ViewPager);  //設置點擊監聽  clickDealWith();  //添加圖片到Viewpager中  addView();  //添加圓點到LinearLayout布局中  addPoint();    }  public void clickDealWith(){  guidePage_EnterButton.setOnClickListener(new View.OnClickListener() {   @Override   public void onClick(View v) {   //后續請在此處添加startActivity(); 邏輯   finish();   }  });  /**  給ViewPager 引導查看布局添加滑動監聽   */  guidePage_ViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {   @Override   public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {   }    @Override   public void onPageSelected(int position) {   /**   給圓點添加選中判斷，選中的圓點設置point_slelct的xml，未選中的圓點全部設置point_normal的xml    */   for(int i=0;i< imageView.length;i++){    if(i == position){    guidePage_point.getChildAt(position).setBackgroundResource(R.drawable.point_select);    }else{    guidePage_point.getChildAt(i).setBackgroundResource(R.drawable.point_normal);    }       //判斷是否滑動到最后一頁，如果滑動到了最后一頁則顯示馬上體驗button     if (position == imageView.length -1){     guidePage_EnterButton.setVisibility(View.VISIBLE);//顯示button    }else {     guidePage_EnterButton.setVisibility(View.GONE);//不顯示button    }      }   }    @Override   public void onPageScrollStateChanged(int state) {   }  });  }  /**  添加ImageView布局到ViewPager：  實例化一個ImageView布局，并且通過for將數組里的圖片ID導入到ImageView布局里，在設置ImageView的相關參數。  最后添加到List中，在將List放到適配器PagerAdapter里面。最后將適配器設置匹配給ViewPager 查看布局控件中  */  public void addView(){  //實例化一個list集合  list = new ArrayList<>();  //添加布局參數：參數是父類匹配  LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewPager.LayoutParams.MATCH_PARENT,   ViewGroup.LayoutParams.MATCH_PARENT);  for(int i=0;i<imageView.length;i++){   //預先實例化一個imageView 給添加圖片并且添加到list 中   ImageView iv = new ImageView(this);   iv.setLayoutParams(layoutParams);   //設置圖片的縮放方式，這里設置的是把圖片按比例擴大/縮小到View的寬度，顯示在View的上部分位置   iv.setScaleType(ImageView.ScaleType.FIT_START);   //添加圖片   iv.setImageResource(imageView[i]);   list.add(iv);  }  //導入適配器  guidePage_ViewPager.setAdapter(new MyPagerAdapter(list));   }  /**  添加引導界面的圓點：   */  public void addPoint(){  //根據有多少張圖片添加多個圓點  for(int i=0;i<imageView.length;i++){   LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,    ViewGroup.LayoutParams.WRAP_CONTENT);//設置布局參數，參數為：包裝內容   /**   設置每個圓點之間的邊距   */   if(i<1){ //當沒有圖片或者只有一個圓點的時候，i小于1的時候就不設置邊距   layoutParams.setMargins(0,0,0,0);    }else {   layoutParams.setMargins(10,0,0,0);//邊距的參數值分別是左邊，上面，右邊，下面   }   //注意圓點也是一個ImageView的圖片布局   ImageView iv = new ImageView(this);   iv.setLayoutParams(layoutParams);   //添加圓點的xml到Image布局中，注意這里添加的是未點擊的xml圓點   iv.setImageResource(R.drawable.point_normal);   guidePage_point.addView(iv);//將圖片導入到布局中  }  //在全部圓點添加完成后，給第一個顯示的圖片的圓點添加一個被選中的圓點xml  guidePage_point.getChildAt(0).setBackgroundResource(R.drawable.point_select);    } }

運行效果：

android,ViewPager,app,引導頁面