APP引导页的实现

画了好久布局，终于让我写一个引导页的功能。难度不大，同样是记录下来，方便复习。


首先是布局文件，用viewpager实现的页面滑动。

<?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:background="@drawable/red_point" />
</RelativeLayout>

<Button
android:id="@+id/bt_guide_startexp"
android:background="#ff0000"
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="@drawable/btn_colors"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="开始体验"
android:visibility="gone"
android:textSize="18sp" />

</RelativeLayout>

代码实现

package com.sy.gudiedemo;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewTreeObserver;
import android.view.Window;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

import java.util.ArrayList;

public class MainActivity extends Activity {

private ViewPager vp_guids;
private LinearLayout ll_points;
private View v_redpoint;
private Button bt_startExp;
private ArrayList<ImageView> guids;
private MyAdapter adapter;
private int disPoints;//点与点之间的距离

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉标题
setContentView(R.layout.activity_main);
initView();// 初始化界面
initData();// 初始化数据
initEvent();// 初始化组件事件
}

private void initEvent() {
//监听布局完成 ，触发的结果
v_redpoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.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 View.OnClickListener() {

@Override
public void onClick(View v) {
//保存设置的状态
//进入主界面
//关闭自己
}
});

//给ViewPage添加页码改变的事件
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 {
//不是最后一页，隐藏该button按钮
bt_startExp.setVisibility(View.GONE);
}
}

/* (non-Javadoc)
* @see android.support.v4.view.ViewPager.OnPageChangeListener#onPageScrolled(int, float, int)
* 在页面滑动过程触发的事件
* @param position 当前ViewPage停留的位置
* @param positionOffset 偏移的比例值
* @param positionOffsetPixels 偏移的像素
*/
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {

//positionOffset 移动的比例值
//计算红点的左边距
float leftMargin = disPoints * (position + positionOffset);

//设置红点的左边距
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) v_redpoint.getLayoutParams();
layoutParams.leftMargin = Math.round(leftMargin);//对float类型四舍五入

//重新设置布局
v_redpoint.setLayoutParams(layoutParams);
}

@Override
public void onPageScrollStateChanged(int state) {

}
});
}

private void initData() {
// viewpaper adapter list
// 图片的数据
int[] pics = new int[]{R.mipmap.gudie_1, R.mipmap.gudie_2,
R.mipmap.gudie_3};

// 定义Viewpager使用的容器

guids = new ArrayList<ImageView>();

// 初始化容器中的数据
for (int i = 0; i < pics.length; i++) {
ImageView iv_temp = new ImageView(getApplicationContext());
iv_temp.setBackgroundResource(pics[i]);

// 添加界面的数据
guids.add(iv_temp);

// 给点的容器Linearlayout初始化添加灰色点
View v_point = new View(getApplicationContext());
v_point.setBackgroundResource(R.drawable.gray_point);
int dip = 10;
// 设置灰色点的大小
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(dip2px(getApplicationContext(), dip),

<span style="white-space:pre">								</span>             dip2px(getApplicationContext(), dip));
// 设置点与点直接的空隙
// 第一个点不需要指定
if (i != 0)// 过滤第一个点
params.leftMargin = 10;// px
v_point.setLayoutParams(params);// 无缝隙的挨一起

// 添加灰色的点到线性布局中
ll_points.addView(v_point);
}

// 界面没有布局前，点的位置是确定不了的，布局完成，再求出点直接的距离

// 创建ViewPager的适配器
adapter = new MyAdapter(guids);
// 设置适配器
vp_guids.setAdapter(adapter);
}

private void initView() {
// 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);
}

/**
* 根据手机的分辨率从 dip 的单位 转成为 px(像素)
*/
public static int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}

}

viewpager的适配器

package com.sy.gudiedemo;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.ArrayList;
import java.util.List;

/**
* Created by SY on 2016/3/26.
*/
public class MyAdapter extends PagerAdapter
{

private List<ImageView> guids;
MyAdapter(ArrayList<ImageView> list){
this.guids = list;
}

@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;
}

}

最后是画的小圆点红色和灰色都是一样的

<?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="#ff0000"></solid>
</shape>

代码不难，主要方法都有注释，就这样了。