如何在Android中实现这种布局

时间:2013-09-05 20:30:51

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

我是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

我的根布局是一个LinearLayout,包含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中设置它们吗?如何让它们相应地缩放,就像在第二张图片的底部可以看到的那样。


感谢您的帮助,我也希望这可以作为其他无法理解如何处理这种情况的人的榜样。

2 个答案:

答案 0 :(得分:0)

我不确定,如果我的问题是对的。

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

只需在布局XML文件的名称中给出相应的后缀。

答案 1 :(得分:0)

我最终为我的图片创建了自定义视图。视图计算其父项上剩余的空间,手动缩放图像,然后将其自身调整为与生成的图像相同的大小。

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

有了这个,我实现了我想要的,一种可以在所有屏幕尺寸下完美运行的布局。