ViewPager實(shí)現(xiàn)帶引導(dǎo)小圓點(diǎn)與自動(dòng)跳轉(zhuǎn)的引導(dǎo)界面

更新時(shí)間：2017年11月05日 14:19:52 作者：Homilier

這篇文章主要為大家詳細(xì)介紹了ViewPager實(shí)現(xiàn)帶引導(dǎo)小圓點(diǎn)與自動(dòng)跳轉(zhuǎn)的引導(dǎo)界面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

首先我們先來(lái)看看實(shí)現(xiàn)效果

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

shape_ring_black_normal.xml（黑色小圓環(huán)）

<?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（藍(lán)色小圓點(diǎn)）

<?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>

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

selector_circle.xml（小圓點(diǎn)選擇器）

<?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>

頁(yè)面布局很簡(jiǎn)單，ViewPage是重點(diǎn)來(lái)顯示主要內(nèi)容，再來(lái)一排ImageView顯示小圓點(diǎn)，由于我們?cè)谧詈笠粋€(gè)頁(yè)面需要有個(gè)按鈕來(lái)跳轉(zhuǎn)到主界面，這里我們加個(gè)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="跳轉(zhuǎn)" /> 
 
  <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>

還有一步準(zhǔn)備工作，添加每個(gè)頁(yè)面的數(shù)據(jù)源，繼承PagerAdapter這個(gè)類

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; 
  } 
}

接下來(lái)就看看如何實(shí)現(xiàn)，代碼很簡(jiǎn)單，不難看懂，直接貼出來(lái)。

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) // 如果是最后一個(gè)頁(yè)面顯示跳轉(zhuǎn)按鈕 
      btn.setVisibility(View.VISIBLE); 
    else 
      btn.setVisibility(View.GONE); 
    selectedDoto(position); 
  } 
 
  @Override 
  public void onPageScrollStateChanged(int state) {} 
}

那如果每個(gè)頁(yè)面不是一個(gè)控件這么簡(jiǎn)單呢？這時(shí)我們用Fragment，布局上還是差不多，但最后頁(yè)面的按鈕我們可以轉(zhuǎn)移到最后一個(gè)Fragment布局上，因此直接刪除Button,這里就不能繼承Activity，要基礎(chǔ)FragmentActivity。
接著我們就要弄三個(gè)Fragment出來(lái)，這里布局只簡(jiǎn)單放了個(gè)TextView，最后的頁(yè)面還有個(gè)Button。我們就看看最后一個(gè)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="頁(yè)面三"/> 
 
  <Button 
    android:id="@+id/btn_goto" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="right" 
    android:text="跳轉(zhuǎn)"/> 
 
</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; 
  } 
 
}

當(dāng)然在前面用到的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) {} 
}

實(shí)現(xiàn)效果如下：

從上面還可以看到一個(gè)倒計(jì)時(shí)，那是怎么實(shí)現(xiàn)倒計(jì)時(shí)自動(dòng)跳轉(zhuǎn)呢？我們可以直接開(kāi)個(gè)線程完成倒計(jì)時(shí)操作，當(dāng)計(jì)時(shí)為0時(shí)便自動(dòng)跳轉(zhuǎn)，但用戶很可能會(huì)回滑到上一個(gè)界面，也可能用戶會(huì)手動(dòng)點(diǎn)擊跳轉(zhuǎn)按鈕進(jìn)行跳轉(zhuǎn)，因此，要把控好線程的關(guān)閉與開(kāi)啟。代碼貼出來(lái)如下：

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 = "跳轉(zhuǎn) " + 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; 
    } 
  } 
};

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: