新手引导页-ViewPager
知识点：
ViewPager
Button-Selector
getViewTreeObserver视图树
在splash闪屏动画结束之后，进入手机新手引导页，效果图;
一共有三张图，前两张相同，第三张有一个开始体验按钮。
布局分析：
使用Relativelayout进行总体布局，三张图片使用ViewPager进行布局，并添加一个按钮，在前两页进行隐藏，在第三页进行显示。
下面三个小灰点儿使用Linerlayout进行线性布局，并将LinerLayout嵌套在一个RelativeLayout中，使小红点压在小灰点儿上。
最后根据检测ViewPager滑动事件来进行操作小红点的位置。
整体XML文件：
<?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"
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="25dp"
android:background="@drawable/btn_guide_selector"
android:textColor="@drawable/text_guide_selector"
android:padding="5dp"
android:visibility="invisible"
android:text="开始体验" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp" >
<LinearLayout
android:id="@+id/ll_point_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
</LinearLayout>
<View
android:id="@+id/view_red_point"
android:layout_width="10dp"
android:layout_height="10dp"
android:background="@drawable/shape_point_red"
/>
</RelativeLayout>
</RelativeLayout>
第一步：为ViewPager添加图片
1 数据初始化：
private static final int[] mImageIds = new int[] {
R.drawable.guide_1,R.drawable.guide_2,R.drawable.guide_3
};
private ViewPager vpguide;
private ArrayList<ImageView> mImageViewList;
mImageViewList =new ArrayList<ImageView>();
for(int i=0;i<mImageIds.length;i++)
{
ImageView image = new ImageView(this);
image.setBackgroundResource(mImageIds[i]);
mImageViewList.add(image); //将图片信息储存在ArrayList中
}
2 ViewPager适配器
class GuideAdapter extends PagerAdapter{
@Override
public int getCount() { // 得到图片的数量
// TODO Auto-generated method stub
return mImageIds.length;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) { //用来比较已存入的图片信息，进而当页面发生变化时，进行图片查找
// TODO Auto-generated method stub
return arg0==arg1;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
//把图片放入到container容器中。
container.addView(mImageViewList.get(position));
System.out.println("当前创建图片是： "+position);
return mImageViewList.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
System.out.println("destroy : "+position+" 图片！");
//销毁时，将页面删除掉
container.removeView((View) object);
//super.destroyItem(container, position, object);
}
}
3 设置适配器
vpguide.setAdapter(new GuideAdapter()); vpguide.setOnPageChangeListener(new GuidePagelistener());
第二步：button设置
Button在没有被点击时，是白色字体，红色背景。在被点击时，是黑色字体，黄色背景。
由于存在着状态切换，所以使用Selector来实现这个功能。
字体颜色的切换：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" android:color="@android:color/black"/>
<item android:color="@android:color/white"/>
</selector>
背景的切换：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" android:drawable="@drawable/button_red_pressed"/>
<item android:drawable="@drawable/button_red_normal"/>
</selector>
可以看到最终的切换实现是在XML中实现的：
android:background="@drawable/btn_guide_selector"
android:textColor="@drawable/text_guide_selector"
第三步：设置动态小点滑动效果
先声明LinerLayout布局：
<LinearLayout
android:id="@+id/ll_point_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
</LinearLayout>
绘制灰色小点儿，并填充到LinerLayout中：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="@android:color/darker_gray"/>
</shape>
获得LinerLayout布局id: llpointgroup=(LinearLayout) findViewById(R.id.ll_point_group);
//初始化引导页的小圆点
for(int i=0;i<mImageIds.length;i++)
{
View point = new View(this);
LinearLayout.LayoutParams params= new LinearLayout.LayoutParams(10, 10);
if(i>0)
{
params.leftMargin=10;
}
point.setLayoutParams(params);//设置圆点的大小
point.setBackgroundResource(R.drawable.shape_point_gray); //将灰色小点儿添加到LinearLayout中
llpointgroup.addView(point);//将圆点添加给线性布局
}
这样就在拥有了三个灰色小点儿。
同样的方式绘制一个红色小点儿，并压在第一个灰色小点儿上。实现方式是将LinearLayout嵌套在RelativeLayout上，并根据ViewPager滑动事件来动态挪动小红点的位置，来实现动态效果。
红色小点儿：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@android:color/holo_red_light" />
</shape>
获得红点id :viewRedPoint=findViewById(R.id.view_red_point);
总体XML: <RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp" >
<LinearLayout
android:id="@+id/ll_point_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
</LinearLayout>
<View
android:id="@+id/view_red_point"
android:layout_width="10dp"
android:layout_height="10dp"
android:background="@drawable/shape_point_red"
/>
</RelativeLayout>
在viewpager滑动监听事件中进行监听，实现动态变换：
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) { //滑动变化
System.out.println("arg0 ： "+arg0+" ;arg1 : "+arg1+";arg2 : "+arg2);
int len = (int)(mPointWidth*arg1)+mPointWidth*arg0;
//获取当前红点的参数
RelativeLayout.LayoutParams layoutparams = (RelativeLayout.LayoutParams)viewRedPoint.getLayoutParams();
layoutparams.leftMargin=len; //设置左边距
viewRedPoint.setLayoutParams(layoutparams);//重新为小圆点设置边距
}
整体GuideActivity:
package com.example.zhihuibj;
import java.util.ArrayList;
import android.app.Activity;
import android.content.Intent;
import android.content.SharedPreferences;
import android.graphics.LinearGradient;
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.LinearLayout.LayoutParams;
import android.widget.RelativeLayout;
public class GuideActivity extends Activity{
private static final int[] mImageIds = new int[] {
R.drawable.guide_1,R.drawable.guide_2,R.drawable.guide_3
};
private ViewPager vpguide;
private ArrayList<ImageView> mImageViewList; //使用ArrayList储存图片
private LinearLayout llpointgroup; //引导圆点的父控件
private int mPointWidth;//两个圆点之间的距离
private View viewRedPoint; //小红点
private Button btnstart;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
//去掉标题栏
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_guide);
llpointgroup=(LinearLayout) findViewById(R.id.ll_point_group);
vpguide = (ViewPager)findViewById(R.id.vp_guide); //得到ViewPager控件
viewRedPoint=findViewById(R.id.view_red_point);
btnstart=(Button)findViewById(R.id.btn_start);
//初始化数据
InitViews();
//设置适配器
vpguide.setAdapter(new GuideAdapter());
vpguide.setOnPageChangeListener(new GuidePagelistener());
btnstart.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
//更新sp,表示已经更新了新手引导页
SharedPreferences sp = getSharedPreferences("config", MODE_PRIVATE);
sp.edit().putBoolean("is_user_guide_showed", true).commit();
startActivity(new Intent(GuideActivity.this, MainActivity.class));
finish();
}
});
}
private void InitViews()
{
mImageViewList =new ArrayList<ImageView>();
for(int i=0;i<mImageIds.length;i++)
{
ImageView image = new ImageView(this);
image.setBackgroundResource(mImageIds[i]);
mImageViewList.add(image); //将图片信息储存在ArrayList中
}
//初始化引导页的小圆点
for(int i=0;i<mImageIds.length;i++)
{
View point = new View(this);
LinearLayout.LayoutParams params= new LinearLayout.LayoutParams(10, 10);
if(i>0)
{
params.leftMargin=10;
}
point.setLayoutParams(params);//设置圆点的大小
point.setBackgroundResource(R.drawable.shape_point_gray); //将灰色小点儿添加到LinearLayout中
llpointgroup.addView(point);//将圆点添加给线性布局
}
//获取视图树：目的是获得小圆点的间距
llpointgroup.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
System.out.println("绘图结束！");
llpointgroup.getViewTreeObserver().removeOnGlobalLayoutListener(this);;
mPointWidth = llpointgroup.getChildAt(1).getLeft()-llpointgroup.getChildAt(0).getLeft();
System.out.println("width"+mPointWidth+"");
}
});
}
class GuidePagelistener implements OnPageChangeListener{
@Override
public void onPageScrollStateChanged(int arg0) { // 状态变化
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) { //滑动变化
System.out.println("arg0 ： "+arg0+" ;arg1 : "+arg1+";arg2 : "+arg2);
int len = (int)(mPointWidth*arg1)+mPointWidth*arg0;
//获取当前红点的参数
RelativeLayout.LayoutParams layoutparams = (RelativeLayout.LayoutParams)viewRedPoint.getLayoutParams();
layoutparams.leftMargin=len; //设置左边距
viewRedPoint.setLayoutParams(layoutparams);//重新为小圆点设置边距
}
@Override
public void onPageSelected(int arg0) { //选中变化
if(arg0==mImageIds.length-1)
{
btnstart.setVisibility(View.VISIBLE);
}
else
{
btnstart.setVisibility(View.INVISIBLE);
}
}
}
class GuideAdapter extends PagerAdapter{
@Override
public int getCount() { // 得到图片的数量
// TODO Auto-generated method stub
return mImageIds.length;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) { //用来比较已存入的图片信息，进而当页面发生变化时，进行图片查找
// TODO Auto-generated method stub
return arg0==arg1;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
//把图片放入到container容器中。
container.addView(mImageViewList.get(position));
System.out.println("当前创建图片是： "+position);
return mImageViewList.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
System.out.println("destroy : "+position+" 图片！");
//销毁时，将页面删除掉
container.removeView((View) object);
//super.destroyItem(container, position, object);
}
}
}
/*
* 所有的点击变化都可以使用选择器selector进行设定
*/