多布局之RecyclerView與Json數(shù)據(jù)（GridLayoutManager實現(xiàn)）+多選

昨天一哥們熊sir要早睡早起用到了RecyclerView說要達到多布局的效果，然后他提到了GridLayoutManager來實現(xiàn)，發(fā)現(xiàn)跟以往的常規(guī)的多布局有一點點不同，還是蠻有意思的。

ToolBar+DrawerLayout使用
Android 自定義側(cè)滑菜單效果(ViewDragHelper)
一站式CoordinatorLayout+ToolBar聯(lián)動使用

1、進入正文

  • LinearLayoutManager 線性布局管理器，支持橫向、縱向（效果相當于ListView的效果）。
  • GridLayoutManager 網(wǎng)格布局管理器。
  • StaggeredGridLayoutManager 瀑布流式布局管理器。

現(xiàn)在就是準備用GridLayoutManager來協(xié)助完成多布局。

2、舊事重提

老規(guī)矩還是在AS的build.gradle中添加依賴，然后同步一下就可以引入依賴包：

 compile 'com.android.support:recyclerview-v7:24.1.0'

效果展示

演示.gif

3、搞布局

把需要的布局羅列一下：

  • 一個主界面Activity的布局文件命名為activity_rvmoretype.xml
  • 兩種item樣式，分成兩個布局文件，標題的布局item_rvmoretype_title.xml，內(nèi)容的布局item_rvmoretype_content.xml。
    activity_rvmoretype.xml如下
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_rvmoretype"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:orientation="vertical"
    android:fitsSystemWindows="true"
    tools:context="com.sobergh.soberghalltest.widget.recyclerview.RVMoretypeActivity">

    <include layout="@layout/top_bar"
        android:id="@+id/toolbar"/>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_moretype"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:padding="20dp"
        android:overScrollMode="never"/>

    <!--style為去掉陰影效果-->
    <Button
        android:id="@+id/btn_moretype_submit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/selector_rvmoretype_btn"
        android:layout_margin="5dp"
        style="?android:attr/borderlessButtonStyle"
        android:text="提交"/>
</LinearLayout>

item_rvmoretype_title.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="50dp"
              android:gravity="center"
              android:minHeight="50dp"
              android:orientation="vertical">

    <TextView
        android:id="@+id/tv_moretype_title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:text="title"
        android:textSize="20sp"/>

</LinearLayout>

item_rvmoretype_content.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="30dp"
              android:gravity="center"
              android:minHeight="30dp"
              android:orientation="vertical">

    <TextView
        android:id="@+id/tv_moretype_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="content"
        android:background="@drawable/shape_homelist_location_normal"
        android:textSize="18sp"
        android:clickable="true"/>

</LinearLayout>

上面每個item都用到了選中與不選中背景也貼一下代碼：
非選中shape_homelist_location_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="15dp"/>
    <stroke android:width="1dp" android:color="#E5E5E5"/>
    <solid android:color="@android:color/white"/>

</shape>

選中shape_homelist_location_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="15dp"/>
    <solid android:color="@android:color/white"/>
    <stroke android:width="1dp" android:color="#5783EE"/>

</shape>

最后還有提交按鈕的背景selector_rvmoretype_btn.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" android:drawable="@drawable/shape_homelist_location_pressed"/>
    <item android:drawable="@drawable/shape_homelist_location_normal"/>

</selector>

布局都有了接下來就是常規(guī)的使用Recyclerview了。

4、擼代碼

用到了Json數(shù)據(jù)就要來一串Json數(shù)據(jù)和一個實體類。

{
    "data":[
        {
            "isTitle":"1",
            "content":"標題一取啥名",
            "price":""
        },
        {
            "isTitle":"0",
            "content":"內(nèi)容1",
            "price":"100"
        },
        {
            "isTitle":"0",
            "content":"內(nèi)容2",
            "price":"100"
        },
        {
            "isTitle":"0",
            "content":"內(nèi)容3",
            "price":"100"
        },
        {
            "isTitle":"0",
            "content":"內(nèi)容4",
            "price":"100"
        },
        {
            "isTitle":"0",
            "content":"內(nèi)容5",
            "price":"100"
        },
        {
            "isTitle":"0",
            "content":"內(nèi)容6",
            "price":"100"
        },
        {
            "isTitle":"0",
            "content":"內(nèi)容7",
            "price":"100"
        },
        {
            "isTitle":"1",
            "content":"標題二取啥名",
            "price":""
        },
        {
            "isTitle":"0",
            "content":"內(nèi)容1",
            "price":"100"
        },
        {
            "isTitle":"0",
            "content":"內(nèi)容2",
            "price":"100"
        },
        {
            "isTitle":"0",
            "content":"內(nèi)容3",
            "price":"100"
        },
        {
            "isTitle":"0",
            "content":"內(nèi)容4",
            "price":"100"
        },
        {
            "isTitle":"0",
            "content":"內(nèi)容5",
            "price":"100"
        },
        {
            "isTitle":"0",
            "content":"內(nèi)容6",
            "price":"100"
        },
        {
            "isTitle":"0",
            "content":"內(nèi)容7",
            "price":"100"
        }
    ]
}

字符串有了可以整個實體類了命名ContentModel：

/**
 * Created by Leogh on 2017/9/7.
 */

public class ContentModel {

    /**
     * isTitle : 1
     * content : 標題一取啥名
     * price :
     */

    private List<DataBean> data;

    public List<DataBean> getData() {
        return data;
    }

    public void setData(List<DataBean> data) {
        this.data = data;
    }

    public static class DataBean {
        private String isTitle;
        private String content;
        private String price;

        public String getIsTitle() {
            return isTitle;
        }

        public void setIsTitle(String isTitle) {
            this.isTitle = isTitle;
        }

        public String getContent() {
            return content;
        }

        public void setContent(String content) {
            this.content = content;
        }

        public String getPrice() {
            return price;
        }

        public void setPrice(String price) {
            this.price = price;
        }
    }
}

既然用到了RecyclerView那Adapter是少不了的了，解釋什么的一般就放在代碼里。

/**
 * Created by Leogh on 2017/9/7.
 */

public class MoreTypeAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{

    private ContentModel mDatas = null;
    private Context mContext;
    private int TITLE_VIEW = 1;//標題標識
    private int CONTENT_VIEW = 2;//內(nèi)容標識
    private SparseBooleanArray sparseBooleanArray = null;//緩存選中過的position

    public MoreTypeAdapter(ContentModel mDatas, Context mContext) {
        this.mDatas = mDatas;
        this.mContext = mContext;
        sparseBooleanArray = new SparseBooleanArray();
    }

    /**
     * 根據(jù)getItemViewType中返回的布局標識確定布局
     * @param parent
     * @param viewType
     * @return
     */
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        RecyclerView.ViewHolder holder = null;
        LayoutInflater inflater = LayoutInflater.from(mContext);
        if (viewType == TITLE_VIEW) {
            View view = inflater.inflate(R.layout.item_rvmoretype_title, parent, false);
            holder = new TitleViewHolder(view);
        } else {
            View view = inflater.inflate(R.layout.item_rvmoretype_content, parent, false);
            holder = new ContentViewHolder(view);
        }
        return holder;
    }

    /**
     * 綁定數(shù)據(jù)
     * @param holder
     * @param position
     */
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        if (holder instanceof TitleViewHolder) {
            ((TitleViewHolder) holder).tv_title.setText(mDatas.getData().get(position).getContent());
        } else if (holder instanceof ContentViewHolder){
            ((ContentViewHolder) holder).tv_content.setBackgroundResource(R.drawable.shape_homelist_location_normal);
            ((ContentViewHolder) holder).tv_content.setText(mDatas.getData().get(position).getContent());
            ((ContentViewHolder) holder).tv_content.setOnClickListener(new ClickItemListener(position));
        }
    }

    @Override
    public int getItemCount() {
        return mDatas.getData().size();
    }

    /**
     * 根據(jù)數(shù)據(jù)判斷使用什么樣的布局
     * @param position
     * @return 布局標識
     */
    @Override
    public int getItemViewType(int position) {
        if ("1".equals(mDatas.getData().get(position).getIsTitle())) {//標題
            return TITLE_VIEW;
        } else if ("0".equals(mDatas.getData().get(position).getIsTitle())) {//內(nèi)容
            return CONTENT_VIEW;
        }
        return super.getItemViewType(position);
    }

    public SparseBooleanArray getSelectedItemArray() {
        return sparseBooleanArray;
    }

    class ClickItemListener implements View.OnClickListener{
        private int currentPosition = -1;

        public ClickItemListener(int currentPosition) {
            this.currentPosition = currentPosition;
        }

        @Override
        public void onClick(View v) {
            if (currentPosition == -1) return;
            if (sparseBooleanArray.get(currentPosition)) {
                sparseBooleanArray.put(currentPosition, false);
                v.setBackgroundResource(R.drawable.shape_homelist_location_normal);
            } else {
                sparseBooleanArray.put(currentPosition, true);
                v.setBackgroundResource(R.drawable.shape_homelist_location_pressed);
            }
        }
    }

    class TitleViewHolder extends RecyclerView.ViewHolder {
        TextView tv_title;

        public TitleViewHolder(View itemView) {
            super(itemView);
            tv_title = (TextView) itemView.findViewById(R.id.tv_moretype_title);
        }
    }

    class ContentViewHolder extends RecyclerView.ViewHolder {
        TextView tv_content;
        public ContentViewHolder(View itemView) {
            super(itemView);
            tv_content = (TextView) itemView.findViewById(R.id.tv_moretype_content);
        }
    }
}

接下來就是Activity了：

public class RVMoretypeActivity extends BaseActivity implements View.OnClickListener{

    private RecyclerView rv_moretype = null;
    private Button btn_moretype_submit = null;

    private String jsonData = "";
    private ContentModel bean = null;
    private MoreTypeAdapter adapter = null;

    //這是繼承了自己封裝的BaseActivity重寫的方法 直接改成OnCreate就能用了 在繼承一下Activity就行了
    @Override
    public void init() {
        setContentView(R.layout.activity_rvmoretype);
        initView();
        initData();
        operRecyclerView();
    }

    private void initData() {
        String jsonStr = "{\"data\":[{\"isTitle\":\"1\",\"content\":\"標題一取啥名\",\"price\":\"\"},{\"isTitle\":\"0\",\"content\":\"內(nèi)容1\",\"price\":\"100\"},{\"isTitle\":\"0\",\"content\":\"內(nèi)容2\",\"price\":\"100\"},{\"isTitle\":\"0\",\"content\":\"內(nèi)容3\",\"price\":\"100\"},{\"isTitle\":\"0\",\"content\":\"內(nèi)容4\",\"price\":\"100\"},{\"isTitle\":\"0\",\"content\":\"內(nèi)容5\",\"price\":\"100\"},{\"isTitle\":\"0\",\"content\":\"內(nèi)容6\",\"price\":\"100\"},{\"isTitle\":\"0\",\"content\":\"內(nèi)容7\",\"price\":\"100\"},{\"isTitle\":\"1\",\"content\":\"標題二取啥名\",\"price\":\"\"},{\"isTitle\":\"0\",\"content\":\"內(nèi)容1\",\"price\":\"100\"},{\"isTitle\":\"0\",\"content\":\"內(nèi)容2\",\"price\":\"100\"},{\"isTitle\":\"0\",\"content\":\"內(nèi)容3\",\"price\":\"100\"},{\"isTitle\":\"0\",\"content\":\"內(nèi)容4\",\"price\":\"100\"},{\"isTitle\":\"0\",\"content\":\"內(nèi)容5\",\"price\":\"100\"},{\"isTitle\":\"0\",\"content\":\"內(nèi)容6\",\"price\":\"100\"},{\"isTitle\":\"0\",\"content\":\"內(nèi)容7\",\"price\":\"100\"}]}";
        Gson gson = new Gson();
        bean = gson.fromJson(jsonStr, ContentModel.class);
    }

    private void operRecyclerView() {
        adapter = new MoreTypeAdapter(bean, this);
        rv_moretype.addItemDecoration(new ItemDistanceDecoration(this));
        GridLayoutManager manager = new GridLayoutManager(this, 2);//兩列
        manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                if (adapter.getItemViewType(position) == 1) {
                    return 2;//title占兩列
                } else {
                    return 1;//內(nèi)容占一列
                }
            }
        });
        rv_moretype.setLayoutManager(manager);
        rv_moretype.setAdapter(adapter);
    }

    private void initView() {
        rv_moretype = (RecyclerView) findViewById(R.id.rv_moretype);
        btn_moretype_submit = (Button) findViewById(R.id.btn_moretype_submit);
        btn_moretype_submit.setOnClickListener(this);
    }

    @Override
    public String setTitle() {
        return "Recyclerview多布局";
    }


    @Override
    public void onClick(View v) {
        if (v.getId() == btn_moretype_submit.getId()) {
            if (adapter != null && adapter.getSelectedItemArray().size() > 0) {
                String selectedItem = "";
                SparseBooleanArray selectedItemArray = adapter.getSelectedItemArray();
                for (int i = 0; i < bean.getData().size(); i++) {
                    if (selectedItemArray.get(i)) {
                        selectedItem += "第" + i;
                    }
                }
                Toast.makeText(mActivity, selectedItem, Toast.LENGTH_SHORT).show();
                adapter.getSelectedItemArray().clear();
                adapter.notifyDataSetChanged();
            } else {
                Toast.makeText(mActivity, "你都沒有選 也想點我？", Toast.LENGTH_SHORT).show();
            }
        }
    }
}

注意了：（看黑板 這個是重點要考）
相對于正常的多布局，GridLayoutManager多布局這個時候就用了不一樣的方式，在setSpanSizeLookup來決定你的item要跨幾列顯示，標題當然是跨兩列，內(nèi)容只占一個位置。

manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                if (adapter.getItemViewType(position) == 1) {
                    return 2;//title占兩列
                } else {
                    return 1;//內(nèi)容占一列
                }
            }
        });

等一下，忘記貼分割線的東西了：

/**
 * Created by Leogh on 2017/9/7.
 */

public class ItemDistanceDecoration extends RecyclerView.ItemDecoration {
    private Context context;
    private int mDistance = 20;

    public ItemDistanceDecoration(Context context) {
        this.context = context;
        mDistance = dp2px(context, mDistance);
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        int s = parent.getChildAdapterPosition(view);
        int sss = parent.getAdapter().getItemViewType(parent.getChildAdapterPosition(view));
        if (parent.getAdapter().getItemViewType(parent.getChildAdapterPosition(view)) == 2) {//內(nèi)容item才加底部邊距
            outRect.bottom = mDistance;
        }
        outRect.right = mDistance;
        outRect.left = mDistance;

    }

    /**
     * dp轉(zhuǎn)px
     */
    private int dp2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
}

記錄完了，收工

最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容