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("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; } } }
<?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>
