ViewPager欢迎界面到引导界面的的实现之一

ViewPager欢迎界面到引导界面的的实现

打开软件，弹出一个动画，动画结束到引导界面

先来实现欢迎界面动画的实现：

RelativeLayout mRelatineLayout=(RelativeLayout) findViewById(R.id.mRelatineLayout);

//开启动画
AnimationSet set=new AnimationSet(false);
/**
* 旋转动画
*/
RotateAnimation mRotateAnimation=new  RotateAnimation(0, 360,
Animation.RELATIVE_TO_SELF,0.5f, Animation.RELATIVE_TO_SELF,0.5f);
mRotateAnimation.setFillEnabled(true);
mRotateAnimation.setFillAfter(true);
mRotateAnimation.setDuration(1000);

/**
* 透明渐变色
*/
AlphaAnimation mAlphaAnimation=new AlphaAnimation(0, 1.0f);
mAlphaAnimation.setDuration(1000);

/**
* 缩放
*/
ScaleAnimation mScaleAnimation=new ScaleAnimation(0, 1.0f, 0, 1.0f,
Animation.RELATIVE_TO_SELF,0.5f, Animation.RELATIVE_TO_SELF,0.5f);
mScaleAnimation.setDuration(1000);

//添加动画
set.addAnimation(mRotateAnimation);
set.addAnimation(mAlphaAnimation);
set.addAnimation(mScaleAnimation);

/**
* 开启动画
*/
mRelatineLayout.startAnimation(set);
set.setAnimationListener(new AnimationListener() {
//动画开始时执行此方法
@Override
public void onAnimationStart(Animation animation) {

}
//动画重复执行此方法
@Override
public void onAnimationRepeat(Animation animation) {

}
//动画结束执行此方法
@Override
public void onAnimationEnd(Animation animation) {

//第一次安装这款软件在动画结束时跳转到引导界面，第二次打开就没有引导界面了

}
});

引导界面的实现：

引导界面的布局：

<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/guird_pager"
>
</android.support.v4.view.ViewPager>

<Button
android:id="@+id/btn_start_button"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:text="开始体验"
android:textColor="@color/guird_text_color"
android:visibility="gone"
android:background="@drawable/guird_btn_backgrounp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="40dp"
/>

</RelativeLayout>

引导界面具体类的实现：

public class GuirdActivity extends Activity implements OnPageChangeListener {
private ViewPager mViewPager;
private Button mButton;
private List<ImageView> mList;
private static int items[]={R.drawable.guide_1,R.drawable.guide_2,R.drawable.guide_3};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//取消标题
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_guird);
mViewPager=(ViewPager) findViewById(R.id.guird_pager);
mButton=(Button) findViewById(R.id.btn_start_button);
initData();
}
/**
* 初始化数据
*/
@SuppressWarnings("deprecation")
private void initData() {
mList = new ArrayList<ImageView>();
for(int i=0;i<items.length;i++){
//新建ImageView
ImageView iv=new ImageView(this);
iv.setImageResource(items[i]);
//填充屏幕
iv.setScaleType(ScaleType.FIT_XY);
mList.add(iv);
}
//给viewpager设置适配器adapter-----list
mViewPager.setAdapter(new GuirdViewPagerAdapter());
//滑动页面改变的监听器
mViewPager.setOnPageChangeListener(this);
}

给viewpager设置适配器adapter—–list

mViewPager.setAdapter(new GuirdViewPagerAdapter());

ViewPager设置的适配器：四个常见的方法

/**
* viewpageer的适配器
* @author Administrator
*
*/
class GuirdViewPagerAdapter extends PagerAdapter{

@Override
public int getCount() {
if(mList!=null){return mList.size();}
return 0;
}

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

}
/**
* 销毁一个页卡
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
//从viewpager中移除imageview
ImageView iv=mList.get(position);
container.removeView(iv);
}
/**
* 实例化一个页卡
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {

ImageView iv=mList.get(position);
//添加到viewpager中container就是viewpager
container.addView(iv);
return iv;
}
}

设置ViewPager页面的选择监听器

mViewPager.setOnPageChangeListener(this);

让类实现接口 OnPageChangeListener 则实现接口里面的方法如下：

//在当滑动状态改变时的回调
@Override
public void onPageScrollStateChanged(int arg0) {

}

//正在滑动的时候回调
//position当前所处的页面
//positionset 百分比
//arg2 滑动时的具体距离
@Override
public void onPageScrolled(int position, float positionoffset, int arg2) {

}

//当viewpager某个页面选中时回调
//@position当前选中的页面
@Override
public void onPageSelected(int position) {
//设置只有滑动到最后一个页面时才显示按钮
mButton.setVisibility((position==mList.size()-1?View.VISIBLE:View.GONE));
}

到这里欢迎界面和引导界面已经完成了，那么是如何实现两个界面之间的连接的呢？

还记得欢迎界面的动画吗，在动画结束时会调用这么一个方法：

//动画结束执行此方法
@Override
public void onAnimationEnd(Animation animation) {

//第一次安装这款软件在动画结束时跳转到引导界面，第二次打开就没有引导界面了

}

而我们就是在这个方法里面实现界面的跳转。

引导页面的静态点怎么实现

//往LinearLayout布局中添加静态点

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

在主活动中：

LinearLayout  mLinearLayout=(LinearLayout) findViewById(R.id.ll_guird_point);

//动态添加一个点
View point=new View(this);
point.setBackgroundResource(R.drawable.guird_point_normal);
LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(30, 30);
//居中
if(i!=0){//第一个页面不用左边距
params.leftMargin=15;
}
mLinearLayout.addView(point, params);

画出一个点的布局：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">//圆形
//半径
<corners android:radius="5dp"/>
//填充的颜色
<solid  android:color="#cccccc"/>

</shape>

动态点的实现：

在原有的LinearLayout中外围添加一个RelaterLayout，里面添加一个View加载动态的点

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

<!--  加点的容器 -->
<LinearLayout
android:id="@+id/ll_guird_point"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
</LinearLayout>

<View
android:id="@+id/re_point_selected"
android:layout_width="15dp"
android:layout_height="15dp"
android:background="@drawable/guird_point_selectedl" />
</RelativeLayout>

动态点的颜色选择器

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

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

</shape>

在初始化数据之后initData()加上下面几句：

//初始化控件，动态换红点
View  mPointSelect=(View) findViewById(R.id.re_point_selected);

initData()；
//计算点于点之间的布局
mPointSelect.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
//当整个UI的数布局改变的时候调用
if(mList==null){
return ;
}
//监听一次
mPointSelect.getViewTreeObserver().removeGlobalOnLayoutListener(this);
mSpace = mLinearLayout.getChildAt(1).getLeft()-mLinearLayout.getChildAt(0).getLeft();
}
});

最后在滑动监听调用的方法中：

//正在滑动的时候回调
//position当前所处的页面
//positionset 百分比
//arg2 滑动时的具体距离
@Override
public void onPageScrolled(int position, float positionoffset, int arg2) {
//1、对滑动的做操作

RelativeLayout.LayoutParams params= (android.widget.RelativeLayout.LayoutParams) mPointSelect.getLayoutParams();
//2、设置marginLeft
params.leftMargin=(int) (mSpace*position+mSpace*positionoffset+0.5f);

mPointSelect.setLayoutParams(params);
}