Question

我是Android开发的新手。你能给我一些关于创建UI布局的技巧，如下图所示吗？谢谢你的帮助！

enter image description here

Answer 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>

根据您的需要设置位置

Answer 2

来吧，谷歌一点点之后才问这样的问题。

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

他们已经得到了你所需要的一切，包括解释为什么使Android应用看起来像iOS 是一个非常糟糕的主意。

简要总结：这是因为该应用程序的用户会讨厌您作为开发人员和您的雇主/ owner_of_the_app这么多人都会24/7小时打嗝。

而且，最重要的是，你的应用程序将获得不良评级并沉入Play商店的底部，非常很难恢复 - 你知道，如果你得到1在任何评论中都是明星，除非用户改变他们的想法和评级，否则你永远不会得到5.0的平均值 - 而且他们不会，因为一旦他们看到iOS衍生的UI，他们就再也不会看到它。此外，不言而喻，没有直接从iOS移植的Android应用程序将永远获得功能。

所以，请你，如果你的位置，你可以建议应用程序所有者只使用原生Android控件，或者更好的是，重新设计应用程序以符合Android UI Design guide，请说服他们这样做，并为大胆地参与抗击全球恶魔般的邪恶而感到骄傲。

PS我知道你可能不是那个打电话关于应用程序的人 - 否则你不会将iOS UI移植到Android。这是一个典型的承包商事情，我已经分享了它。

PPS 以下是Google对可用性的不复制 - 设计 - 其他平台方法的非常精简的解释：Pure Android

Android布局设计

2 个答案: