Android開發之線性布局詳解(布局權重)


  • 布局權重

    線性布局支持給個別的子視圖設定權重,通過android:layout_weight屬性。就一個視圖在屏幕上占多大的空間而言,這個屬性給其設 定了一個重要的值。一個大的權重值,允許它擴大到填充父視圖中的任何剩余空間。子視圖可以指定一個權重值,然后視圖組剩余的其他的空間將會分配給其聲明權 重的子視圖。默認的權重是0;

     

    未使用權重前效果圖:

    wKioL1MUlMmCXTxJAACGCBIx5rE738.jpg

    倆個線性布局組件,代碼如下:

    01. <?xml version="1.0" encoding="utf-8"?>
    02. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    03. android:layout_width="match_parent"
    04. android:layout_height="match_parent"
    05. android:orientation="vertical" >
    06. <ScrollView
    07. android:id="@+id/scrollView_content"
    08. android:layout_width="match_parent"
    09. android:layout_height="wrap_content"
    10. android:layout_gravity="center_horizontal"
    11.  
    12. android:orientation="vertical" >
    13. <LinearLayout
    14. android:layout_width="wrap_content"
    15. android:layout_height="wrap_content"
    16. android:layout_gravity="center_horizontal"
    17. android:orientation="vertical" >
    18. <ImageView
    19. android:layout_width="wrap_content"
    20. android:layout_height="wrap_content"
    21. android:layout_gravity="center_horizontal"
    22. android:src="@drawable/message_selected" />
    23. <TextView
    24. android:layout_width="wrap_content"
    25. android:layout_height="wrap_content"
    26. android:layout_gravity="center_horizontal"
    27. android:padding="10dp"
    28. android:text="測試文字\n測試文字\n測試文字\n測試文字\n測試文字\n測試文字\n測試文字\n測試文字\n測試文字\n
    29. "
    30. android:textSize="20sp" />
    31. </LinearLayout>
    32. </ScrollView>
    33. <LinearLayout
    34. android:layout_width="wrap_content"
    35. android:layout_height="wrap_content"
    36. android:layout_gravity="center_horizontal"
    37. android:orientation="horizontal" >
    38. <Button
    39. android:id="@+id/btn1"
    40. android:layout_width="wrap_content"
    41. android:layout_height="wrap_content"
    42. android:text="嵌套Fragment" />
    43. <Button
    44. android:id="@+id/btn2"
    45. android:layout_width="wrap_content"
    46. android:layout_height="wrap_content"
    47. android:text="外部Fragment" />
    48. </LinearLayout>
    49. </LinearLayout>

    仔細看下和想下就會發現這有個嚴重的問題,那就是“測試文字”行數多有,第二個LinearLayout布局被擠壓或擠出顯示區,如下圖:

    wKioL1MUls2y95PoAACV_8iu4q0387.jpg

    解決方法如下,在第一個LinearLayout 中加入權重android:layout_weight="1",代碼如下:

    01. <?xml version="1.0" encoding="utf-8"?>
    02. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    03. android:layout_width="match_parent"
    04. android:layout_height="match_parent"
    05. android:orientation="vertical" >
    06. <ScrollView
    07. android:id="@+id/scrollView_content"
    08. android:layout_width="match_parent"
    09. android:layout_height="wrap_content"
    10. android:layout_gravity="center_horizontal"
    11. android:layout_weight="1"
    12. android:orientation="vertical" >
    13. <LinearLayout
    14. android:layout_width="wrap_content"
    15. android:layout_height="wrap_content"
    16. android:layout_gravity="center_horizontal"
    17. android:orientation="vertical" >
    18. <ImageView
    19. android:layout_width="wrap_content"
    20. android:layout_height="wrap_content"
    21. android:layout_gravity="center_horizontal"
    22. android:src="@drawable/message_selected" />
    23. <TextView
    24. android:layout_width="wrap_content"
    25. android:layout_height="wrap_content"
    26. android:layout_gravity="center_horizontal"
    27. android:padding="10dp"
    28. android:text="測試文字\n測試文字\n測試文字\n測試文字\n測試文字\n測試文字\n測試文字\n測試文字\n測試文字\n
    29. "
    30. android:textSize="20sp" />
    31. </LinearLayout>
    32. </ScrollView>
    33. <LinearLayout
    34. android:layout_width="wrap_content"
    35. android:layout_height="wrap_content"
    36. android:layout_gravity="center_horizontal"
    37. android:orientation="horizontal" >
    38. <Button
    39. android:id="@+id/btn1"
    40. android:layout_width="wrap_content"
    41. android:layout_height="wrap_content"
    42. android:text="嵌套Fragment" />
    43. <Button
    44. android:id="@+id/btn2"
    45. android:layout_width="wrap_content"
    46. android:layout_height="wrap_content"
    47. android:text="外部Fragment" />
    48. </LinearLayout>
    49. </LinearLayout>

    效果如下圖

    wKiom1MUl9OS9SMtAACl30tZ-jQ385.jpg

    這樣就算文字內容再長也不會把第二個LinearLayout 擠出顯示區或擠壓,權重布局原理圖

    wKiom1MUmjDBWqM2AAG3j3x4gfA894.jpg


  • 免責聲明!

    本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



     
    粵ICP備18138465號   © 2018-2025 CODEPRJ.COM