編輯:關於Android編程
關於網格樣式和瀑布流樣式在本篇會仔細的介紹,細心的同學會發現,自定義間隔在上一篇文章中並沒有太過深入,只是介紹了方法的調用時機,但是關於更換間隔樣式沒有太詳細的介紹,是因為列表樣式的RecyclerView自定義間隔比較簡單,統一放到復雜一點的網格中來講解。直接進入主題,看看期待已久的網格模式和瀑布流模式的使用吧。
RecyclerView展示的樣式是有布局管理器LayoutManager來控制。網格樣式的管理器是GridLayoutManager,看一下它最常用的兩個構造函數以及參數含義。
GridLayoutManager(Context context, int spanCount)
spanCount,每列或者每行的item個數,設置為1,就是列表樣式 該構造函數默認是豎直方向的網格樣式 GridLayoutManager(Context context, int spanCount, int orientation,boolean reverseLayout)
spanCount,每列或者每行的item個數,設置為1,就是列表樣式 網格樣式的方向,水平(OrientationHelper.HORIZONTAL)或者豎直(OrientationHelper.VERTICAL) reverseLayout,是否逆向,true:布局逆向展示,false:布局正向顯示
看一下使用。
// 豎直方向的網格樣式,每行四個Item
mLayoutManager = new GridLayoutManager(this, 4, OrientationHelper.VERTICAL, false);
mRecyclerView.setLayoutManager(mLayoutManager);
看一下運行效果。
圖-1 RecyclerView網格無間隔
網格樣式已經顯示出來了,和之前遇見的問題一樣,沒有間隔線,非常丑,間隔線必須加,而且要使用自定義,不使用系統自帶的。
新建文件md_divider.xml,是一個灰色的矩形。
在styles.xml中的自定義的應用主題裡替換掉listdivider屬性。
然後繼承
RecyclerView.ItemDecoration類,在構造函數裡獲取自定義的間隔線,復寫繪制間隔線的方法。
public class MDGridRvDividerDecoration extends RecyclerView.ItemDecoration {
private static final int[] ATTRS = new int[]{
android.R.attr.listDivider
};
/**
* 用於繪制間隔樣式
*/
private Drawable mDivider;
public MDGridRvDividerDecoration(Context context) {
// 獲取默認主題的屬性
final TypedArray a = context.obtainStyledAttributes(ATTRS);
mDivider = a.getDrawable(0);
a.recycle();
}
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
// 繪制間隔,每一個item,繪制右邊和下方間隔樣式
int childCount = parent.getChildCount();
int spanCount = ((GridLayoutManager)parent.getLayoutManager()).getSpanCount();
int orientation = ((GridLayoutManager)parent.getLayoutManager()).getOrientation();
boolean isDrawHorizontalDivider = true;
boolean isDrawVerticalDivider = true;
int extra = childCount % spanCount;
extra = extra == 0 ? spanCount : extra;
for(int i = 0; i < childCount; i++) {
isDrawVerticalDivider = true;
isDrawHorizontalDivider = true;
// 如果是豎直方向,最右邊一列不繪制豎直方向的間隔
if(orientation == OrientationHelper.VERTICAL && (i + 1) % spanCount == 0) {
isDrawVerticalDivider = false;
}
// 如果是豎直方向,最後一行不繪制水平方向間隔
if(orientation == OrientationHelper.VERTICAL && i >= childCount - extra) {
isDrawHorizontalDivider = false;
}
// 如果是水平方向,最下面一行不繪制水平方向的間隔
if(orientation == OrientationHelper.HORIZONTAL && (i + 1) % spanCount == 0) {
isDrawHorizontalDivider = false;
}
// 如果是水平方向,最後一列不繪制豎直方向間隔
if(orientation == OrientationHelper.HORIZONTAL && i >= childCount - extra) {
isDrawVerticalDivider = false;
}
if(isDrawHorizontalDivider) {
drawHorizontalDivider(c, parent, i);
}
if(isDrawVerticalDivider) {
drawVerticalDivider(c, parent, i);
}
}
}
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
int spanCount = ((GridLayoutManager) parent.getLayoutManager()).getSpanCount();
int orientation = ((GridLayoutManager)parent.getLayoutManager()).getOrientation();
int position = parent.getChildLayoutPosition(view);
if(orientation == OrientationHelper.VERTICAL && (position + 1) % spanCount == 0) {
outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
return;
}
if(orientation == OrientationHelper.HORIZONTAL && (position + 1) % spanCount == 0) {
outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
return;
}
outRect.set(0, 0, mDivider.getIntrinsicWidth(), mDivider.getIntrinsicHeight());
}
/**
* 繪制豎直間隔線
*
* @param canvas
* @param parent
* 父布局,RecyclerView
* @param position
* irem在父布局中所在的位置
*/
private void drawVerticalDivider(Canvas canvas, RecyclerView parent, int position) {
final View child = parent.getChildAt(position);
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
.getLayoutParams();
final int top = child.getTop() - params.topMargin;
final int bottom = child.getBottom() + params.bottomMargin + mDivider.getIntrinsicHeight();
final int left = child.getRight() + params.rightMargin;
final int right = left + mDivider.getIntrinsicWidth();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(canvas);
}
/**
* 繪制水平間隔線
*
* @param canvas
* @param parent
* 父布局,RecyclerView
* @param position
* item在父布局中所在的位置
*/
private void drawHorizontalDivider(Canvas canvas, RecyclerView parent, int position) {
final View child = parent.getChildAt(position);
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
.getLayoutParams();
final int top = child.getBottom() + params.bottomMargin;
final int bottom = top + mDivider.getIntrinsicHeight();
final int left = child.getLeft() - params.leftMargin;
final int right = child.getRight() + params.rightMargin + mDivider.getIntrinsicWidth();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(canvas);
}
}
設置RecyclerView的間隔線。
mRecyclerView.addItemDecoration(new MDGridRvDividerDecoration(this));
運行效果如下圖。
圖-2 RecyclerView網格有間隔
關於網格樣式的RecyclerView使用大體和列表樣式相同,主要在於間隔線的實現上有些不同,來看一下如果真正的使用自定義的間隔線需要做些什麼。
實現間隔線樣式,可以是xml文件也可以是圖片 覆蓋應用主題的listdivider屬性,使用自定義的間隔線樣式 繼承RecyclerView.ItemDecoration類,並實現其中的繪制間隔線方法 設置RecyclerView間隔線樣式
關於第三步,實現繪制線的方法,上面的代碼提供了一種大體的思路,可以供大家借鑒,下面就讓我們看看期待已久的瀑布流樣式的列表。
3. 瀑布流樣式
RecyclerView的瀑布流布局管理器是taggeredGridLayoutManager,它最常用的構造函數就一個,StaggeredGridLayoutManager(int spanCount, int orientation),spanCount代表每行或每列的Item個數,orientation代表列表的方向,豎直或者水平。
看在代碼中的使用。
// 初始化布局管理器
mLayoutManager = new StaggeredGridLayoutManager(2, OrientationHelper.VERTICAL);
// 設置布局管理器
mRecyclerView.setLayoutManager(mLayoutManager);
// 設置adapter
mRecyclerView.setAdapter(mAdapter);
// 設置間隔樣式
mRecyclerView.addItemDecoration(new MDStaggeredRvDividerDecotation(this));
要實現瀑布流效果(僅討論豎直方向的瀑布流樣式),每一個Item的高度要有所差別,如果所有的item的高度相同,就和網格樣式是一樣的展示效果。示例中就實現兩中不同高度的Item,一個高度為80dp,一個高度為100dp。
view_rv_staggered_item.xml布局:
view_rv_staggered_item_two.xml布局:
Item不同的布局是在Adapter裡面綁定的,看一下Adapter的實現。
public class MDStaggeredRvAdapter extends RecyclerView.Adapter {
/**
* 展示數據
*/
private ArrayList mData;
public MDStaggeredRvAdapter(ArrayList data) {
this.mData = data;
}
public void updateData(ArrayList data) {
this.mData = data;
notifyDataSetChanged();
}
@Override
public int getItemViewType(int position) {
// 瀑布流樣式外部設置spanCount為2,在這列設置兩個不同的item type,以區分不同的布局
return position % 2;
}
@Override
public MDStaggeredRvAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
// 實例化展示的view
View v;
if(viewType == 1) {
v = LayoutInflater.from(parent.getContext()).inflate(R.layout.view_rv_staggered_item, parent, false);
} else {
v = LayoutInflater.from(parent.getContext()).inflate(R.layout.view_rv_staggered_item_two, parent, false);
}
// 實例化viewholder
ViewHolder viewHolder = new ViewHolder(v);
return viewHolder;
}
@Override
public void onBindViewHolder(MDStaggeredRvAdapter.ViewHolder holder, int position) {
// 綁定數據
holder.mTv.setText(mData.get(position));
}
@Override
public int getItemCount() {
return mData == null ? 0 : mData.size();
}
public static class ViewHolder extends RecyclerView.ViewHolder {
TextView mTv;
public ViewHolder(View itemView) {
super(itemView);
mTv = (TextView) itemView.findViewById(R.id.item_tv);
}
}
}
接下來是設置瀑布流樣式的間隔線樣式的,上面代碼中使用的是
MDStaggeredRvDividerDecotation類,其實是直接拷貝的網格樣式的間隔線繪制類。看一下運行效果。
圖-3 RecyclerView瀑布流2列
很奇怪,間隔線並沒有按照我們想象中的方式繪制,仔細看瀑布流中Item的分布,發現瀑布流樣式的Item分布和網格樣式的Item分布有些不同。對比一下兩者Item的分布,如下圖。
圖-4 RecyclerView對比
網格樣式的Item分布規律很明顯,豎直方向的網格,Item是從左向右從上到下依次按順序排列分布。
瀑布流樣式的Item分布也是從上到下,從左到右的順序排列,但是有一個高度的優先級,如果某一列中有一個高度最低的位置為空,最優先在此處添加Item。看第三張圖的
3 item,因為該位置最低,優先在此處添加Item。
分析出了瀑布流樣式的Item的分布規律,就會發現,按照以往列表樣式或者網格樣式去設置間隔線是有問題的,因為不知道Item具體的位置,上下左右間隔線是否需要繪制不確定,參考第二張圖,其實第三張圖的間隔線也有問題,向上滑動就會展示出來。
目前能考慮到的瀑布流添加間隔線的思路:
Item布局中設置四周間隔padding/margin 代碼中動態修改ItemView的間隔padding/margin
設置間隔有兩個方法:
上下左右都設置間隔 相鄰兩邊設置間隔(左上/左下/右上/右下)
第一種設置間隔的方法會導致相鄰的Item間距是間隔的兩倍,第二種設置間隔的方法會導致Item某一個方向上的與父布局邊緣無間隔,但是另一個方向與父布局邊緣有間隔,例如左上相鄰兩邊設置了間隔,最左邊一列的Item左邊與父布局邊緣有間隔,但是最右邊一列Item右邊與父布局無間隔,第一行和最後一行的Item也會出現這種情況。
要解決上面的問題,父布局RecyclerView也需要根據相應的情況設置padding讓整個布局的間隔都一致。下面的例子是選擇在Item布局中設置間隔,因為可以自己在布局文件中控制顏色比較方便,選擇右下兩邊設置間隔。
首先修改兩個Item的布局文件。
view_rv_staggered_item.xml修改背景色和外層間距背景色。
同樣修改view_rv_staggered_item_two.xml。
最後修改RecyclerView的一些屬性。
運行一下,看看最後的效果。
圖-5 RecyclerView瀑布流
差不多完美的解決了間隔線的問題,有細心的同學可能發現,在RecyclerView滑動的時候上面一直有一條灰色的間隔線,這個可以通過取消xml布局文件中RecyclerView的paddingTop屬性去掉頂部灰色的間隔線。
4. 總結
本篇文章主要介紹網格樣式和瀑布流樣式的RecyclerView,列表樣式、網格樣式和瀑布流樣式在某種程度上是可以轉換的。
網格樣式的布局管理器的spanCount設置為1,就是列表樣式 瀑布流樣式如果Item的布局文件是等高,豎直方向,就是豎直方向的網格樣式;如果Item是等寬,水平方向,那就是水平方向的網絡樣式 如果瀑布流樣式的布局管理器spanCount設置為1,豎直方向,是豎直方向的列表;水平方向,就是水平方向的列表
Demo地址
目前為止關於RecyclerView的基本使用的介紹可以告一段落了,但其實關於RecyclerView深入使用可不止著一些,比如說單個Item橫滑,拖動Item之間轉換位置等等,官方都有提供,當然這些使用會在後面依次介紹。
最近在做APP,需要監聽Android手機網絡的變化情況,同時對不同的情況做出不同的響應策略,這裡有兩種方法。判斷聯網工具類這裡我使用的是ConnectivityMan
沉浸體驗是VR的核心也是一直以來的技術難點,虛擬現實的發展一直專注於怎樣讓用戶獲得更好的沉浸式體驗,這涉及到多個領域的多項技術,上至渲染優化,性能優化,下至人眼的構造,肢
cordova其實就是一種移動web的框架,它的前身就是PhoneGap。後來PhoneGap捐獻給Apache後,抽離出核心代碼,就改名為cordova。Cordova
一般而言在Android上使用JAVA實現彩圖轉換為灰度圖,與J2ME上的實現方法類似,不過遇到頻繁地轉換或者是大圖轉換時,就必須使用NDK來提高速度了。本文主要通過JA