Recyclerview使用體驗（一）

  • 僅作為自己在使用recyclerview過程中一點點記錄，
  • 使用Recyclerview已經(jīng)有一定時間，項目中也用了很久，總覺得該親自整理一下，也算是自己回顧一下Recyclerview的知識，然后嘗試去深層次的了解Recyclerview，只會用，不了解，也不算是會用；
  • 如果你想嘗試Recyclerview，正好又看到這個文章，嗯哼0.0，那你就好好看看吧。
  • 廢話不多說，直接開整

首先當然是添加依賴，根據(jù)當前sdk版本，選擇合適的依賴，Recyclerview是V7包提供的，所以呢？
compile 'com.android.support:appcompat-v7:24.0.0'
compile 'com.android.support:recyclerview-v7:24.0.0'
第一個不必說，第二個就是我們需要的導入的包了，rebuild一下，看看是否導入成功，只要根據(jù)自己使用的sdk版本，一般是沒有意外的，如果有了


很明顯是你導入錯了。

  • 導入成功，接下來就是布局里使用了

    <?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:layout_width="match_parent"    
    android:layout_height="match_parent"    
    android:orientation="vertical">    
    <android.support.v4.widget.SwipeRefreshLayout        
        android:id="@+id/swipeRefresh"        
        android:layout_width="match_parent"       
        android:layout_height="match_parent">       
        <android.support.v7.widget.RecyclerView           
           android:id="@+id/recyclerview"            
           android:layout_width="match_parent"            
           android:layout_height="match_parent" />
   </android.support.v4.widget.SwipeRefreshLayout>
 </LinearLayout>

  • 布局很簡單，SwipeRefreshLayout包裹Recyclerview，實現(xiàn)下拉刷新
    回到代碼中

public class MainActivity extends AppCompatActivity {
@InjectView(R.id.recyclerview)
RecyclerView recyclerview;
@InjectView(R.id.swipeRefresh)
SwipeRefreshLayout swipeRefresh;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.inject(this);
initData();
}
}

Recyclerview和SwipeRefreshLayout初始化完成，開始加載數(shù)據(jù)實現(xiàn)Recyclerview的多種實現(xiàn)布局；


![先請求到數(shù)據(jù).png](http://upload-images.jianshu.io/upload_images/2789715-d9ac349d9a7c5c9e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

有了數(shù)據(jù)之后，和ListView一樣，需要設(shè)置適配器，但是Recyclerview得適配器和ListView適配器，不完全一樣；假設(shè)Recyclerview適配器定義為Adapter
      
    public class Adapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return null;
    }
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
    }
    @Override
    public int getItemCount() {
        return 0;
    }
    }

我們真正要實現(xiàn)的是重寫一個ViewHolder，繼承 Recyclerview.ViewHolder；

      public class ItemHolder extends RecyclerView.ViewHolder {
        public ItemHolder(View itemView) {
            super(itemView);
        }
    }

設(shè)置Adapter的布局

<?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="60dp"
android:paddingLeft="10dp"
android:paddingTop="10dp">

<ImageView
    android:id="@+id/imageView"
    android:layout_width="40dp"
    android:layout_height="40dp" />

<TextView
    android:id="@+id/textView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_vertical"
    android:layout_marginLeft="15dp"
    android:drawableBottom="@drawable/line"
    android:ellipsize="end"
    android:gravity="center_vertical"
    android:text="123"
    android:textColor="@color/colorAccent"
    android:textSize="16sp" />

</LinearLayout>

</LinearLayout>

回到Adapter

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

private Context context;
private ArrayList<String> datas;

public Adapter(Context context, ArrayList<String> datas) {
    this.context = context;
    this.datas = datas;
}

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    return new ItemHolder(LayoutInflater.from(context).inflate(R.layout.item_adapter, null));
}

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

}

@Override
public int getItemCount() {
    return datas.size() == 0 ? 0 : datas.size();
}

public class ItemHolder extends RecyclerView.ViewHolder {
    private ImageView imageView;
    private TextView textView;

    public ItemHolder(View itemView) {
        super(itemView);
        this.imageView = (ImageView) itemView.findViewById(R.id.imageView);
        this.textView = (TextView) itemView.findViewById(R.id.textView);
    }
}

}

最后數(shù)據(jù)綁定

/**

  • Creation time : 2016/11/22 21:01
  • Fix time : 2016/11/22 21:01
    */

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

private Context context;
private List<String> datas;

public Adapter(Context context, List<String> datas) {
    this.context = context;
    this.datas = datas;
}

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    return new ItemHolder(LayoutInflater.from(context).inflate(R.layout.item_adapter, null));
}

//綁定數(shù)據(jù)
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
bindViewHolder((ItemHolder) holder);

}

private void bindViewHolder(ItemHolder holder) {
    for (int i = 0; i < this.datas.size() - 1; i++) {
        holder.textView.setText(datas.get(i));
        holder.imageView.setBackgroundResource(R.drawable.musiclogo144);
    }
}


@Override
public int getItemCount() {
    return datas.size() == 0 ? 0 : datas.size();
}

public class ItemHolder extends RecyclerView.ViewHolder {
    private ImageView imageView;
    private TextView textView;

    public ItemHolder(View itemView) {
        super(itemView);
        this.imageView = (ImageView) itemView.findViewById(R.id.imageView);
        this.textView = (TextView) itemView.findViewById(R.id.textView);
    }
}

}

回到加載數(shù)據(jù)部分

/**
 * 請求數(shù)據(jù)
 */
private void initData() {
    //假設(shè)聯(lián)網(wǎng)請求數(shù)據(jù)N條,這里我就用本地數(shù)據(jù)
    data = null;
    for (int i = 0; i < 40; i++) {
        data.add(i, i + ". 成功請求數(shù)據(jù)");
    }
    adapter = new Adapter(MainActivity.this, data);
    recyclerview.setAdapter(adapter);
}

編譯運行

但是什么都沒有，因為我們沒有設(shè)置LayoutManager，Recyclerview需要設(shè)置LayoutManager，才能顯示；

public class MainActivity extends AppCompatActivity {

@InjectView(R.id.recyclerview)
RecyclerView recyclerview;
@InjectView(R.id.swipeRefresh)
SwipeRefreshLayout swipeRefresh;
private static final int GET = 1;
private LinearLayoutManager linearLayoutManager;  
private GridLayoutManager gridLayoutManager;
private StaggeredGridLayoutManager staggeredGridLayoutManager;
private List<String> data;
private RecyclerView.LayoutManager layoutmanager;
private Adapter adapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ButterKnife.inject(this);
       linearLayoutManager = new LinearLayoutManager(MainActivity.this);  //常見縱向布局

// linearLayoutManager = new LinearLayoutManager(MainActivity.this,LinearLayoutManager.HORIZONTAL,true); //水平方向，最后一個參數(shù)是否逆向
gridLayoutManager = new GridLayoutManager(MainActivity.this, 2); //類似GridView的格式，第二個參數(shù)為行的item數(shù)量，同理，也有水平方向的GridLayoutManager；
staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL); //瀑布流，第一個為每行item數(shù)量
layoutmanager = linearLayoutManager; //默認為縱向的Recyclerview；
initData();
}

@Override
public boolean onCreateOptionsMenu(Menu item) {
    getMenuInflater().inflate(R.menu.main_menu, item);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.linearlayout:
            layoutmanager = linearLayoutManager;
            initData();
            break;
        case R.id.gridlayout:
            layoutmanager = gridLayoutManager;
            break;
        case R.id.staggeredgridlayout:
            layoutmanager = staggeredGridLayoutManager;
            initData();
            break;
        default:
            layoutmanager = linearLayoutManager;
            initData();
            break;
    }
    return super.onOptionsItemSelected(item);
}

/**
 * 請求數(shù)據(jù)
 */
private void initData() {
    //假設(shè)聯(lián)網(wǎng)請求數(shù)據(jù)N條,這里我就用本地數(shù)據(jù)
    data = new ArrayList<>();
    for (int i = 0; i < 40; i++) {
        data.add(i + ". 成功請求數(shù)據(jù)");
    }
    recyclerview.setLayoutManager(layoutmanager);
    adapter = new Adapter(MainActivity.this, data);
    recyclerview.setHasFixedSize(true);
    recyclerview.setAdapter(adapter);
}

}

默認的LayoutManager

![LayoutManager==LinearLayoutManager.png](http://upload-images.jianshu.io/upload_images/2789715-3701f5ba45cdff7d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
那么切換LayoutManager為GridLayoutManager，效果會是什么樣呢

![LayoutManager為GridLayoutManager.png](http://upload-images.jianshu.io/upload_images/2789715-140c3fc0ad08fe70.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

最后，切換到瀑布流


![LayoutManager為StaggeredGridLayoutManager.png](http://upload-images.jianshu.io/upload_images/2789715-0cfd753ab973a980.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

什么效果都沒有，這是為什么呢，因為，設(shè)置瀑布流，我們需要對item的間隙進行設(shè)置，不然沒有效果
首先自定義ItemDecoration

public class ItemDecoration extends RecyclerView.ItemDecoration {

private int space;

public ItemDecoration(int space) {
    this.space = space;
}

@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
    outRect.left = space;
    outRect.right = space;
    outRect.bottom = space;
    if (parent.getChildAdapterPosition(view) == 0) {
        outRect.top = space;
    }
}

}

設(shè)置間隙


 * 請求數(shù)據(jù)
 */
private void initData() {
    //假設(shè)聯(lián)網(wǎng)請求數(shù)據(jù)N條,這里我就用本地數(shù)據(jù)
    data = new ArrayList<>();
    for (int i = 0; i < 40; i++) {
        data.add(i + ". 成功請求數(shù)據(jù)");
    }
    recyclerview.setLayoutManager(layoutmanager);
    if(layoutmanager.equals(staggeredGridLayoutManager)) {   //針對瀑布流，設(shè)置間隙
        recyclerview.addItemDecoration(new ItemDecoration(15));
    }
    adapter = new Adapter(MainActivity.this, data);
    recyclerview.setHasFixedSize(true);
    recyclerview.setAdapter(adapter);
}

重新編譯運行，搞定

![瀑布流效果.png](http://upload-images.jianshu.io/upload_images/2789715-18bd62a8639f13fc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
這算是Recyclerview的簡單使用，實現(xiàn)三種模式，已經(jīng)搞定，還有很多細節(jié)，留到下一篇，仔細講解。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,040評論 25贊 709
  • 這篇文章分三個部分，簡單跟大家講一下 RecyclerView 的常用方法與奇葩用法；工作原理與ListView比...
    LucasAdam閱讀 4,704評論 0贊 27
  • 本來想寫到簡書上的，不知為什么簡書登不了，可能崩了吧。然后到blogbus寫完，發(fā)現(xiàn)竟然又雙叒叕要審核，有點煩，再...
    lxt閱讀 251評論 1贊 0
  • 最近一個月寫了一些文章，很多人在咨詢怎么內(nèi)修？怎么提升能量？怎么吸收能量？其實若真有興趣，都可以多看歷史文章。今天...
    百家載閱讀 1,743評論 0贊 6
  • 當一切入睡 當一切入睡，我常興奮地獨醒， 仰望繁星密布熠熠燃燒的穹頂， 我靜坐著傾聽夜聲的和諧。 時辰的鼓翼沒打斷...
    NikkiLiu閱讀 288評論 0贊 0

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