高级UI-自定义动画框架

有的时候会需要做一些自定义的动画效果，在会反复用到的动画效果可以考虑做成动画框架，方便使用，做成框架的话就需要考虑很多的问题，最典型的问题就是属性和方法必须要是可配置的，这里就来聊一聊自定义动画框架的做法

重难点分析

在自定义动画框架里面，最难的一个问题就是怎么样获得属性，如果直接写自定义的属性，那么编译时候就会报错了，那么自然就想到了在外层包裹自定义的属性，通过处理自定义的属性来得到，这样便是android源代码一些控件的解决办法，其实就是一招偷梁换柱，在处理的时候，如果是自定义的属性，就自己处理，如果不是自定义的属性，就交由系统处理，然后在addView上再做手脚，另外从xml的解析入手，可以自定义LayoutInflater，然后重写onCreateView()，在里面就可以完成偷梁换柱，故这里有两种方法可以完成

在addView时候拦截做法

这里做一个滑动的自定义动画

在滑动的View里面，需要实现滑动时候和重置的工作，这里有一个接口，及实现接口的方法来做

public interface DiscrollvableInterface {

    //当滑动的时候调用该方法，用来控制里面的控件执行相应的动画

    void onDiscrollve(float ratio);

    //重置view的属性----恢复view的原来属性

    void onResetDiscrollve();

}

实现上面的接口

public class DiscrollvableView extends FrameLayout implements DiscrollvableInterface {

    private static final int TRANSLATION_FROM_TOP = 0x01;

    private static final int TRANSLATION_FROM_BOTTOM = 0x02;

    private static final int TRANSLATION_FROM_LEFT = 0x04;

    private static final int TRANSLATION_FROM_RIGHT = 0x08;

    //颜色估值器

    private static ArgbEvaluator sArgbEvaluator = new ArgbEvaluator();

    //自定义属性的一些接收的变量

    private int mDiscrollveFromBgColor;//背景颜色变化开始值

    private int mDiscrollveToBgColor;//背景颜色变化结束值

    private boolean mDiscrollveAlpha;//是否需要透明度动画

    private int mDisCrollveTranslation;//平移值

    private boolean mDiscrollveScaleX;//是否需要x轴方向缩放

    private boolean mDiscrollveScaleY;//是否需要y轴方向缩放

    private int mHeight;//本view的高度

    private int mWidth;//宽度

    public void setmDiscrollveFromBgColor(int mDiscrollveFromBgColor) {

        this.mDiscrollveFromBgColor = mDiscrollveFromBgColor;

    }

    public void setmDiscrollveToBgColor(int mDiscrollveToBgColor) {

        this.mDiscrollveToBgColor = mDiscrollveToBgColor;

    }

    public void setmDiscrollveAlpha(boolean mDiscrollveAlpha) {

        this.mDiscrollveAlpha = mDiscrollveAlpha;

    }

    public void setmDisCrollveTranslation(int mDisCrollveTranslation) {

        this.mDisCrollveTranslation = mDisCrollveTranslation;

    }

    public void setmDiscrollveScaleX(boolean mDiscrollveScaleX) {

        this.mDiscrollveScaleX = mDiscrollveScaleX;

    }

    public void setmDiscrollveScaleY(boolean mDiscrollveScaleY) {

        this.mDiscrollveScaleY = mDiscrollveScaleY;

    }

    @Override

    protected void onSizeChanged(int w, int h, int oldw, int oldh) {

        super.onSizeChanged(w, h, oldw, oldh);

        mWidth = w;

        mHeight = h;

        onResetDiscrollve();

    }

    public DiscrollvableView(Context context, AttributeSet attrs) {

        super(context, attrs);

    }

    public DiscrollvableView(Context context) {

        super(context);

    }

    @Override

    public void onDiscrollve(float ratio) {

        // ratio:0~1

        //控制自身的动画属性

        if (mDiscrollveAlpha) {

            setAlpha(ratio);

        }

        if (mDiscrollveScaleX) {

            setScaleX(ratio);

        }

        if (mDiscrollveScaleY) {

            setScaleY(ratio);

        }

        //判断到底是哪一种值：fromTop,fromBottom,fromLeft,fromRight

        if (isDiscrollTranslationFrom(TRANSLATION_FROM_BOTTOM)) {

            setTranslationY(mHeight * (1 - ratio));//mHeight-->0(代表原来的位置)

        }

        if (isDiscrollTranslationFrom(TRANSLATION_FROM_TOP)) {

            setTranslationY(-mHeight * (1 - ratio));//-mHeight-->0(代表原来的位置)

        }

        if (isDiscrollTranslationFrom(TRANSLATION_FROM_LEFT)) {

            setTranslationX(-mWidth * (1 - ratio));//-width-->0(代表原来的位置)

        }

        if (isDiscrollTranslationFrom(TRANSLATION_FROM_RIGHT)) {

            setTranslationX(mWidth * (1 - ratio));//width-->0(代表原来的位置)

        }

        //颜色渐变动画

        if (mDiscrollveFromBgColor != -1 && mDiscrollveToBgColor != -1) {

            //ratio=0.5 color=中间颜色

            setBackgroundColor((Integer) sArgbEvaluator.evaluate(ratio, mDiscrollveFromBgColor, mDiscrollveToBgColor));

        }

    }

    private boolean isDiscrollTranslationFrom(int translationMask) {

        if (mDisCrollveTranslation == -1) {

            return false;

        }

        //fromLeft|fromBottom & fromBottom = fromBottom

        return (mDisCrollveTranslation & translationMask) == translationMask;

    }

    @Override

    public void onResetDiscrollve() {

        //控制自身的动画属性

        if (mDiscrollveAlpha) {

            setAlpha(0);

        }

        if (mDiscrollveScaleX) {

            setScaleX(0);

        }

        if (mDiscrollveScaleY) {

            setScaleY(0);

        }

        //判断到底是哪一种值：fromTop,fromBottom,fromLeft,fromRight

        if (isDiscrollTranslationFrom(TRANSLATION_FROM_BOTTOM)) {

            setTranslationY(mHeight);//mHeight-->0(代表原来的位置)

        }

        if (isDiscrollTranslationFrom(TRANSLATION_FROM_TOP)) {

            setTranslationY(-mHeight);//-mHeight-->0(代表原来的位置)

        }

        if (isDiscrollTranslationFrom(TRANSLATION_FROM_LEFT)) {

            setTranslationX(-mWidth);//-width-->0(代表原来的位置)

        }

        if (isDiscrollTranslationFrom(TRANSLATION_FROM_RIGHT)) {

            setTranslationX(mWidth);//width-->0(代表原来的位置)

        }

    }

}

那么便完成了对于滑动效果的控制，为了便于控制，自定义View继承ScrollView

public class DiscrollView extends ScrollView {

    private DiscrollViewContent mContent;

    public DiscrollView(Context context, AttributeSet attrs) {

        super(context, attrs);

    }

    @Override

    protected void onFinishInflate() {

        super.onFinishInflate();

        View content = getChildAt(0);

        mContent = (DiscrollViewContent) content;

    }

    @Override

    protected void onSizeChanged(int w, int h, int oldw, int oldh) {

        super.onSizeChanged(w, h, oldw, oldh);

        View first = mContent.getChildAt(0);

        first.getLayoutParams().height = getHeight();

    }

    @Override

    protected void onScrollChanged(int l, int t, int oldl, int oldt) {

        super.onScrollChanged(l, t, oldl, oldt);

        int scrollViewHeight = getHeight();

        //监听滑动----接口---->控制DiscrollViewContent的属性

        //遍历MyLinearLayout里面所有子控件(MyViewGroup)

        for (int i = 0; i < mContent.getChildCount(); i++) {

            View child = mContent.getChildAt(i);

            if (!(child instanceof DiscrollvableInterface)) {

                continue;

            }

            //ratio:0~1

            DiscrollvableInterface discrollvableInterface = (DiscrollvableInterface) child;

            //1.child离scrollview顶部的高度

            int discrollvableTop = child.getTop();

            int discrollvableHeight = child.getHeight();

            //2.得到scrollview滑出去的高度

            //3.得到child离屏幕顶部的高度

            int discrollvableAbsoluteTop = discrollvableTop - t;

            //什么时候执行动画？当child滑进屏幕的时候

            if (discrollvableAbsoluteTop <= scrollViewHeight) {

                int visibleGap = scrollViewHeight - discrollvableAbsoluteTop;

                //确保ratio是在0~1，超过了1 也设置为1

                discrollvableInterface.onDiscrollve(clamp(visibleGap / (float) discrollvableHeight, 1f, 0f));

            } else {//否则，就恢复到原来的位置

                discrollvableInterface.onResetDiscrollve();

            }

        }

    }

    public static float clamp(float value, float max, float min) {

        return Math.max(Math.min(value, max), min);

    }

}

设置属性，偷梁换柱

public class DiscrollViewContent extends LinearLayout {

    public DiscrollViewContent(Context context, AttributeSet attrs) {

        super(context, attrs);

        setOrientation(VERTICAL);

    }

    @Override

    public LayoutParams generateLayoutParams(AttributeSet attrs) {

        // 得到xml里面穿过来的参数

        return new MyLayoutParams(getContext(), attrs);

    }

    @Override

    public void addView(View child, int index, android.view.ViewGroup.LayoutParams params) {

        //从child里面拿到我自定义的属性，传到discrollvableView里面

        MyLayoutParams p = (MyLayoutParams) params;

        if (!isDiscrollvable(p)) {//判断该view是否穿了自定义属性值，不是就不需要执行动画，不包一层FrameLayout

            super.addView(child, index, params);

        } else {

            //在addView里面插一脚，往child外面包裹一层FrameLayout

            DiscrollvableView discrollvableView = new DiscrollvableView(getContext());

            discrollvableView.setmDiscrollveAlpha(p.mDiscrollveAlpha);

            discrollvableView.setmDisCrollveTranslation(p.mDisCrollveTranslation);

            discrollvableView.setmDiscrollveScaleX(p.mDiscrollveScaleX);

            discrollvableView.setmDiscrollveScaleY(p.mDiscrollveScaleY);

            discrollvableView.setmDiscrollveFromBgColor(p.mDiscrollveFromBgColor);

            discrollvableView.setmDiscrollveToBgColor(p.mDiscrollveToBgColor);

            discrollvableView.addView(child);

            super.addView(discrollvableView, index, params);

        }

    }

    private boolean isDiscrollvable(MyLayoutParams p) {

        return p.mDiscrollveAlpha || p.mDiscrollveScaleX

                || p.mDiscrollveScaleY || p.mDisCrollveTranslation != -1

                || (p.mDiscrollveFromBgColor != -1 && p.mDiscrollveToBgColor != -1);

    }

    public static class MyLayoutParams extends LinearLayout.LayoutParams {

        public int mDiscrollveFromBgColor;//背景颜色变化开始值

        public int mDiscrollveToBgColor;//背景颜色变化结束值

        public boolean mDiscrollveAlpha;//是否需要透明度动画

        public int mDisCrollveTranslation;//平移值

        public boolean mDiscrollveScaleX;//是否需要x轴方向缩放

        public boolean mDiscrollveScaleY;//是否需要y轴方向缩放

        public MyLayoutParams(Context context, AttributeSet attrs) {

            super(context, attrs);

            // 从child里面拿到我自定义的属性

            TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.DiscrollView_LayoutParams);

            mDiscrollveAlpha = a.getBoolean(R.styleable.DiscrollView_LayoutParams_discrollve_alpha, false);

            mDiscrollveScaleX = a.getBoolean(R.styleable.DiscrollView_LayoutParams_discrollve_scaleX, false);

            mDiscrollveScaleY = a.getBoolean(R.styleable.DiscrollView_LayoutParams_discrollve_scaleY, false);

            mDisCrollveTranslation = a.getInt(R.styleable.DiscrollView_LayoutParams_discrollve_translation, -1);

            mDiscrollveFromBgColor = a.getColor(R.styleable.DiscrollView_LayoutParams_discrollve_fromBgColor, -1);

            mDiscrollveToBgColor = a.getColor(R.styleable.DiscrollView_LayoutParams_discrollve_toBgColor, -1);

            a.recycle();

        }

    }

}

最后是一些自定义属性

<?xml version="1.0" encoding="UTF-8"?>

<resources>

    <declare-styleable name="DiscrollView_LayoutParams">

        <attr name="discrollve_alpha" format="boolean"/>

        <attr name="discrollve_scaleX" format="boolean"/>

        <attr name="discrollve_scaleY" format="boolean"/>

        <attr name="discrollve_fromBgColor" format="color"/>

        <attr name="discrollve_toBgColor" format="color"/>

        <attr name="discrollve_translation"/>

    </declare-styleable>

    <attr name="discrollve_translation">

        <flag name="fromTop" value="0x01" />

        <flag name="fromBottom" value="0x02" />

        <flag name="fromLeft" value="0x04" />

        <flag name="fromRight" value="0x08" />

    </attr>

</resources>

布局

<com.cj5785.customanimationaddview.DiscrollView xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:custom="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <com.cj5785.customanimationaddview.DiscrollViewContent

        android:layout_width="match_parent"

        android:layout_height="match_parent">

        <TextView

            android:layout_width="match_parent"

            android:layout_height="560dp"

            android:background="@android:color/white"

            android:gravity="center"

            android:text="测试文字使用情况"

            android:textSize="25sp" />

        <View

            android:layout_width="match_parent"

            android:layout_height="200dp"

            android:background="@android:color/darker_gray"

            custom:discrollve_alpha="true" />

        <ImageView

            android:layout_width="89dp"

            android:layout_height="80dp"

            android:src="@drawable/duck"

            custom:discrollve_alpha="true"

            custom:discrollve_translation="fromLeft|fromBottom" />

        <View

            android:layout_width="match_parent"

            android:layout_height="200dp"

            custom:discrollve_fromBgColor="#ffff00"

            custom:discrollve_toBgColor="#88EE66" />

        <ImageView

            android:layout_width="150dp"

            android:layout_height="106dp"

            android:layout_gravity="right"

            android:src="@drawable/camera"

            custom:discrollve_translation="fromRight" />

        <TextView

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:gravity="center"

            android:text="第二段文字使用测试"

            android:textSize="28sp"

            custom:discrollve_alpha="true"

            custom:discrollve_translation="fromBottom" />

        <ImageView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:layout_margin="20dp"

            android:src="@drawable/sun"

            custom:discrollve_scaleX="true"

            custom:discrollve_scaleY="true" />

        <ImageView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:layout_margin="20dp"

            android:src="@drawable/balloon"

            custom:discrollve_translation="fromLeft|fromBottom" />

    </com.cj5785.customanimationaddview.DiscrollViewContent>

</com.cj5785.customanimationaddview.DiscrollView>

效果如下

自定义LayoutInflater

这里实现一个仿小红书的视差动画效果

首先定义一个根布局，然后实例化其自定义控件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@android:color/white">

    <com.cj5785.customanimationlayoutinflater.ParallaxContainer

        android:id="@+id/parallax_container"

        android:layout_width="match_parent"

        android:layout_height="match_parent"/>

    <ImageView

        android:id="@+id/iv_man"

        android:layout_width="66dp"

        android:layout_height="202dp"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"

        android:layout_marginBottom="10dp"

        android:background="@drawable/intro_item_manrun_1"/>

</RelativeLayout>

实例化自定义控件，在最后一个登陆界面，由于与前面的不同，使用切换Fragment的方式，需要使用到适配器

适配器

public class ParallaxAdapter extends FragmentPagerAdapter {

    private List<ParallaxFragment> fragmentList;

    public ParallaxAdapter(FragmentManager fm, List<ParallaxFragment> fragmentList) {

        super(fm);

        this.fragmentList = fragmentList;

    }

    @Override

    public Fragment getItem(int position) {

        return fragmentList.get(position);

    }

    @Override

    public int getCount() {

        return fragmentList.size();

    }

}

自定义Fragment，其主要的偷梁换柱工作就是在这里完成的，返回我们处理以后的View

public class ParallaxFragment extends Fragment {

    private List<View> parallaxViews = new ArrayList<>();

    @Nullable

    @Override

    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        Bundle bundle = getArguments();

        int layoutId = bundle.getInt("layoutId");

        //正常情况下在这里获得view，然后返回，我们就在这里偷梁换柱

//        View view = inflater.inflate(layoutId, container);

        //使用自定义的渲染器渲染

        ParallaxLayoutInflater layoutInflater = new ParallaxLayoutInflater(inflater, getActivity(), this);

        return layoutInflater.inflate(layoutId, null);

    }

    public List<View> getParallaxViews() {

        return parallaxViews;

    }

}

动画引导层

//引导页的最外层布局

public class ParallaxContainer extends FrameLayout implements OnPageChangeListener {

    private List<ParallaxFragment> fragmentList;

    private ParallaxAdapter adapter;

    private float containerWidth;

    private ImageView iv_man;

    public ParallaxContainer(@NonNull Context context, @Nullable AttributeSet attrs) {

        super(context, attrs);

    }

    //指定引导页的所有页面布局文件

    public void setUp(int... ids) {

        //初始化framentList，在调用处直接调用setUp()

        fragmentList = new ArrayList<>();

        for (int i = 0; i < ids.length; i++) {

            ParallaxFragment fragment = new ParallaxFragment();

            Bundle bundle = new Bundle();

            //Fragment中需要加载的布局文件id

            bundle.putInt("layoutId", ids[i]);

            fragment.setArguments(bundle);

            fragmentList.add(fragment);

        }

        //设置ViewPager

        ViewPager viewPager = new ViewPager(getContext());

        viewPager.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));

        viewPager.setId(R.id.parallax_pager);

        adapter = new ParallaxAdapter(((MainActivity) getContext()).getSupportFragmentManager(), fragmentList);

        viewPager.setAdapter(adapter);

        addView(viewPager, 0);

        //设置监听

        viewPager.addOnPageChangeListener(this);

    }

    @Override

    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        containerWidth = getWidth();

        //在翻页的过程中，不断根据视图的标签中对应的动画参数，改变视图的位置或者透明度

        //获取到进入的页面

        ParallaxFragment inFragment = null;

        try {

            inFragment = fragmentList.get(position - 1);

        } catch (Exception e) {

        }

        //获取到退出的页面

        ParallaxFragment outFragment = null;

        try {

            outFragment = fragmentList.get(position);

        } catch (Exception e) {

        }

        if (inFragment != null) {

            //获取Fragment上所有的视图，实现动画效果

            List<View> inViews = inFragment.getParallaxViews();

            if (inViews != null) {

                for (View view : inViews) {

                    //获取标签，从标签上获取所有的动画参数

                    ParallaxViewTag tag = (ParallaxViewTag) view.getTag(R.id.parallax_view_tag);

                    if (tag == null) {

                        continue;

                    }

                    //translationY改变view的偏移位置，translationY=100，代表view在其原始位置向下移动100

                    //仔细观察进入的fragment中view从远处过来，不断向下移动，最终停在原始位置

                    view.setTranslationX((containerWidth - positionOffsetPixels) * tag.xIn);

                    view.setTranslationY((containerWidth - positionOffsetPixels) * tag.yIn);

                }

            }

        }

        if (outFragment != null) {

            List<View> outViews = outFragment.getParallaxViews();

            if (outViews != null) {

                for (View view : outViews) {

                    ParallaxViewTag tag = (ParallaxViewTag) view.getTag(R.id.parallax_view_tag);

                    if (tag == null) {

                        continue;

                    }

                    //仔细观察退出的fragment中view从原始位置开始向上移动，translationY应为负数

                    view.setTranslationX((-positionOffsetPixels) * tag.xOut);

                    view.setTranslationY((-positionOffsetPixels) * tag.yOut);

                }

            }

        }

    }

    @Override

    public void onPageSelected(int position) {

        if (position == adapter.getCount() - 1) {

            iv_man.setVisibility(INVISIBLE);

        } else {

            iv_man.setVisibility(VISIBLE);

        }

    }

    @Override

    public void onPageScrollStateChanged(int state) {

        AnimationDrawable animation = (AnimationDrawable) iv_man.getBackground();

        switch (state) {

            case ViewPager.SCROLL_STATE_DRAGGING:

                animation.start();

                break;

            case ViewPager.SCROLL_STATE_IDLE:

                animation.stop();

                break;

            default:

                break;

        }

    }

    public void setIv_man(ImageView iv_man) {

        this.iv_man = iv_man;

    }

}

拦截系统处理xml

public class ParallaxLayoutInflater extends LayoutInflater {

    private static final String TAG = "ParallaxLayoutInflater";

    private ParallaxFragment parallaxFragment;

    protected ParallaxLayoutInflater(LayoutInflater original, Context newContext, ParallaxFragment parallaxFragment) {

        super(original, newContext);

        this.parallaxFragment = parallaxFragment;

        //源代码中存在：

        //View view;

        //if (mFactory2 != null) {

        //  view = mFactory2.onCreateView(parent, name, context, attrs);

        //} else if (mFactory != null) {

        //  view = mFactory.onCreateView(name, context, attrs);

        //} else {

        //  view = null;

        //}

        //if (view == null && mPrivateFactory != null) {

        //  view = mPrivateFactory.onCreateView(parent, name, context, attrs);

        //}

        //也就是说只要实现Factory，那么就不会调用后面的方法

        setFactory(new ParallaxFactory(this));

    }

    @Override

    public LayoutInflater cloneInContext(Context newContext) {

        //实际用于创建LayoutInflater的方法

        return new ParallaxLayoutInflater(this, newContext, parallaxFragment);

    }

    //这个框架最核心的地方就是在这里设置Factory，从而进行拦截

	class ParallaxFactory implements LayoutInflater.Factory{

        private LayoutInflater inflater;

        //系统提供的视图分为android.widget.xxx和android.view.xxx

        private final String[] prefixs = {

                "android.widget.",

                "android.view."

        };

        public ParallaxFactory(LayoutInflater inflater) {

            this.inflater = inflater;

        }

        @Override

        public View onCreateView(String name, Context context, AttributeSet attrs) {

            //实例化view

            View view = null;

            if (view == null) {

				view = createViewOrFailQuietly(name,context,attrs);

            }

            if (view != null) {

                //获取自定义属性，并将自定义标签值绑定到view上面

                getCustomAttrs(context, attrs, view);

                parallaxFragment.getParallaxViews().add(view);

            }

            return view;

        }

        private void getCustomAttrs(Context context, AttributeSet attrs, View view) {

            //所有自定义的属性

            int[] attrIds = {

                    R.attr.a_in,

                    R.attr.a_out,

                    R.attr.x_in,

                    R.attr.x_out,

                    R.attr.y_in,

                    R.attr.y_out

            };

			//获取

            TypedArray typedArray = context.obtainStyledAttributes(attrs, attrIds);

            if (typedArray != null && typedArray.length() > 0) {

				//获取自定义属性的值

                Log.d(TAG, "getCustomAttrs");

                ParallaxViewTag tag = new ParallaxViewTag();

                tag.alphaIn = typedArray.getFloat(0, 0f);

                tag.alphaOut = typedArray.getFloat(1, 0f);

                tag.xIn = typedArray.getFloat(2, 0f);

                tag.xOut = typedArray.getFloat(3, 0f);

                tag.yIn = typedArray.getFloat(4, 0f);

                tag.yOut = typedArray.getFloat(5, 0f);

                view.setTag(R.id.parallax_view_tag, tag);

            }

            typedArray.recycle();

        }

        private View createViewOrFailQuietly(String name, String prefix, Context context, AttributeSet attrs) {

            try {

				//通过系统的inflater创建视图，读取系统的属性

                return inflater.createView(name, prefix, attrs);

            } catch (ClassNotFoundException e) {

                e.printStackTrace();

                return null;

            }

        }

        private View createViewOrFailQuietly(String name, Context context, AttributeSet attrs) {

            //通过系统inflater创建视图

			//1.自定义控件标签名称带点，所以创建时不需要前缀

            if (name.contains(".")) {

                return createViewOrFailQuietly(name, null, context, attrs);

            }

			//2.系统视图需要加上前缀

			                for (String prefix : prefixs) {

                    View view = createViewOrFailQuietly(name, prefix, context, attrs);

                    if (view != null) {

                        return view;

                    }

                }

            return null;

        }

    }

}

参数控制

//视差动画播放时参数的控制

public class ParallaxViewTag {

    protected int index;

    protected float xIn;

    protected float xOut;

    protected float yIn;

    protected float yOut;

    protected float alphaIn;

    protected float alphaOut;

    @Override

    public String toString() {

        return "ParallaxViewTag [index=" + index + ", xIn=" + xIn + ", xOut=" + xOut + ", yIn=" + yIn

                + ", yOut=" + yOut + ", alphaIn=" + alphaIn + ", alphaOut=" + alphaOut + "]";

    }

}

同时完成人行走的帧动画

<?xml version="1.0" encoding="utf-8"?>

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"

    android:oneshot="false">

    <item

        android:drawable="@drawable/intro_item_manrun_1"

        android:duration="200" />

    <item

        android:drawable="@drawable/intro_item_manrun_2"

        android:duration="200" />

</animation-list>

自定义属性

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <attr name="a_in" format="float" />

    <attr name="a_out" format="float" />

    <attr name="x_in" format="float" />

    <attr name="x_out" format="float" />

    <attr name="y_in" format="float" />

    <attr name="y_out" format="float" />

</resources>

ids

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <item name="parallax_pager" type="id"/>

    <item name="parallax_view_tag" type="id"/>

</resources>

实现效果如下图所示

巴特西

高级UI-自定义动画框架

重难点分析

在addView时候拦截做法

自定义LayoutInflater

最新文章

热门文章