ViewPager實現帶引導小圓點與自動跳轉的引導界面

2019-10-22 18:24:14

字體：大中小

來源：轉載

供稿：網友

實現引導小圓點的方法其實很簡單，可直接在布局上放置與引導頁面等量的ImageView，然后在切換頁面的時候更改圖片資源就好了。這里順便提一下，有些APP是干脆在制作引導頁面圖片的時候加上引導小圓點，這種方式顯然最簡單不過了，但是既然是附在圖片上的，在切換的時候也是隨著圖片滑動的，顯然看起來效果并不是很好，甚至在我們需要加入小圓點的切換動畫時，那就更不能這么去做了。

首先我們先來看看實現效果

ViewPager,引導圓點,自動跳轉

這里我們的小圓點圖片資源是采用shape繪制的，這里我弄的很隨便，所以很粗糙，如果覺得不是很美觀那就自行修改吧。如果你是直接使用png資源的話，可直接跳過這一步。

shape_ring_black_normal.xml（黑色小圓環）

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"   android:shape="oval">    <solid android:color="#FFFFFF" />    <size android:width="24dp"     android:height="24dp"/>    <stroke android:color="#000000"     android:width="1dp"/>  </shape>

shape_circle_blue_press.xml（藍色小圓點）

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

再來個選擇器，直接用setSelected方法就可以切換圖片了，為true是切換為shape_circle_blue_press.xml，否則為shape_ring_black_normal.xml，記得選擇器的默認item一定要在最后，否則沒有效果。你也可以直接在切換頁面的時候替換圖片資源。

selector_circle.xml（小圓點選擇器）

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_selected="true" android:drawable="@drawable/shape_circle_blue_press"/>   <item android:drawable="@drawable/shape_ring_black_normal"/>  </selector>

頁面布局很簡單，ViewPage是重點來顯示主要內容，再來一排ImageView顯示小圓點，由于我們在最后一個頁面需要有個按鈕來跳轉到主界面，這里我們加個Button先隱藏。

activity_guide.xml

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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:gravity="center"   android:layout_height="match_parent">    <Button     android:id="@+id/btn_goto"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_alignParentRight="true"     android:visibility="gone"     android:text="跳轉" />    <android.support.v4.view.ViewPager     android:id="@+id/vp"     android:layout_width="match_parent"     android:layout_height="match_parent" />    <LinearLayout     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_centerHorizontal="true"     android:layout_alignParentBottom="true"     android:layout_marginBottom="24dp"     android:orientation="horizontal">      <ImageView       android:id="@+id/imgv_circler1"       android:layout_width="wrap_content"       android:layout_height="wrap_content"       android:src="@drawable/selector_circle"       android:layout_margin="24dp"/>      <ImageView       android:id="@+id/imgv_circler2"       android:layout_width="wrap_content"       android:layout_height="wrap_content"       android:layout_margin="24dp"       android:src="@drawable/selector_circle"/>      <ImageView       android:id="@+id/imgv_circler3"       android:layout_width="wrap_content"       android:layout_height="wrap_content"       android:layout_margin="24dp"       android:src="@drawable/selector_circle"/>    </LinearLayout>  </RelativeLayout>

還有一步準備工作，添加每個頁面的數據源，繼承PagerAdapter這個類

GuideAdapter.java

import android.support.v4.view.PagerAdapter; import android.view.View; import android.view.ViewGroup; import java.util.List;  public class GuideAdapter extends PagerAdapter {    private List<View> mDatas;    public GuideAdapter(List<View> datas) {     this.mDatas = datas;   }    @Override   public int getCount() {     return mDatas != null ? mDatas.size() : 0;   }    @Override   public Object instantiateItem(ViewGroup container, int position) {     container.addView(mDatas.get(position), 0);     return mDatas.get(position);   }    @Override   public void destroyItem(ViewGroup container, int position, Object object) {     container.removeView(mDatas.get(position));   }    @Override   public boolean isViewFromObject(View view, Object object) {     return view == object;   } }

接下來就看看如何實現，代碼很簡單，不難看懂，直接貼出來。

GuideAdapter.java

import android.content.Intent; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import android.widget.ImageView; import android.widget.RelativeLayout;  import java.util.ArrayList; import java.util.List;  public class GuideActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {    private ViewPager vp;   private List<View> mDatas = new ArrayList<>();   private Button btn;   private GuideAdapter mGuideAdapter;    private int[] res = {       R.mipmap.ic_launcher,       R.mipmap.ic_launcher,       R.mipmap.ic_launcher   };    private ImageView[] imgv = new ImageView[res.length];    @Override   protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.activity_guide);      initViews();     initDatas();     initEvents();   }    private void initViews() {     vp = (ViewPager) findViewById(R.id.vp);     btn = (Button) findViewById(R.id.btn_goto);     imgv[0] = (ImageView) findViewById(R.id.imgv_circler1);     imgv[1] = (ImageView) findViewById(R.id.imgv_circler2);     imgv[2] = (ImageView) findViewById(R.id.imgv_circler3);     RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);     for (int i = 0; i < res.length; i++) {       ImageView imgv = new ImageView(this);       imgv.setLayoutParams(params);       imgv.setImageResource(res[i]);       mDatas.add(imgv);     }   }    private void initDatas() {     selectedDoto(0);     mGuideAdapter = new GuideAdapter(mDatas);     vp.setAdapter(mGuideAdapter);   }    private void selectedDoto(int index) {     for (int i = 0; i < res.length; i++) {       if (i == index) {         imgv[i].setSelected(true);       } else {         imgv[i].setSelected(false);       }     }   }    private void initEvents() {     vp.setOnPageChangeListener(this);     btn.setOnClickListener(new View.OnClickListener() {       @Override       public void onClick(View v) {         Intent intent = new Intent(GuideActivity.this, MainActivity.class);         startActivity(intent);         finish();       }     });   }    @Override   public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}    @Override   public void onPageSelected(int position) {     if (position == res.length-1) // 如果是最后一個頁面顯示跳轉按鈕       btn.setVisibility(View.VISIBLE);     else       btn.setVisibility(View.GONE);     selectedDoto(position);   }    @Override   public void onPageScrollStateChanged(int state) {} }

那如果每個頁面不是一個控件這么簡單呢？這時我們用Fragment，布局上還是差不多，但最后頁面的按鈕我們可以轉移到最后一個Fragment布局上，因此直接刪除Button,這里就不能繼承Activity，要基礎FragmentActivity。
接著我們就要弄三個Fragment出來，這里布局只簡單放了個TextView，最后的頁面還有個Button。我們就看看最后一個Fragment就好了。

fragment_guidec.xml

<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"   tools:context="com.newcentury.testdemo.GuidecFragment">    <TextView     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_gravity="center"     android:drawableTop="@mipmap/ic_launcher"     android:textSize="18sp"     android:text="頁面三"/>    <Button     android:id="@+id/btn_goto"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_gravity="right"     android:text="跳轉"/>  </FrameLayout>

GuidecFragment.java

import android.content.Intent; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;  public class GuidecFragment extends Fragment {    @Override   public View onCreateView(LayoutInflater inflater, ViewGroup container,                Bundle savedInstanceState) {     View view = inflater.inflate(R.layout.fragment_guidec, container, false);     view.findViewById(R.id.btn_goto).setOnClickListener(new View.OnClickListener() {       @Override       public void onClick(View v) {         Intent intent = new Intent(getActivity(), MainActivity.class);         startActivity(intent);         getActivity().finish();       }     });     return view;   }  }

當然在前面用到的Adapter是用不了了，這里需要繼承FragmentPagerAdapter類。

GuideAdapter.java

import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import java.util.List;  public class GuideAdapter extends FragmentPagerAdapter {    private List<Fragment> mDatas;    public GuideAdapter(FragmentManager fm, List<Fragment> datas) {     super(fm);     this.mDatas = datas;   }    @Override   public Fragment getItem(int position) {     return mDatas.get(position);   }    @Override   public int getCount() {     return mDatas.size();   } }

GuideActivity.java

import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.widget.ImageView;  import java.util.ArrayList; import java.util.List;  public class GuideActivity extends FragmentActivity implements ViewPager.OnPageChangeListener {    private ViewPager vp;   private List<Fragment> mDatas = new ArrayList<>();   private GuideAdapter mGuideAdapter;    private int[] res = {       R.mipmap.ic_launcher,       R.mipmap.ic_launcher,       R.mipmap.ic_launcher   };    private ImageView[] imgv = new ImageView[res.length];    @Override   protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.activity_guide);      initViews();     initDatas();     initEvents();   }    private void initViews() {     vp = (ViewPager) findViewById(R.id.vp);     imgv[0] = (ImageView) findViewById(R.id.imgv_circler1);     imgv[1] = (ImageView) findViewById(R.id.imgv_circler2);     imgv[2] = (ImageView) findViewById(R.id.imgv_circler3);   }    private void initDatas() {     selectedDoto(0);     mDatas.add(new GuideaFragment());     mDatas.add(new GuidebFragment());     mDatas.add(new GuidecFragment());     mGuideAdapter = new GuideAdapter(getSupportFragmentManager(), mDatas);     vp.setAdapter(mGuideAdapter);   }    private void selectedDoto(int index) {     for (int i = 0; i < res.length; i++) {       if (i == index) {         imgv[i].setSelected(true);       } else {         imgv[i].setSelected(false);       }     }   }    private void initEvents() {     vp.setOnPageChangeListener(this);   }    @Override   public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}    @Override   public void onPageSelected(int position) {     selectedDoto(position);   }    @Override   public void onPageScrollStateChanged(int state) {} }

實現效果如下：

ViewPager,引導圓點,自動跳轉

從上面還可以看到一個倒計時，那是怎么實現倒計時自動跳轉呢？我們可以直接開個線程完成倒計時操作，當計時為0時便自動跳轉，但用戶很可能會回滑到上一個界面，也可能用戶會手動點擊跳轉按鈕進行跳轉，因此，要把控好線程的關閉與開啟。代碼貼出來如下：

public void AutoGotoThread(boolean start) {   if (start) {     mGotoMainThread = new GotoMainThread();     mGotoMainThread.start();   } else {     if (mGotoMainThread != null && mGotoMainThread.isAlive()) {       mGotoMainThread.stopThread();     }   } }  private void startActivity() {   Intent intent = new Intent(getActivity(), MainActivity.class);   startActivity(intent);   mGotoMainThread.stopThread();   getActivity().finish(); }  private class GotoMainThread extends Thread {   private volatile boolean isRun = true;   private Object lock = new Object();    @Override   public void run() {     synchronized (lock) {       while (isRun) {         try {           Message msg = Message.obtain();           msg.what = 101;           msg.obj = "跳轉 " + mTimeValues--;           mHandler.sendMessage(msg);           sleep(1000);         } catch (InterruptedException e) {           e.printStackTrace();         }        }     }   }    public void stopThread() {     mTimeValues = 5;     isRun = false;   } }  final Handler mHandler = new Handler() {   public void handleMessage(Message msg) {     switch (msg.what) {       case 101:         btn.setText((String) msg.obj);         if (mTimeValues < 0) {           startActivity();         }         break;     }   } };

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。

注：相關教程知識閱讀請移步到Android開發頻道。

上一篇：Android實現消息提醒小紅點效果

下一篇：Android設置控件陰影的三種方法