app 欢迎页的实现以及动画效果添加

最近公司app进行版本升级，这一版需要将欢迎页设置成动态的效果，ui直接给了gif图，但是gif图片太大，不太适合欢迎页来实现。。。可以用静态图自己根据动态效果来做一些动画操作。实现效果图如下：

一、实现思路

看到这种动态效果，可以使用viewpager 来进行实现，再对viewpager适配器中的子控件进行补间动画的缩放效果。

二、界面的布局效果

<?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:orientation="vertical">

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

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

    <LinearLayout
        android:id="@+id/ll_dots"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal"
        android:layout_marginBottom="31dp"
        android:paddingRight="@dimen/guide_dot_margin"
        android:orientation="horizontal"></LinearLayout>

    <ImageView
        android:id="@+id/iv_skip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:layout_marginTop="40dp"
        android:src="@drawable/skip" />

</RelativeLayout>
           

三、效果实现

1、先动态的创建viewpager切换需要的view

/**
     * 设置View布局
     */
    private void setGuideView() {
        views = new ArrayList();
        for (int position = 0; position < imgs.length; position++) {
            View view = View.inflate(this, R.layout.item_guide, null);
            ImageView ivBg = (ImageView) view.findViewById(R.id.iv_bg);
            ImageView ivTxt = (ImageView) view.findViewById(R.id.iv_txt);
            ImageView ivEnter = (ImageView) view.findViewById(R.id.iv_enter);
            ivBg.setImageResource(imgs[position]);
            views.add(view);
        }
    }
           

2、创建适配器并添加动态创建的view

public class GuideNewAdapter extends PagerAdapter {
    private final Context context;
    private List<View> views;

    public GuideNewAdapter(Context context, List<View> views) {
        this.context = context;
        this.views = views;
    }

    @Override
    public int getCount() {
        return views.size();
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(views.get(position));
        return views.get(position);
    }

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

3、添加动画效果

现在欢迎页也就有了静态的欢迎效果，我们需要在其中添加动画效果，这里我用了补间动画来实现，首先创建补间动画

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:fillAfter="true"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="1.3"
    android:toYScale="1.3"></scale>
           

来进行放大的效果，其次需要将开始播放补间动画，添加这几句代码就可以实现

ImageView imageview = (ImageView) views.get(position).findViewById(R.id.iv_bg);
        ScaleAnimation scaleAnimation = (ScaleAnimation) AnimationUtils.loadAnimation(this, R.anim.enlarge);
        imageview.startAnimation(scaleAnimation);
           

viewpager每次滑动实现一次动画效果，需要给viewpager设置监听并且再监听中设置这个动画的播放。。。

4、底部圆点的关联

到了这里欢迎页滑动的动态效果基本已经实现了，还需要在底部设置滑动时的dot关联，这个需要用在界面布局中的ll_dots来进行动态创建小圆点，并且和viewpager滑动关联起来。首先先动态创建和viewpager滑动相关的圆点：

/**
     * 动态添加点图
     */
    private void setDotsView() {
        for (int i = 0; i < views.size(); i++) {
            ImageView imageView = new ImageView(this);
            imageView.setImageResource(R.drawable.dots_selector);
            llDots.addView(imageView);
        }
    }
           

目前已经能看见界面底部的圆点，现在需要把圆点和viewpager关联起来，还是在viewpager 的监听的onPageSelected(int pos)来进行关联设置：

/**
     * 设置点图的状态切换
     *
     * @param position
     */
    private void scrollDotView(int position) {
        int childCount = llDots.getChildCount();
        for (int i = 0; i < childCount; i++) {
            ImageView imageview = (ImageView) llDots.getChildAt(i);
            if (i == position) {
                imageview.setEnabled(true);
            } else {
                imageview.setEnabled(false);
            }
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            layoutParams.leftMargin = UIUtils.getDimensResource(this, R.dimen.guide_dot_margin);
            imageview.setLayoutParams(layoutParams);
        }
    }
           

目前来说欢迎页的效果基本实现了，不过圆点的关联得记得在界面默认设置position=0 的时候的点图状态切换scrollDotView(0)。

完整代码地址：

【guide_app】https://github.com/cherry410/guide_app-master

四、bug添加

    最近再做项目测试的时候发现一个问题，切换的底部导航小圆点在6.0以上的机型没有问题，但是在5.0的机型就会发现出现变形问题，最后发现添加

<activity
    android:name=".ui.activity.GuideActivity"
    android:hardwareAccelerated="false"></activity>      

这个属性就解决这个问题，但是原因是什么，我还是不太清楚，有哪位大神知道可以分享下。。。