模仿手机QQ底部导航栏Icon拖拽效果

最新推荐文章于 2024-04-07 09:50:47 发布

Robo_G

最新推荐文章于 2024-04-07 09:50:47 发布

阅读量7.9k

点赞数 26

分类专栏： android开发

本文链接：https://blog.csdn.net/kobeyxd123/article/details/72829288

版权

android开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文已授权微信公众号：鸿洋（hongyangAndroid）原创首发。

之前玩手机QQ时发现下面的图标竟然可以拖拽，发现还蛮好玩的。于是自己也模仿着写了一个。

先上个效果图吧

实现的方式有很多，我说一下我的思路：我的思路比较简单，无非就是上下两层图片可拖动的范围和速度不一样呗（大图标拖动范围和速度小于小图标拖动范围和速度）。

备注（以第一个消息图标为例）：大图标指的是外面的气泡图标，小图标指的是气泡里面的眼睛和嘴巴图标。切图时将一张整体图片切成了这两个图标。具体可下载Demo参考里面的图片资源。

自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="QQNaviView">
        <attr name="bigIconSrc" format="reference"/>
        <attr name="smallIconSrc" format="reference"/>
        <attr name="iconWidth" format="dimension"/>
        <attr name="iconHeight" format="dimension"/>
        <attr name="range" format="float"/>
    </declare-styleable>
</resources>

其中range为可拖动的范围（其实是倍数），默认值是1，不宜设置过大。

主要的拖动代码

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                lastX = x;
                lastY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                float deltaX = x - lastX;
                float deltaY = y - lastY;

                moveEvent(mBigIcon, deltaX, deltaY, mSmallRadius);
                //因为可拖动大半径是小半径的1.5倍， 因此这里x,y也相应乘1.5
                moveEvent(mSmallIcon, 1.5f * deltaX, 1.5f * deltaY, mBigRadius);
                break;
            case MotionEvent.ACTION_UP:
                //抬起时复位
                mBigIcon.setX(0);
                mBigIcon.setY(0);
                mSmallIcon.setX(0);
                mSmallIcon.setY(0);
                break;
        }
        return super.onTouchEvent(event);
    }

这里先得到X轴拖动的距离deltaX和Y轴拖动的距离deltaY，大图标对应小半径，小图标对应大半径。然后看moveEvent方法：

private void moveEvent(View view, float deltaX, float deltaY, float radius){

    //先计算拖动距离
    float distance = getDistance(deltaX, deltaY);

    //拖动的方位角，atan2出来的角度是带正负号的
    double degree = Math.atan2(deltaY, deltaX);

    //如果大于临界半径就不能再往外拖了
    if (distance > radius){
        view.setX(view.getLeft() + (float) (radius * Math.cos(degree)));
        view.setY(view.getTop() + (float) (radius * Math.sin(degree)));
    }else {
        view.setX(view.getLeft() + deltaX);
        view.setY(view.getTop() + deltaY);
    }

}

方法很简单，注释结合这张图就一目了然了，主要是注意在抬起时图标复位就好了。

简单看一下初始化

由于图标下面一般会带文字，因此直接继承了LinearLayout，并且默认设置成了垂直排列。

    public QQNaviView(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        mContext = context;

        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.QQNaviView, defStyleAttr, 0);
        mBigIconSrc = ta.getResourceId(R.styleable.QQNaviView_bigIconSrc, R.drawable.big);
        mSmallIconSrc = ta.getResourceId(R.styleable.QQNaviView_smallIconSrc, R.drawable.small);
        mIconWidth = ta.getDimension(R.styleable.QQNaviView_iconWidth, dp2px(context, 60));
        mIconHeight = ta.getDimension(R.styleable.QQNaviView_iconHeight, dp2px(context, 60));
        mRange = ta.getFloat(R.styleable.QQNaviView_range, 1);
        ta.recycle();

        //默认垂直排列
        setOrientation(LinearLayout.VERTICAL);

        init(context);
    }

在init方法中进行了布局文件的绑定，并且让该view水平居中。

    private void init(Context context) {
        mView = inflate(context, R.layout.view_icon, null);
        mBigIcon = (ImageView) mView.findViewById(R.id.iv_big);
        mSmallIcon = (ImageView) mView.findViewById(R.id.iv_small);

        mBigIcon.setImageResource(mBigIconSrc);
        mSmallIcon.setImageResource(mSmallIconSrc);

        setWidthAndHeight(mBigIcon);
        setWidthAndHeight(mSmallIcon);

        LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        lp.gravity = Gravity.CENTER_HORIZONTAL;
        mView.setLayoutParams(lp);
        addView(mView);
    }

这里值得注意的是onMeasure方法。由于图标可以往外拖动，所以要给ImageView一个默认的padding，不然拖动时最外面部分会消失。

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        setupView();

        final int w = resolveSize(getMeasuredWidth(), widthMeasureSpec);
        final int h = resolveSize(getMeasuredHeight(), heightMeasureSpec);

        setMeasuredDimension(w, h);
    }

    /**
     * 确定view以及拖动相关参数
     */
    private void setupView() {

        //根据view的宽高确定可拖动半径的大小，这里要用getMeasuredWidth和getMeasuredHeight
        mSmallRadius = 0.1f * Math.min(mView.getMeasuredWidth(), mView.getMeasuredHeight()) * mRange;
        mBigRadius = 1.5f * mSmallRadius;

        //设置imageview的padding，不然拖动时图片边缘部分会消失
        int padding = (int) mBigRadius;
        mBigIcon.setPadding(padding, padding, padding, padding);
        mSmallIcon.setPadding(padding, padding, padding, padding);
    }

然后就没啥好说了，直接看源码吧。

源码：

public class QQNaviView extends LinearLayout {

    private static final String TAG = "QQNaviView";

    private Context mContext;

    /* 主view */
    private View mView;

    /* 外层icon/拖动幅度较小icon */
    private ImageView mBigIcon;

    /* 里层icon/拖动幅度较大icon */
    private ImageView mSmallIcon;

    /* 外层icon资源 */
    private int mBigIconSrc;

    /* 里面icon资源 */
    private int mSmallIconSrc;

    /* icon宽度 */
    private float mIconWidth;

    /* icon高度 */
    private float mIconHeight;

    /* 拖动幅度较大半径 */
    private float mBigRadius;

    /* 拖动幅度小半径 */
    private float mSmallRadius;

    /* 拖动范围 可调 */
    private float mRange;

    private float lastX;

    private float lastY;

    public QQNaviView(@NonNull Context context) {
        this(context, null);
    }

    public QQNaviView(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public QQNaviView(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        mContext = context;

        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.QQNaviView, defStyleAttr, 0);
        mBigIconSrc = ta.getResourceId(R.styleable.QQNaviView_bigIconSrc, R.drawable.big);
        mSmallIconSrc = ta.getResourceId(R.styleable.QQNaviView_smallIconSrc, R.drawable.small);
        mIconWidth = ta.getDimension(R.styleable.QQNaviView_iconWidth, dp2px(context, 60));
        mIconHeight = ta.getDimension(R.styleable.QQNaviView_iconHeight, dp2px(context, 60));
        mRange = ta.getFloat(R.styleable.QQNaviView_range, 1);
        ta.recycle();

        //默认垂直排列
        setOrientation(LinearLayout.VERTICAL);

        init(context);
    }

    private void init(Context context) {
        mView = inflate(context, R.layout.view_icon, null);
        mBigIcon = (ImageView) mView.findViewById(R.id.iv_big);
        mSmallIcon = (ImageView) mView.findViewById(R.id.iv_small);

        mBigIcon.setImageResource(mBigIconSrc);
        mSmallIcon.setImageResource(mSmallIconSrc);

        setWidthAndHeight(mBigIcon);
        setWidthAndHeight(mSmallIcon);

        LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        lp.gravity = Gravity.CENTER_HORIZONTAL;
        mView.setLayoutParams(lp);
        addView(mView);
    }

    /**
     * 设置icon宽高
     * @param view
     */
    private void setWidthAndHeight(View view){
        FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) view.getLayoutParams();
        lp.width = (int) mIconWidth;
        lp.height = (int) mIconHeight;
        view.setLayoutParams(lp);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        setupView();

        final int w = resolveSize(getMeasuredWidth(), widthMeasureSpec);
        final int h = resolveSize(getMeasuredHeight(), heightMeasureSpec);

        setMeasuredDimension(w, h);
    }

    /**
     * 确定view以及拖动相关参数
     */
    private void setupView() {
        //根据view的宽高确定可拖动半径的大小
        mSmallRadius = 0.1f * Math.min(mView.getMeasuredWidth(), mView.getMeasuredHeight()) * mRange;
        mBigRadius = 1.5f * mSmallRadius;
        //设置imageview的padding，不然拖动时图片边缘部分会消失
        int padding = (int) mBigRadius;
        mBigIcon.setPadding(padding, padding, padding, padding);
        mSmallIcon.setPadding(padding, padding, padding, padding);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        int childLeft;
        int childTop = 0;
        for (int i = 0; i < getChildCount(); i ++){
            final View child = getChildAt(i);
            LayoutParams lp = (LayoutParams) child.getLayoutParams();
            if (child.getVisibility() != GONE){
                final int childWidth = child.getMeasuredWidth();
                final int childHeight = child.getMeasuredHeight();
                //水平居中显示
                childLeft = (getWidth() - childWidth) / 2;
                //当前子view的top
                childTop += lp.topMargin;
                child.layout(childLeft, childTop, childLeft + childWidth, childTop + childHeight);
                //下一个view的top是当前子view的top + height + bottomMargin
                childTop += childHeight + lp.bottomMargin;
            }
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                lastX = x;
                lastY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                float deltaX = x - lastX;
                float deltaY = y - lastY;

                moveEvent(mBigIcon, deltaX, deltaY, mSmallRadius);
                //因为可拖动大半径是小半径的1.5倍， 因此这里x,y也相应乘1.5
                moveEvent(mSmallIcon, 1.5f * deltaX, 1.5f * deltaY, mBigRadius);
                break;
            case MotionEvent.ACTION_UP:
                //抬起时复位
                mBigIcon.setX(0);
                mBigIcon.setY(0);
                mSmallIcon.setX(0);
                mSmallIcon.setY(0);
                break;
        }
        return super.onTouchEvent(event);
    }

    /**
     * 拖动事件
     * @param view
     * @param deltaX
     * @param deltaY
     * @param radius
     */
    private void moveEvent(View view, float deltaX, float deltaY, float radius){

        //先计算拖动距离
        float distance = getDistance(deltaX, deltaY);

        //拖动的方位角，atan2出来的角度是带正负号的
        double degree = Math.atan2(deltaY, deltaX);

        //如果大于临界半径就不能再往外拖了
        if (distance > radius){
            view.setX(view.getLeft() + (float) (radius * Math.cos(degree)));
            view.setY(view.getTop() + (float) (radius * Math.sin(degree)));
        }else {
            view.setX(view.getLeft() + deltaX);
            view.setY(view.getTop() + deltaY);
        }

    }

    private int dp2px(Context context, float dpVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                dpVal, context.getResources().getDisplayMetrics());
    }

    private float getDistance(float x, float y){
        return (float) Math.sqrt(x * x + y * y);
    }

    public void setBigIcon(int res){
        mBigIcon.setImageResource(res);
    }

    public void setSmallIcon(int res){
        mSmallIcon.setImageResource(res);
    }

    public void setIconWidthAndHeight(float width, float height){
        mIconWidth = dp2px(mContext, width);
        mIconHeight = dp2px(mContext, height);
        setWidthAndHeight(mBigIcon);
        setWidthAndHeight(mSmallIcon);
    }

    public void setRange(float range){
        mRange = range;
    }

}

PS：一些手机上没有效果应该是setupView()方法中之前用的是mView.getWidth()和mView.getMeasuredHeight()，应该改为mView.getMeasuredWidth和mView.getMeasuredHeight()，感谢gitkanglei的指出。关于两者的区别可参考：http://blog.csdn.net/dmk877/article/details/49734869/

属性	说明
bigIconSrc	大图标资源
smallIconSrc	小图标资源
iconWidth	图标宽度
iconHeight	图标高度
range	可拖动范围

如果有其他的实现方式，或者代码中有什么不合理的地方，欢迎交流~

源码地址：https://github.com/XingdongYu/QQNaviView 欢迎star，rua~

Robo_G

关注

26
点赞
踩
28

收藏

觉得还不错? 一键收藏
28
评论
模仿手机QQ底部导航栏Icon拖拽效果

本文已授权微信公众号：鸿洋（hongyangAndroid）原创首发。之前玩手机QQ时发现下面的图标竟然可以拖拽，发现还蛮好玩的。于是自己也模仿着写了一个。先上个效果图吧实现的方式有很多，我说一下我的思路：我的思路比较简单，无非就是上下两层图片可拖动的范围和速度不一样呗（大图标拖动范围和速度小于小图标拖动范围和速度）。备注（以第一个消息图标为例）：大图标指的是外面的气泡图标，小图标指的是气泡里面的...
复制链接

扫一扫