Android 注冊登入界面完美設計

本文轉載自查看原文 2018-09-20 14:29 20294 android、android studio、java、圓角、tomcat、eclipse、mysq

今天沒啥事情做，就想着復習復習android，不然快把android給忘記了，於是乎就干起來。邊學邊復習邊做做，正好我手上有一些自己爬蟲的數據，想着沒事干的時候可以做做一個小商城，當作練練手。

開發環境：android studio，win10

首先在google地址欄輸入android dev tools，或者直接訪問https://www.androiddevtools.cn 下載android studio，安裝好之后啟動。（調試工具可以使用android手機，也可以去genymotion官網下載一個模擬器，as自帶的那個手機我個人覺得不好用不推薦）

首先，我想先做一個注冊登入頁面

（1）先做一個頁面，上面有兩個按鈕，注冊和登入

（2）實現注冊功能

（3）實現登入功能

先來第一步：先做一個頁面，上面有兩個按鈕，注冊和登入

布局文件，我的排版，如下面所示

具體咋實現呢，我們看布局文件代碼，我這邊使用的是LinearLayout

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     xmlns:tools="http://schemas.android.com/tools"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     tools:context=".MainActivity"
 8     android:background="@drawable/main"
 9     android:orientation="vertical"
10     >
11 
12     <LinearLayout
13 
14         android:layout_width="match_parent"
15         android:layout_height="0dp"
16         android:layout_weight="1"
17         android:orientation="horizontal">
18 
19         <LinearLayout
20             android:layout_width="0dp"
21             android:layout_height="match_parent"
22             android:layout_weight="1"
23             android:orientation="vertical"
24             android:gravity="center">
25 
26 
27 
28         </LinearLayout>
29 
30         <LinearLayout
31             android:layout_width="0dp"
32             android:layout_height="match_parent"
33             android:layout_weight="1"
34             android:orientation="vertical"
35             android:gravity="center">
36 
37 
38         </LinearLayout>
39 
40 
41     </LinearLayout>
42 
43 
44     <LinearLayout
45 
46         android:layout_width="match_parent"
47         android:layout_height="0dp"
48         android:layout_weight="1"
49         android:orientation="horizontal">
50 
51         <LinearLayout
52             android:layout_width="0dp"
53             android:layout_height="match_parent"
54             android:layout_weight="1"
55             android:orientation="vertical"
56             android:gravity="center">
57 
58             <Button
59 
60                 android:id="@+id/signin"
61                 android:layout_marginTop="50dp"
62                 android:layout_gravity="center_horizontal"
63                 android:layout_width="wrap_content"
64                 android:layout_height="wrap_content"
65                 android:text="@string/signin"
66                 android:textSize="20sp"
67                 android:background="@color/seagreen"
68                 android:textColor="@color/white"
69                 />
70 
71         </LinearLayout>
72 
73         <LinearLayout
74             android:layout_width="0dp"
75             android:layout_height="match_parent"
76             android:layout_weight="1"
77             android:orientation="vertical"
78             android:gravity="center">
79 
80             <Button
81                 android:id="@+id/enroll"
82                 android:layout_marginTop="50dp"
83                 android:textSize="20sp"
84                 android:layout_gravity="center_horizontal"
85                 android:layout_width="wrap_content"
86                 android:layout_height="wrap_content"
87                 android:text="@string/new_user"
88                 android:background="@color/lightslategrey"
89                 android:textColor="@color/white"
90                 />
91         </LinearLayout>
92 
93 
94     </LinearLayout>
95 
96 
97 </LinearLayout>

主界面--布局文件代碼

接着我們來第二步，實現登入的布局文件，這邊使用的是RelativeLayout

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     xmlns:tools="http://schemas.android.com/tools"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     tools:context=".LoginActivity"
 8     android:background="@drawable/main">
 9 
10 
11     <EditText
12         android:id="@+id/account_input"
13         android:gravity="center"
14         android:layout_marginLeft="15dp"
15         android:layout_marginRight="15dp"
16         android:layout_width="match_parent"
17         android:layout_height="wrap_content"
18         android:hint="@string/tip_account"
19         android:layout_centerVertical="true"
20         android:background="@drawable/rounded_edittext"
21         android:textSize="20sp"
22         />
23 
24     <EditText
25         android:layout_marginTop="20dp"
26         android:id="@+id/password_input"
27         android:gravity="center"
28         android:layout_marginLeft="15dp"
29         android:layout_marginRight="15dp"
30         android:background="@drawable/rounded_edittext"
31         android:layout_width="match_parent"
32         android:layout_height="wrap_content"
33         android:hint="@string/tip_password"
34         android:inputType="textPassword"
35         android:layout_below="@id/account_input"
36         android:textSize="20sp"/>
37 
38     <Button
39         android:id="@+id/btn_login"
40         android:layout_marginTop="20dp"
41         android:textSize="20sp"
42         android:layout_width="match_parent"
43         android:layout_height="wrap_content"
44         android:text="@string/signin"
45         android:textColor="@color/white"
46         android:layout_below="@id/password_input"
47         android:layout_centerHorizontal="true"
48         android:background="@color/seagreen"/>
49 
50     <Button
51         android:id="@+id/btn_forget_pass"
52         android:layout_marginTop="20dp"
53         android:textSize="20sp"
54         android:layout_width="match_parent"
55         android:layout_height="wrap_content"
56         android:text="@string/forget_pass"
57         android:background="#0e000000"
58         android:layout_below="@id/btn_login"
59         android:layout_centerHorizontal="true"
60 
61         />
62 </RelativeLayout>

login布局文件

大家注意沒有我這邊使用的是圓角的Edittext，這樣子我感覺看着會美關一些，具體咋實現了，其實很簡單，就是在drawable資源里面添加一個這個圓角實現的xml代碼，然后再edittext設置背景的時候，采用drawable設計的圓角作為背景，會美觀不少呢

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <shape xmlns:android="http://schemas.android.com/apk/res/android">
 3     <solid android:color="#80858175" />
 4     <stroke android:width="1dip" android:color="#fefefe" />
 5     <corners android:radius="20dp"/>
 6     <padding android:bottom="10dp"
 7         android:left="10dp"
 8         android:right="10dp"
 9         android:top="10dp"/>
10 </shape>

圓角設計

接下來就是注冊啦，目前想不到別的設計，就跟登入差不多寫了一個

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     xmlns:tools="http://schemas.android.com/tools"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     tools:context=".EnrollActivity"
 8     android:background="@drawable/main">
 9 
10 
11 
12 
13     <EditText
14 
15         android:id="@+id/account_input"
16         android:gravity="center"
17         android:layout_marginLeft="15dp"
18         android:layout_marginRight="15dp"
19         android:layout_width="match_parent"
20         android:layout_height="wrap_content"
21         android:hint="@string/tip_account"
22         android:layout_centerVertical="true"
23         android:background="@drawable/rounded_edittext"
24         android:textSize="20sp"
25         />
26 
27     <EditText
28         android:layout_marginTop="20dp"
29         android:id="@+id/password_input"
30         android:gravity="center"
31         android:layout_marginLeft="15dp"
32         android:layout_marginRight="15dp"
33         android:background="@drawable/rounded_edittext"
34         android:layout_width="match_parent"
35         android:layout_height="wrap_content"
36         android:hint="@string/tip_password"
37         android:inputType="textPassword"
38         android:layout_below="@id/account_input"
39         android:textSize="20sp"/>
40 
41     <Button
42         android:id="@+id/btn_enroll"
43         android:layout_marginTop="20dp"
44         android:textSize="20sp"
45         android:layout_width="match_parent"
46         android:layout_height="wrap_content"
47         android:text="@string/enroll"
48         android:background="@color/lightslategrey"
49         android:layout_below="@id/password_input"
50         android:layout_centerHorizontal="true"
51         android:textColor="@color/white"
52          />
53 </RelativeLayout>

注冊布局

寫完這些代碼，曾經的親切感又回來了，哈哈哈。繼續努力！！！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 用CAPL在CANoe中創建用戶登入界面（二）用CAPL在CANoe中創建用戶登入界面（一） android注冊登錄界面 Linux-基本操作（登入登出，圖形化界面，命令行界面） Struts2+AJAX+JQuery 實現用戶登入與注冊功能。 django-auth組件的注冊，登錄，登出，及驗證是否已經登入。使用login的屬性華為eNSP的防火牆（USG6000V）如何使用Web界面登入 Ubuntu輸入密碼反復跳入登入界面的解決方案 [Django]登陸界面以及用戶登入登出權限使用HTML設計注冊界面