android 项目学习随笔二（引导页 ）

1、引导页

1、定义灰色、红色圆点的shape XML文件

2、定义布局文件，利用相对布局文件定位，利用线性布局加载灰色圆点，imageview加载红色圆点

3、android.support.v4.view.ViewPager实现图片切换

4、利用数组存入背景图片

private int[] mImageIds = new int[] { R.drawable.guide_1,
R.drawable.guide_2, R.drawable.guide_3 };

5、private ArrayList<ImageView> mImageViewList存入要显示的VIEW

6、利用线性布局参数设置圆点距离

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
if (i > 0) {
params.leftMargin = 8;// 从第二个点开始设置边距
}

pointView.setLayoutParams(params);

7、页面绘制结束之后, 计算两个圆点的间距

ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(
new OnGlobalLayoutListener() {

8、红色圆点滚动

mViewPager.setOnPageChangeListener(new OnPageChangeListener() 

<?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_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="25dp" >

        <LinearLayout
            android:id="@+id/ll_container"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
        </LinearLayout>

        <ImageView
            android:id="@+id/iv_red_point"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/shape_circle_selected" />
    </RelativeLayout>

    <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="60dp"
        android:background="@drawable/btn_guide_selector"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:text="开始体验"
        android:textColor="@color/txt_guide_selector"
        android:visibility="gone" >
    </Button>

</RelativeLayout>

import java.util.ArrayList;

import com.itheima.zhsh66.utils.PrefUtils;

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.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

/**
 * 新手引导
 * 
 * @author Kevin
 * @date 2015-8-10
 */
public class GuideActivity extends Activity implements OnClickListener {

    private ViewPager mViewPager;
    private LinearLayout llContainer;
    private ImageView ivRedPoint;// 小红点
    private Button btnStart;

    private int[] mImageIds = new int[] { R.drawable.guide_1,
            R.drawable.guide_2, R.drawable.guide_3 };

    private ArrayList<ImageView> mImageViewList;

    private int mPointWidth;// 两个圆点的宽度

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 去掉标题, 必须在setContentView之前执行
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_guide);
        mViewPager = (ViewPager) findViewById(R.id.vp_pager);
        llContainer = (LinearLayout) findViewById(R.id.ll_container);
        ivRedPoint = (ImageView) findViewById(R.id.iv_red_point);
        btnStart = (Button) findViewById(R.id.btn_start);
        btnStart.setOnClickListener(this);

        // 初始化ImageView
        mImageViewList = new ArrayList<ImageView>();
        for (int i = 0; i < mImageIds.length; i++) {
            ImageView view = new ImageView(this);
            view.setBackgroundResource(mImageIds[i]);
            mImageViewList.add(view);

            // 初始化圆点
            ImageView pointView = new ImageView(this);
            pointView.setImageResource(R.drawable.shape_circle_default);

            // 初始化圆点布局参数
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT);
            if (i > 0) {
                params.leftMargin = 8;// 从第二个点开始设置边距
            }

            pointView.setLayoutParams(params);

            llContainer.addView(pointView);
        }

        mViewPager.setAdapter(new MyAdapter());

        // 页面绘制结束之后, 计算两个圆点的间距
        // 视图树
        ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(
                new OnGlobalLayoutListener() {

                    // layout方法执行结束(位置确定)
                    @Override
                    public void onGlobalLayout() {
                        // 移除监听
                        ivRedPoint.getViewTreeObserver()
                                .removeGlobalOnLayoutListener(this);

                        // 获取两个圆点的间距
                        mPointWidth = llContainer.getChildAt(1).getLeft()
                                - llContainer.getChildAt(0).getLeft();
                        System.out.println("" + mPointWidth);
                    }
                });

        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                if (position == mImageIds.length - 1) {// 最后页面显示开始体验
                    btnStart.setVisibility(View.VISIBLE);
                } else {
                    btnStart.setVisibility(View.GONE);
                }
            }

            // 页面滑动过程的回调
            @Override
            public void onPageScrolled(int position, float positionOffset,
                    int positionOffsetPixels) {
                System.out.println("当前位置:" + position + ";偏移百分比:"
                        + positionOffset);
                // 计算当前小红点的左边距
                int leftMargin = (int) (mPointWidth * positionOffset + position
                        * mPointWidth);

                // 修改小红点的左边距
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) ivRedPoint
                        .getLayoutParams();
                params.leftMargin = leftMargin;
                ivRedPoint.setLayoutParams(params);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    class MyAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return mImageIds.length;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            // ImageView view = new ImageView(getApplicationContext());
            // view.setBackgroundResource(mImageIds[position]);
            ImageView view = mImageViewList.get(position);
            container.addView(view);

            return view;
        }

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

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.btn_start:
            // 开始体验
            // 记录新手引导已经被展示的状态,下次启动不再展示
            PrefUtils.putBoolean("is_guide_show", true, this);
            startActivity(new Intent(this, MainActivity.class));
            finish();
            break;

        default:
            break;
        }
    }
}

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

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

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

</shape>

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

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

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

</shape>