android - 线性布局不适合 xhdpi 和 xxhdpi，可以给我布局方面的建议吗？

Question

我使用 LinearLayout，并且不适合 xhdpi 和 xxhdpi，就像这样。

在 hdpi 上

在 xhdpi 上，xxhdpi:

我这样使用LinearLayout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/bg_gradien_menu"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="5dp"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/Recommendation"
        android:textColor="@color/font"
        android:layout_marginBottom="5dp"
        android:textSize="18sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/TextView01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/frame"
        android:textColor="@color/font"
        android:textSize="13sp" />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="5dp"
    android:gravity="center_vertical|center_horizontal|center" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/frame_mtb_roadbike" />

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="right|center_vertical|center_horizontal"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/TextView04"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/ct"
            android:textColor="@color/font"
            android:textSize="13sp" />

        <Button
            android:id="@+id/Button01"
            android:layout_width="100dp"
            android:layout_height="35dp"
            android:layout_marginTop="7dp"
            android:background="@drawable/btn_blue_focused"
            android:gravity="center_vertical|center_horizontal|center"
            android:text="80 cm"
            android:textColor="@color/dec_font"
            android:textSize="19sp"
            android:textStyle="bold" />
    </LinearLayout>

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/TextView03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="@string/adtional"
        android:textColor="@color/font"
        android:textSize="12sp" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="TextView"
        android:textColor="@color/font"
        android:textSize="11sp" />

</LinearLayout>

<View
    android:id="@+id/view1"
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:layout_below="@+id/linearLayout2"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="5dp"
    android:background="@color/font" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="8dp"
        android:text="@string/crank"
        android:textColor="@color/font"
        android:textSize="13sp" />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:gravity="center" >

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:src="@drawable/crank_img" />

    <LinearLayout
        android:id="@+id/linearLayout3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:gravity="right|center_vertical|center_horizontal"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/TextView02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/crank_dec"
            android:textColor="@color/font"
            android:textSize="13sp" />

        <Button
            android:id="@+id/Button02"
            android:layout_width="100dp"
            android:layout_height="35dp"
            android:layout_marginTop="7dp"
            android:background="@drawable/btn_blue_focused"
            android:gravity="center_vertical|center_horizontal|center"
            android:text="80 cm"
            android:textColor="@color/dec_font"
            android:textSize="19sp"
            android:textStyle="bold" />

        <Button
            android:id="@+id/button1"
            android:layout_width="100dp"
            android:layout_height="35dp"
            android:layout_marginTop="5dp"
            android:background="@drawable/btn_blue_focused"
            android:gravity="center_vertical|center_horizontal|center"
            android:text="80 cm"
            android:textColor="@color/dec_font"
            android:textSize="19sp"
            android:textStyle="bold" />
    </LinearLayout>

</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_gravity="bottom"
    android:orientation="vertical" >

<LinearLayout
    android:id="@+id/linearLayout4"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:background="@drawable/rectangle_note"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/disclaimer"
        android:textSize="11sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/disclaimer_desc"
        android:textSize="10sp" />

</LinearLayout>

        <Button
        android:id="@+id/btn_starover"
        android:layout_width="fill_parent"
        android:layout_height="@dimen/btn_height"
        android:background="@drawable/btn_menu"
        android:text="@string/again"
        android:textColor="@color/white" />
    </LinearLayout>

可以给我布局方面的建议吗？

Answer 1

首先，评论:不要使用 fill_parent，因为它已被弃用。相反，您应该始终使用 match_parent。

总结:您需要在小部件上使用 layout_weight 属性来分配布局中未分配的空间。这将拉伸(stretch)小部件以沿一个轴填充屏幕(取决于包含它们的线性布局的方向)。

长答案:

您的布局问题在于您使用 wrap_content 作为许多小部件的高度和宽度。这将导致小部件根据其“自然”大小调整大小，这通常意味着足够大以适合内容，加上一些额外的像素用于基于样式的填充和边距。设置为环绕内容的小部件不会根据屏幕尺寸拉伸(stretch)或收缩。它们总是倾向于被吸引到父容器的左上角。

还需要注意的是，即使您将父容器设置为 match_parent，它包含的小部件也不会自动填充容器。例如，您可以创建以下内容:

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

  <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"/>
</LinearLayout>

并且按钮将 float 在屏幕的左侧，即使父布局设置为与屏幕的宽度相匹配。

如果您希望小部件拉伸(stretch)以填充线性布局中屏幕上的空白区域，您有一个很好的选择:layout_weight。

当 Android 在线性布局中调整小部件的大小时，它会进行两次传递。在第一遍中，它使用 layout_width 和 layout_height 属性。如果这些设置为 wrap_content，则在第一遍中小部件将设置为其“自然”大小。

在第二遍中，它查看小部件的 layout_weight 属性。任何剩余的像素都会根据它们的权重分配给所有的小部件。根本不指定权重的小部件不会获得任何像素。确实指定权重的小部件获得与其权重成比例的像素(例如，权重为 2 的小部件获得的像素是权重为 1 的小部件的两倍)。通过这种方式，一维中所有未分配的像素都可以以您想要的任何方式分布在您的小部件中。希望他们都去一个小部件？赋予它 1 的权重并且不赋予任何其他小部件权重。想要在所有小部件之间平均分配空间吗？给它们都赋予 1 的权重。

请务必注意，权重只会沿一个轴分布像素:对于水平线性布局，这是 X 轴，对于垂直线性布局，这是 Y 轴。