如何在Android中实现这种布局答案

【问题标题】：How to achieve this kind of layout in Android如何在Android中实现这种布局
【发布时间】：2013-09-09 19:45:12
【问题描述】：

我是 Android 开发新手，我正在尝试为我的应用实现能够处理不同屏幕分辨率/比率的布局。

我一直在阅读该网站上的大量文档和问题，以尝试了解基础知识和概念。

首先我经历了：

developer.android.com/guide/practices/screens_support.html

还有这样的问题：

stackoverflow.com/questions/6403619/how-to-support-all-the-different-resolutions-of-android-products

我对如何处理事情有了一个非常基本的想法。但是，对于初学者来说，入门还是相当困难的，我发现自己在试图实现我想出的解决方案时陷入困境。

我将我的应用设计为 480x800 的目标分辨率，并将其设置为始终以纵向模式显示。

这就是它的外观以及我理解它应该如何工作（我使用 Waldo 作为示例哈哈）：

（抱歉链接，我需要 10 个代表才能发布图片）

http://i.imgur.com/KXTAXir.jpg

我的根布局是一个线性布局，其中包含 3 个其他布局，即 A 和 C 的权重设置为 0.8，而 B 的权重为 8.4。这一切都很好，但是 B 的内容目前设置为 DP 单元只是为了能够测试。

B 包含一个框架布局，其中包含 3 个其他布局，其中 2 个工作正常，仅在需要时显示。问题是我需要 B 能够根据它的第一个孩子的内容进行调整：一个 LinearLayout 包含 2 个 ImageView 和 1 个 ProgressBar。我需要那些 ImageView 始终保持它们的比例。

以下是它应该如何工作的示例：

http://i.imgur.com/cH7fUze.jpg

想象这 4 个是真实的屏幕，它们的比例和大小各不相同。所以我的应用应该只调整 B（从我的第一张图片开始）以保持图片的原始比例。

这是布局代码：

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/darkgray"
android:orientation="vertical" >

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.8"
    android:background="#666666" >

    <TextView
        android:id="@+id/level_text_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:text="LEVEL"
        android:textAppearance="?android:attr/textAppearanceSmall" />

    <TextView
        android:id="@+id/level_text_score"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="SCORE"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/level_text_clock"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="01:59"
        android:textAppearance="?android:attr/textAppearanceSmall" />

</RelativeLayout>

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="8.4" >

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

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:adjustViewBounds="true" />

        <ProgressBar
            android:id="@+id/progressBar1"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:max="1000"
            android:progress="0" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:adjustViewBounds="true" />
    </LinearLayout>

    <RelativeLayout
        android:id="@+id/pauseMask"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#000000"
        android:visibility="gone" >

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/gameoverMask"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFFFF"
        android:visibility="gone" >

    </RelativeLayout>

</FrameLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.8"
    android:background="#666666" >

    <TextView
        android:id="@+id/level_text_status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:text="0/0"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <Button
        android:id="@+id/button1"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="Button"
        android:onClick="useHint" />

    <Button
        android:id="@+id/button2"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/button1"
        android:layout_centerVertical="true"
        android:text="Button"
        android:onClick="toggleSound" />

    <Button
        android:id="@+id/button3"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/button2"
        android:layout_centerVertical="true"
        android:text="Button"
        android:onClick="togglePause" />

</RelativeLayout>

我最后不清楚的是如何处理文本和按钮大小。我应该将它们设置在 DP 中吗？我如何让它们相应地缩放，就像在我的第二张图片底部看到的那样。

感谢您的帮助，我也希望这可以作为其他人难以理解如何处理此类情况的示例。

【问题讨论】：

您是否尝试过使用不同的 imageView 参数？我看到你使用了android:adjustViewBounds。尝试使用android:scaleType 或宽度或其他东西。我要说的是，这需要您使用参数，并且无法为您的问题提供具体的固定解决方案

标签： android android-layout screen-resolution aspect-ratio

【解决方案1】：

我不确定你的问题是否正确。

但是，您可以为不同的屏幕尺寸和方向指定不同的布局，如下所述：http://developer.android.com/guide/practices/screens_support.html

只需在布局 XML 文件的名称中添加相应的后缀即可。

【讨论】：

抱歉不是后缀，在布局文件中，而是在相应的文件夹中。比如 res/layout-small/my_layout.xml

【解决方案2】：

我最终为我的图像创建了一个自定义视图。视图计算其父级上剩余的空间，手动缩放图像，然后将自身调整为与结果图像相同的大小。

为了将进度条调整为与图像相同的宽度，我使用了一个自定义侦听器，该侦听器会在我的自定义视图调整大小时触发。然后我调整进度条的大小以匹配它们的宽度。

这样我就实现了我想要的，一个在所有屏幕尺寸下都能完美运行的布局。

【讨论】：