什么是我的UI的良好结构?

时间:2015-07-10 19:40:54

标签: android user-interface

我是开发Android应用程序的新手,为更大的个人项目做准备 在查看了谷歌的介绍页面后,我仍然很难弄清楚如何设计一个干净的用户界面。它只是感觉有点修补......

应用程序应该是一个可以递增和递减的计数器。还应允许用户通过文本框定义应向计数器添加或减去的值 以下是UI布局的样子:
Counter UI
顶部是计数器值,略低于手动间隔输入和清除按钮,最后在底部有一个递增按钮,一个递减计数器。

我有以下hierarchie:

  • RelativeLayout的
    • TextView(计数器)
    • LinearLayout(垂直)
      • LinearLayout(水平,间隔输入和清除按钮)
      • LinearLayout(水平,递增和递减按钮)

我的代码如下:

<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:paddingLeft="50dp"
    android:paddingRight="50dp"
    android:paddingTop="20dp"
    android:paddingBottom="50dp" tools:context=".Count"
    android:gravity="center"
    android:focusableInTouchMode="false">

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="0000"
            android:id="@+id/txvCounter"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:textSize="70sp"
            android:textStyle="bold"
            android:layout_gravity="center"
            android:layout_marginBottom="50dp"
            android:digits="4"
            android:editable="false" />

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="bottom"
            android:layout_marginBottom="50dp">

            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:inputType="numberSigned"
                android:ems="10"
                android:id="@+id/txbOffset"
                android:gravity="center_horizontal"
                android:textSize="40sp"
                android:layout_gravity="bottom"
                android:layout_weight="1"
                android:textIsSelectable="true"
                android:text="0001"
                android:editable="true"
                android:digits="4"
                android:elegantTextHeight="false"
                android:enabled="true"
                android:autoText="false"
                android:clickable="false" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="C"
                android:id="@+id/btnApplyOffset"
                android:textSize="40sp"
                android:onClick="clearOffset" />
        </LinearLayout>

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

            <Button
                android:layout_width="100sp"
                android:layout_height="wrap_content"
                android:text="-"
                android:id="@+id/btnDecr"
                android:textSize="70sp"
                android:layout_marginRight="25dp"
                android:layout_gravity="left"
                android:layout_weight="1"
                android:onClick="decrCount" />

            <Button
                android:layout_width="100sp"
                android:layout_height="wrap_content"
                android:text="+"
                android:id="@+id/btnIncr"
                android:textSize="70sp"
                android:layout_marginLeft="25dp"
                android:layout_weight="1"
                android:onClick="incrCount" />
        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

我知道有一些小的陷阱,如硬编码字符串等。我更关心整体布局。
是否有更清洁或更优雅的布局设计方式?

1 个答案:

答案 0 :(得分:1)

摆脱顶部线性布局以避免嵌套线性布局

<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:paddingLeft="50dp"
    android:paddingRight="50dp"
    android:paddingTop="20dp"
    android:paddingBottom="50dp" tools:context=".Count"
    android:gravity="center"
    android:focusableInTouchMode="false">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="0000"
            android:id="@+id/txvCounter"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:textSize="70sp"
            android:textStyle="bold"
            android:layout_gravity="center"
            android:layout_marginBottom="50dp"
            android:digits="4"
            android:editable="false" />

        <LinearLayout
            android:orientation="horizontal"
             **android:id="@+id/layout1"
            android:layout_below = "@+id/txvCounter"**
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="bottom"
            android:layout_marginBottom="50dp">

            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:inputType="numberSigned"
                android:ems="10"
                android:id="@+id/txbOffset"
                android:gravity="center_horizontal"
                android:textSize="40sp"
                android:layout_gravity="bottom"
                android:layout_weight="1"
                android:textIsSelectable="true"
                android:text="0001"
                android:editable="true"
                android:digits="4"
                android:elegantTextHeight="false"
                android:enabled="true"
                android:autoText="false"
                android:clickable="false" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="C"
                android:id="@+id/btnApplyOffset"
                android:textSize="40sp"
                android:onClick="clearOffset" />
        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            **android:id="@+id/layout2"
            android:layout_below = "@+id/layout1"**
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <Button
                android:layout_width="100sp"
                android:layout_height="wrap_content"
                android:text="-"
                android:id="@+id/btnDecr"
                android:textSize="70sp"
                android:layout_marginRight="25dp"
                android:layout_gravity="left"
                android:layout_weight="1"
                android:onClick="decrCount" />

            <Button
                android:layout_width="100sp"
                android:layout_height="wrap_content"
                android:text="+"
                android:id="@+id/btnIncr"
                android:textSize="70sp"
                android:layout_marginLeft="25dp"
                android:layout_weight="1"
                android:onClick="incrCount" />
        </LinearLayout>

</RelativeLayout>