Android RecyclerView 實現支付寶首頁效果

[TOC]

雖然我本人不喜歡支付寶的,但是這個網格本身其實還是不錯的,項目更新中更改了一個布局為網格模式,類似支付寶.(估計是產品抄襲的=.=,我不管設計,只管實現就好.)

類名

描述

RecyclerView.Adapter

托管數據集合，為每個Item創建視圖

RecyclerView.ViewHolder

承載Item視圖的子視圖

RecyclerView.LayoutManager

負責Item視圖的布局

RecyclerView.ItemDecoration

為每個Item視圖添加子視圖，在Demo中被用來繪制Divider

RecyclerView.ItemAnimator

負責添加、刪除數據時的動畫效果

RecyclerView的功能已經模塊化了,如下所示:

類名

描述

RecyclerView.Adapter

托管數據集合，為每個Item創建視圖

RecyclerView.ViewHolder

承載Item視圖的子視圖

RecyclerView.LayoutManager

負責Item視圖的布局

RecyclerView.ItemDecoration

為每個Item視圖添加子視圖，在Demo中被用來繪制Divider

RecyclerView.ItemAnimator

負責添加、刪除數據時的動畫效果

今天的重點是RecyclerView.ItemDecoration畢竟是來定義分隔線的,那就開始畫吧 =.=

首先是模擬數據

public List getData() {

List data=new ArrayList();

TypedArray typedArray = getResources().obtainTypedArray(R.array.image_home_arr);//這里是圖表

String[] nameStr=new String[]{

"提現",

"自助上單",

"商品管理",

"全民營銷",

"消費統計",

"評價管理",

"經營管理"

};

for (int i = 0; i < nameStr.length; i++) {

data.add(new GridTabEntity(nameStr[i],false,0,typedArray.getResourceId(i,0)));

}

return data;

}

addItemDecoration 定制分隔線

mGridTab = ((RecyclerView) findViewById(R.id.re_grid));

mGridTab.setLayoutManager(new GridLayoutManager(this, 3, GridLayoutManager.VERTICAL, false));

//dp轉px

final int offset = DisplayUtil.dp2px(this, 1.3f);

//這里是開始,定制分隔線

mGridTab.addItemDecoration(new RecyclerView.ItemDecoration() {

@Override

public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView

.State state) {

super.getItemOffsets(outRect, view, parent, state);

int childLayoutPosition = parent.getChildLayoutPosition(view);

if (childLayoutPosition%3!=0){

outRect.right=offset/2;

outRect.bottom=offset/2;

}else {

outRect.left=offset/2;

outRect.right=offset/2;

outRect.bottom=offset/2;

}

}

@Override

public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {

//始化一個Paint

Paint paint = new Paint();

// paint.setColor(Color.parseColor("#B8B8B8"));

paint.setColor(Color.parseColor("#D8D8D8"));

paint.setStrokeWidth(offset);

//獲得RecyclerView中條目數量

int childCount = parent.getChildCount();

//遍歷

for (int i = 0; i < childCount; i++) {

//獲得子View，也就是一個條目的View，準備給他畫上邊框

View childView = parent.getChildAt(i);

//先獲得子View的長寬，以及在屏幕上的位置

float x = childView.getX();

float y = childView.getY();

int width = childView.getWidth();

int height = childView.getHeight();

if (i % 3==2){

//h bottom

c.drawLine(x, y + height, x + width, y + height, paint);

continue;

}else {

c.drawLine(x + width, y, x + width, y + height, paint);

//h bottom

c.drawLine(x, y + height, x + width, y + height, paint);

continue;

}

// //根據這些點畫條目的四周的線 h:水平 v:垂直

// //h top

// c.drawLine(x, y, x + width, y, paint);

// //v left

// c.drawLine(x, y, x, y + height, paint);

// //v right

// c.drawLine(x + width, y, x + width, y + height, paint);

// //h bottom

// c.drawLine(x, y + height, x + width, y + height, paint);

}

super.onDraw(c, parent, state);

}

});

GridTabAdapter mAdapter = new GridTabAdapter(data);

mGridTab.setAdapter(mAdapter);

好吧,不要打我,將就著點看,這只是個demo,所以代碼很亂,注釋是后來加的,應該能看懂吧.

畫線的時候注意下,不是所以的"方塊"都需要畫上下左右的,例如中間的那個方塊如果四個方向都畫那么必定會有線疊加在一起,那樣很丑的.(>﹏

效果:

這是demo效果:

http://oahzrw11n.bkt.clouddn.com//pic/20160812/device-gridtab-demo.png

這是實際的效果:

http://oahzrw11n.bkt.clouddn.com//pic/20160812/device-gridtab-true.png

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Android实现支付宝AR功能,Android RecyclerView 实现支付宝首页效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。