闪屏页动画结束后跳转到引导页ViewPager

最新推荐文章于 2018-05-17 10:52:23 发布

原创最新推荐文章于 2018-05-17 10:52:23 发布 · 946 阅读

0 ·

CC 4.0 BY-SA版权

闪屏页：闪屏页布局里添加背景图片，如果背景是纯色的，再添加一个imageView控件来添加图片。

给布局添加一个ID。用来在activity中找到布局来设置动画。

在activity的setContentView之前执行

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

这句代码，可以去掉屏幕的时间栏从而充满屏幕。

RotateAnimation rotate = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotate.setDuration(2000);
rotate.setFillAfter(true);//表示动画2秒后定住而不回到原位

ScaleAnimation scale = new ScaleAnimation(0, 1, 0, 1, Animation.RELATIVE_TO_SELF, 0.5f);
scale.setDuration(2000);
scale.setFillAfter(true);

AlphaAnimation alpha = new AlphaAnimation(0, 1);
alpha.setDuration(2000);
alpha.setFillAfter(true);

AnimationSet set = new AnimationSet(true);
set.addAnimation(rotate);
set.addAnimation(scale);
set.addAnimation(alpha);

holder.rl_splash.startAnimation(set);

这里添加旋转、缩放、渐变动画。旋转动画的参数是：从0°旋转360°，相对于自己旋转，0.5f（XY）表示中心。缩放动画的参数是：从0缩放到1（XY），相对于自己缩放，0.5f表示中心。渐变动画参数是：从0到1透明到不透明。要同时执行三个动画需要用到AnimationSet将三个动画添加进来。最后调用闪屏页布局startAnimation传入set执行动画。

闪屏页动画结束后要跳转到引导页ViewPager。所以给闪屏页设置一个动画监听setAnimationListener。

set.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {

        }

        @Override
        public void onAnimationEnd(Animation animation) {
            startActivity(new Intent(getApplicationContext(),ViewPagerActivity.class));
            finish();
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    });
}

其中onAnimationEnd方法表示动画结束后执行，这里写入跳转页面逻辑并finish销毁当前闪屏页。

引导页ViewPager：

在ViewPager页布局中添加ViewPager控件。

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</android.support.v4.view.ViewPager>

因为引导页下面有圆圈表示当前滑动到第几页。所以用shape定义出未选中的圆圈样式及选中的样式。在drawable文件下创建文件。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size android:width="20dp" android:height="20dp" />
    <solid android:color="#3000" />
</shape>

shape设置为oval椭圆的意思，size设置宽高大小，solid设置颜色。

引导页除了要有圆圈表示当前第几页之外，还需要滑动到最后一页时展示出一个按钮，用户点击后跳转到应用主页面。所以在布局中ViewPager下面添加：

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="40dp">
    <LinearLayout
        android:id="@+id/vp_ll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        >
    </LinearLayout>
    <ImageView
        android:id="@+id/vp_iv_selected"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/shape_circle_select"/>
</RelativeLayout>



<Button
    android:id="@+id/vp_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="立即开启"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="100dp"
    android:visibility="gone"/>

用一个相对布局里面嵌套一个水平的线性布局以及一个ImageView圆圈选中样式。线性布局中用来动态添加需要展示多少个圆圈，而imageView圆圈选中将会覆盖线布局中的第一个圆圈，接着设置该imageView的滑动就可以实现ViewPager滑动时圆圈跟着滑动。

接着在引导页activity中定义数据

init_view();
list = new ArrayList<ImageView>();
ids = new int[]{R.drawable.guide_2, R.drawable.guide_3};
for (int i=0; i<ids.length; i++){
    ImageView imageView = new ImageView(getApplicationContext());
    imageView.setImageResource(ids[i]);
    list.add(imageView);

    ImageView defaultView = new ImageView(this);
    LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ActionBar.LayoutParams.WRAP_CONTENT);
    if (i > 0){
        layoutParams.leftMargin=10;
    }
    defaultView.setLayoutParams(layoutParams);
    defaultView.setImageResource(R.drawable.shape_circle_default);
    holder.vp_ll.addView(defaultView);

}

将ViewPager要展示的图片通过循环放在集合中，以便后面适配器中使用。还要在循环中创建出圆圈，new出控件后设置宽高，如果不是第一个圆圈则设置距离左边10dp。这样圆圈之间就不会太紧密，最后设置样式，添加到线性布局中。

创建ViewPager适配器：

public class MyViewPagerAdapter extends PagerAdapter {
    private ArrayList<ImageView> list;
    public MyViewPagerAdapter(ArrayList<ImageView> list){
        this.list = list;
    }
    @Override
    public int getCount() {
        return list.size();
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView imageView = list.get(position);
        container.addView(imageView);
        return imageView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
        super.destroyItem(container, position, object);
    }
}

实现两个方法之后还需要实现instantiateItem和destroyItem方法。创建一个构造方法将刚刚放了图片的集合传进来。之所以将图片放在集合是因为ViewPager滑动加载图片的时候每次都会执行instantiateItem方法，放在集合的话就不用该方法中一次又一次的new出imageView对象。在该方法中获取该位置的对象添加到container中并返回该对象。

destroyItem则是滑动下一张后销毁当前这张，container的removeView方法中传入object参数就行强转为View。

接着ViewPager控件添加该适配器：

holder.viewpager.setAdapter(new MyViewPagerAdapter(list));

接下来难点在于ViewPager滑动时选中的ImageView要跟着滑动。逻辑是：给ViewPager添加一个页面变化监听，获取圆圈到圆圈的距离也就是获取第二个圆圈的左边距减去第一个圆圈的左边距，获取到该距离后随着页面滑动的参数我们再将选中的imageView设置marginLeft即可实现圆圈滑动。要获取圆圈到圆圈的距离需要在线性布局动态添加圆圈完成后才可以获取到，这里用视图树观察者来添加监听保证视图绘制完成：

holder.vp_iv_selected.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    @Override
    public void onGlobalLayout() {
        holder.vp_iv_selected.getViewTreeObserver().removeOnGlobalLayoutListener(this);
        pointWidth = holder.vp_ll.getChildAt(1).getLeft() - holder.vp_ll.getChildAt(0).getLeft();
    }
});

获取到距离后可以取消监听。

最后给ViewPager设置页面改变监听：

holder.viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        int leftMargin = (int) (pointWidth * positionOffset + position * pointWidth);
        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) holder.vp_iv_selected.getLayoutParams();
        layoutParams.leftMargin = leftMargin;
        holder.vp_iv_selected.setLayoutParams(layoutParams);
    }

    @Override
    public void onPageSelected(int position) {
        if (position == ids.length -1){
            holder.vp_btn.setVisibility(View.VISIBLE);
        }else {
            holder.vp_btn.setVisibility(View.GONE);
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
});