android 自定义ViewGroup之浪漫求婚

Posted 2022-12-12 _solary

---

*本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布

---

1、最终效果

有木有发现还是很小清新的感觉

2、看整体效果这是一个scrollView，滑动时每个子view都有一个或多个动画效果，但是如果我们直接给每个子view加上动画去实现这个需求就太low了，而且也不利于扩展，所以这里将会设计一套框架，使别人能很方便的使用我们定义的控件。

3、首先看看我们是怎么使用自己设计的这个控件的

<scrollviewgroup.lly.com.scrollviewgroup.lib.DiscrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:discrollve="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <scrollviewgroup.lly.com.scrollviewgroup.lib.DiscrollViewContent
        android:layout_width="match_parent"
        android:layout_height="match_parent">

       ...

        <ImageView
            android:layout_width="300dp"
            android:layout_height="180dp"
            android:layout_gravity="center"
            discrollve:discrollve_alpha="true"
            discrollve:discrollve_translation="fromLeft|fromBottom"
            android:src="@drawable/cheese1" />

       ...

    </scrollviewgroup.lly.com.scrollviewgroup.lib.DiscrollViewContent>
</scrollviewgroup.lly.com.scrollviewgroup.lib.DiscrollView>

看discrollve:discrollve_alpha="true"
discrollve:discrollve_translation="fromLeft|fromBottom"
这里我们给系统控件加上自定义属性，这样当别人用我们的控件，简直不要太爽。

不过大家有没有发现这是系统控件哎，你就这么随随便便的给它加个属性，它认识么 不报错你就谢天谢地了 还让它工作，想的美。

带着这个疑惑，我们先来看看系统的ViewGroup.java类是怎么做的。

一般我们在代码中给布局动态添加子控件的时候都会用到addView这个方法
这里我们就跟踪这个方法，最后发现他们会调用到ViewGroup的addview方法

public void addView(View child, int index) 
        LayoutParams params = child.getLayoutParams();
        if (params == null) 
            params = generateDefaultLayoutParams();
            if (params == null) 
                throw new IllegalArgumentException("generateDefaultLayoutParams() cannot return null");
            
        
        addView(child, index, params);
    

有没有发现这里这里最后的params是怎么来的 不就是子控件的params么。
而addView(child, index, params); 最后会调用addViewInner
下面我们看下addViewInner是怎么做的

private void addViewInner(View child, int index, LayoutParams params,
            boolean preventRequestLayout) 

        ...
        if (!checkLayoutParams(params)) 
            params = generateLayoutParams(params);
        

        if (preventRequestLayout) 
            child.mLayoutParams = params;
         else 
            child.setLayoutParams(params);
        

       ...
        addInArray(child, index);

        // tell our children
        if (preventRequestLayout) 
            child.assignParent(this);
         else 
            child.mParent = this;
        

          ...
        onViewAdded(child);

        ...
    

代码还是比较多的，只关注对我们有用的片段
首先它会调用checkLayoutParams(params)

 protected boolean checkLayoutParams(ViewGroup.LayoutParams p) 
        return  p != null;
    

如果不等于空就会调用就调用generateLayoutParams

protected LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) 
        return p;
    

继续执行

        if (preventRequestLayout) 
            child.mLayoutParams = params;
         else 
            child.setLayoutParams(params);
        

看到上面的checkLayoutParams和generateLayoutParams方法都比较简单而且是protected的 所以应该是给子类实现的，我们看一个viewgroup的子类 LinearLayout是怎么做的

@Override
    protected boolean checkLayoutParams(ViewGroup.LayoutParams p) 
        return p instanceof LinearLayout.LayoutParams;
    
        @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) 
        return new LinearLayout.LayoutParams(getContext(), attrs);
    

看到这里就在想我们是不是也可以这么做呢，那当然是可以的 系统都可以了还有什么问题，
接下来我们的大波代码来袭了

public class DiscrollViewContent extends LinearLayout 

    public DiscrollViewContent(Context context) 
        super(context);
        setOrientation(VERTICAL);
    

    public DiscrollViewContent(Context context, AttributeSet attrs) 
        super(context, attrs);
        setOrientation(VERTICAL);
    

    public DiscrollViewContent(Context context, AttributeSet attrs, int defStyleAttr) 
        super(context, attrs, defStyleAttr);
        setOrientation(VERTICAL);
    

    /**
     * 重写addView
     * @param child
     * @param index
     * @param params
     */
    @Override
    public void addView(View child, int index, ViewGroup.LayoutParams params) 
        super.addView(asDiscrollvable(child,(MyLayoutParams)params), index, params);
    

    private View asDiscrollvable(View child, MyLayoutParams params) 
        if(!isDiscrollvable(params))
            return child;
        
        DiscrollvableView discrollvableChild = new DiscrollvableView(getContext());
        discrollvableChild.setDiscrollveAlpha(params.mDiscrollveAlpha);
        discrollvableChild.setDiscrollveTranslation(params.mDiscrollveTranslation);
        discrollvableChild.setDiscrollveScaleX(params.mDiscrollveScaleX);
        discrollvableChild.setDiscrollveScaleY(params.mDiscrollveScaleY);
        discrollvableChild.setDiscrollveThreshold(params.mDiscrollveThreshold);
        discrollvableChild.setDiscrollveFromBgColor(params.mDiscrollveFromBgColor);
        discrollvableChild.setDiscrollveToBgColor(params.mDiscrollveToBgColor);
        discrollvableChild.addView(child);
        return discrollvableChild;
    

    /**
     * 判断是否是我们定义的LayoutParams
     * @param lp
     * @return
     */
    private boolean isDiscrollvable(MyLayoutParams lp) 
        return lp.mDiscrollveAlpha ||
                lp.mDiscrollveTranslation != -1 ||
                lp.mDiscrollveScaleX ||
                lp.mDiscrollveScaleY ||
                (lp.mDiscrollveFromBgColor != -1 && lp.mDiscrollveToBgColor != -1);
    

    /**
     * 重写checkLayoutParams
     * @param p
     * @return
     */
    @Override
    protected boolean checkLayoutParams(ViewGroup.LayoutParams p) 
        return p instanceof MyLayoutParams;
    

    /**
     * 重写generateDefaultLayoutParams
     * @return
     */
    @Override
    protected LinearLayout.LayoutParams generateDefaultLayoutParams() 
        return new MyLayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    

    /**
     * 重写generateLayoutParams
     * @param attrs
     * @return
     */
    @Override
    public LinearLayout.LayoutParams generateLayoutParams(AttributeSet attrs) 
        return new MyLayoutParams(getContext(), attrs);
    

    /**
     * 重写generateLayoutParams
     * @param p
     * @return
     */
    @Override
    protected LinearLayout.LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) 
        return new MyLayoutParams(p.width, p.height);
    

    /**
     * 自定义LinearLayout.LayoutParams
     */
    class MyLayoutParams extends LinearLayout.LayoutParams 

        private int mDiscrollveFromBgColor;
        private int mDiscrollveToBgColor;
        private float mDiscrollveThreshold;
        public boolean mDiscrollveAlpha;
        public boolean mDiscrollveScaleX;
        public boolean mDiscrollveScaleY;
        private int mDiscrollveTranslation;
        public MyLayoutParams(Context context, AttributeSet attrs) 
            super(context, attrs);
            TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.DiscrollView_LayoutParams);
            try 
                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);
                mDiscrollveThreshold = a.getFloat(R.styleable.DiscrollView_LayoutParams_discrollve_threshold, 0.0f);
                mDiscrollveFromBgColor = a.getColor(R.styleable.DiscrollView_LayoutParams_discrollve_fromBgColor, -1);
                mDiscrollveToBgColor = a.getColor(R.styleable.DiscrollView_LayoutParams_discrollve_toBgColor, -1);
             finally 
                a.recycle();
            
        

        public MyLayoutParams(int width, int height) 
            super(width, height);
        

    

上面这大段代码主要就做了我们上面分析的系统空间

首先继承LinearLayout，
重写了addView，generateLayoutParams，checkLayoutParams
并自定义了一个MyLayoutParams继承自LinearLayout.LayoutParams
在addview的时候我们首先对child进行下处理，判断子view中是否有我们定义属性，没有的话，就用它自己，有的话，我们在外层包一个FrameLayout，让他执行动画，他的子view也将跟着执行。

好了 框架的设计部分完成了，

下面就是动画的实现了

首先看我们的scrollView是怎么做的

public class DiscrollView extends ScrollView 

    private DiscrollViewContent mContent;

    public DiscrollView(Context context) 
        super(context);
    

    public DiscrollView(Context context, AttributeSet attrs) 
        super(context, attrs);
    

    public DiscrollView(Context context, AttributeSet attrs, int defStyleAttr) 
        super(context, attrs, defStyleAttr);
    

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) 
        super.onSizeChanged(w, h, oldw, oldh);
        setupFirstView();
    

    @Override
    protected void onFinishInflate() 
        super.onFinishInflate();
        if(getChildCount() != 1) 
            throw new IllegalStateException("Discrollview must host one child.");
        
        View content = getChildAt(0);
        if(!(content instanceof DiscrollViewContent)) 
            throw new IllegalStateException("Discrollview must host a DiscrollViewContent.");
        
        mContent = (DiscrollViewContent) content;
        if(mContent.getChildCount() < 2) 
            throw new IllegalStateException("Discrollview must have at least 2 children.");
        
    

    private void setupFirstView() 
        View first = mContent.getChildAt(0);
        if(first!=null)
            first.getLayoutParams().height = getHeight();
        
    

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) 
        super.onScrollChanged(l, t, oldl, oldt);
        onScrollChanged(t);
    

    private void onScrollChanged(int top) 
        int scrollViewHeight = getHeight();
        int scrollViewBottom = getAbsoluteBottom();
        int scrollViewHalfHeight = scrollViewHeight / 2;
        for(int index = 1;index<mContent.getChildCount();index++)
            View child = mContent.getChildAt(index);
            if(!(child instanceof DiscrollVable))
                continue;
            
            DiscrollVable discrollvable = (DiscrollVable) child;
            int discrollvableTop = child.getTop();
            int discrollvableHeight = child.getHeight();
            int discrollvableAbsoluteTop = discrollvableTop - top;
            //这个view的下半部分
            if(scrollViewBottom - child.getBottom() < discrollvableHeight+scrollViewHalfHeight)
                //子view显示的时候执行
                if(discrollvableAbsoluteTop <= scrollViewHeight)
                    int visibleGap = scrollViewHeight - discrollvableAbsoluteTop;
                    discrollvable.onDiscrollve(clamp(visibleGap / (float)discrollvableHeight,0.0f,1.0f));
                else 
                    //子view还没显示的时候
                    discrollvable.onResetDiscrollve();
                
            else
                if(discrollvableAbsoluteTop <= scrollViewHalfHeight)
                    int visibleGap = scrollViewHalfHeight - discrollvableAbsoluteTop;
                    discrollvable.onDiscrollve(clamp(visibleGap / (float)discrollvableHeight,0.0f,1.0f));
                else
                    discrollvable.onResetDiscrollve();
                
            
        
    

    private float clamp(float value, float max, float min) 
        return Math.max(Math.min(value,min),max);
    

    public int getAbsoluteBottom() 
        View last = getChildAt(getChildCount()-1);
        if(last == null)
            return 0;
        
        return last.getBottom();
    

主要就是在滑动的时候 把滑动的百分比传给接口 ，具体由接口的实现类来执行
而实现接口的类就是我们上面的那个FrameLayout。

 @Override
    public void onDiscrollve(float ratio) 
        if(ratio >= mDiscrollveThreshold) 
            ratio = withThreshold(ratio);
            float ratioInverse = 1 - ratio;

            if(mDiscrollveAlpha) 
                setAlpha(ratio);
            
            if(isDiscrollveTranslationFrom(TRANSLATION_FROM_BOTTOM)) 
                setTranslationY(mHeight * ratioInverse);
            
            if(isDiscrollveTranslationFrom(TRANSLATION_FROM_TOP)) 
                setTranslationY(-mHeight * ratioInverse);
            
            if(isDiscrollveTranslationFrom(TRANSLATION_FROM_LEFT)) 
                setTranslationX(-mWidth * ratioInverse);
            
            if(isDiscrollveTranslationFrom(TRANSLATION_FROM_RIGHT)) 
                setTranslationX(mWidth * ratioInverse);
            
            if(mDiscrollveScaleX) 
                setScaleX(ratio);
            
            if(mDiscrollveScaleY) 
                setScaleY(ratio);
            
            if(mDiscrollveFromBgColor != -1 && mDiscrollveToBgColor != -1) 
                setBackgroundColor((Integer) sArgbEvaluator.evaluate(ratio, mDiscrollveFromBgColor, mDiscrollveToBgColor));
            
        

    

    @Override
    public void onResetDiscrollve() 
        if(mDiscrollveAlpha) 
            setAlpha(0.0f);
        
        if(isDiscrollveTranslationFrom(TRANSLATION_FROM_BOTTOM)) 
            setTranslationY(mHeight);
        
        if(isDiscrollveTranslationFrom(TRANSLATION_FROM_TOP)) 
            setTranslationY(-mHeight);
        
        if(isDiscrollveTranslationFrom(TRANSLATION_FROM_LEFT)) 
            setTranslationX(-mWidth);
        
        if(isDiscrollveTranslationFrom(TRANSLATION_FROM_RIGHT)) 
            setTranslationX(mWidth);
        
        if(mDiscrollveScaleX) 
            setScaleX(0.0f);
        
        if(mDiscrollveScaleY) 
            setScaleY(0.0f);
        
        if(mDiscrollveFromBgColor != -1 && mDiscrollveToBgColor != -1) 
            setBackgroundColor(mDiscrollveFromBgColor);
        

    

代码贴的太多了 底部将给出源码
可以看出 每个类都不是很大，当用户要用的时候只要 在xml中引用我们的控件，就可以实现这个效果，而且他要别的效果的话同样只要在xml中配置就好。

github