0

I am new to Android development. Can you give me some tips on creating UI layout as shown on the image below? Thanks for any help!

enter image description here

4

2 回答 2

1

试试这个布局设计

  <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:layout_below="@+id/imgLogo"
        android:background="#092EA1"
        android:orientation="vertical"
        android:paddingBottom="10dp"
        android:layout_marginTop="30dp"
        android:paddingLeft="10dp"
        android:layout_marginRight="15dp"
        android:layout_marginLeft="15dp"
        android:paddingRight="10dp" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:layout_marginTop="10dp"
                android:gravity="center_horizontal"
                android:text="@string/login"
                android:textColor="@android:color/white"
                android:textSize="25sp" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white" >

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="260dp"
                android:layout_height="40dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginLeft="13dp"
                android:layout_marginRight="13dp"
                android:layout_marginTop="15dp"
                android:background="@drawable/user_name" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/imageView1"
                android:layout_alignLeft="@+id/imageView1"
                android:layout_alignRight="@+id/imageView1"
                android:layout_alignTop="@+id/imageView1"
                android:layout_marginLeft="40dp"
                android:maxLines="1"
                android:background="@android:drawable/editbox_background"
                android:id="@+id/textUserName"
                android:hint="@string/username" />

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="260dp"
                android:layout_height="40dp"
                android:layout_alignParentLeft="true"
                android:layout_below="@+id/imageView1"
                android:layout_marginLeft="13dp"
                android:layout_marginRight="13dp"
                android:layout_marginTop="15dp"
                android:background="@drawable/password"  />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/imageView2"
                android:layout_alignLeft="@+id/imageView2"
                android:layout_alignRight="@+id/imageView2"
                android:layout_alignTop="@+id/imageView2"
                android:layout_marginLeft="40dp"
                android:maxLines="1"
                android:background="@android:drawable/editbox_background"
                android:hint="@string/password"
                android:id="@+id/textPassword"
                android:inputType="textWebPassword" />

            <ImageView
                android:id="@+id/btn_login"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/imageView2"
                android:layout_below="@+id/imageView2"
                android:layout_marginTop="26dp"
                android:src="@drawable/button_login" />

            <TextView
                android:id="@+id/forgotPass"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/btn_login"
                android:layout_alignRight="@+id/imageView2"
                android:text="@string/forgotText"
                android:layout_marginRight="10dp"
                android:textSize="15dp" />

            <TextView
                android:id="@+id/error_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/textPassword"
                android:layout_alignRight="@+id/forgotPass"
                android:layout_below="@+id/imageView2"
                android:textColor="#f51313"
                android:text="" />

        </RelativeLayout>

    </LinearLayout>

设置你想要的位置

于 2013-08-13T06:31:57.253 回答
0

来吧，在问这样的问题之前先谷歌一下。

阅读这两个答案（顺便说一句，通过在 Google 搜索中键入“android iphone-like ui elements”找到）：

他们有你需要的一切，包括解释为什么让 Android 应用看起来像 iOS 是一个非常糟糕的主意。

简要总结：这是因为应用程序的用户会讨厌你作为开发人员和你的雇主/owner_of_the_app，所以你们两个都会打嗝 24/7。

而且，最重要的是，您的应用程序将获得糟糕的评分并沉入 Play 商店的底部，这很难恢复——您知道，如果您在任何评论中获得 1 星，您就是除非用户改变主意和评分，否则永远不会得到 5.0 的平均值——而且他们不会，因为一旦他们看到 iOS 派生的 UI，他们将永远不会再看它。此外，不用说，任何带有直接从 iOS 移植的 UI 的 Android 应用程序都不会得到推荐。

因此，如果您可以建议应用所有者只使用原生 Android 控件，或者更好的是，重新设计应用以符合Android UI 设计指南，请说服他们这样做并为此感到自豪勇敢地参与对抗全球恶魔般的邪恶。

PS 我知道您可能不是该应用程序的主要负责人 --- 否则您不会将 iOS UI 移植到 Android。这是典型的承包商做的事情，我也参与其中。

PPS这里有一个很好的关于谷歌不要复制其他平台设计的可用性方法的精益解释：Pure Android

于 2013-08-13T07:36:38.637 回答