RecyclerView(ListView) 画网格

本文出自:http://www.voidcn.com/article/p-dcilieit-ep.html

一丶慨述

好久没写博客了,最近受“多学多看多敲代码少写博客”影响,发现很多东西看了不总结下还是及其容易忘得,博客坚持

二丶效果图

           

三丶上代码

图一运用的是bg,三个bg.xml解决问题

(1)最上面的整个框

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- This is the main color -->
    <item>
        <shape>
            <!-- 边框颜色 -->
            <solid android:color="#e6e6e6"/>
        </shape>
    </item>
    <!-- 给View的上 左  右设置8dp的边框 -->
    <item
        android:top="1dp"
        android:left="1dp"
        android:right="1dp"
        android:bottom="1dp">
        <shape>
            <!-- View填充颜色 -->
            <solid android:color="#f5f5f5"/>
        </shape>
    </item>

</layer-list>
(2)不画top的

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<!-- This is the main color -->
<item>
    <shape>
        <!-- 边框颜色 -->
        <solid android:color="#e6e6e6"/>
    </shape>
</item>
<!-- 给View的上 左  右设置8dp的边框 -->
<item
    android:left="1dp"
    android:right="1dp"
    android:bottom="1dp">
    <shape>
        <!-- View填充颜色 -->
        <solid android:color="@color/white"/>
    </shape>
</item>

</layer-list>
(3)和(2)一样,只是内部颜色换了而已

如图颜色是兑换的,adapter里加判断就行了

if(position%2 == 0){
    viewHolder.ll_channelCompare.setBackgroundResource(R.drawable.bg_channel_compare_white_item);
}else{
    viewHolder.ll_channelCompare.setBackgroundResource(R.drawable.bg_channel_compare_item);
}

再说说图二网格

竖线是在.xml布局里写好的

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <View
        android:layout_width="match_parent"
        android:layout_height="0.1dp"
        android:background="@color/gray3"
        android:visibility="gone" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <View style="@style/gridDivider" />

        <TextView
            android:id="@+id/tv_fincCategory"
            style="@style/financeDetailTitle"
            android:layout_weight="0.8"
            android:gravity="start"
            android:lineSpacingExtra="3dp"
            android:paddingLeft="12dp"
            android:text="@string/fansNoData"
            android:textColor="@color/black33" />

        <View style="@style/gridDivider" />

        <TextView
            android:id="@+id/tv_fincRealNum"
            style="@style/financeDetailTitle"
            android:lineSpacingExtra="3dp"
            android:text="@string/fansNoData" />

        <View style="@style/gridDivider" />

        <LinearLayout
            android:id="@+id/ll_budgetP"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="end"
            android:layout_weight="1"
            android:orientation="vertical"
            android:paddingBottom="6dp"
            android:paddingRight="8dp">

            <TextView
                android:id="@+id/tv_fincBudgetNum"
                style="@style/financeDetailTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:lineSpacingExtra="5dp"
                android:text="@string/fansNoData" />

            <TextView
                android:id="@+id/tv_fExcRatio"
                android:layout_width="wrap_content"
                android:layout_height="19dp"
                android:layout_gravity="end"
                android:layout_marginTop="5dp"
                android:background="@drawable/back_but_bg"
                android:ellipsize="marquee"
                android:gravity="center"
                android:maxHeight="19dp"
                android:minWidth="44dp"
                android:paddingLeft="2dp"
                android:paddingRight="2dp"
                android:singleLine="true"
                android:text="@string/fansNoData" />

        </LinearLayout>

        <View style="@style/gridDivider" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:paddingBottom="6dp"
            android:paddingRight="8dp">

            <TextView
                android:id="@+id/tv_fincCompNum"
                style="@style/financeDetailTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:lineSpacingExtra="5dp"
                android:text="@string/fansNoData" />

            <TextView
                android:id="@+id/tv_fCompRatio"
                android:layout_width="wrap_content"
                android:layout_height="19dp"
                android:layout_gravity="end"
                android:layout_marginTop="5dp"
                android:background="@drawable/finance_arraise_bg"
                android:ellipsize="marquee"
                android:gravity="center"
                android:minHeight="19dp"
                android:minWidth="44dp"
                android:paddingLeft="2dp"
                android:paddingRight="2dp"
                android:singleLine="true"
                android:text="@string/fansNoData" />

        </LinearLayout>

        <View style="@style/gridDivider" />

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="0.1dp"
        android:background="@color/gray3" />

</LinearLayout>
左中右text在layout里用比例,这样竖线就不会出现不在一条线上的情况

<!--网格线代替-->
<style name="gridDivider">
    <item name="android:layout_height">match_parent</item>
    <item name="android:layout_width">0.2dp</item>
    <item name="android:background">@color/gray3</item>
</style>
竖线画好了,现在画横线

方法一就是跟图一一样用背景解决,

方法二就是RecyclerView的自定义画线

mRecyclerView.addItemDecoration(new DividerItemDecoration(mContext,
        DividerItemDecoration.VERTICAL_LIST));

public class DividerItemDecoration extends RecyclerView.ItemDecoration {
    private static final int[] ATTRS = new int[]{
            android.R.attr.listDivider  };

    public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;

    public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;

    private Drawable mDivider;

    private int mOrientation;

    public DividerItemDecoration(Context context, int orientation) {
        final TypedArray a = context.obtainStyledAttributes(ATTRS);
        mDivider = a.getDrawable(0);
        a.recycle();
        setOrientation(orientation);
    }

    public void setOrientation(int orientation) {
        if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST) {
            throw new IllegalArgumentException("invalid orientation");
        }
        mOrientation = orientation;
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent) {
        /**/
        if (mOrientation == VERTICAL_LIST) {
            drawVertical(c, parent);
        } else {
            drawHorizontal(c, parent);
        }
    }

    public void drawVertical(Canvas c, RecyclerView parent) {
        final int left = parent.getPaddingLeft();
        final int right = parent.getWidth() - parent.getPaddingRight();

        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            android.support.v7.widget.RecyclerView v = new android.support.v7.widget.RecyclerView(parent.getContext());
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                    .getLayoutParams();
            final int top = child.getBottom() + params.bottomMargin;
            final int bottom = top + mDivider.getIntrinsicHeight();
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
        }
    }

    public void drawHorizontal(Canvas c, RecyclerView parent) {
        final int top = parent.getPaddingTop();
        final int bottom = parent.getHeight() - parent.getPaddingBottom();

        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                    .getLayoutParams();
            final int left = child.getRight() + params.rightMargin;
            final int right = left + mDivider.getIntrinsicHeight();
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
        }
    }

    @Override
    public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {
        if (mOrientation == VERTICAL_LIST) {
            outRect.set(0, 0, 0, 0); //mDivider.getIntrinsicHeight()
        } else {
            outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
}
    }

}
相关文章
相关标签/搜索