专栏首页移动开发一个可以在界面顶部展现的自定义 View

一个可以在界面顶部展现的自定义 View

这个源码十分简单,没啥可说的.只有一点提一下,看到有些控件达到背景色的效果,是动态填加一个带背景色父布局实现的.

我这里是在画布上动态绘制的.

GitHub 地址: TranslationView

源码如下:

public class TranslationView extends FrameLayout {

    private static final String TAG = "TranslationView";
    private static final int DEFAULT_COLOR = 0x50000000;
    private int mShadowColor = DEFAULT_COLOR;
    private boolean mIsShow = false;

    private View mTranslationView;
    private ObjectAnimator mShowAni;
    private ObjectAnimator mHideAni;


    public TranslationView(Context context) {
        super(context, null);
    }

    public TranslationView(Context context, AttributeSet attrs) {
        super(context, attrs, 0);
    }

    public TranslationView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        if (getChildCount() != 2) {
            throw new IllegalStateException("only and should contain two child view");
        }
        mTranslationView = getChildAt(1);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        Log.d(TAG, "onMeasure");
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        mTranslationView.layout(0, -mTranslationView.getHeight(), mTranslationView.getWidth(), 0);
    }


    @Override
    protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
        if (mIsShow && child == mTranslationView) {
            canvas.drawColor(mShadowColor);
        }
        return super.drawChild(canvas, child, drawingTime);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        final int action = MotionEventCompat.getActionMasked(ev);
        switch (action) {
            case MotionEvent.ACTION_DOWN: {
                if (mIsShow && inShadow(ev)) {
                    hide();
                    return true;
                }
            }
        }
        return super.onInterceptTouchEvent(ev);
    }

    private boolean inShadow(MotionEvent ev) {
        float x = ev.getX();
        float y = ev.getY();
        final float leftEdge = mTranslationView.getX();
        final float rightEdge = leftEdge + mTranslationView.getWidth();
        final float topEdge = mTranslationView.getHeight();
        final float bottomEdge = getHeight() + topEdge;
        return x > leftEdge && x < rightEdge && y > topEdge && y < bottomEdge;
    }


    public void show() {
        if (!mIsShow) {
            mIsShow = true;
            if (mShowAni == null) {
                mShowAni = ObjectAnimator.ofFloat(mTranslationView, "translationY", mTranslationView.getTranslationY(), mTranslationView.getHeight());
                mShowAni.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationStart(Animator animation) {
                        super.onAnimationStart(animation);
                        invalidate();
                    }
                });
            }
            mShowAni.start();
        }
    }

    public void hide() {
        if (mIsShow) {
            mIsShow = false;
            if (mHideAni == null) {
                mHideAni = ObjectAnimator.ofFloat(mTranslationView, "translationY", mTranslationView.getTranslationY(), -mTranslationView.getHeight());
                mHideAni.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        super.onAnimationEnd(animation);
                        invalidate();
                    }
                });
            }
            mHideAni.start();
        }
    }

    public void setShadowColor(@ColorInt int color) {
        mShadowColor = color;
    }
}

勘误:之前写这个小控件的时候,代码是有些问题的,虽然有点歪打正着。当初写这个控件的时候控件的坐标计算都是按照绝对坐标去思考的,但其实 translationY相对原坐标移动了多少的一个相对概念,虽然之前也已经了解了相关概念,没想到写的时候还是犯了错误。这次因为别的需要,扩展功能的时候才发现错误。

2017/6/1更新:新增其他方向的滑动效果。

public class TranslationView extends FrameLayout {
    public static final String START = "start";
    public static final String END = "end";
    public static final String TOP = "top";
    public static final String BOTTOM = "bottom";
    private static final String TAG = "TranslationView";
    private static final int DEFAULT_COLOR = 0x50000000;
    private String mDirection = TOP;
    private int mShadowColor = DEFAULT_COLOR;
    private int mW;
    private int mH;
    private boolean mIsShow = false;


    private View mTranslationView;
    private ObjectAnimator mShowAni;
    private ObjectAnimator mHideAni;


    public TranslationView(Context context) {
        this(context, null);
    }

    public TranslationView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TranslationView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        if (attrs == null) {
            return;
        }
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.TranslationView);
        mDirection = a.getString(R.styleable.TranslationView_direction);
        if (TextUtils.isEmpty(mDirection)) {
            mDirection = TOP;
        }
        a.recycle();
    }


    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        if (getChildCount() != 2) {
            throw new IllegalStateException("only and should contain two child view");
        }
        mTranslationView = getChildAt(1);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mW = w;
        mH = h;
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        switch (mDirection) {
            case TOP:
                mTranslationView.layout(0, -mTranslationView.getHeight(), mTranslationView.getWidth(), 0);
                break;
            case BOTTOM:
                mTranslationView.layout(0, mH, mTranslationView.getWidth(), mH + mTranslationView.getHeight());
                break;
            case START:
                mTranslationView.layout(-mTranslationView.getWidth(), 0, 0, mTranslationView.getHeight());
                break;
            case END:
                mTranslationView.layout(mW, 0, mW + mTranslationView.getWidth(), mTranslationView.getHeight());
                break;
            default:
                break;
        }
    }


    @Override
    protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
        if (mIsShow && child == mTranslationView) {
            canvas.drawColor(mShadowColor);
        }
        return super.drawChild(canvas, child, drawingTime);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        final int action = MotionEventCompat.getActionMasked(ev);
        switch (action) {
            case MotionEvent.ACTION_DOWN: {
                if (mIsShow && !inTranslationView(ev)) {
                    hide();
                    return true;
                }
            }
        }
        return super.onInterceptTouchEvent(ev);
    }

    /**
     * 在内容区域中
     *
     * @param ev
     * @return
     */
    private boolean inTranslationView(MotionEvent ev) {
        float x = ev.getX();
        float y = ev.getY();
        final float leftEdge = mTranslationView.getX();
        final float rightEdge = leftEdge + mTranslationView.getWidth();
        final float topEdge = mTranslationView.getY();
        final float bottomEdge = mTranslationView.getHeight() + topEdge;
        return x > leftEdge && x < rightEdge && y > topEdge && y < bottomEdge;
    }


    public void show() {
        if (!mIsShow) {
            mIsShow = true;
            if (mShowAni == null) {
                switch (mDirection) {
                    case TOP:
                        mShowAni = ObjectAnimator.ofFloat(mTranslationView, "translationY", 0, mTranslationView.getHeight());
                        break;
                    case BOTTOM:
                        mShowAni = ObjectAnimator.ofFloat(mTranslationView, "translationY", 0, -mTranslationView.getHeight());
                        break;
                    case START:
                        mShowAni = ObjectAnimator.ofFloat(mTranslationView, "translationX", 0, mTranslationView.getWidth());
                        break;
                    case END:
                        mShowAni = ObjectAnimator.ofFloat(mTranslationView, "translationX", 0, -mTranslationView.getWidth());
                        break;
                    default:
                        break;
                }
                mShowAni.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationStart(Animator animation) {
                        super.onAnimationStart(animation);
                        invalidate();
                    }
                });
            }
            mShowAni.start();
        }
    }

    public void hide() {
        if (mIsShow) {
            mIsShow = false;
            if (mHideAni == null) {
                switch (mDirection) {
                    case TOP:
                    case BOTTOM:
                        mHideAni = ObjectAnimator.ofFloat(mTranslationView, "translationY", mTranslationView.getTranslationY(), 0);
                        break;
                    case START:
                    case END:
                        mHideAni = ObjectAnimator.ofFloat(mTranslationView, "translationX", mTranslationView.getTranslationX(), 0);
                        break;
                }
                mHideAni.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        super.onAnimationEnd(animation);
                        invalidate();
                    }
                });
            }
            mHideAni.start();
        }
    }

    public void setShadowColor(@ColorInt int color) {
        mShadowColor = color;
    }
}

效果图如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SwipeCardView有点类似于stackview的控件

    业余时间写了一个类似stackview的控件,可以循环抽取.还不是很完善,算是给有需要的朋友提供个基本思路吧.有更好的建议请告知.

    夏洛克的猫
  • android 圆角图片的实现和封装

    下面为主要源码,实现了 Picasso 中的 Transformation 接口。

    夏洛克的猫
  • FruitLoadView 一个自定义view可用来做加载view

    Github地址:https://github.com/X-FAN/FruitLoadView 欢迎star

    夏洛克的猫
  • 动态代理的两种方式,以及区别(静态代理、JDK与CGLIB动态代理、AOP+IoC) Spring学习总结(二)——静态代理、JDK与CGLIB动态代理、AOP+IoC

    AOP(Aspect Oriented Programming)意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术。AOP是OO...

    爱撸猫的杰
  • 使用Span实现各种酷炫效果

    前一段时间一直在做富文本展示和文本处理,主要用到了Html.fromHtml()实现加载网页,但实现整段文本的某些特殊如个别文字的点击,改背景色、前景色等效果,...

    蜻蜓队长
  • 基于邻接矩阵的无向图的深度广度遍历实现

    图的创建及深度广度遍历的代码实现,基于的是邻接矩阵,图这里是无向图,并且两个顶点之间有连接则邻接矩阵非零,如果没有连接则为零

    张凝可
  • 快速排序

    如果说希尔排序是简单插入排序的升级,堆排序是简单选择排序的升级,那么快速排序就是冒泡排序的升级了。相对于冒泡排序,快速排序增大了记录比较和移动的距离,将关键字较...

    用户1215536
  • Floyd算法--多源最短路径

    在一个给定的图中求两个顶点的最短路径的算法一直是比较常用和比较重要的算法。主要的求最短路径的算法有Floyd算法、Dijkstra算法和Bellman-Ford...

    指点
  • 一种快速简便优秀的全局曲线调整与局部信息想结合的非线性彩色增强算法(多图深度分析和探索)

      本文的分析基于《Adaptive and integrated neighborhood-dependent approach for nonlinear ...

    用户1138785
  • Java IO(IO流)-1

    IO流 第一部分 (outputStream/InputStream Writer/Redaer) IO流对象中输入和输出是相辅相成的,输出什么,就可以输入什么...

    李家酒馆酒保

扫码关注云+社区

领取腾讯云代金券