Question

我选择了一个我开始工作的项目 - 设计我的第一个Android应用程序。我作为面向对象的开发人员有多年的经验，但在图形界面设计方面却很少。我一直在玩屏幕控制，并且已经移动了很多东西，没有真正的运气或进步。以下是我遇到的一些问题：

我无法正确显示按钮/标签布局，而不会与其他布局重叠。
如果我使用“dp”设置而不是动态指定尺寸，我只能在大多数控件上获得正确的宽度/高度。这是一个问题，因为一旦我切换分辨率，它就会显示一个临界无法使用的布局。
如卡片的顶行所示，我无法将包含的布局与其中的卡片的高度相同。这太大了。
与上述问题类似，我无法在以下行的卡片之间创建缓冲区。我的意思是我希望卡片尺寸缩小，卡片之间有“绿色空间”，并且包含的布局会相应缩小。我没有在下面的模型中包含此更改，因为它不是最重要的部分。

这是我的XML代码：

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#458B00"
android:gravity="center_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"
tools:context=".MainScreen" >

<TableRow
    android:id="@+id/cardsTable"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:layout_alignParentTop="true" >

    <ImageView
        android:id="@+id/firstcard"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:src="@drawable/empty" />

    <ImageView
        android:id="@+id/secondcard"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:src="@drawable/empty" />

    <ImageView
        android:id="@+id/thirdcard"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:src="@drawable/empty" />

    <ImageView
        android:id="@+id/fourthcard"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:src="@drawable/empty" />

    <ImageView
        android:id="@+id/fifthcard"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:src="@drawable/empty" />
</TableRow>

<RelativeLayout
    android:id="@+id/buttonLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/cardsTable"
    android:layout_alignParentBottom="true" 
    android:visibility="visible" >

    <RelativeLayout
        android:id="@+id/suitButtons"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="invisible" >

        <ImageView
            android:id="@+id/suitclubs"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_weight="1"
            android:src="@drawable/ca" />

        <ImageView
            android:id="@+id/suitdiamonds"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/suitclubs"
            android:layout_toRightOf="@+id/suitclubs"
            android:layout_weight="1"
            android:src="@drawable/da" />

        <ImageView
            android:id="@+id/suitdiamonds"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/suitclubs"
            android:layout_toRightOf="@+id/suitdiamonds"
            android:layout_weight="1"
            android:src="@drawable/sa" />

        <ImageView
            android:id="@+id/suithearts"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/suitclubs"
            android:layout_toRightOf="@+id/suitdiamonds"
            android:layout_weight="1"
            android:src="@drawable/ha" />
    </RelativeLayout>

    <TableLayout
        android:id="@+id/numberButtons"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="visible" >

        <TableRow
            android:id="@+id/topRow"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:visibility="visible" >

            <ImageView
                android:id="@+id/two"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@drawable/h2"
                android:visibility="visible" />

            <ImageView
                android:id="@+id/three"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@drawable/h3" />

            <ImageView
                android:id="@+id/four"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@drawable/h4" />

            <ImageView
                android:id="@+id/five"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@drawable/h5" />
        </TableRow>

        <TableRow
            android:id="@+id/midRow"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1" >

            <ImageView
                android:id="@+id/six"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@drawable/h6" />

            <ImageView
                android:id="@+id/seven"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@drawable/h7" />

            <ImageView
                android:id="@+id/eight"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@drawable/h8" />

            <ImageView
                android:id="@+id/nine"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@drawable/h9" />

            <ImageView
                android:id="@+id/ten"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@drawable/h10" />
        </TableRow>

        <TableRow
            android:id="@+id/bottomRow"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1" >

            <ImageView
                android:id="@+id/jack"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@drawable/hj" />

            <ImageView
                android:id="@+id/queen"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@drawable/hq" />

            <ImageView
                android:id="@+id/king"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@drawable/hk" />

            <ImageView
                android:id="@+id/ace"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@drawable/ha" />
        </TableRow>
    </TableLayout>
</RelativeLayout>

<RelativeLayout
    android:id="@+id/LabelAndDealButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/cardsTable"
    android:layout_above="@+id/buttonLayout">

    <TextView
        android:id="@+id/infoLabel"
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:text="Choose a suit"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <Button
        android:id="@+id/dealbutton"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignLeft="@+id/infoLabel"
        android:layout_below="@+id/infoLabel"
        android:text="Deal" />
</RelativeLayout>

这是我想要最终产品的模型： mockup

目前看来是这样的代码：

current design

您可能拥有的任何贡献都非常感谢！谢谢你的帮助！

Answer 1

我无法正确显示按钮/标签布局与其他布局重叠。

buttonLayout Relativelayout的属性为android:layout_below="@+id/cardsTable"，这意味着它将占据底部和顶部布局之间的整个空间。您尝试放置的布局显然不会显示。从buttonLayout删除该规则。

如果我使用的话，我只能在大多数控件上获得正确的宽度/高度＆＃34; DP＆＃34;设置而不是动态指定尺寸。这是一个问题，就像我切换分辨率一样，它会显示一个布局边界无法使用。

展开这一点，它不清楚你的要求。

如卡片的顶行所示，我无法获得包含的布局和他们里面的卡一样高。这太大了。

您已在150dp cardsTable上设置了TableRow的高度，您可能希望使用wrap_content。顺便说一句，TableRow是一个设计用于TableLayout的小部件，而不是单独使用，用LinearLayout替换它。

与上述问题类似，我无法在其间创建缓冲区以下行中的卡片。我的意思是我想要卡片缩小尺寸，拥有一个绿色空间＆＃34;卡之间，并有包含布局相应缩小。我没有把这个改变包括在里面下面的模型，因为它不是最重要的部分。

我不确定我理解，但layout_margin底部的TableRows是不是你想要的？

第一个android应用程序界面设计 - 不同的分辨率/设备/布局

1 个答案: