ViewPager实现带引导小圆点与自动跳转的引导界面

实现引导小圆点的方法其实很简单，可直接在布局上放置与引导页面等量的ImageView，然后在切换页面的时候更改图片资源就好了。这里顺便提一下，有些APP是干脆在制作引导页面图片的时候加上引导小圆点，这种方式显然最简单不过了，但是既然是附在图片上的，在切换的时候也是随着图片滑动的，显然看起来效果并不是很好，甚至在我们需要加入小圆点的切换动画时，那就更不能这么去做了。

首先我们先来看看实现效果

这里我们的小圆点图片资源是采用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) {} 
}

实现效果如下：

从上面还可以看到一个倒计时，那是怎么实现倒计时自动跳转呢？我们可以直接开个线程完成倒计时操作，当计时为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; 
} 
} 
};

以上就是本文的全部内容，希望对大家的学习有所帮助。