383ci点com,购物qq群,梓晓
接着上一篇博客，上一篇博客跟大家分享了三种开始页面的定时跳转，根据项目需求接下来就说一下向导页面吧！几乎每一个app都有自己的向导页面，一般都是第一次安装的时或者第一次进入应用时才有向导页面的，就是只出现一次向导页面，向导页面顾名思义是指引客户大概了解app的功能，向客户介绍app的主要内容和使用方式，给客户一种期待已久的感觉，向导页面的实现方法有很多，现在我就以我之前做的项目为例给大家介绍用viewpager去实现向导页面吧！
现在就给你们先看看效果图，是很酷吧！
一、判断开始页面是否跳转到向导页面（如果是第一次进入app，则开始页面跳转到想到页面；如果不是第一次进入app了，则开始页面跳转到主页面。这就是向导页面只出现一次的逻辑构思）
我要评论
// 判断是否进入向导界面还是主界面
if (sptools.getboolean(getapplicationcontext(), myconstants.issetup, false)){
//true，设置过，直接进入主界面
//
intent main = new intent(splashactivity.this,mainactivity.class);
startactivity(main);//主界面
} else {
//false，没设置过，进入设置向导界面
intent intent = new intent(splashactivity.this,guideactivity.class);
startactivity(intent);//向导界面
}
二、向导页面guideactivity.class的实现，用viewpager来实现。 （默认第一次进入app的，不然开始页面就不会跳转到向导页面了）如果有对viewpager不熟悉的，也可以查一下android api帮助文档，地址：
import android.app.activity;
import android.content.intent;
import android.os.bundle;
import android.support.v4.view.pageradapter;
import android.support.v4.view.viewpager;
import android.support.v4.view.viewpager.onpagechangelistener;
import android.view.view;
import android.view.view.onclicklistener;
import android.view.viewgroup;
import android.view.viewtreeobserver.ongloballayoutlistener;
import android.view.window;
import android.view.windowmanager;
import android.widget.button;
import android.widget.imageview;
import android.widget.linearlayout;
import android.widget.linearlayout.layoutparams;
import android.widget.relativelayout;
import com.zsml.fashiongou.sputils.densityutil;
import com.zsml.fashiongou.sputils.myconstants;
import com.zsml.fashiongou.sputils.sptools;
import java.util.arraylist;
import java.util.list;
public class guideactivity extends activity
{
private viewpager vp_guids;
private linearlayout ll_points;
private view v_redpoint;
private button bt_startexp;
private list<imageview> guids;
private myadapter adapter;
private int dispoints;//
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
requestwindowfeature(window.feature_no_title);//去掉标题
// full screen
getwindow().setflags(windowmanager.layoutparams.flag_fullscreen,
windowmanager.layoutparams.flag_fullscreen);
initview();// 初始化界面
initdata();//初始化数据
initevent();//初始化组件事件
}
private void initevent() {
//
v_redpoint.getviewtreeobserver().addongloballayoutlistener(new ongloballayoutlistener() {
@override
public void ongloballayout() {
//
v_redpoint.getviewtreeobserver().removeglobalonlayoutlistener(this);
//
dispoints = (ll_points.getchildat(1).getleft() - ll_points.getchildat(0)
.getleft());
}
});
//给开始体验按钮添加点击事件
bt_startexp.setonclicklistener(new onclicklistener() {
@override
public void onclick(view v) {
//保存设置的状态
sptools.setboolean(getapplicationcontext(), myconstants.issetup, true);//保存设置完成的状态
//进入主界面
intent main = new intent(guideactivity.this,mainactivity.class);
startactivity(main);//启动主界面
//关闭自己
finish();
}
});
//
vp_guids.setonpagechangelistener(new onpagechangelistener() {
@override
public void onpageselected(int position) {
//当前viewpager显示的页码
//如果viewpager滑动到第三页码（最后一页），显示button
if (position == guids.size() - 1) {
bt_startexp.setvisibility(view.visible);//设置按钮的显示
} else {
//隐藏该按钮
bt_startexp.setvisibility(view.gone);
}
}
@override
public void onpagescrolled(int position, float positionoffset,
int positionoffsetpixels) {
//
//
float leftmargin = dispoints * (position + positionoffset);
//
relativelayout.layoutparams layoutparams = (relativelayout.layoutparams) v_redpoint.getlayoutparams();
layoutparams.leftmargin = math.round(leftmargin);//
//
v_redpoint.setlayoutparams(layoutparams);
}
@override
public void onpagescrollstatechanged(int state) {
}
});
}
private void initdata() {
// viewpaper adapter适配器 list容器
// 图片的数据（数组）
int[] pics = new int[] { r.mipmap.img_guide_1, r.mipmap.img_guide_2,
r.mipmap.img_guide_3};
//定义viewpager使用的容器
guids = new arraylist<imageview>();
//创建viewpager的适配器
for (int i = 0; i < pics.length; i++) {
imageview iv_temp = new imageview(getapplicationcontext());
iv_temp.setbackgroundresource(pics[i]);
//添加界面的数据
guids.add(iv_temp);
//
view v_point = new view(getapplicationcontext());
// v_point.setbackgroundresource(r.drawable.gray_point);//红点背景色
int dip = 10;
//
layoutparams params = new layoutparams(densityutil.dip2px(getapplicationcontext(), dip), densityutil.dip2px(getapplicationcontext(), dip));// dp
//
//
if (i != 0)//
params.leftmargin = 47;//
v_point.setlayoutparams(params);//
//
ll_points.addview(v_point);
}
//
// 创建viewpager的适配器
adapter = new myadapter();
// 设置适配器
vp_guids.setadapter(adapter);
}
//viewpager的适配器
private class myadapter extends pageradapter
{
@override
public int getcount() {
return guids.size();// 返回数据的个数
}
@override
public boolean isviewfromobject(view arg0, object arg1) {
return arg0 == arg1;// 过滤和缓存的作用
}
@override
public void destroyitem(viewgroup container, int position, object object) {
container.removeview((view) object);//从viewpager中移除掉
}
@override
public object instantiateitem(viewgroup container, int position) {
// container viewpaper
//获取view
view child = guids.get(position);
// 添加view
container.addview(child);
return child;
}
}
private void initview() {
setcontentview(r.layout.activity_guide);
// viewpage组件
vp_guids = (viewpager) findviewbyid(r.id.vp_guide_pages);
// 动态加点容器
ll_points = (linearlayout) findviewbyid(r.id.ll_guide_points);
// 点
v_redpoint = findviewbyid(r.id.v_guide_redpoint);
//确定开始体验按钮
bt_startexp = (button) findviewbyid(r.id.bt_guide_startexp);
}
}
注、关于是否是第一次进入，实现方式比较简单，用过使用sharedpreferences保存使用状态，将他封装到工具类中便于使用！这里我就直接贴出sharedpreferences封装好的3个工具类了
（一）、
import android.content.context;
/**
* created by administrator on 2016/11/1 0001.
*/
public class densityutil {
public static int dip2px(context context, float dpvalue) {
final float scale = context.getresources().getdisplaymetrics().density;
return (int) (dpvalue * scale + 0.5f);
}
/**
*
*/
public static int px2dip(context context, float pxvalue) {
final float scale = context.getresources().getdisplaymetrics().density;
return (int) (pxvalue / scale + 0.5f);
}
}
（二）、
/**
* created by administrator on 2016/11/1 0001.
*/
public interface myconstants
{
string configfile = "cachevalue";//sp的文件名
string issetup = "issetup";//是否设置向导界面设置过数据
}
（三）、
import android.content.context;
import android.content.sharedpreferences;
/**
* created by administrator on 2016/11/1 0001.
*/
public class sptools {
public static void setboolean(context context, string key, boolean value){
sharedpreferences sp = context.getsharedpreferences(myconstants.configfile, context.mode_private);
sp.edit().putboolean(key, value).commit();//提交保存键值对
}
public static boolean getboolean(context context,string key,boolean defvalue){
sharedpreferences sp = context.getsharedpreferences(myconstants.configfile, context.mode_private);
return sp.getboolean(key, defvalue);
}
}
三、xml的布局实现
<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.viewpager
android:id="@+id/vp_guide_pages"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.viewpager>
<relativelayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignparentbottom="true"
android:layout_centerhorizontal="true"
android:layout_marginbottom="30dip" >
<linearlayout
android:id="@+id/ll_guide_points"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
</linearlayout>
<view
android:id="@+id/v_guide_redpoint"
android:layout_width="10dip"
android:layout_height="10dip"
android:layout_marginbottom="0.7dp"
android:background="@drawable/red_point" />
</relativelayout>
<button
android:id="@+id/bt_guide_startexp"
android:background="@drawable/btn_selector"
android:layout_alignparentbottom="true"
android:layout_centerhorizontal="true"
android:layout_marginbottom="45dip"
android:paddingtop="5dip"
android:paddingbottom="5dip"
android:paddingleft="10dip"
android:paddingright="10dip"
android:textcolor="@color/btn_colors"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="开始体验"
android:visibility="gone"
android:textsize="18sp" />
</relativelayout>
注、关于圆点、button按钮的状态、等ui效果的设置
（一）、自己画圆点，定义颜色
外面的大圆big_point.xml：
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <corners android:radius="5dip"></corners> <solid android:color="#ffffff"></solid> </shape>
里面的圆点small_point.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <corners android:radius="5dip"></corners> <solid android:color="#fff"></solid> </shape>
（二）、button的颜色、以及状态选择
背景状态选择器btn_selector.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 按钮按下的状态 --> <item android:drawable="@drawable/button_red_pressed" android:state_pressed="true"></item> <!-- 按钮松开的状态 --> <item android:drawable="@drawable/button_red_normal" android:state_pressed="false"></item> </selector>
文本颜色选择器btn_colors.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 按钮按下的状态 黑色 --> <item android:color="#000000" android:state_pressed="true"></item> <!-- 按钮松开的状态 白色 --> <item android:color="#ffffff" ></item> </selector>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Android studio 解决logcat无过滤工具栏的操作
Android Studio 恢复小窗口停靠模式(Docked Mode)
Android studio保存logcat日志到本地的操作
Android Studio快捷键生成TAG、Log.x日志输出介绍
网友评论