Question

我需要创建一个这样的登录屏幕，我正在使用Android工作室 Screen design

我该怎么做？

此处提供锁定和用户图标：http://www.fileconvoy.com/dfl.php?id=g36a32a9fc3a1ae3a99959004714c5d27f473d16f6

就我所创造的而言。我需要知道如何给出图片中的颜色。我正在尝试，但它没有按预期工作。此外，我需要背景颜色不与EditText合并。

<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="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".Login"
android:id="@+id/">

<RelativeLayout
    android:layout_width="500dp"
    android:layout_height="300dp"
    android:layout_marginTop="210dp"
    android:layout_marginBottom="110dp"
    android:layout_marginLeft="25dp"
    android:layout_marginRight="25dp" />


<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:inputType="textPersonName"
    android:ems="10"
    android:id="@+id/nameET"
    android:hint="Username"
    android:textColorHint="#000000"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true" />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:inputType="textPassword"
    android:ems="10"
    android:id="@+id/passwordET"
    android:hint="Password"
    android:textColorHint="#000000"
    android:layout_below="@+id/nameET"
    android:layout_alignLeft="@+id/nameET"
    android:layout_alignStart="@+id/nameET"
    />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="LOGIN >"
    android:id="@+id/button2"
    android:layout_below="@+id/passwordET"
    android:layout_alignLeft="@+id/passwordET"
    android:layout_alignStart="@+id/passwordET"
    android:layout_alignRight="@+id/passwordET"
    android:layout_alignEnd="@+id/passwordET"
    android:textColor="@android:color/white"
    android:background="@android:color/holo_blue_dark"
    android:ellipsize="end" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Forgot Password"
    android:id="@+id/textView3"
    android:layout_below="@+id/button2"
    android:layout_centerHorizontal="true"
    android:textStyle="italic" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:maxWidth="35dp"
    android:maxHeight="36dp"
    android:id="@+id/imageView4"
    android:src="@drawable/useri"
    android:background="#ff4066ff"
    android:layout_toLeftOf="@id/nameET"
    android:layout_marginTop="220dp"
    />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:maxWidth="35dp"
    android:maxHeight="36dp"
    android:id="@+id/imageView3"
    android:src="@drawable/locki"
    android:background="#ff4066ff"
    android:layout_toLeftOf="@id/passwordET"
    android:layout_marginTop="260dp"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="EGO >"
    android:id="@+id/egoTV"
    android:layout_marginBottom="60dp"
    android:layout_marginLeft="100dp"
    android:layout_marginTop="15dp"
    android:layout_above="@+id/nameET"
    android:gravity="center"
    android:textSize="40dp"/>

Answer 1

最好的方法从here开始。
试着了解android UI的工作原理在你的项目中找到res文件夹在该文件夹中，您可以找到main_activity.xml文件或类似内容您可以在编辑器中或使用XML创建自己的UI。

Answer 2

此布局相当复杂，如果您创建的视图太多，则效率可能非常低。这是我对此的看法。对于“自我”徽标，创建一个TextView并将android:drawableRight设置为您想要使用的箭头，如果您想在“EGO”文本和箭头可绘制之间留出一些空格，请设置android:drawablePadding到你喜欢的价值。对于3个表单控件的容器，将它们组合在LinearLayout中并创建9-patch drawable并且不指定向上箭头的可伸展区域，因为当drawable伸展时，箭头将保持为同样是你想要的，你不希望它伸展看起来很难看，使用填充以你想要的方式偏移那些视图，并将android:background设置为你创建的可伸缩9补丁图像。对于用户名和密码字段，您可以使用EditText视图并将android:drawableLeft设置为您拥有的图标，也可以使用XML中的ShapeDrawable创建自定义背景。对于登录按钮，它是最简单的实现，当然创建一个按钮，但是您需要创建一个新的ShapeDrawable资源并使用radius元素作为shape的子元素根元素来制作像这样的圆角，按钮中的箭头可以使用键盘上的更大符号或使用Inkscape创建图像，这是免费的，非常强大的应用程序，你应该检查，如果你还没有，还使用android:drawableRight属性。好的，最后一块只是TextView，属性android:textStyle设置为italic。这就是我要做的事情，这是很多工作，但这是一个小工作，但你会得到一个效率更高的布局（如果你遵循，你可以消除ImageView的使用我的建议）。希望你觉得这很有帮助。

您可以使用这些属性创建阴影效果android:shadowDx android:shadowDy android:shadowColor android:shadowRadius。 Dx和Dy用于水平和垂直偏移，正值分别向右和向下偏移阴影，您甚至可以使用负值，在这种情况下，阴影朝向相反的方向。 radius属性是指你想要阴影的模糊程度，颜色是不言自明的，但我最喜欢的颜色是＃d9d9d9和＃550（或＃555500），但如果有任何颜色，使用#xxx可以提高内存效率组件具有相同的值，如＃55 55 00，我只使用＃550。

Android：布局帮助在图像中创建

2 个答案: