開源中國Android版學習筆記(三) layout檔案夾的xml檔案(B)

來源:互聯網
上載者:User

      在layout檔案夾中有四個首字母為B的xml檔案,其實一看首碼就知道是關於blog細節的部分,依次是footer(頁尾),header(頁首),detail(本文)和listitem(引用),這四個檔案構建了一個顯示部落格的頁面。下面開始一一介紹:

1. blog_detail_footer:部落格的頁尾,下面根據來理解代碼:

      依舊是一個線性布局,之後有一個<ViewSwitcher>標籤,它的作用是在兩個視圖間轉換時顯示動畫。接下來是9個圖片檔案儲存在一個LinearLayout中,分別是發表評論框,分割線,瀏覽本文,分割線,評論,分割線,收藏,分割線,分享,值得一提的是,這些圖片都儲存在drawable-hdpi中,而且有些有按下和沒按下兩種圖片。後面又是一個線性布局,儲存著按下發表評論框後變化的文本輸入框和按鈕,這就是<ViewSwitcher>標籤的作用。在<EditText>標籤中,有三個很有意思的屬性,分別是focusable,focusableInTochMode和visibility,分別有設定是否獲得焦點,可以通過touch事件來獲得focus(這個以後會講到),設定此視圖是否顯示這些功能,把意思理解後,這些屬性也不難理解。

 2.blog_detail_header:部落格的頁首,下附一張圖:


用的是FrameLayout布局,因為考慮到要被覆蓋,在這之中,我發現了一個有意思的問題:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/blog_detail_header"   android:layout_width="fill_parent"   android:layout_height="wrap_content"   android:paddingLeft="2dip"   android:paddingRight="2dip"   android:gravity="center_vertical"   android:orientation="horizontal"   android:background="@drawable/head_bg">

      在這段代碼最後一句是顯示背景即head_bg,但是當我到drawable_hdpi檔案夾中尋找它時,卻發現原圖是這個樣子的:

很明顯這張圖在用到的時候被放大並旋轉了,這裡提出來,以後再去尋找它的代碼。

      ok,回到層次布局,這裡面依次有圖片、文本、進度條和圖片,按照順序就是返回,顯示“部落格本文”,圖中那樣的進度條和重新整理頁面(這個和進度條是重合的)。也沒啥難懂的,下一個。

3.blog_detail:部落格的本文,看片來理解:


      這個就比較複雜了,開頭是一個喜聞樂見的LinearLayout布局,下面有

<include layout="@layout/blog_detail_header"/>

      這段代碼就是把之前講的的頁面插入進來,實現了代碼的重用,後面的所有的代碼被包括在ViewSwitcher中,實現的分屏動畫效果(具體作用沒看懂),這之後,這些又包括在一個ScrollView標籤中,它的作用是為布局添加垂直捲軸。又是一個LinearLayout囊括了一個圖片和文本,前者顯示的是文章的類型(原創或者轉載),後者是文章名。接著一個LinearLayout,依據圖片看代碼可得知分別是作者名,“發佈於”,發布時間,被評論表徵圖,評論數量。

<View style="@style/detail_cut_line"/>

 
    上面那段代碼是圖中那條藍色的分割線。

<WebView android:id="@+id/blog_detail_webview"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:background="@color/white"/>

      這段代碼是網路視圖,用於把網上文章顯示出來。

 <include layout="@layout/comment_list"/>

      這段代碼我還沒找到用處,評價意見嗎?

   <include layout="@layout/blog_detail_footer"/>

      結尾是把之前的頁尾代碼用上了,這就是完整的部落格本文頁面。

4.blog_detail_lisitem:引用,老實說,我認為這段代碼應該放在本文之上的,因為這段代碼的具體作用就是顯示了頁首和網路視圖之間的那段內容,但是不同於blog_detail_footer和blog_detail_header,在本文中,他沒有想前者那樣被include標籤引用,真的不知道為什麼,明明能簡化代碼,卻沒被使用,然後我仔細對比了兩段代碼,發現其中的資料很多不一樣,可能是因為在本文中要適當的縮小的緣故吧。因為具體和本文內容一樣就不一一介紹了。

OK,未完待續。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.