当前位置：移动技术网 > IT编程>移动开发>Android > ViewPager实现带引导小圆点与自动跳转的引导界面

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

2019年07月24日 | 移动技术网IT编程 | 我要评论

大良租房网,成人故事mp3,指鹿为马造句

实现引导小圆点的方法其实很简单，可直接在布局上放置与引导页面等量的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; 
    } 
  } 
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

Android 应用Crash 后自动重启的方法小结

前提首先，我们肯定要在application里面注册一个crashhandler，监听应用crashpublic class testapplication e... [阅读全文]
Android FTP服务器上传文件攻略(代码详解)

1.前言在开发中，会遇到向ftp服务器上传文件的需求,首先要导入commons-net-3.3.jar 然后利用api进行相关操作，具体功能如下：ftp相关代码... [阅读全文]
Android studio 解决logcat无过滤工具栏的操作

在logcat标题栏右键先windows mode，这时多数能恢复过滤工具栏，要恢复之前的停靠样式再同样点右键去掉windows mode的勾即可补充知识：an... [阅读全文]
Android Studio 恢复小窗口停靠模式(Docked Mode)

安卓studio在使用小窗口时，如果我们点击取消了窗口的docked mode模式，窗口就会变成，你一旦触发窗口以外的区域，窗口就会龟缩回去。此时，如果你想要恢... [阅读全文]
Android项目中实体类entity的作用详解

估计很多入门安卓的朋友对entity很困惑，为什么要写实体类？有什么用？写来干什么？对于实体类的理解我入门的时候也是困惑了好久，后面用多了才慢慢理解，这篇博客就... [阅读全文]
Android studio保存logcat日志到本地的操作

windows环境下1、输出logcat日志到本地文件adb logcat -> f:/logcat.txt2、输出带时间的logcat日志到本地文件：a... [阅读全文]
Android Studio快捷键生成TAG、Log.x日志输出介绍

生成taglogt+tab键：private static final string tag = "extract";生成log.d()logd+tab键：lo... [阅读全文]
Android studio 禁用AndroidX方式

gradle.properties文件中添加android.useandroidx=false #禁用androidxandroid.enablejetifie... [阅读全文]
Flutter 透明状态栏及字体颜色的设置方法

注：底色透明是否生效与android版本有关，版本过低设置无效1.在main.dart内设置void main(){ runapp(new myapp()); ... [阅读全文]
Flutter中mixin的使用详解

mixin是什么mixin应该怎么理解呢，对java系出身的我来说，这是一个新概念，各类资料的介绍也没找到一个清晰的定义。从个人理解来看，可以把它想象为kotl... [阅读全文]

网友评论


验证码：

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

2019年07月24日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论