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>

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