Android RecyclerView 實現支付寶首頁效果
雖然我本人不喜歡支付寶的,但是這個網格本身其實還是不錯的,項目更新中更改了一個布局為網格模式,類似支付寶.(估計是產品抄襲的=.=,我不管設計,只管實現就好.)
RecyclerView的功能已經模塊化了,如下所示:
類名 描述 RecyclerView.Adapter 托管數據集合，為每個Item創建視圖 RecyclerView.ViewHolder 承載Item視圖的子視圖 RecyclerView.LayoutManager 負責Item視圖的布局 RecyclerView.ItemDecoration 為每個Item視圖添加子視圖，在Demo中被用來繪制Divider RecyclerView.ItemAnimator 負責添加、刪除數據時的動畫效果 今天的重點是
RecyclerView.ItemDecoration畢竟是來定義分隔線的,那就開始畫吧 =.=
首先是模擬數據
public List<GridTabEntity> getData() {
List<GridTabEntity> data=new ArrayList<GridTabEntity>();
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效果:
這是實際的效果:
