实现引导小圆点的方法其实很简单，可直接在布局上放置与引导页面等量的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; } } };
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
