TShopping

 找回密碼
 註冊
搜索
查看: 412|回復: 0

[教學] Android LayoutInflater原理分析,帶你一步步深入了解View(一)

[複製鏈接]
發表於 2015-10-15 23:41:06 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
有段時間沒寫博客了,感覺都有些生疏了呢。最近繁忙的工作終於告一段落,又有時間寫文章了,接下來還會繼續堅持每一周篇的節奏。

有不少朋友跟我反應,都希望我可以寫一篇關於View的文章,講一講View的工作原理以及自定義View的方法。沒錯,承諾過的文章我是一定要兌現的,而且在View這個話題上我還準備多寫幾篇,盡量能將這個知識點講得透徹一些。那麼今天就從LayoutInflater開始講起吧。

相信接觸Android久一點的朋友對於LayoutInflater一定不會陌生,都會知道它主要是用於加載佈局的。而剛接觸Android的朋友可能對LayoutInflater不怎麼熟悉,因為加載佈局的任務通常都是在Activity中調用setContentView()方法來完成的。其實setContentView()方法的內部也是使用LayoutInflater來加載佈局的,只不過這部分源碼是internal的,不太容易查看到。那麼今天我們就來把LayoutInflater的工作流程仔細地剖析一遍,也許還能解決掉某些困擾你心頭多年的疑惑。

先來看一下LayoutInflater的基本用法吧,它的用法非常簡單,首先需要獲取到LayoutInflater的實例,有兩種方法可以獲取到,第一種寫法如下:



  1. LayoutInflater layoutInflater = LayoutInflater.from(context);  
複製代碼

當然,還有另外一種寫法也可以完成同樣的效果:

  1. LayoutInflater layoutInflater = (LayoutInflater) context  
  2.         .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
複製代碼

其實第一種就是第二種的簡單寫法,只是Android給我們做了一下封裝而已。得到了LayoutInflater的實例之後就可以調用它的inflate()方法來加載佈局了,如下所示:

  1. layoutInflater.inflate(resourceId, root);  
複製代碼

inflate()方法一般接收兩個參數,第一個參數就是要加載的佈局id,第二個參數是指給該佈局的外部再嵌套一層父佈局,如果不需要就直接傳null。這樣就成功成功創建了一個佈局的實例,之後再將它添加到指定的位置就可以顯示出來了。
下面我們就通過一個非常簡單的小例子,來更加直觀地看一下LayoutInflater的用法。比如說當前有一個項目,其中MainActivity對應的佈局文件叫做activity_main.xml,代碼如下所示:


  1. <LinearLayout  xmlns:android = "http://schemas.android.com/apk/res/android"  
  2.     android:id = "@+id/main_layout"  
  3.     android:layout_width = "match_parent"  
  4.     android:layout_height = "match_parent">  
  5. </LinearLayout >  
複製代碼

這個佈局文件的內容非常簡單,只有一個空的LinearLayout,裡面什麼控件都沒有,因此界面上應該不會顯示任何東西。
那麼接下來我們再定義一個佈局文件,給它取名為button_layout.xml,代碼如下所示:


  1. <Button  xmlns:android = "http://schemas.android.com/apk/res/android"  
  2.     android:layout_width = "wrap_content"  
  3.     android:layout_height = "wrap_content"  
  4.     android:text = "Button">  
  5. </Button>
複製代碼

這個佈局文件也非常簡單,只有一個Button按鈕而已。現在我們要想辦法,如何通過LayoutInflater來將button_layout這個佈局添加到主佈局文件的LinearLayout中。根據剛剛介紹的用法,修改MainActivity中的代碼,如下所示:

  1. public  class  MainActivity  extends  Activity {  
  2.     private  LinearLayout mainLayout;  
  3.     @Override  
  4.     protected  void  onCreate(Bundle savedInstanceState) {  
  5.         super .onCreate(savedInstanceState);  
  6.         setContentView(R.layout.activity_main);  
  7.         mainLayout = (LinearLayout) findViewById(R.id.main_layout);  
  8.         LayoutInflater layoutInflater = LayoutInflater.from(this);  
  9.         View buttonLayout = layoutInflater.inflate(R.layout.button_layout,  null);  
  10.         mainLayout.addView(buttonLayout);  
  11.     }  
  12.   }
複製代碼

可以看到,這裡先是獲取到了LayoutInflater的實例,然後調用它的inflate()方法來加載button_layout這個佈局,最後調用LinearLayout的addView()方法將它添加到LinearLayout中。
現在可以運行一下程序,結果如下圖所示:
2.png
                                             

Button在界面上顯示出來了!說明我們確實是藉助LayoutInflater成功將button_layout這個佈局添加到LinearLayout中了。LayoutInflater技術廣泛應用於需要動態添加View的時候,比如在ScrollView和ListView中,經常都可以看到LayoutInflater的身影。

當然,僅僅只是介紹瞭如何使用LayoutInflater顯然是遠遠無法滿足大家的求知欲的,知其然也要知其所以然,接下來我們就從源碼的角度上看一看LayoutInflater到底是如何工作的。

不管你是使用的哪個inflate()方法的重載,最終都會輾轉調用到LayoutInflater的如下代碼中:


  1. public  View inflate(XmlPullParser parser, ViewGroup root, boolean attachToRoot) {  
  2.     synchronized  (mConstructorArgs) {  
  3.         final  AttributeSet attrs = Xml.asAttributeSet(parser);  
  4.         mConstructorArgs[ 0 ] = mContext;  
  5.         View result = root;  
  6.         try  {  
  7.             int  type;  
  8.             while  ((type = parser.next()) != XmlPullParser.START_TAG && type != XmlPullParser.END_DOCUMENT) {  
  9.             }  
  10.             if  (type != XmlPullParser.START_TAG) {  
  11.                 throw  new  InflateException(parser.getPositionDescription() + ": No start tag found!" );  
  12.             }  
  13.             final  String name = parser.getName();  
  14.             if  (TAG_MERGE.equals(name)) {  
  15.                 if  (root ==  null  || !attachToRoot) {  
  16.                     throw  new  InflateException("merge can be used only with a valid " + "ViewGroup root and attachToRoot=true");  
  17.                 }  
  18.                 rInflate(parser, root, attrs);  
  19.             }  else  {  
  20.                 View temp = createViewFromTag(name, attrs);  
  21.                 ViewGroup.LayoutParams params =  null ;  
  22.                 if  (root !=  null ) {  
  23.                     params = root.generateLayoutParams(attrs);  
  24.                     if  (!attachToRoot) {  
  25.                         temp.setLayoutParams(params);  
  26.                     }  
  27.                 }  
  28.                 rInflate(parser, temp, attrs);  
  29.                 if  (root !=  null  && attachToRoot) {  
  30.                     root.addView(temp, params);  
  31.                 }  
  32.                 if  (root ==  null  || !attachToRoot) {  
  33.                     result = temp;  
  34.                 }  
  35.             }  
  36.         }  catch  (XmlPullParserException e) {  
  37.             InflateException ex =  new  InflateException(e.getMessage());  
  38.             ex.initCause(e);  
  39.             throw  ex;  
  40.         }  catch  (IOException e) {  
  41.             InflateException ex =  new  InflateException(parser.getPositionDescription() + ": " + e.getMessage());  
  42.             ex.initCause(e);  
  43.             throw  ex;  
  44.         }  
  45.         return  result;  
  46.     }  
  47. }
複製代碼

從這裡我們就可以清楚地看出,LayoutInflater其實就是使用Android提供的pull解析方式來解析佈局文件的。不熟悉pull解析方式的朋友可以網上搜一下,教程很多,我就不細講了,這裡我們注意看下第23行,調用了createViewFromTag()這個方法,並把節點名和參數傳了進去。看到這個方法名,我們就應該能猜到,它是用於根據節點名來創建View對象的。確實如此,在createViewFromTag()方法的內部又會去調用createView()方法,然後使用反射的方式創建出View的實例並返回。
當然,這裡只是創建出了一個根佈局的實例而已,接下來會在第31行調用rInflate()方法來循環遍歷這個根佈局下的子元素,代碼如下所示:


  1. private  void  rInflate(XmlPullParser parser, View parent,  final  AttributeSet attrs) throws  XmlPullParserException, IOException {  
  2.     final  int  depth = parser.getDepth();  
  3.     int  type;  
  4.     while  (((type = parser.next()) != XmlPullParser.END_TAG || parser.getDepth() > depth) && type != XmlPullParser.END_DOCUMENT) {  
  5.         if  (type != XmlPullParser.START_TAG) {  
  6.             continue ;  
  7.         }  
  8.         final  String name = parser.getName();  
  9.         if  (TAG_REQUEST_FOCUS.equals(name)) {  
  10.             parseRequestFocus(parser, parent);  
  11.         }  else  if  (TAG_INCLUDE.equals(name)) {  
  12.             if  (parser.getDepth() ==  0 ) {  
  13.                 throw  new  InflateException( "<include /> cannot be the root element" );  
  14.             }  
  15.             parseInclude(parser, parent, attrs);  
  16.         }  else  if  (TAG_MERGE.equals(name)) {  
  17.             throw  new  InflateException( "<merge /> must be the root element" );  
  18.         }  else  {  
  19.             final  View view = createViewFromTag(name, attrs);  
  20.             final  ViewGroup viewGroup = (ViewGroup) parent;  
  21.             final  ViewGroup.LayoutParams params = viewGroup.generateLayoutParams(attrs);  
  22.             rInflate(parser, view, attrs);  
  23.             viewGroup.addView(view, params);  
  24.         }  
  25.     }  
  26.     parent.onFinishInflate();  
  27. }
複製代碼

可以看到,在第21行同樣是createViewFromTag()方法來創建View的實例,然後還會在第24行遞歸調用rInflate()方法來查找這個View下的子元素,每次遞歸完成後則將這個View添加到父佈局當中。
這樣的話,把整個佈局文件都解析完成後就形成了一個完整的DOM結構,最終會把最頂層的根佈局返回,至此inflate()過程全部結束。

比較細心的朋友也許會注意到,inflate()方法還有個接收三個參數的方法重載,結構如下:


  1. inflate(int resource, ViewGroup root, boolean attachToRoot)  
複製代碼

那麼這第三個參數attachToRoot又是什麼意思呢?其實如果你仔細去閱讀上面的源碼應該可以自己分析出答案,這裡我先將結論說一下吧,感興趣的朋友可以再閱讀一下源碼,校驗我的結論是否正確。
1.如果root為null,attachToRoot將失去作用,設置任何值都沒有意義。

2.如果root不為null,attachToRoot設為true,則會給加載的佈局文件的指定一個父佈局,即root。

3.如果root不為null,attachToRoot設為false,則會將佈局文件最外層的所有layout屬性進行設置,當該view被添加到父view當中時,這些layout屬性會自動生效。

4.在不設置attachToRoot參數的情況下,如果root不為null,attachToRoot參數默認為true。

好了,現在對LayoutInflater的工作原理和流程也搞清楚了,你該滿足了吧。額。。。。還嫌這個例子中的按鈕看起來有點小,想要調大一些?那簡單的呀,修改button_layout.xml中的代碼,如下所示:


  1. <Button  xmlns:android = "http://schemas.android.com/apk/res/android"  
  2.     android:layout_width = "300dp"  
  3.     android:layout_height = "80dp"  
  4.     android:text = "Button">  
  5. </Button>  
複製代碼

這裡我們將按鈕的寬度改成300dp,高度改成80dp,這樣夠大了吧?現在重新運行一下程序來觀察效果。咦?怎麼按鈕還是原來的大小,沒有任何變化!是不是按鈕仍然不夠大,再改大一點呢?還是沒有用!
其實這裡不管你將Button的layout_width和layout_height的值修改成多少,都不會有任何效果的,因為這兩個值現在已經完全失去了作用。平時我們經常使用layout_width和layout_height來設置View的大小,並且一直都能正常工作,就好像這兩個屬性確實是用於設置View的大小的。而實際上則不然,它們其實是用於設置View在佈局中的大小的,也就是說,首先View必須存在於一個佈局中,之後如果將layout_width設置成match_parent表示讓View的寬度填充滿佈局,如果設置成wrap_content表示讓View的寬度剛好可以包含其內容,如果設置成具體的數值則View的寬度會變成相應的數值。這也是為什麼這兩個屬性叫作layout_width和layout_height,而不是width和height。

再來看一下我們的button_layout.xml吧,很明顯Button這個控件目前不存在於任何佈局當中,所以layout_width和layout_height這兩個屬性理所當然沒有任何作用。那麼怎樣修改才能讓按鈕的大小改變呢?解決方法其實有很多種,最簡單的方式就是在Button的外面再嵌套一層佈局,如下所示:


  1. <RelativeLayout  xmlns:android = "http://schemas.android.com/apk/res/android"  
  2.     android:layout_width = "match_parent"  
  3.     android:layout_height = "match_parent">  
  4.     <Button  
  5.         android:layout_width = "300dp"  
  6.         android:layout_height = "80dp"  
  7.         android:text = "Button">  
  8.     </Button>  
  9. </RelativeLayout>  
複製代碼

可以看到,這裡我們又加入了一個RelativeLayout,此時的Button存在與RelativeLayout之中,layout_width和layout_height屬性也就有作用了。當然,處於最外層的RelativeLayout,它的layout_width和layout_height則 ​​會失去作用。現在重新運行一下程序,結果如下圖所示:
                     

OK!按鈕的終於可以變大了,這下總算是滿足大家的要求了吧。
3.png
看到這裡,也許有些朋友心中會有一個巨大的疑惑。不對呀!平時在Activity中指定佈局文件的時候,最外層的那個佈局是可以指定大小的呀,layout_width和layout_height都是有作用的。確實,這主要是因為,在setContentView()方法中,Android會自動在佈局文件的最外層再嵌套一個FrameLayout,所以layout_width和layout_height屬性才會有效果。那麼我們來證實一下吧,修改MainActivity中的代碼,如下所示:


  1. public  class  MainActivity  extends  Activity {  
  2.     private  LinearLayout mainLayout;  
  3.     @Override  
  4.     protected  void  onCreate(Bundle savedInstanceState) {  
  5.         super .onCreate(savedInstanceState);  
  6.         setContentView(R.layout.activity_main);  
  7.         mainLayout = (LinearLayout) findViewById(R.id.main_layout);  
  8.         ViewParent viewParent = mainLayout.getParent();  
  9.         Log.d("TAG", "the parent of mainLayout is " + viewParent);  
  10.     }  
  11.   }
複製代碼

可以看到,這里通過findViewById()方法,拿到了activity_main佈局中最外層的LinearLayout對象,然後調用它的getParent()方法獲取它的父佈局,再通過Log打印出來。現在重新運行一下程序,結果如下圖所示:


非常正確!LinearLayout的父佈局確實是一個FrameLayout,而這個FrameLayout就是由系統自動幫我們添加上的。

說到這裡,雖然setContentView()方法大家都會用,但實際上Android界面顯示的原理要比我們所看到的東西複雜得多。任何一個Activity中顯示的界面其實主要都由兩部分組成,標題欄和內容佈局。標題欄就是在很多界面頂部顯示的那部分內容,比如剛剛我們的那個例子當中就有標題欄,可以在代碼中控制讓它是否顯示。而內容佈局就是一個FrameLayout,這個佈局的id叫作content,我們調用setContentView()方法時所傳入的 ​​佈局其實就是放到這個FrameLayout中的,這也是為什麼這個方法名叫作setContentView(),而不是叫setView()。

最後再附上一張Activity窗口的組成圖吧,以便於大家更加直觀地理解:
4.png
            


 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-4 09:53 , Processed in 0.062022 second(s), 25 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表