Android RecyclerView的使用解析（二）

定制分隔線(xiàn)

在上一篇文章的學(xué)習(xí)中，我們對(duì)RecyclerView實(shí)現(xiàn)了一個(gè)ListView的效果，并給它設(shè)置了分割線(xiàn)，但是需要注意的是，這個(gè)分割線(xiàn)是默認(rèn)的。當(dāng)我們需要指定分割線(xiàn)的樣式時(shí)，就需要來(lái)定制它了，那么怎樣才能定制一個(gè)分割線(xiàn)樣式呢？

首先，我們要知道默認(rèn)的分割線(xiàn)資源是在哪里獲取的。通過(guò)DividerItemDecoration的源碼，我發(fā)現(xiàn)它是通過(guò)獲取系統(tǒng)Theme中的listDivider屬性來(lái)實(shí)現(xiàn)自己的，那么如果我們要定制分割線(xiàn)，只需對(duì)這個(gè)屬性進(jìn)行修改即可。
下面我們來(lái)定制一個(gè)顏色漸變效果的分割線(xiàn)。在drawable文件夾中新建一個(gè)文件，就叫做my_divider吧：

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

    <size android:height="5dp"/>

    <gradient android:startColor="#00904a" 
              android:centerColor="#ec3e01" 
              android:endColor="#0089ff"
              android:type="linear"/>

</shape>

接著我們修改values文件夾下的style.xml，將listDivder指定為我們剛剛創(chuàng)建的drawable：

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="android:listDivider">@drawable/my_divider</item>
    </style>
</resources>

重新運(yùn)行程序，效果如下：


My_divider

當(dāng)然，你也可以根據(jù)自己的需求定制不同的分隔線(xiàn)樣式。

變變變，變身GridView

大家或許已經(jīng)察覺(jué)到利用RecyclerView來(lái)實(shí)現(xiàn)ListView的功能要比傳統(tǒng)的ListView要來(lái)得復(fù)雜。這時(shí)你可能會(huì)有疑問(wèn)了，既然它這么復(fù)雜你干嘛還要用它呢，你不是閑得蛋疼嗎？
別急嘛，且聽(tīng)我慢慢道來(lái)，還記得前面提到過(guò)的LayoutManager嗎？你可別小瞧它哦，我們可以利用它快速得轉(zhuǎn)換布局樣式。

首先我們?cè)O(shè)置一個(gè)菜單以便切換布局樣式,在Mainactivity中復(fù)寫(xiě)onCreateOptionsMenu和onOptionsItemSelected方法，并在res/meun中新建一個(gè)meun：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.wuminmiao.recycleviewtest.MainActivity" >

      <item android:id="@+id/action_listView"
        android:title="ListView"
        android:orderInCategory="100"
        app:showAsAction="never" />
      <item android:id="@+id/action_gridView"
        android:title="GridView"
        android:orderInCategory="100"
        app:showAsAction="never" />
      <item android:id="@+id/action_sta_gridView"
        android:title="@string/action_sta_gridView"
        android:orderInCategory="100"
        app:showAsAction="never" />

</menu>

接著修改MainActivity中onOptionsItemSelected的代碼：

@Override
    public boolean onOptionsItemSelected(MenuItem item) {

        int id = item.getItemId();

        switch (id) {
            case R.id.action_listView:
                mRecyclerView.setLayoutManager (new LinearLayoutManager (this));
                break;
            case R.id.action_gridView:
                mRecyclerView.setLayoutManager (new GridLayoutManager (this, 3));
                break;
            case R.id.action_sta_gridView:

                break;
        }

        return super.onOptionsItemSelected(item);
    }

重新運(yùn)行程序，效果如下：

Recyclerview4more_layout

可以看到我們GridView的效果順利實(shí)現(xiàn)了呢，我們只需改變一行代碼就可以從ListView快速得切換到GridView，是不是很方便呢？

不過(guò)大家可能也注意到了，GridView的分隔線(xiàn)只有水平方向有，而垂直方向卻沒(méi)有。這是因?yàn)槲覀兌ㄖ频膁ivider只繪制了item水平方向的分隔線(xiàn)，并沒(méi)有繪制垂直方向的分隔線(xiàn)。為了更清晰的顯示GridView，我們把MainActivity中設(shè)置分隔線(xiàn)的代碼給注釋掉：

//mRecyclerView.addItemDecoration (new DividerItemDecoration (this,
//      DividerItemDecoration.VERTICAL_LIST));

然后給item的布局文件設(shè)置一個(gè)margin:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
             android:background="#add8e6"
             android:layout_margin="1dp"
             android:layout_height="70dp">
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"/>
</FrameLayout>

現(xiàn)在GridView的效果就完整的顯示出來(lái)了：

RecyclerView4GridView

實(shí)現(xiàn)瀑布流效果

如果看了上面的效果你還是對(duì)RecyclerView不是很滿(mǎn)意的話(huà)，那么接下來(lái)我相信它定會(huì)讓你心服口服。
首先，為了不妨礙我們當(dāng)前activity的顯示效果，我們新建一個(gè)activity來(lái)顯示瀑布流的效果，新建StaggeredGridLayoutActivity，這里我們只需對(duì)原有的MainActivity代碼略微修改即可：

import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.view.Menu;
import android.view.MenuItem;

import java.util.ArrayList;
import java.util.List;

public class StaggeredGridActivity extends Activity {

    private RecyclerView mRecyclerView;
    private RecyclerView.Adapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;
    private List<String> mDataset;
    

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate (savedInstanceState);
        setContentView (R.layout.activity_main);
        initViews();
        initData();
        mLayoutManager = new StaggeredGridLayoutManager (3,
                StaggeredGridLayoutManager，.VERTICAL);//將LayoutManger設(shè)為StaggeredGridLayoutManager，也就是瀑布流布局
        mRecyclerView.setLayoutManager (mLayoutManager);//設(shè)置布局管理器
        mAdapter = new StagggeredAdapter (this, mDataset);//將適配器設(shè)為等下新建的StagggeredAdapter
        mRecyclerView.setAdapter (mAdapter);//設(shè)置適配器
//        mRecyclerView.addItemDecoration (new DividerItemDecoration (this,
//                DividerItemDecoration.VERTICAL_LIST));
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return super.onCreateOptionsMenu(menu);
    }

    private void initViews() {
        mRecyclerView = (RecyclerView) findViewById (R.id.test_recycle_view);
    }

    private void initData() {
        mDataset = new ArrayList<String> ();
        for ( int i = 0; i <= 50; i++) {
            mDataset.add( "item"+i);
        }
    }

}

可以看到，這里我們只需把LayoutManger設(shè)置為StagggeredgridLayoutManager，并把a(bǔ)dapter指定為即將創(chuàng)建的StagggeredAdapter，最后把不必要的onOptionsItemSelected方法刪除即可。

那么，接下來(lái)我們來(lái)創(chuàng)建StagggeredAdapter，同樣，我們只需在之前TestAdapter代碼的基礎(chǔ)上略作修改便可，StagggeredAdapter代碼如下：

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by wuminmiao on 2016/10/13.
 */

public class StagggeredAdapter extends RecyclerView.Adapter<StagggeredAdapter.MyViewHolder> {

    private Context mContext;
    private List<String> mDataset;
    private LayoutInflater mInflater;

    private List<Integer> mHeight;

    //提供一個(gè)合適的構(gòu)造方法
    public StagggeredAdapter(Context context, List<String> dataset) {
        this.mContext = context;
        this.mDataset = dataset;
        mInflater = LayoutInflater.from (context);

        mHeight = new ArrayList<Integer> ();
        for (int i = 0; i < mDataset.size (); i++) {
            mHeight.add ((int) (100 + Math.random ()*300));
        }
    }

    /**
     *創(chuàng)建ViewHolder
     * @param viewGroup
     * @param viewType
     * @return
     */
    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
        View view = mInflater.inflate (R.layout.item, viewGroup, false);
        MyViewHolder viewHolder = new MyViewHolder (view);
        return viewHolder;
    }

    /**
     * 建立起MyViewHolder中視圖與數(shù)據(jù)的關(guān)聯(lián)
     * @param viewHolder
     * @param position
     */
    @Override
    public void onBindViewHolder(MyViewHolder viewHolder, int position) {
        viewHolder.mTextView.setText(mDataset.get (position));
        ViewGroup.LayoutParams lp  = viewHolder.itemView.getLayoutParams ();
        lp.height = mHeight.get (position);
        viewHolder.itemView.setLayoutParams (lp);
    }

    /**
     * 獲取item的數(shù)目
     * @return
     */
    @Override
    public int getItemCount() {
     return mDataset.size ();
    }

    //自定義的ViewHoder，持有item的所有控件
    public static class MyViewHolder extends RecyclerView.ViewHolder {
         TextView mTextView;
        public MyViewHolder(View view) {
            super (view);
            mTextView = (TextView) view.findViewById(R.id.text);
        }
    }
}

在這段代碼中，我們主要想實(shí)現(xiàn)的是給每個(gè)item設(shè)置一個(gè)隨機(jī)的高度。

首先定義一個(gè)成員變量mHeight，然后在構(gòu)造方法中對(duì)它初始化，利用Math.random方法讓它產(chǎn)生一些隨機(jī)數(shù)。接著在onBindViewHolder方法中把剛剛得到的mHeight數(shù)據(jù)綁定到布局參數(shù)中并交由viewHolder處理，以實(shí)現(xiàn)設(shè)置item高度的目的。

最后在MainActivity中菜單的item中利用Intent打開(kāi)StaggeredGridLayoutActivity：

  case R.id.action_sta_gridView:
                Intent intent = new Intent (this, StaggeredGridActivity.class);
                startActivity (intent);
                break;

最后的最后，別忘了，在manifest中對(duì)StaggeredGridLayoutActivity進(jìn)行注冊(cè)。

來(lái)看看成果吧：

RecyclerView4StaggeredGridView

Bingo，我們順利地實(shí)現(xiàn)了瀑布流的效果，是不是很簡(jiǎn)單??！

小結(jié)

OK，我們來(lái)回顧一下本文的主要內(nèi)容。首先，我們對(duì)RecyclerView的自定義分割線(xiàn)進(jìn)行了講解，在這里，我們巧妙的運(yùn)用了系統(tǒng)的listDivider資源來(lái)實(shí)現(xiàn)分隔線(xiàn)的定制。以后的學(xué)習(xí)中，我們亦要延續(xù)這樣的思維方式，以達(dá)到化繁為簡(jiǎn)的目的。接著，我們快速實(shí)現(xiàn)了RecyclerView的布局轉(zhuǎn)換，這也是RecyclerView一大特色，我們可以方便地實(shí)現(xiàn)網(wǎng)格效果和瀑布流效果，這是ListView所不具備的。

在下篇文章Android RecyclerView的使用解析（完結(jié)篇）中，我將對(duì)RecylerView添加動(dòng)畫(huà)效果和點(diǎn)擊事件進(jìn)行詳解。

該系列文章首發(fā)在我的個(gè)人博客中

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

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

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