定制分隔線
在上一篇文章的學習中，我們對RecyclerView實現了一個ListView的效果，并給它設置了分割線，但是需要注意的是，這個分割線是默認的。當我們需要指定分割線的樣式時，就需要來定制它了，那么怎樣才能定制一個分割線樣式呢？
首先，我們要知道默認的分割線資源是在哪里獲取的。通過DividerItemDecoration的源碼，我發現它是通過獲取系統Theme中的listDivider屬性來實現自己的，那么如果我們要定制分割線，只需對這個屬性進行修改即可。
下面我們來定制一個顏色漸變效果的分割線。在drawable文件夾中新建一個文件，就叫做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指定為我們剛剛創建的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>
重新運行程序，效果如下：
當然，你也可以根據自己的需求定制不同的分隔線樣式。
變變變，變身GridView
大家或許已經察覺到利用RecyclerView來實現ListView的功能要比傳統的ListView要來得復雜。這時你可能會有疑問了，既然它這么復雜你干嘛還要用它呢，你不是閑得蛋疼嗎？
別急嘛，且聽我慢慢道來，還記得前面提到過的LayoutManager嗎？你可別小瞧它哦，我們可以利用它快速得轉換布局樣式。
首先我們設置一個菜單以便切換布局樣式,在Mainactivity中復寫onCreateOptionsMenu和onOptionsItemSelected方法，并在res/meun中新建一個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);
}
重新運行程序，效果如下：
可以看到我們GridView的效果順利實現了呢，我們只需改變一行代碼就可以從ListView快速得切換到GridView，是不是很方便呢？
不過大家可能也注意到了，GridView的分隔線只有水平方向有，而垂直方向卻沒有。這是因為我們定制的divider只繪制了item水平方向的分隔線，并沒有繪制垂直方向的分隔線。為了更清晰的顯示GridView，我們把MainActivity中設置分隔線的代碼給注釋掉：
//mRecyclerView.addItemDecoration (new DividerItemDecoration (this,
// DividerItemDecoration.VERTICAL_LIST));
然后給item的布局文件設置一個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>
現在GridView的效果就完整的顯示出來了：
實現瀑布流效果
如果看了上面的效果你還是對RecyclerView不是很滿意的話，那么接下來我相信它定會讓你心服口服。
首先，為了不妨礙我們當前activity的顯示效果，我們新建一個activity來顯示瀑布流的效果，新建StaggeredGridLayoutActivity，這里我們只需對原有的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設為StaggeredGridLayoutManager，也就是瀑布流布局
mRecyclerView.setLayoutManager (mLayoutManager);//設置布局管理器
mAdapter = new StagggeredAdapter (this, mDataset);//將適配器設為等下新建的StagggeredAdapter
mRecyclerView.setAdapter (mAdapter);//設置適配器
// 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設置為StagggeredgridLayoutManager，并把adapter指定為即將創建的StagggeredAdapter，最后把不必要的onOptionsItemSelected方法刪除即可。
那么，接下來我們來創建StagggeredAdapter，同樣，我們只需在之前TestAdapter代碼的基礎上略作修改便可，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;
//提供一個合適的構造方法
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));
}
}
/**
*創建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中視圖與數據的關聯
* @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的數目
* @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);
}
}
}
在這段代碼中，我們主要想實現的是給每個item設置一個隨機的高度。
首先定義一個成員變量mHeight，然后在構造方法中對它初始化，利用Math.random方法讓它產生一些隨機數。接著在onBindViewHolder方法中把剛剛得到的mHeight數據綁定到布局參數中并交由viewHolder處理，以實現設置item高度的目的。
最后在MainActivity中菜單的item中利用Intent打開StaggeredGridLayoutActivity：
case R.id.action_sta_gridView:
Intent intent = new Intent (this, StaggeredGridActivity.class);
startActivity (intent);
break;
最后的最后，別忘了，在manifest中對StaggeredGridLayoutActivity進行注冊。
來看看成果吧：
Bingo，我們順利地實現了瀑布流的效果，是不是很簡單啊！
小結
OK，我們來回顧一下本文的主要內容。首先，我們對RecyclerView的自定義分割線進行了講解，在這里，我們巧妙的運用了系統的listDivider資源來實現分隔線的定制。以后的學習中，我們亦要延續這樣的思維方式，以達到化繁為簡的目的。接著，我們快速實現了RecyclerView的布局轉換，這也是RecyclerView一大特色，我們可以方便地實現網格效果和瀑布流效果，這是ListView所不具備的。
在下篇文章Android RecyclerView的使用解析（完結篇）中，我將對RecylerView添加動畫效果和點擊事件進行詳解。
該系列文章首發在我的個人博客中
- Android RecyclerView的使用解析（一）
- Android RecyclerView的使用解析（二）
- Android RecyclerView的使用解析（完結篇）
