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

posted @ 2014-07-11 18:14  新感觉  阅读(5103)  评论(0编辑  收藏  举报