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>

這個屬性就解決這個問題，但是原因是什麼，我還是不太清楚，有哪位大神知道可以分享下。。。