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);
}