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>

XML

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("width:" + 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;        }    }}

View Code

<?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>

/zhsh/res/drawable/shape_circle_default.xml

<?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>

/drawable/shape_circle_selected.xml