如何為RecyclerView添加Header和Footer

這篇文章主要為大家詳細(xì)介紹了如何為RecyclerView添加Header和Footer井佑,具有一定的參考價值俺陋,感興趣的小伙伴們可以參考一下
在項目中聚唐,拋棄了ListView, 想試一試RecyclerView, 在用的過程中沪么,經(jīng)常遇到的問題辫继,比如:如何為RecyclerView添加Header和Footer? 如何為RecyclerView添加分割線怒见?如何為RecyclerView添加下拉刷新和上拉加載? 在今后的一段時間里骇两,我會針對這幾個問題速种,通過寫簡書的方式一一講述, 今天為大家?guī)淼氖堑谝粋€問題的解決方法低千,如何為RecyclerView添加Header和Footer配阵?在這之前,我想分享一下我對RecyclerView的認(rèn)識:

一 . 我眼中的RecyclerView

RecyclerView的越來越引起了我們Android開發(fā)人員的注意示血,甚至很多人都說:ListView棋傍, GridView已經(jīng)逐漸被RecyclerView替代, 最主要的原因就是RecyclerView的靈活性难审, 還有性能上的提升瘫拣。那么也許有很多人會問:RecyclerView和ListView, GridView到底是什么關(guān)系呢?通過Android官方文檔的一組截圖告訴你:


image.png

image.png

通過上面的兩個圖可以發(fā)現(xiàn)告喊, ListView繼承自:AbsListView麸拄。(GirdView也是), RecyclerView直接繼承了ViewGroup , 最后得出結(jié)論:RecyclerView是ListView的爺爺輩黔姜, 也就是RecyclerView是ListView的二爺拢切, 所以從封裝的層次上得出了為什么RecyclerView性能比ListView更好的原因, 因為封裝的層次越高秆吵,查詢執(zhí)行的速度相對較慢淮椰,當(dāng)然還有一個原因,RecyclerView中自帶的Adapter中加入了Holder,強制要求開發(fā)人員使用主穗,在ListView中菌瘪,很多人都不懂使用Holder, 這也導(dǎo)致了使用ListView性能比較差胆绊。這也是RecyclerView性能提升的一個主要原因, 當(dāng)然娄柳,封裝的層越高越靈活搀罢,相對使用起來也相對難,很多方法都是通過自己去封裝的猾浦,比如ListView中有addHeaderView(View view), addFooterView(View view)去添加自己的Header 和Footer, 但是在RecyclerView中沒有陆错,下面我將詳細(xì)介紹:

二 . 為RecyclerView添加Header和Footer

    1. 認(rèn)識Header和Footer
      通過下面簡書的兩張圖,讓你認(rèn)識Header和Footer


      image.png

      image.png

      通過上面的兩張圖金赦,可以看到,Header和Footer很多情況下是輔助功能的对嚼,比如Header通常用于做廣告夹抗,而Footer更多的是為了顯示下拉加載更多作為一個可視化組件來顯示加載情況,提升用戶體驗.

    1. 通過代碼來解析如何為RecyclerView添加Header和Footer
      RecyclerView的使用和ListView的使用差不多纵竖,無非就是那三步:
      第一漠烧,初始化RecyclerView;
      第二靡砌,初始化數(shù)據(jù)已脓,并且將數(shù)據(jù)通過Adapter裝在到View中;
      第三通殃,通過setAdapter方法度液,將Adapter綁定到RecyclerView中。
      下面直接上代碼:通過代碼注釋的方式來講解添加Header和Footer:
      (1) 主布局layout_main.xml: 只是添加了一個RecyclerView而已
<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayoutxmlns: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"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context="com.study.wnw.recyclerviewheaderfooter.MainActivity"> 
 <android.support.v7.widget.RecyclerView
  android:id="@+id/recyclerview"
  android:layout_width="match_parent"
  android:layout_height="match_parent"/> 
</RelativeLayout>

(2)RecyclerView中ListView的Item布局list_Item.xml: 只是添加了一個TextView

<?xml version="1.0" encoding="utf-8"?><LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="50dp"> 
  <TextView
   android:id="@+id/item"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:textSize="20sp"
  android:textColor="@color/colorAccent"
  android:gravity="center"
  android:background="#08e630"/> 
</LinearLayout>

(3)HeaderView和FooterView的布局文件画舌,也是一個TextView, 這里只貼出了HeaderView的布局堕担,F(xiàn)ooterView的布局文件和FooterView的一樣:
HeaderView的布局文件: header.xml:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="100dp"> 
 <TextView 
  android:id="@+id/header"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:text="我是Header"
  android:textSize="30sp"
  android:textColor="#fde70b0b"
  android:background="#f9777979"
  android:gravity="center"/> 
</LinearLayout>

好了, 布局文件到這里我們已經(jīng)弄好了曲聂, 下面我們直接看MainActivity中的內(nèi)容:

(4) MainActivity.java中的內(nèi)容為:

package com.study.wnw.recyclerviewheaderfooter; 
import android.app.Activity;import android.os.Bundle; 
import android.support.v7.widget.LinearLayoutManager; 
import android.support.v7.widget.RecyclerView; 
import android.view.LayoutInflater; 
import android.view.View; 
import java.util.ArrayList;import java.util.List; 
 
public class MainActivity extends Activity { 
 private RecyclerView mRecyclerView; 
 private MyAdapter mMyAdapter; 
 private List<String> mList; 
 
 @Override
 protected void onCreate(Bundle savedInstanceState) { 
  super.onCreate(savedInstanceState); 
  setContentView(R.layout.activity_main); 
 
  //RecyclerView三部曲+LayoutManager  
  mRecyclerView = (RecyclerView)findViewById(R.id.recyclerview); 
  LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this); 
  mRecyclerView.setLayoutManager(linearLayoutManager); 
  initData(); 
  mMyAdapter = new MyAdapter(mList); 
  mRecyclerView.setAdapter(mMyAdapter); 
 
 //為RecyclerView添加HeaderView和FooterView 
  setHeaderView(mRecyclerView); 
  setFooterView(mRecyclerView); 
 } 
 
 //初始化RecyclerView中每個item的數(shù)據(jù) 
 private void initData(){ 
 mList = new ArrayList<String>(); 
 for (int i = 0; i < 20; i++){ 
  mList.add("item" + i); 
 } 
 } 
 
 private void setHeaderView(RecyclerView view){ 
 View header = LayoutInflater.from(this).inflate(R.layout.header, view, false); 
  mMyAdapter.setHeaderView(header); 
 } 
 
 private void setFooterView(RecyclerView view){ 
 View footer = LayoutInflater.from(this).inflate(R.layout.footer, view, false);  
 mMyAdapter.setFooterView(footer); 
 } 
}

從上面的代碼中霹购,我們可以看到,我們在MainActivity中做了兩件事朋腋,一個是初始化RecyclerView相關(guān)的View, Adapter, data齐疙; 另一個是通過我們自定義的Adapter的setHeaderView()和setFooterView()方法為RecyclerView添加HeaderView和FooterView, 到這里,我們已經(jīng)迫不及待的想知道MyAdapter中到底有什么東西, 直接上代碼

(5) MyAdapter.java的代碼

package com.study.wnw.recyclerviewheaderfooter;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import java.util.List;
/** * Created by wnw on 16-5-20. */
public class MyAdapter extendsRecyclerView.Adapter<RecyclerView.ViewHolder> { 
 public static final int TYPE_HEADER = 0; //說明是帶有Header的 
 public static final int TYPE_FOOTER = 1; //說明是帶有Footer的 
 public static final int TYPE_NORMAL = 2; //說明是不帶有header和footer的
 
 //獲取從Activity中傳遞過來每個item的數(shù)據(jù)集合 
 private List<String> mDatas;
 //HeaderView, FooterView 
 private View mHeaderView; 
 private View mFooterView; 
 
 //構(gòu)造函數(shù) 
 public MyAdapter(List<String> list){ 
 this.mDatas = list; 
 } 
 
 //HeaderView和FooterView的get和set函數(shù) 
 public View getHeaderView() { 
 return mHeaderView; 
 } 
 public void setHeaderView(View headerView) { 
 mHeaderView = headerView; 
 notifyItemInserted(0); 
 } 
 public View getFooterView() { 
 return mFooterView; 
 } 
 public void setFooterView(View footerView) { 
 mFooterView = footerView; 
 notifyItemInserted(getItemCount()-1); 
 } 
 
 /** 重寫這個方法旭咽,很重要贞奋,是加入Header和Footer的關(guān)鍵,我們通過判斷item的類型轻专,從而綁定不同的view * */
 @Override
 public int getItemViewType(int position) {  
 if (mHeaderView == null && mFooterView == null){  
  return TYPE_NORMAL; 
 } 
 if (position == 0){  
  //第一個item應(yīng)該加載Header  
  return TYPE_HEADER; 
 } 
 if (position == getItemCount()-1){  
  //最后一個,應(yīng)該加載Footer  
  return TYPE_FOOTER; 
 } 
 return TYPE_NORMAL; 
 } 
 
 //創(chuàng)建View忆矛,如果是HeaderView或者是FooterView,直接在Holder中返回  
 @Override
 public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { 
 if(mHeaderView != null && viewType == TYPE_HEADER) {  
  return new ListHolder(mHeaderView); 
 } 
 if(mFooterView != null && viewType == TYPE_FOOTER){  
  return new ListHolder(mFooterView); 
 } 
 View layout = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, parent, false); 
 return new ListHolder(layout); 
 } 
 
 //綁定View,這里是根據(jù)返回的這個position的類型催训,從而進行綁定的洽议, HeaderView和FooterView, 就不同綁定了 
 @Override
 public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) { 
 if(getItemViewType(position) == TYPE_NORMAL){  
  if(holder instanceof ListHolder) {  
  //這里加載數(shù)據(jù)的時候要注意,是從position-1開始漫拭,因為position==0已經(jīng)被header占用了  
  ((ListHolder) holder).tv.setText(mDatas.get(position-1));  
  return;  
  }  
  return; 
 }else if(getItemViewType(position) == TYPE_HEADER){  
  return;  
 }else{  
  return; 
  } 
 } 
 
 //在這里面加載ListView中的每個item的布局 
 class ListHolder extends RecyclerView.ViewHolder{ 
 TextView tv; 
 public ListHolder(View itemView) {  
  super(itemView);  
  //如果是headerview或者是footerview,直接返回  
  if (itemView == mHeaderView){  
  return;  
  }  
  if (itemView == mFooterView){  
  return;  
  }  
  tv = (TextView)itemView.findViewById(R.id.item); 
  } 
 } 
 
 //返回View中Item的個數(shù)亚兄,這個時候,總的個數(shù)應(yīng)該是ListView中Item的個數(shù)加上HeaderView和FooterView 
 @Override
 public int getItemCount() { 
 if(mHeaderView == null && mFooterView == null){  
  return mDatas.size(); 
 }else if(mHeaderView == null && mFooterView != null){  
  return mDatas.size() + 1; 
 }else if (mHeaderView != null && mFooterView == null){  
  return mDatas.size() + 1; 
 }else {  
  return mDatas.size() + 2; 
 } 
 }
}

從上面的MyAdapter類中采驻,有setHeaderView()和setFooterView()兩個方法审胚,我們就是通過這兩個方法從Activity將headerView和footerView傳遞過來的, 在Adapter中的onCreateViewHolder()方法中礼旅,利用getItemViewType()返回Item的類型(你這個Item是不是Header家的膳叨?還是Footer家的?或者是ListView家的痘系?)根據(jù)不同的類型菲嘴,我們創(chuàng)建不同的Item的View。大概的思路就是這樣子汰翠,更多細(xì)節(jié)請看代碼注釋龄坪,下面是運行截圖(由于不知道Linux下有什么好的GIF生成工具,只能截靜態(tài)圖复唤,大家知道的話健田,可以推薦給我,謝謝各位大神):


image.png

image.png

終于寫完了佛纫,需要慢慢消化和吸收妓局,這只是一種實現(xiàn)HeaderView和FooterView的方式,我們從這里看到雳旅,HeaderView和FooterView是直接從Activity中傳遞過Adapter的跟磨,我們也可以像ListView一樣,我們只傳遞HeaderView和FooterView的數(shù)據(jù)過Adapter中攒盈,然后在Adapter的內(nèi)部再新建不同的HeaderHolder和FooterHolder, 根據(jù)返回Item的類型抵拘,加載不同的Holder即可,具體的實現(xiàn)我就不多說了型豁,大家可以去實現(xiàn)一下僵蛛。通過截圖,你會發(fā)現(xiàn)迎变,RecyclerView中充尉,每個Item之間竟然沒有分割線,而且RecyclerView中也沒有setDivider()這樣的方法去設(shè)置分割線衣形,因為RecyclerView靈活啊驼侠,所以也是要自定義的姿鸿,其實很簡單,下一篇文章我會帶來如何為RecyclerView添加分割線倒源,這篇就到此結(jié)束了苛预,有不足之處,望大家多多指教笋熬,謝謝了热某。

RecyclerView中添加分隔線已經(jīng)實現(xiàn),RecyclerView系列之(2):為RecyclerView添加分隔線,謝謝支持胳螟。

以上就是本文的全部內(nèi)容昔馋,希望對大家的學(xué)習(xí)有所幫助.

感謝

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市糖耸,隨后出現(xiàn)的幾起案子秘遏,更是在濱河造成了極大的恐慌,老刑警劉巖嘉竟,帶你破解...
    沈念sama閱讀 210,978評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件垄提,死亡現(xiàn)場離奇詭異,居然都是意外死亡周拐,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評論 2 384
  • 文/潘曉璐 我一進店門凰兑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來妥粟,“玉大人,你說我怎么就攤上這事吏够」锤” “怎么了?”我有些...
    開封第一講書人閱讀 156,623評論 0 345
  • 文/不壞的土叔 我叫張陵锅知,是天一觀的道長播急。 經(jīng)常有香客問我,道長售睹,這世上最難降的妖魔是什么桩警? 我笑而不...
    開封第一講書人閱讀 56,324評論 1 282
  • 正文 為了忘掉前任,我火速辦了婚禮昌妹,結(jié)果婚禮上捶枢,老公的妹妹穿的比我還像新娘。我一直安慰自己飞崖,他們只是感情好烂叔,可當(dāng)我...
    茶點故事閱讀 65,390評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著固歪,像睡著了一般蒜鸡。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,741評論 1 289
  • 那天逢防,我揣著相機與錄音叶沛,去河邊找鬼。 笑死胞四,一個胖子當(dāng)著我的面吹牛恬汁,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播辜伟,決...
    沈念sama閱讀 38,892評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼氓侧,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了导狡?” 一聲冷哼從身側(cè)響起约巷,我...
    開封第一講書人閱讀 37,655評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎旱捧,沒想到半個月后独郎,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,104評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡枚赡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年氓癌,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片贫橙。...
    茶點故事閱讀 38,569評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡贪婉,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出卢肃,到底是詐尸還是另有隱情疲迂,我是刑警寧澤,帶...
    沈念sama閱讀 34,254評論 4 328
  • 正文 年R本政府宣布莫湘,位于F島的核電站尤蒿,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏幅垮。R本人自食惡果不足惜腰池,卻給世界環(huán)境...
    茶點故事閱讀 39,834評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望军洼。 院中可真熱鬧巩螃,春花似錦、人聲如沸匕争。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽甘桑。三九已至拍皮,卻和暖如春歹叮,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背铆帽。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1 264
  • 我被黑心中介騙來泰國打工咆耿, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人爹橱。 一個月前我還...
    沈念sama閱讀 46,260評論 2 360
  • 正文 我出身青樓萨螺,卻偏偏與公主長得像,于是被迫代替她去往敵國和親愧驱。 傳聞我的和親對象是個殘疾皇子慰技,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,446評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 感謝生命中的所有人 以前很不懂事的埋怨過很多人 可是真的要謝謝你們 謝謝小學(xué)老師標(biāo)準(zhǔn)的普通話糟红、嚴(yán)謹(jǐn)?shù)慕虒W(xué)態(tài)度艾帐、規(guī)范...
    Belinda_H閱讀 674評論 0 3
  • 大家認(rèn)為是物質(zhì)對人的影響大呢,還是精神對人的影響大呢盆偿? 我能想到的部分是 1 人總是心里先相信什么柒爸,而后相信什么。...
    來今雨閱讀 282評論 0 2
  • 以下15條建議送給為數(shù)不多的女大學(xué)生盆友事扭,覺得管用給小編個贊唄揍鸟。 人人都說,女生宿舍處久了句旱,矛盾啊隔閡啊越來越多,...
    16aa5fab5f62閱讀 1,017評論 0 1
  • 你還要被你的努力感欺騙多久 (引自 簡書作者 劍圣喵大師) 01 引子 在偷懶這件事上每個人都是心機婊晰奖。你的努力確...
    閃閃發(fā)光的Lucky閱讀 242評論 0 1
  • 終于睡在自己小床上~ 也是逗谈撒。每天在忙會務(wù)的時候,早上七點醒匾南,合著休息了啃匿,早上四點就醒了。 還好四點就醒了蛆楞,頭兒凌...
    嫏嬛素素閱讀 192評論 0 1