上篇Android RecyclerView 詳解(1)—線性布局
從策劃到設(shè)計制作,每一步都追求做到細(xì)膩,制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶提供成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)頁設(shè)計、域名注冊、雅安服務(wù)器托管、網(wǎng)絡(luò)營銷、VI設(shè)計、 網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(fā)展進(jìn)步。
記錄了下RecyclerView的使用方法,并且講述了線性布局列表的使用方法,在此基礎(chǔ)上加上了萬能分割線,支持顏色分割線和圖片分割線,同時支持對分割線設(shè)置線寬。
這篇是總結(jié)一下網(wǎng)格布局的使用,同樣也支持兩種分割線和線寬的設(shè)置。
主要的相關(guān)類:
1. RecyclerView.Adapter
2. GridLayoutManager 網(wǎng)格布局管理器
3. RecycleView.ItemDecoration 分割線
下面就直接通過一個例子來展示:
先上效果圖:
(1) 顏色分割線
看起來還不錯吧,根據(jù)item的數(shù)量去顯示格子,當(dāng)然如果你需要的樣式不是三列,這個很簡單,只需要在設(shè)置
GridLayoutManager的時候設(shè)置相應(yīng)的列數(shù)即可,即:
mManagerLayout = new GridLayoutManager(getActivity(), 3);
(2) 圖片分割線
可能有人會說你的列表四周都有分割線,其實在不做特殊處理時左邊和上面默認(rèn)是沒有分割線的。后面我會加上四周沒有分割線的,其實這兩種形式在實際開發(fā)中都是常見的,先來看四周都有邊線的。
由于RecycleView是高度解耦的控件,繪制分割線只和 RecycleView.ItemDecoration 有關(guān),所以我們只需關(guān)心怎么去繼承 RecycleView.ItemDecoration 去實現(xiàn)我們所需的分割線,如下:
這里需要說明的是:顏色分割線和圖片分割線原理是完全一樣的,圖片分割線只是將一張很細(xì)的圖片傳入即可。
public class GridDivider extends RecyclerView.ItemDecoration { private Drawable mDividerDarwable; private int mDividerHight = 1; private Paint mColorPaint; public final int[] ATRRS = new int[]{android.R.attr.listDivider}; public GridDivider(Context context) { final TypedArray ta = context.obtainStyledAttributes(ATRRS); this.mDividerDarwable = ta.getDrawable(0); ta.recycle(); } /* int dividerHight 分割線的線寬 int dividerColor 分割線的顏色 */ public GridDivider(Context context, int dividerHight, int dividerColor) { this(context); mDividerHight = dividerHight; //繪制顏色分割線的畫筆 mColorPaint = new Paint(); mColorPaint.setColor(dividerColor); } /* int dividerHight 分割線的線寬 Drawable dividerDrawable 圖片分割線 */ public GridDivider(Context context, int dividerHight, Drawable dividerDrawable) { this(context); mDividerHight = dividerHight; mDividerDarwable = dividerDrawable; } @Override public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) { super.onDraw(c, parent, state); //畫水平和垂直分割線 drawHorizontalDivider(c, parent); drawVerticalDivider(c, parent); } public void drawVerticalDivider(Canvas c, RecyclerView parent) { // 這里傳入的parent是recycleview,通過它我們可以獲取列表的所有的元素, // 這里我們遍歷列表中的每一個元素,對每一個元素繪制垂直分割線 final int childCount = parent.getChildCount(); for (int i = 0; i < childCount; i++) { final View child = parent.getChildAt(i); //獲取當(dāng)前item布局參數(shù),通過它可以知道該item的精確位置,我們通過這個位置去繪制它的分割線 final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams(); final int top = child.getTop() - params.topMargin; final int bottom = child.getBottom() + params.bottomMargin; int left = 0; int right = 0; //左邊第一列, if ((i % 3) == 0) { //item左邊分割線 left = child.getLeft(); right = left + mDividerHight; mDividerDarwable.setBounds(left, top, right, bottom); mDividerDarwable.draw(c); if (mColorPaint != null) {//如果是顏色分割線 c.drawRect(left, top, right, bottom, mColorPaint); } //item右邊分割線 left = child.getRight() + params.rightMargin - mDividerHight; right = left + mDividerHight; } else { //非左邊第一列 left = child.getRight() + params.rightMargin - mDividerHight; right = left + mDividerHight; } //畫分割線 mDividerDarwable.setBounds(left, top, right, bottom); mDividerDarwable.draw(c); if (mColorPaint != null) { c.drawRect(left, top, right, bottom, mColorPaint); } } } //....水平分割線與垂直分割線類似,完整代碼見下。 }
下面是完整代碼:
1. MainActivity
public class MainActivity extends AppCompatActivity { private GridFragment mGridFragment; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //網(wǎng)格 mGridFragment = new GridFragment(); getFragmentManager().beginTransaction().replace(R.id.activity_main, mGridFragment).commit(); }
activity_main
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent"> </FrameLayout>
2. GridFragment
public class GridFragment extends Fragment implements View.OnClickListener{ private RecyclerView mRecycleViewDrawable; private RecyclerView mRecycleViewColor; private LinearLayoutManager mManagerColor; private LinearLayoutManager mManagerDrawable; private List<String> mData; private Button mDrawable; private Button mColor; private MyRecycleViewAdapter mRecycleViewAdapter; @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_grid_layout, container, false); mRecycleViewDrawable = (RecyclerView) view.findViewById(R.id.recycleview_drawable); mRecycleViewColor = (RecyclerView) view.findViewById(R.id.recycleview_color); mDrawable = (Button) view.findViewById(R.id.btn_drawable); mDrawable.setOnClickListener(this); mColor = (Button) view.findViewById(R.id.btn_color); mColor.setOnClickListener(this); //設(shè)置顏色分割線 mManagerColor = new GridLayoutManager(getActivity(), 3); mRecycleViewColor.setLayoutManager(mManagerColor); mRecycleViewColor.addItemDecoration(new GridDivider(getActivity(), 20, this.getResources().getColor(R.color.colorAccent))); //設(shè)置圖片分割線 mManagerDrawable = new GridLayoutManager(getActivity(), 3); mRecycleViewDrawable.setLayoutManager(mManagerDrawable); Drawable drawable = ContextCompat.getDrawable(getActivity(), R.mipmap.divider); mRecycleViewDrawable.addItemDecoration(new GridDivider(getActivity(), 20, drawable)); //初始化數(shù)據(jù) mData = new ArrayList<String>(); initData(mData); mRecycleViewAdapter = new MyRecycleViewAdapter(getActivity(), R.layout.item_grid_recycleview, mData); mRecycleViewColor.setAdapter(mRecycleViewAdapter); mRecycleViewDrawable.setAdapter(mRecycleViewAdapter); return view; } private void initData(List<String> dataList) { for (int i = 0; i < 16; i++) { dataList.add("item" + i); } } @Override public void onClick(View view) { int id = view.getId(); switch (id){ case R.id.btn_drawable: mRecycleViewColor.setVisibility(View.INVISIBLE); mRecycleViewDrawable.setVisibility(View.VISIBLE); break; case R.id.btn_color: mRecycleViewColor.setVisibility(View.VISIBLE); mRecycleViewDrawable.setVisibility(View.INVISIBLE); break; } } }
3.分割線 GridDivider
直接繼承 RecyclerView.ItemDecoration
public class GridDivider extends RecyclerView.ItemDecoration { private Drawable mDividerDarwable; private int mDividerHight = 1; private Paint mColorPaint; public final int[] ATRRS = new int[]{android.R.attr.listDivider}; public GridDivider(Context context) { final TypedArray ta = context.obtainStyledAttributes(ATRRS); this.mDividerDarwable = ta.getDrawable(0); ta.recycle(); } /* int dividerHight 分割線的線寬 int dividerColor 分割線的顏色 */ public GridDivider(Context context, int dividerHight, int dividerColor) { this(context); mDividerHight = dividerHight; mColorPaint = new Paint(); mColorPaint.setColor(dividerColor); } /* int dividerHight 分割線的線寬 Drawable dividerDrawable 圖片分割線 */ public GridDivider(Context context, int dividerHight, Drawable dividerDrawable) { this(context); mDividerHight = dividerHight; mDividerDarwable = dividerDrawable; } @Override public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) { super.onDraw(c, parent, state); //畫水平和垂直分割線 drawHorizontalDivider(c, parent); drawVerticalDivider(c, parent); } public void drawVerticalDivider(Canvas c, RecyclerView parent) { final int childCount = parent.getChildCount(); for (int i = 0; i < childCount; i++) { final View child = parent.getChildAt(i); final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams(); final int top = child.getTop() - params.topMargin; final int bottom = child.getBottom() + params.bottomMargin; int left = 0; int right = 0; //左邊第一列 if ((i % 3) == 0) { //item左邊分割線 left = child.getLeft(); right = left + mDividerHight; mDividerDarwable.setBounds(left, top, right, bottom); mDividerDarwable.draw(c); if (mColorPaint != null) { c.drawRect(left, top, right, bottom, mColorPaint); } //item右邊分割線 left = child.getRight() + params.rightMargin - mDividerHight; right = left + mDividerHight; } else { //非左邊第一列 left = child.getRight() + params.rightMargin - mDividerHight; right = left + mDividerHight; } //畫分割線 mDividerDarwable.setBounds(left, top, right, bottom); mDividerDarwable.draw(c); if (mColorPaint != null) { c.drawRect(left, top, right, bottom, mColorPaint); } } } public void drawHorizontalDivider(Canvas c, RecyclerView parent) { final int childCount = parent.getChildCount(); for (int i = 0; i < childCount; i++) { final View child = parent.getChildAt(i); RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams(); final int left = child.getLeft() - params.leftMargin - mDividerHight; final int right = child.getRight() + params.rightMargin; int top = 0; int bottom = 0; // 最上面一行 if ((i / 3) == 0) { //當(dāng)前item最上面的分割線 top = child.getTop(); //當(dāng)前item下面的分割線 bottom = top + mDividerHight; mDividerDarwable.setBounds(left, top, right, bottom); mDividerDarwable.draw(c); if (mColorPaint != null) { c.drawRect(left, top, right, bottom, mColorPaint); } top = child.getBottom() + params.bottomMargin; bottom = top + mDividerHight; } else { top = child.getBottom() + params.bottomMargin; bottom = top + mDividerHight; } //畫分割線 mDividerDarwable.setBounds(left, top, right, bottom); mDividerDarwable.draw(c); if (mColorPaint != null) { c.drawRect(left, top, right, bottom, mColorPaint); } } } }
4. Adapter
public class MyRecycleViewAdapter extends RecyclerView.Adapter<MyRecycleViewAdapter.MyViewHolder> { private LayoutInflater mLayoutInflater; private List<String> mDataList; private int mItemLayout; public MyRecycleViewAdapter(Context context, int itemLayout, List<String> datalist) { mLayoutInflater = LayoutInflater.from(context); mItemLayout = itemLayout; mDataList = datalist; } @Override public MyRecycleViewAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { return new MyViewHolder(mLayoutInflater.inflate(mItemLayout, parent, false)); } @Override public void onBindViewHolder(MyRecycleViewAdapter.MyViewHolder holder, int position) { holder.mTextView.setText(mDataList.get(position)); } @Override public int getItemCount() { return mDataList.size(); } class MyViewHolder extends RecyclerView.ViewHolder { private TextView mTextView; public MyViewHolder(View itemView) { super(itemView); mTextView = (TextView) itemView.findViewById(R.id.tv); } } }
adapter 的item布局
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/tv" android:gravity="center" android:layout_width="match_parent" android:layout_height="60dp"/> </FrameLayout>
未完待續(xù)……
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站標(biāo)題:AndroidRecyclerView網(wǎng)格布局(支持多種分割線)詳解(2)
文章起源:http://m.rwnh.cn/article24/jepice.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信公眾號、網(wǎng)站導(dǎo)航、微信小程序、品牌網(wǎng)站建設(shè)、服務(wù)器托管、網(wǎng)站排名
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)