Question

我正在为Android开发应用程序已有一年多的成功，但有一件事对我来说仍然是一个问题：如何使用TextViews，ImageViews和Buttons的组合设计布局，同时保留不同屏幕尺寸的每个元素之间的关系。

我想构建一个这样的布局： layout to build

这是列表视图，因此使用了许多布局。该应用程序具有不同的智能手机和平板电脑布局。

因此，右侧的橙色按钮应始终有3行文字，但仍应具有最大宽度，左侧的图像应与右侧的按钮具有相同的高度。中间的3行文字应占用尽可能多的空间。星形图像应与右侧文本具有相同的高度。

我已经设法使用TableLayout构建类似的测试布局，以下是AndroidStudio的预览： Nexus S. Nexus S

Nexus 6 Nexus 6

在Nexus S屏幕尺寸上，布局正常，但在更大的屏幕上，它很难看。按钮太小，左边的图像也太小。

以下是我的测试布局的代码：

<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
>
<TableRow android:orientation="horizontal"
          android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/iv1"
        android:layout_width="80dp"
        android:layout_height="match_parent"
        android:contentDescription="@string/dummy"
        android:padding="@dimen/raster4dp"
        android:scaleType="fitXY"
        android:src="@drawable/avatar_1" />

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:id="@+id/tv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="some nice text here"
            android:layout_alignParentLeft="true"
            android:textAppearance="?android:attr/textAppearanceMedium"
            />
        <ImageView
            android:id="@+id/iv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/tv1"
            android:src="@drawable/ic_male_user_bw"
            android:layout_alignParentLeft="true"
            />
        <TextView
            android:id="@+id/tv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="more nice text"
            android:layout_toRightOf="@id/iv2"
            android:layout_alignBottom="@id/iv2"
            android:textAppearance="?android:attr/textAppearanceMedium"
            />
        <ImageView
            android:id="@+id/iv3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/iv2"
            android:layout_alignParentLeft="true"
            android:src="@drawable/ic_male_user_bw"
            />
        <TextView
            android:id="@+id/tv3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="more nice text"
            android:layout_toRightOf="@id/iv3"
            android:layout_alignBottom="@id/iv3"
            android:textAppearance="?android:attr/textAppearanceMedium"
            />
    </RelativeLayout>

    <Button
        android:id="@+id/btn1"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:background="@drawable/button_dropshadow_black_xml"
        android:text="Line1\nLine2\nLine3"
        android:textColor="@android:color/white" />
</TableRow>
</TableLayout>

所以希望我的问题不是太傻，但我在理解如何解决这个问题上遇到了一些问题。目前我在按钮上使用固定80dp的宽度，在左边使用图像。我认为这不是它在Android上运行的方式。我需要在这里使用什么尺寸，什么样的布局？

开发者网站上关于sreensizes等的部分是我所知道的（https://developer.android.com/guide/practices/screens_support.html），但它对我没有帮助。

感谢您的帮助！：）

Answer 1

每个终端都有不同的尺寸。如果您放置一个大小为80dp的按钮，当其他终端屏幕较大时，该按钮将比您正在进行测试的终端屏幕更小。

你应该玩WEIGHT。

|             |                         |            |  
|_____________|_________________________|____________|
      0.3                0.5                 0.2        0.3 + 0.5 + 0.2 = 1 <-Weight.

阅读this，会有所帮助。同样there's a question与你的相似，也请检查它。

Answer 2

如果您不想考虑设备屏幕的像素密度，则DP用于设置固定数量的像素。这使您可以在Nexus 4,5或Samsung Galaxy Mini中显示相同大小的按钮。

相同的“绝对”尺寸。这意味着，如果您的图像太大，它可能适合Nexus，但由于其较小的屏幕，因此不适用于Nexus。这是因为它不依赖于屏幕尺寸，也不依赖于像素密度。

我几乎不推荐你使用LinearLayouts（及其属性权重）和RelativeLayouts作为直接子项（如果你需要它们）。这可能与CSS中“％”的使用“相同”（不完全相同）。

在这里，您可以看到权重属性的示例（第二个答案为您提供了更多提示）。

Linear Layout and weight in Android

我希望这会有所帮助!!

Answer 3

检查这个....如果需要，增加父布局高度：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/iv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="dummy"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="6"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/tv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="some nice text here"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal" >

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

            <TextView
                android:id="@+id/tv2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="more nice text"
                android:textAppearance="?android:attr/textAppearanceMedium" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal" >

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

            <TextView
                android:id="@+id/tv3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="more nice text"
                android:textAppearance="?android:attr/textAppearanceMedium" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal" >

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

            <ImageView
                android:id="@+id/iv24"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />
        </LinearLayout>
    </LinearLayout>

    <Button
        android:id="@+id/btn1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:background="#565657"
        android:text="Line1\nLine2\nLine3"
        android:textColor="@android:color/white" />

</LinearLayout>

试图了解Android布局，图像大小和关系

3 个答案: