ViewPager实现带引导小圆点与自动跳转的引导界面
作者:Homilier 发布时间:2021-07-11 12:25:18
实现引导小圆点的方法其实很简单,可直接在布局上放置与引导页面等量的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;
}
}
};
来源:http://blog.csdn.net/honiler/article/details/78448864


猜你喜欢
- using System; using System.IO; using System.Data; using System.Text; u
- 我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取,为了方便以后使用,这里做个记录,讲讲倒计时器的实现。&n
- 1.pom.xml<?xml version="1.0" encoding="UTF-8"?&
- 本人一直喜欢左手使用鼠标,但有时候同事会临时进行操作,还得在控制面板里进行更改,比较不便,何不编写一个控制台程序,双击一下即可切换左右键 代
- 核心代码: File fatherFile = new File(path);File[] files = fatherFile.listF
- eclipse 创建 user library 方法1、Window - Preferences - Java - Build Path -
- 一、题目描述题目实现:获取远程服务器和客户机的IP地址和端口号。二、解题思路创建一个服务器类:ServerSocketFrame,继承JFr
- 本教程为大家分享了学籍管理系统的具体java代码,供大家参考,具体内容如下1.需求分析 1.1系统功能设计 (1)能够查询学生的基本信息,如
- Struts2 * Struts2 * 的概念和Spring Mvc * 一样。1.Struts2 * 是在访问某个Action或Actio
- 首先我们都知道java中的比较都是同一类对象与对象之间的比较,就好像现实生活中比较人和人的年龄一样,你不会去把人的年龄和人的身高来比较,这显
- 最近碰到个需要下载zip压缩包的需求,于是我在网上找了下别人写好的zip工具类。但找了好多篇博客,总是发现有bug。因此就自己来写了个工具类
- Spring Data JPA映射自定义实体类这个问题困扰了我2天=-=,好像也能使用 jpql解决先说下自己的功能:查询oracle最近s
- 当我们在spring容器中添加一个bean时,如果没有指明它的scope属性,则默认是singleton,也就是单例的。例如先声明一个bea
- 为什么要前后端分离?以Java Web项目为例,在传统的开发模式中,前端代码(Html、js、css)写在JSP中,甚至JSP中嵌入Java
- C# 获取硬件参数的实现方法示例代码:private static string GetIdentifier(string wmiClass
- 相信大家在小的时候都玩过拼图游戏,现如今,手机普及,能在手机上玩的游戏越来越多,于是乎,重温小时候,编写这个简易拼图游戏,而且也能进一步加深
- 详解java 中Spring jsonp 跨域请求的实例jsonp介绍  
- 本文实例讲述了Android实现模仿UCweb菜单效果的方法。分享给大家供大家参考。具体如下:UCWeb的菜单看起来不错,自己模仿做一个,思
- 为公司系统业务需要,这几天了解了一下微信和支付宝扫码支付的接口,并用c#实现了微信和支付宝扫码支付的功能。微信支付分为6种支付模式:1.付款
- 本文实例讲述了Android实现便于批量操作可多选的图片ListView。分享给大家供大家参考,具体如下:之前项目需要实现一个可多选的图片列