乱序卡片自定义View-DisorderCardView

先看图

设置gravity.gif

再看看点击卡片的效果和回调

点击卡片.gif

基本就是这样的效果，一般用在搜索栏的备选词或者热词

使用

使用起来也比较简单

<com.riverlet.disordercard.DisorderCardView
        android:id="@+id/disorder"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
------------------------------------------------------------------------------
        final DisorderCardView disorderCardView = findViewById(R.id.disorder);
        String[] datas = new String[]{"",""};
        disorderCardView.setData(Arrays.asList(datas));
        disorderCardView.setOnCarkClickListener(new DisorderCardView.OnCarkClickListener() {
            @Override
            public void onCardClick(String text) {
                Toast.makeText(MainActivity.this,text,Toast.LENGTH_SHORT).show();
            }
        });

也可以这样使用，把它当成一个可以让子布局自动换行的ViewGroup，不过卡片的样式就要自定义了，而且同一行的卡片高度要尽量一致

  <com.riverlet.disordercard.DisorderCardView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:text="火影忍者" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:text="火影忍者疾风传" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:text="王牌特工之特工学院" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:text="雷神3" />

    </com.riverlet.disordercard.DisorderCardView>

一些set代码

setGravity(Gravity.LEFT | Gravity.RIGHT | Gravity.CENTER_HORIZONTAL);//设置卡片靠左 | 靠右 | 水平居中
setCardTextColor(int cardTextColor);.//设置卡片文字颜色
setCardTextSize(int cardTextSize);//设置卡片文字大小
setCardBackground(int cardBackground);//设置卡片背景资源文件

实现代码

思路就是自动换行，当一行显示不了下一个卡片的全部的时候，自动排到下一行显示

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //遍历子View，测量每个View的大小
        for (int i = 0; i < getChildCount(); i++) {
            View view = getChildAt(i);
            measureChild(view, widthMeasureSpec, heightMeasureSpec);
        }
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        realWidth = r - l - paddingLeft - paddingRight;
        realHeight = b - t - paddingTop - paddingBottom;
        Log.d(TAG, "realWidth:" + realWidth + "...realHeight:" + realHeight);
        computeAndLayout();
    }

    //计算每一行要显示的卡片
    private void computeAndLayout() {
        int childCount = getChildCount();
        if (realWidth > 0 && realHeight > 0 && childCount > 0) {
            int hadUsedWidth = 0;
            int hadUsedHeight = 0;
            int startIndex = 0;
            int endIndex = 0;
            for (int i = 0; i < getChildCount(); i++) {
                View itemView = getChildAt(i);
                int cardWidth = itemView.getMeasuredWidth();
                int cardHeight = itemView.getMeasuredHeight();

                hadUsedWidth += cardWidth;
                if (hadUsedWidth > realWidth) {
                    endIndex = i - 1;
                    layoutItemInRaw(startIndex, endIndex, hadUsedHeight, hadUsedWidth - cardWidth - vertcalSpace);
                    hadUsedHeight += cardHeight + horizontalSpace;
                    hadUsedWidth = cardWidth;
                    startIndex = i;
                }

                if (i == childCount - 1) {
                    endIndex = i;
                    layoutItemInRaw(startIndex, endIndex, hadUsedHeight, hadUsedWidth);
                }

                hadUsedWidth += vertcalSpace;
            }
        }
    }

    //布局一行的卡片位置
    private void layoutItemInRaw(int startIndex, int endIndex, int hadUsedHeight, int widthInRaw) {
        Log.d(TAG, "layoutItem...startIndex:" + startIndex + "...endIndex:" + endIndex + "...widthInRaw:" + widthInRaw + "...realWidth:" + realWidth);
        int hadUsedWidth = 0;
        int leftSpace = 0;
        switch (gravity) {
            case Gravity.CENTER_HORIZONTAL:
                leftSpace = realWidth / 2 - widthInRaw / 2;
                break;
            case Gravity.LEFT:
                leftSpace = 0;
                break;
            case Gravity.RIGHT:
                leftSpace = realWidth - widthInRaw;
                break;
        }

        for (int i = startIndex; i <= endIndex; i++) {
            View itemView = getChildAt(i);
            int cardWidth = itemView.getMeasuredWidth();
            int cardHeight = itemView.getMeasuredHeight();
            hadUsedWidth += cardWidth;
            int left = hadUsedWidth - cardWidth + leftSpace + paddingLeft;
            int right = hadUsedWidth + leftSpace + paddingLeft;
            int top = hadUsedHeight + paddingTop;
            int bottom = hadUsedHeight + cardHeight + paddingTop;
            hadUsedWidth += vertcalSpace;
            Log.d(TAG, "left:" + left + "...right:" + right + "...top:" + top + "...bottom:" + bottom);
            itemView.layout(left, top, right, bottom);
        }
    }

我的需求比较简单，写的也就比较简单，满足不了的小伙不可以下载代码修改
代码地址:DisorderCard

暴富小时候.jpg