Android:布局实例之模仿京东登录界面

时间:2023-03-09 03:45:35
Android:布局实例之模仿京东登录界面

预览图及布局结构参考:

Android:布局实例之模仿京东登录界面

布局:

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffF6F2ED" > <LinearLayout
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_alignParentTop="true"
android:background="@drawable/android_title_bg"
android:gravity="center_vertical"
android:orientation="horizontal" > <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:singleLine="true"
android:text="@string/login"
android:textColor="@android:color/white"
android:textSize="15sp" />
</LinearLayout> <ScrollView
android:id="@+id/login_scroller"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/title" > <RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" > <ImageView
android:id="@+id/joy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:minHeight="75dp"
android:minWidth="75dp"
android:padding="3dp"
android:src="@drawable/login_dog" /> <LinearLayout
android:id="@+id/login_edit_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/joy"
android:layout_marginLeft="13dp"
android:layout_marginRight="13dp"
android:background="@drawable/login_layout_editor_bg"
android:orientation="vertical" > <LinearLayout
android:layout_width="match_parent"
android:layout_height="47dp"
android:focusable="true"
android:focusableInTouchMode="true"
android:gravity="center_vertical"
android:orientation="horizontal" > <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="@string/user_name"
android:textColor="@android:color/black"
android:textSize="17sp" /> <EditText
android:id="@+id/login_input_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:background="#fffbfbfb"
android:singleLine="true" />
</LinearLayout> <View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#ffc8c8c8" /> <LinearLayout
android:layout_width="match_parent"
android:layout_height="47dp"
android:gravity="center_vertical"
android:orientation="horizontal" > <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="@string/user_password"
android:textColor="@android:color/black"
android:textSize="17sp" /> <EditText
android:id="@+id/login_input_password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#fffbfbfb"
android:inputType="textPassword"
android:singleLine="true" /> <CheckBox
android:id="@+id/login_switchBtn"
android:layout_width="55dp"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:button="@drawable/login_hide_password_selector"
android:clickable="true" />
</LinearLayout>
</LinearLayout> <Button
android:id="@+id/login_btn"
android:layout_width="match_parent"
android:layout_height="42dp"
android:layout_below="@+id/login_edit_layout"
android:layout_marginLeft="13dp"
android:layout_marginRight="13dp"
android:layout_marginTop="13dp"
android:background="@drawable/login_layout_btn_bg"
android:text="@string/login"
android:textColor="@android:color/white"
android:textSize="15sp" /> <RelativeLayout
android:id="@+id/login_passfind_and_phonelogin"
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_below="@+id/login_btn"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="13dp"
android:gravity="center_vertical" > <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="@string/find_password"
android:textColor="#ff288dfe"
android:textSize="15sp" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="@string/phone_register"
android:textColor="#ff288dfe"
android:textSize="15sp" />
</RelativeLayout> <RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/login_passfind_and_phonelogin"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="13dp"
android:gravity="center_vertical" > <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:drawableLeft="@drawable/login_icon_wx"
android:drawablePadding="5dp"
android:drawableRight="@drawable/index_icon1"
android:gravity="center_vertical"
android:text="@string/weixin_login"
android:textColor="#ff787878"
android:textSize="15sp" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:drawableLeft="@drawable/login_icon_other"
android:drawablePadding="5dp"
android:drawableRight="@drawable/index_icon1"
android:gravity="center_vertical"
android:text="@string/other_login"
android:textColor="#ff787878"
android:textSize="15sp" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>

实例下载>>>>>>>>>>>>>>>

在上面基础上添加验证实例下载>>>>>>

这次学习到的

文本框添加背景色可以取消掉默认背景

EditText父级加入以下属性,可以取消默认聚焦

android:gravity="center_vertical"
android:orientation="horizontal"

让文本单行显示的属性:

android:singleLine="true"

TextView添加图标可以用

android:drawableLeft="@drawable/login_icon_wx"

相关文章:

Android:布局实例之模仿QQ登录界面