Android中RecyclerView布局代替GridView實現(xiàn)類似支付寶的界面
單純使用GridView
通用的兩種給GridView 添加分割線的方法;http://stackoverflow.com/questions/7132030/android-gridview-draw-dividers
給Gridview 添加分割線,也就是實現(xiàn)網(wǎng)格布局,不清楚谷歌為什么沒有給Gridview 添加一個類似 ListView 的Divider 屬性,因此就需要我們自己去添加分割線,
目前兩種方法,第一種是 利用GridView 的 android:horizontalSpacing="1dp"與android:verticalSpacing="1dp" 屬性 利用GridView的背景色 與ItemView的背景色 ,之間的間隙作為分割線。
利用 Spacing 屬性 的分割線效果圖:
這種方法可以實現(xiàn) 網(wǎng)格分割線,但是缺點是 item 沒有的地方,其顯示的是背景色,不太美觀。
這是我們參考支付寶:支付寶做的是,默認(rèn)是整行的,不夠正行, 添加空白的item。
如圖:
沒有也放上一個item 占位,可以解決背景問題。
第二種方法 就是使用背景選擇器 Selector。
相比較第一種方法,第二種方法實現(xiàn)起來更簡單,但是也有一個小瑕疵,因為item 使用了selector, 那么相鄰兩個item 之間的分割線相當(dāng)于兩條,會加深。
如圖所示:
仔細(xì)看圖,在線充值的右邊的線,與上面的線比起來 很不明顯。
RecyclerView
下面開始講今天的主角。拋開頂部的輪播圖不說,下面那個表格大家首先想到的可能就是GridView。但是,既然我們已經(jīng)有了全新且強(qiáng)大的RecyclerView控件,就可以在絕大多數(shù)場景下拋棄ListView或者GridView了。而對于RecyclerView替代ListView,相信大家已經(jīng)有了一定的了解并在項目中有了一定的應(yīng)用,但是對于RecyclerView替代GridView的使用,可能大家還些許陌生。接下來在這篇文章中就為大家詳細(xì)講述如何使用RecyclerView一個控件,搞定類似這樣子的首頁。
集成RecyclerView
首先,如果你還從未試用過RecyclerView,當(dāng)然是要在build.gradle中做出如下配置從而集成RecyclerView
compile 'com.android.support:recyclerview-v7:22.2.0'
布局
現(xiàn)在我們在MainActivity簡單的實現(xiàn)我們想要的效果,那么在activity_main.xml只要有一個RecyclerView就可以了。如下:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/home_rv" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>
Adapter
首先,我們先來看一下Adapter是如何編寫的
public class MyAdapter extends RecyclerView.Adapter { //先定義兩個ItemViewType,0代表頭,1代表表格中間的部分 private static final int ITEM_VIEW_TYPE_HEADER = 0; private static final int ITEM_VIEW_TYPE_ITEM = 1; //數(shù)據(jù)源 private List<String> dataList; //構(gòu)造函數(shù) public MyAdapter(List<String> dataList) { this.dataList = dataList; } /** * 判斷當(dāng)前position是否處于第一個 * @param position * @return */ public boolean isHeader(int position) { return position == 0; } @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) { //在onCreateViewHolder方法中,我們要根據(jù)不同的ViewType來返回不同的ViewHolder if (viewType == ITEM_VIEW_TYPE_HEADER) { //對于Header,我們應(yīng)該返回填充有Header對應(yīng)布局文件的ViewHolder(再次我們返回的都是一個布局文件,請根據(jù)不同的需求做相應(yīng)的改動) return new HeaderViewHolder(LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.layout_item, null)); } else { //對于Body中的item,我們也返回所對應(yīng)的ViewHolder return new BodyViewHolder(LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.layout_item, null)); } } @Override public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) { if (isHeader(position)) { //大家在這里面處理頭,這里只有一個TextView,大家可以根據(jù)自己的邏輯做修改 ((HeaderViewHolder)viewHolder).getTextView().setText("This is the Header!!"); }else { //其他條目中的邏輯在此 ((BodyViewHolder) viewHolder).getTextView().setText(dataList.get(position - 1)); } } /** * 總條目數(shù)量是數(shù)據(jù)源數(shù)量+1,因為我們有個Header * @return */ @Override public int getItemCount() { return dataList.size() + 1; } /** * * 復(fù)用getItemViewType方法,根據(jù)位置返回相應(yīng)的ViewType * @param position * @return */ @Override public int getItemViewType(int position) { //如果是0,就是頭,否則則是其他的item return isHeader(position) ? ITEM_VIEW_TYPE_HEADER : ITEM_VIEW_TYPE_ITEM; } /** * 給頭部專用的ViewHolder,大家根據(jù)需求自行修改 */ public class HeaderViewHolder extends RecyclerView.ViewHolder { private TextView textView; public HeaderViewHolder(View itemView) { super(itemView); textView = (TextView) itemView.findViewById(R.id.item_tv); } public TextView getTextView() { return textView; } } /** * 給GridView中的條目用的ViewHolder,里面只有一個TextView */ public class BodyViewHolder extends RecyclerView.ViewHolder { private TextView textView; public BodyViewHolder(View itemView) { super(itemView); textView = (TextView) itemView.findViewById(R.id.item_tv); } public TextView getTextView() { return textView; } } }
Item布局文件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:id="@+id/item_tv" android:layout_width="match_parent" android:layout_height="100dp" android:gravity="center" /> </RelativeLayout>
Activity
接下來再來看看我們在Activity中的代碼如何編寫
public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //找到RecyclerView控件 RecyclerView home_rv = (RecyclerView) findViewById(R.id.home_rv); //做一些假數(shù)據(jù) List<String> dataList = new ArrayList<>(); dataList.add("第一個"); dataList.add("第二個"); dataList.add("第三個"); dataList.add("第四個"); dataList.add("第五個"); dataList.add("第六個"); dataList.add("第七個"); dataList.add("第八個"); dataList.add("第九個"); //實例化Adapter并且給RecyclerView設(shè)上 final MyAdapter adapter = new MyAdapter(dataList); home_rv.setAdapter(adapter); // 如果我們想要一個GridView形式的RecyclerView,那么在LayoutManager上我們就要使用GridLayoutManager // 實例化一個GridLayoutManager,列數(shù)為3 final GridLayoutManager layoutManager = new GridLayoutManager(this, 3); //調(diào)用以下方法讓RecyclerView的第一個條目僅為1列 layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() { @Override public int getSpanSize(int position) { //如果位置是0,那么這個條目將占用SpanCount()這么多的列數(shù),再此也就是3 //而如果不是0,則說明不是Header,就占用1列即可 return adapter.isHeader(position) ? layoutManager.getSpanCount() : 1; } }); //把LayoutManager設(shè)置給RecyclerView home_rv.setLayoutManager(layoutManager); } }
好了,接下來我們運(yùn)行一下看看效果吧!
好了,那么和效果圖還有一點點差距,就是畫線!
線應(yīng)該怎么畫?在布局文件中畫?貌似可行,但如果每個條目的邊框都不規(guī)律怎么辦?畫一堆布局文件嗎?太麻煩了。
所以在此就要用的RecyclerView中了另外一大特性:ItemDecoration。
在此我們寫了一個名為MyItemDecoration的類,如下:
public class MyItemDecoration extends RecyclerView.ItemDecoration { /** * 復(fù)寫onDraw方法,從而達(dá)到在每隔條目的被繪制之前(或之后),讓他先幫我們畫上去幾根線吧 * * @param c * @param parent * @param state */ @Override public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) { //先初始化一個Paint來簡單指定一下Canvas的顏色,就黑的吧! Paint paint = new Paint(); paint.setColor(parent.getContext().getResources().getColor(android.R.color.black)); //獲得RecyclerView中總條目數(shù)量 int childCount = parent.getChildCount(); //遍歷一下 for (int i = 0; i < childCount; i++) { if (i == 0) { //如果是第一個條目,那么我們就不畫邊框了 continue; } //獲得子View,也就是一個條目的View,準(zhǔn)備給他畫上邊框 View childView = parent.getChildAt(i); //先獲得子View的長寬,以及在屏幕上的位置,方便我們得到邊框的具體坐標(biāo) float x = childView.getX(); float y = childView.getY(); int width = childView.getWidth(); int height = childView.getHeight(); //根據(jù)這些點畫條目的四周的線 c.drawLine(x, y, x + width, y, paint); c.drawLine(x, y, x, y + height, paint); c.drawLine(x + width, y, x + width, y + height, paint); c.drawLine(x, y + height, x + width, y + height, paint); //當(dāng)然了,這里大家肯定是要根據(jù)自己不同的設(shè)計稿進(jìn)行畫線,或者畫一些其他的東西,都可以在這里搞,非常方便 } super.onDraw(c, parent, state); } }
回到我們的Activity中,加如下代碼即可:
//把我們自定義的ItemDecoration設(shè)置給RecyclerView home_rv.addItemDecoration(new MyItemDecoration());
最后再看看是什么效果:
當(dāng)然,盡管最終效果有一些瑕疵,但是相信大家已經(jīng)都基本明白了其中的思路,應(yīng)用在自己的項目中的時候必然也要做出相應(yīng)的調(diào)整。
最后,不得不說,現(xiàn)在RecyclerView已經(jīng)基本具備了替代ListView和GridView的能力,在我們的項目知學(xué)中,大多數(shù)的列表都已經(jīng)是以RecyclerView控件的形式作為展現(xiàn)。本文僅僅是從一個非常入門級的角度去講解如何使用RecyclerView,而對于這個效果而言,還有很多種其他的實現(xiàn)方式,尤其是對于Adapter中的處理,也希望能夠與大家多多交流。謝謝!
- Android自定義View實現(xiàn)垂直時間軸布局
- android layout 按比例布局的代碼
- android動態(tài)加載布局文件示例
- android Activity相對布局的使用方法
- Android實現(xiàn)輸入法彈出時把布局頂上去和登錄按鈕頂上去的解決方法
- Android TabLayout(選項卡布局)簡單用法實例分析
- Android布局——Preference自定義layout的方法
- Android應(yīng)用借助LinearLayout實現(xiàn)垂直水平居中布局
- android LinearLayout和RelativeLayout組合實現(xiàn)精確布局方法介紹
- Android實現(xiàn)Z軸布局效果
相關(guān)文章
android獲取圖片尺寸的兩種方式及bitmap的縮放操作
這篇文章主要介紹了android獲取圖片尺寸的兩種方式及bitmap的縮放操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08總結(jié)Android App內(nèi)存優(yōu)化之圖片優(yōu)化
網(wǎng)上有很多大拿分享的關(guān)于Android性能優(yōu)化的文章,主要是通過各種工具分析,使用合理的技巧優(yōu)化APP的體驗,提升APP的流暢度,但關(guān)于內(nèi)存優(yōu)化的文章很少有看到。下面是我在實踐過程中使用的一些方法,很多都是不太成熟的項目,只是將其作為一種處理方式分享給大家。2016-08-08Android中ListView Item布局優(yōu)化技巧
這篇文章主要介紹了Android中ListView Item布局優(yōu)化技巧,以實例形式分析了ListView Item布局的相關(guān)實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10android?studio組件通信:Intend啟動Activity接收返回結(jié)果
這篇文章主要介紹了android?studio組件通信:Intend啟動Activity接收返回結(jié)果,設(shè)計一個主Activity和一個子Activity(Sub-Activity),使用主Activity上的按鈕啟動子Activity,并將子Activity的一些信息返回給主Activity,并顯示在主Activity上,需要的朋友可以參考一下2021-12-12android中創(chuàng)建通知欄Notification代碼實例
這篇文章主要介紹了android中創(chuàng)建通知欄Notification代碼實例,本文直接給出實現(xiàn)代碼,需要的朋友可以參考下2015-05-05