初次启动App进入引导页面自定义圆点的实现

初次启动App进入引导页面自定义圆点的实现

    转载请注明出处:[http://blog.csdn.net/cz9025/article/details/52263600](http://blog.csdn.net/cz9025/article/details/52263600)

    一般我们使用的引导页面下方显示的圆点都由UI帮我们设计好，但在使用时总感觉不是那么美好，遂自定义显示圆点，多么的高大上！实现的代码如下：
 主页面代码：

import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends Activity {
    private Context context;
    private ViewPager vp_pager;
    /** 立即体检按钮 */
    private Button btn_start;
    /** 小圆点 */
    private LinearLayout ll_point;
    /** 显示引导页的拖 */
    int[] ids = new int[] { R.drawable.guide_1, R.drawable.guide_2, R.drawable.guide_3 };
    /** 创建一个集合，用于存放要显示的图片 */
    private List<ImageView> list;
    /** 记录上一次的位置 */
    private int lastposition;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        context = this;
        vp_pager = (ViewPager) findViewById(R.id.vp_pager);
        ll_point = (LinearLayout) findViewById(R.id.ll_point);
        btn_start = (Button) findViewById(R.id.btn_start);
        /** 初始化布局 */
        initView();
        /** 创建一个适配器 */
        vp_pager.setAdapter(new MyPagerAdapter());
        /** 页面滑动监听 */
        vp_pager.addOnPageChangeListener(new MyOnPageChangeListener());
        btn_start.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                /**
                 * 写要跳转的页面
                 */
            }
        });
    }

    private void initView() {
        list = new ArrayList<ImageView>();
        for (int i = 0; i < ids.length; i++) {
            ImageView iv = new ImageView(context);
            // 设置背景图片
            iv.setBackgroundResource(ids[i]);
            list.add(iv);
            // 设置小圆点
            ImageView point = new ImageView(context);
        point.setBackgroundResource(R.drawable.point_select);
            // 初始化布局参数，宽高包裹内容
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(-2, -2);
            //第1个位置处不距离左边20dp，否则会导致整体向右移动了20dp
            if (i > 0){
                params.leftMargin = 20;
            }
            // 设置为谁的儿子
            point.setLayoutParams(params);
            ll_point.addView(point);
            // 位置为0时默认显示红点
            if (i == 0) {
                point.setEnabled(true);
            } else {
                point.setEnabled(false);
            }
        }
    }

    private class MyPagerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            // TODO 总数
            return list.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            // TODO 建议这样
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            // TODO 初始化布局
            ImageView view = list.get(position);
            container.addView(view);

            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            // 销毁
            container.removeView((View) object);
        }

    }

    private class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            // TODO 当页面滑动过程中的回调

        }

        @Override
        public void onPageSelected(int position) {
            // TODO 某个页面被选中时回调
            // 当前页面时，设置为红点
            ll_point.getChildAt(position).setEnabled(true);
            // 其他页面取消显示红点
            ll_point.getChildAt(lastposition).setEnabled(false);
            lastposition = position;
            // 当页面滑动到最后一页时，显示出立即体检按钮，否则不显示
            if (position == ids.length - 1) {
                btn_start.setVisibility(View.VISIBLE);
            } else {
                btn_start.setVisibility(View.INVISIBLE);
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            // TODO 页面状态发生变化的回调
        }
    }
}

对应的xml布局文件:

<RelativeLayout 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" >

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <Button
        android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="80dp"
        android:visibility="invisible"
        android:text="开始体检"
        android:textSize="18sp" />

    <LinearLayout
        android:id="@+id/ll_point"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="50dp"
        android:orientation="horizontal" >
    </LinearLayout>

</RelativeLayout>

设置圆点的大小形状颜色：
已选中状态，我这里设置为红色，大小颜色可自定义

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <solid android:color="#ff0000" />

    <size
        android:height="10dp"
        android:width="10dp" />

</shape>

未选中状态：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <solid android:color="#cccccc" />

    <size
        android:height="10dp"
        android:width="10dp" />

</shape>

使用圆点：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/point_current_status" android:state_enabled="true"></item>
    <item android:drawable="@drawable/point_others_status" android:state_enabled="false"></item>

</selector>

“立即体检”按钮的事件就不写了，一般是跳转到主页面，用Intent就行了。
实现的效果图：第一个箭头处的圆点为图片自带，第二个为自定义。
![第二个箭头处为自定义的圆点](https://img-blog.csdn.net/20160820211536149)

这样，左右滑动页面时，圆点不会跟随图片一起滑动了！

完