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

预览图及布局结构参考:

布局：

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3     android:layout_width="match_parent"
  4     android:layout_height="match_parent"
  5     android:background="#ffF6F2ED" >
  6 
  7     <LinearLayout
  8         android:id="@+id/title"
  9         android:layout_width="match_parent"
 10         android:layout_height="45dp"
 11         android:layout_alignParentTop="true"
 12         android:background="@drawable/android_title_bg"
 13         android:gravity="center_vertical"
 14         android:orientation="horizontal" >
 15 
 16         <TextView
 17             android:layout_width="wrap_content"
 18             android:layout_height="wrap_content"
 19             android:paddingLeft="10dp"
 20             android:singleLine="true"
 21             android:text="@string/login"
 22             android:textColor="@android:color/white"
 23             android:textSize="15sp" />
 24     </LinearLayout>
 25 
 26     <ScrollView
 27         android:id="@+id/login_scroller"
 28         android:layout_width="match_parent"
 29         android:layout_height="wrap_content"
 30         android:layout_below="@+id/title" >
 31 
 32         <RelativeLayout
 33             android:layout_width="match_parent"
 34             android:layout_height="wrap_content" >
 35 
 36             <ImageView
 37                 android:id="@+id/joy"
 38                 android:layout_width="wrap_content"
 39                 android:layout_height="wrap_content"
 40                 android:layout_alignParentTop="true"
 41                 android:layout_centerHorizontal="true"
 42                 android:layout_marginTop="10dp"
 43                 android:minHeight="75dp"
 44                 android:minWidth="75dp"
 45                 android:padding="3dp"
 46                 android:src="@drawable/login_dog" />
 47 
 48             <LinearLayout
 49                 android:id="@+id/login_edit_layout"
 50                 android:layout_width="match_parent"
 51                 android:layout_height="wrap_content"
 52                 android:layout_below="@+id/joy"
 53                 android:layout_marginLeft="13dp"
 54                 android:layout_marginRight="13dp"
 55                 android:background="@drawable/login_layout_editor_bg"
 56                 android:orientation="vertical" >
 57 
 58                 <LinearLayout
 59                     android:layout_width="match_parent"
 60                     android:layout_height="47dp"
 61                     android:focusable="true"
 62                     android:focusableInTouchMode="true"
 63                     android:gravity="center_vertical"
 64                     android:orientation="horizontal" >
 65 
 66                     <TextView
 67                         android:layout_width="wrap_content"
 68                         android:layout_height="wrap_content"
 69                         android:layout_marginLeft="10dp"
 70                         android:text="@string/user_name"
 71                         android:textColor="@android:color/black"
 72                         android:textSize="17sp" />
 73 
 74                     <EditText
 75                         android:id="@+id/login_input_name"
 76                         android:layout_width="match_parent"
 77                         android:layout_height="wrap_content"
 78                         android:layout_marginRight="5dp"
 79                         android:background="#fffbfbfb"
 80                         android:singleLine="true" />
 81                 </LinearLayout>
 82 
 83                 <View
 84                     android:layout_width="match_parent"
 85                     android:layout_height="1dp"
 86                     android:background="#ffc8c8c8" />
 87 
 88                 <LinearLayout
 89                     android:layout_width="match_parent"
 90                     android:layout_height="47dp"
 91                     android:gravity="center_vertical"
 92                     android:orientation="horizontal" >
 93 
 94                     <TextView
 95                         android:layout_width="wrap_content"
 96                         android:layout_height="wrap_content"
 97                         android:layout_marginLeft="10dp"
 98                         android:text="@string/user_password"
 99                         android:textColor="@android:color/black"
100                         android:textSize="17sp" />
101 
102                     <EditText
103                         android:id="@+id/login_input_password"
104                         android:layout_width="0dp"
105                         android:layout_height="wrap_content"
106                         android:layout_weight="1"
107                         android:background="#fffbfbfb"
108                         android:inputType="textPassword"
109                         android:singleLine="true" />
110 
111                     <CheckBox
112                         android:id="@+id/login_switchBtn"
113                         android:layout_width="55dp"
114                         android:layout_height="wrap_content"
115                         android:layout_marginRight="5dp"
116                         android:button="@drawable/login_hide_password_selector"
117                         android:clickable="true" />
118                 </LinearLayout>
119             </LinearLayout>
120 
121             <Button
122                 android:id="@+id/login_btn"
123                 android:layout_width="match_parent"
124                 android:layout_height="42dp"
125                 android:layout_below="@+id/login_edit_layout"
126                 android:layout_marginLeft="13dp"
127                 android:layout_marginRight="13dp"
128                 android:layout_marginTop="13dp"
129                 android:background="@drawable/login_layout_btn_bg"
130                 android:text="@string/login"
131                 android:textColor="@android:color/white"
132                 android:textSize="15sp" />
133 
134             <RelativeLayout
135                 android:id="@+id/login_passfind_and_phonelogin"
136                 android:layout_width="match_parent"
137                 android:layout_height="20dp"
138                 android:layout_below="@+id/login_btn"
139                 android:layout_marginLeft="20dp"
140                 android:layout_marginRight="20dp"
141                 android:layout_marginTop="13dp"
142                 android:gravity="center_vertical" >
143 
144                 <TextView
145                     android:layout_width="wrap_content"
146                     android:layout_height="wrap_content"
147                     android:layout_alignParentLeft="true"
148                     android:text="@string/find_password"
149                     android:textColor="#ff288dfe"
150                     android:textSize="15sp" />
151 
152                 <TextView
153                     android:layout_width="wrap_content"
154                     android:layout_height="wrap_content"
155                     android:layout_alignParentRight="true"
156                     android:text="@string/phone_register"
157                     android:textColor="#ff288dfe"
158                     android:textSize="15sp" />
159             </RelativeLayout>
160 
161             <RelativeLayout
162                 android:layout_width="match_parent"
163                 android:layout_height="wrap_content"
164                 android:layout_below="@+id/login_passfind_and_phonelogin"
165                 android:layout_marginLeft="20dp"
166                 android:layout_marginRight="20dp"
167                 android:layout_marginTop="13dp"
168                 android:gravity="center_vertical" >
169 
170                 <TextView
171                     android:layout_width="wrap_content"
172                     android:layout_height="wrap_content"
173                     android:layout_alignParentLeft="true"
174                     android:drawableLeft="@drawable/login_icon_wx"
175                     android:drawablePadding="5dp"
176                     android:drawableRight="@drawable/index_icon1"
177                     android:gravity="center_vertical"
178                     android:text="@string/weixin_login"
179                     android:textColor="#ff787878"
180                     android:textSize="15sp" />
181 
182                 <TextView
183                     android:layout_width="wrap_content"
184                     android:layout_height="wrap_content"
185                     android:layout_alignParentRight="true"
186                     android:drawableLeft="@drawable/login_icon_other"
187                     android:drawablePadding="5dp"
188                     android:drawableRight="@drawable/index_icon1"
189                     android:gravity="center_vertical"
190                     android:text="@string/other_login"
191                     android:textColor="#ff787878"
192                     android:textSize="15sp" />
193             </RelativeLayout>
194         </RelativeLayout>
195     </ScrollView>
196 </RelativeLayout>

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

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

这次学习到的

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

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

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

 

让文本单行显示的属性：

android:singleLine="true"

 

TextView添加图标可以用

android:drawableLeft="@drawable/login_icon_wx"

 

相关文章：

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

 

posted @ 2014-08-22 18:22  tinyphp  Views(5373)  Comments(0)  Edit  收藏  举报