欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

SelectLayout-一个选择放大的Layout

程序员文章站 2022-05-24 20:41:28
...

SelectLayout

SelectLayout一个选中放大的容器。

先看看效果吧

SelectLayout-一个选择放大的Layout

整体思路

从设计那里得知要这么一个效果时候,第一反应就是用ViewPager或者画廊等去实现,也找了对应的资料,但是最终效果都不是很满意,给两个ViewPager实现类似效果的链接仿土巴兔ViewPagerCards
最终还是通过最基本的平移动画和缩放动画效果实现的,自定义一个继承自RelativeLayout的Layout,至于为什么是RelativeLayout后面说到哈。通过放大中间的一个View,然后每次点击或者滑动出发切换时候,通过动画平移和缩放子View。接下来一起来看看代码。

自定义属性

<declare-styleable name="SelectLayout">
        <!--大小球中间间隔和小球的缩放比例-->
        <attr name="spaceScale" format="float"/>
        <!--大小球的缩放比例-->
        <attr name="scale" format="float"/>
        <!--是否相应滑动事件-->
        <attr name="isMoveScrollable" format="boolean"/>
        <!--动画时长-->
        <attr name="animTime" format="integer"/>
 </declare-styleable>

这里提供了四各自定义属性,注释都写得很清楚了。
其中spaceScale这个值,大小View中间的间隔占小View的比例,如小View宽80dp,间距想设置为20dp,那么这个值应该为0.25;其中spaceScale这个值,是view放大的比例,如80dp->100dp,那么这个值就是(100-80)/80=0.25;

下面是自定义值的获取,记得后面要调用recycle()

 //自定义属性的获取
        TypedArray ta=context.obtainStyledAttributes(attrs, R.styleable.SelectLayout,defStyleAttr,0);
        isMoveScrollable=ta.getBoolean(R.styleable.SelectLayout_isMoveScrollable,true);
        mScale=ta.getFloat(R.styleable.SelectLayout_scale,0.3f);
        mSpaceScale=ta.getFloat(R.styleable.SelectLayout_spaceScale,0.2f);
        mAnimTime=ta.getInt(R.styleable.SelectLayout_spaceScale,500);
        ta.recycle();

子View相关属性值获取

接下来就需要获取子View以及他们的宽高,在onFinishInflate()方法里面可以获取到View,这个方法表示着ViewGroup已经完成了布局:

@Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        initView();
    }
    /**
     * 初始化View
     */
    public void initView() {
        viewLeft=findViewById(R.id.viewLeft);
        viewCenter=findViewById(R.id.viewCenter);
        viewRight=findViewById(R.id.viewRight);

        viewLeft.setOnClickListener(this);
        viewCenter.setOnClickListener(this);
        viewRight.setOnClickListener(this);
    }

然后再onSizeChanged()方法里面可以获取到子View的一些宽高属性:

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

    /**
     * 初始化View大小 缩放比例
     */
    private void initSize() {
        //两边小的宽度
        mMinWidth=viewLeft.getMeasuredWidth();
        //按照比例设置间距
        mSpaceWidth=mMinWidth*mSpaceScale;
        //中间放大的宽度
        mMaxWidth=mMinWidth*(1+mScale);
        //默认中间一个View放大
        viewCenter.setScaleX(1+mScale);
        viewCenter.setScaleY(1+mScale);

        if(mMaxWidth>getMeasuredHeight()){//缩放法高度大于Layout高度  重新设置高度 自适应
            setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,(int)mMaxWidth));
        }

        //设置中间布局margin
        LayoutParams params= (LayoutParams) viewCenter.getLayoutParams();
        params.leftMargin= (int) (mSpaceWidth+mMinWidth*mScale/2);//间距加上放大的边距
        params.rightMargin= (int) (mSpaceWidth+mMinWidth*mScale/2);
        viewCenter.setLayoutParams(params);
    }

这里要注意,调用的是getMeasuredWidth(),而不是getWidth(),getWidth()此时还是0,只有当已经显示在屏幕上面才会有值的。

动画实现基本效果

其实动画很简单,这里面主要用到了属性动画,完成平移以及缩放。先来分析从最初的状态,点击左边时候的整个过程:
SelectLayout-一个选择放大的Layout
左是从左往右平移一个 左边View一半+间隔+放大后的View宽度的一半,然后放大mScale;
中是从左往右平移一个 左边View一半+间隔+放大后的View宽度的一半,然后缩小mScale;
又是从左往左平移一个 (左边View一半+间隔+放大后的View宽度的一半)*2;

if(currentSelect== CurrentSelect.center) {//左边到中间
                //左边View平移 方大
                ObjectAnimator animator1 = ObjectAnimator.ofFloat(viewLeft, "translationX", 0, mMinWidth/2+mMaxWidth/2+mSpaceWidth);
                ObjectAnimator animator2 = ObjectAnimator.ofFloat(viewLeft, "scaleX", 1, 1+mScale);
                ObjectAnimator animator3 = ObjectAnimator.ofFloat(viewLeft, "scaleY", 1, 1+mScale);
                //中间View 右移 缩小
                ObjectAnimator animator4 = ObjectAnimator.ofFloat(viewCenter, "translationX",0, mMinWidth/2+mMaxWidth/2+mSpaceWidth);
                ObjectAnimator animator5 = ObjectAnimator.ofFloat(viewCenter, "scaleX", 1+mScale,1f);
                ObjectAnimator animator6 = ObjectAnimator.ofFloat(viewCenter, "scaleY", 1+mScale,1f);
                //右边View 左移
                ObjectAnimator animator7 = ObjectAnimator.ofFloat(viewRight, "translationX",0, -(mMinWidth+mMaxWidth+mSpaceWidth*2));

                playAnim(CurrentSelect.left,animator1, animator2, animator3,animator4, animator5, animator6,animator7);
            }

其他情况都是类似的逻辑,就不赘述了。需要注意的是,动画的起始位置和结束位置都是相对于最开始的布局的,动画只是改变view的表现形式,并不会改变view真正的位置。

滑动切换

点击按钮切换基本已经实现了,下面就来看看怎么实现滑动实现。自然是获取到滑动到距离,是否超过一定距离,判断是左滑还是右滑,然后切换选中状态。由于涉及到子View的点击事件,所以需要用到事件分发:

float downX=0;
    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        if(isMoveScrollable) {//响应滑动事件  事件分发
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    downX = event.getX();
                    break;
                case MotionEvent.ACTION_MOVE:
                    float moveX = event.getX();
                    if (Math.abs(moveX - downX) > 50 && moveX > downX) {//右滑
                        downX = moveX;
                        if (currentSelect == CurrentSelect.left) {
                            onItemClick(false,3);
                        } else if (currentSelect == CurrentSelect.center) {
                            onItemClick(false,1);
                        } else {
                            onItemClick(false,2);
                        }
                        return true;
                    } else if (Math.abs(moveX - downX) > 50 && moveX < downX) {//左滑
                        downX = moveX;
                        if (currentSelect == CurrentSelect.left) {
                            onItemClick(false,2);
                        } else if (currentSelect == CurrentSelect.center) {
                            onItemClick(false,3);
                        } else {
                            onItemClick(false,1);
                        }
                        return true;
                    }
                    break;
            }
        }
        return super.dispatchTouchEvent(event);
    }

我们这里只需要关心X轴值的变化就行,在move里面判断是左滑或者右滑后,切换选中view,并且返回true表示本身消费了这次事件,不会再往下分发该事件。

View的完善

外部在使用Layout的时候,肯定需要知道我们当前选中的View,以及状态切换的监听。

/**
     * 选中状态更改回调
     */
    public interface OnSelectChangedListener{
        /**
         * 选中项改变
         * @param current
         */
        public void onSelectChange(CurrentSelect current);

        /**
         * 选中项被点击
         */
        public void onSelectClick();
    }

还有一些其他属性的设置

/**
     * 设置动画时间
     * @param animTime
     */
    public void setAnimTime(int animTime) {
        mAnimTime = animTime;
    }

    /**
     * 是否能够滑动
     * @param moveScrollable
     */
    public void setMoveScrollable(boolean moveScrollable) {
        isMoveScrollable = moveScrollable;
    }

还有一点就是开头说的为什么用的是RelativeLayout,其实最开始我用的是LinearLayout。功能都已经实现了,但是后面发现动画的时候,左边的始终是在最下面一层,右边的始终在最上面一层,体验效果非常不好,没有循环的效果。经过仔细观察,问题是因为子View的ViewGroup的层级关系问题,问题来了,那怎么才可以更改子View的层级关系么。经过一番查询,view.bringToFront(),这个方法正是我们要找的。但是在LinearLayout中尝试了并没有效果,于是我就只能用RelativeLayout了,哈哈。要是有其他更好的方法请指教。

viewRight.bringToFront();
viewCenter.bringToFront();
viewLeft.bringToFront();

说明

这个Layout里面获取子View是根据子View的id获取的,所以务必将三个字View的Id分别设置为viewLeft、viewCenter、viewRight。好吧,我承认这是一个很操蛋的地方,如果不这样,那么就通过getChildAt()索引获取,那样也有一定的限制。有需要就自行修改吧。我只是做个笔记

最后附上源码地址:https://github.com/HanJinLiang/SelectLayout