用戶和密碼前面的圖標 可以使用android:drawLeft
成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于做網(wǎng)站、網(wǎng)站建設(shè)、武進網(wǎng)絡(luò)推廣、微信小程序定制開發(fā)、武進網(wǎng)絡(luò)營銷、武進企業(yè)策劃、武進品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等,從售前售中售后,我們都將竭誠為您服務(wù),您的肯定,是我們最大的嘉獎;成都創(chuàng)新互聯(lián)公司為所有大學生創(chuàng)業(yè)者提供武進建站搭建服務(wù),24小時服務(wù)熱線:13518219792,官方網(wǎng)址:www.cdcxhl.com
“登錄”是定義一個TextView, 設(shè)置android:text屬性,“前面的箭頭”找美工做圖片
如果上圖所示,就是簡單的登錄界面了。andord的布局真的是,真的是,哪個。難以掌握的東西,哈,不過一旦了解深入點,又讓人爽的不行,流式布局總是比起windows mobile的絕對布局簡單而且容易控制。我是越來越傾向于流式布局的方式了,它的一點好處是適應(yīng)設(shè)備時比較靈巧,wm使用了自適應(yīng)dpi的方式,哪叫一個復雜啊,切不易于控制。
布局的屬性 android:layout_width="fill_parent" ,指示了填充父區(qū)域,就是父容器有多大空間,就填充多大空間。android:layout_width="wrap_content",指示了它本身需要多大空間,就像父容器索取多大的空間,怎么說呢,就是它有多胖就占多大空。而哪個fill_parent就是不胖也全占滿了。
再說android:layout_weight="0.1",這個weight(重量)是個很有意思的東西??蔀橐粋€父容器的 “子控件們”設(shè)置這個重量屬性,父容器根據(jù)這個重量的多少擇情分給這些子控件們多大空間。同時這個屬性還與子控件 寬高屬性的顯示(fill_parent 或者wrap_content)模式有關(guān)。
代碼如下:
?xml version="1.0" encoding="utf-8"?
LinearLayout xmlns:android=""
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/images1"
LinearLayout android:id="@+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_weight="0.9"
android:layout_height="fill_parent"
/LinearLayout
LinearLayout android:layout_width="fill_parent"
android:id="@+id/LinearLayout02"
android:layout_weight="0.1"
android:orientation="vertical"
android:layout_height="fill_parent"
LinearLayout android:id="@+id/LinearLayout03" android:layout_width="wrap_content" android:layout_height="wrap_content"/LinearLayout
LinearLayout
android:layout_marginLeft="10px"
android:layout_marginRight="10px"
android:gravity="center"
android:layout_width="fill_parent"
android:id="@+id/LinearLayout_account"
android:orientation="horizontal"
android:layout_height="wrap_content"
?TextView android:textSize="12pt" android:id="@+id/lblAccount"
? android:text="@string/accountName"
? android:layout_weight="0.75"
? android:layout_width="fill_parent"
? android:layout_height="wrap_content"/TextView
?
?EditText
?android:layout_weight="0.25"
? android:layout_width="fill_parent"
?android:text="mailto:%22nbsp;%20android:id=%22@+id/editBoxAccount" android:layout_height="wrap_content"/EditText
?
/LinearLayout
LinearLayout
android:layout_marginLeft="10px"
android:layout_marginRight="10px"
android:gravity="center"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:layout_height="wrap_content"
?TextView android:textSize="12pt" android:id="@+id/lblPassword"
? android:text="@string/password"
? android:layout_weight="0.75"
? android:layout_width="fill_parent"
? android:layout_height="wrap_content"/TextView
?
?EditText
?android:layout_weight="0.25"
? android:layout_width="fill_parent"
? android:password="true"
?android:text="mailto:%22nbsp;%20android:id=%22@+id/editBoxPassword" android:layout_height="wrap_content"/EditText
?
/LinearLayout
LinearLayout
android:layout_marginLeft="10px"
android:layout_marginRight="10px"
android:gravity="center"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:layout_height="wrap_content"
Button android:text="登錄"
android:textSize="9pt"
android:id="@+id/btnLogin" android:layout_width="fill_parent"
android:layout_height="wrap_content"/Button
/LinearLayout
/LinearLayout
/LinearLayout
在網(wǎng)上在到一個登錄界面感覺挺不錯的,給大家分享一下~先看效果圖:
這個Demo除了按鈕、小貓和Logo是圖片素材之外,其余的UI都是通過代碼實現(xiàn)的。
?
一、背景
背景藍色漸變,是通過一個xml文件來設(shè)置的。代碼如下:
background_login.xml
?xml version="1.0" encoding="utf-8"?
shape xmlns:andro
gradient
android:startColor="#FFACDAE5"
android:endColor="#FF72CAE1"
android:angle="45"
/
/shape
startColor是漸變開始的顏色值,endColor是漸變結(jié)束的顏色值,angle是漸變的角度。其中#FFACDAE5中,F(xiàn)F是Alpha值,AC是RGB的R值,DA是RGB的G值,E5是RGB的B值,每個值在00~FF取值,即透明度、紅、綠、藍有0~255的分值,像要設(shè)置具體的顏色,可以在PS上的取色器上查看設(shè)置。
?
?
二、圓角白框
效果圖上面的并不是白框,其實框是白色的,只是設(shè)置了透明值,也是靠一個xml文件實現(xiàn)的。
background_login_div.xml
?xml version="1.0" encoding="UTF-8"?
shape xmlns:andro
solid android:color="#55FFFFFF" /
!-- 設(shè)置圓角
注意: bottomRightRadius是左下角而不是右下角 ?bottomLeftRadius右下角--
corners android:topLeftRadius="10dp" android:topRightRadius="10dp"
android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp"/
/shape
?
三、界面的布局
界面的布局挺簡單的,就直接貼代碼啦~
login.xml
?xml version="1.0" encoding="utf-8"?
LinearLayout
xmlns:andro
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/background_login"
!-- padding 內(nèi)邊距 ? layout_margin 外邊距
android:layout_alignParentTop 布局的位置是否處于頂部 --
RelativeLayout
? ?android:
? ?android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="15dip" ? ? ? ?
? android:layout_margin="15dip"
? android:background="@drawable/background_login_div_bg"
!-- 賬號 --
? TextView
? android:
? android:layout_width="wrap_content"
? android:layout_height="wrap_content"
? android:layout_alignParentTop="true"
? android:layout_marginTop="5dp"
? android:text="@string/login_label_username"
? /
? EditText
? android:
? android:layout_width="fill_parent"
? android:layout_height="wrap_content"
? android:hint="@string/login_username_hint"
? android:layout_below="@id/login_user_input"
? android:singleLine="true"
? android:inputType="text"/
? ?!-- 密碼 text --
? ?TextView
? ? android:
? ? android:layout_width="wrap_content"
? ? android:layout_height="wrap_content"
? ? android:layout_below="@id/username_edit"
? ? android:layout_marginTop="3dp"
? ? android:text="@string/login_label_password"
? ? /
? ?EditText
? ? android:
? ? android:layout_width="fill_parent"
? ? android:layout_height="wrap_content"
? ? android:layout_below="@id/login_password_input"
? ? android:password="true"
? ? android:singleLine="true"
? ? android:inputType="textPassword" /
? ?!-- 登錄button --
? ?Button
? ? android:
? ? android:layout_width="wrap_content"
? ? android:layout_height="wrap_content"
? ? android:layout_below="@id/password_edit"
? ? android:layout_alignRight="@id/password_edit"
? ? android:text="@string/login_label_signin"
? ? android:background="@drawable/blue_button" /
/RelativeLayout
RelativeLayout
? android:layout_width="fill_parent"
? android:layout_height="wrap_content"
TextView ?android:
? ? android:text="@string/login_register_link"
? ? android:layout_width="wrap_content"
? ? android:layout_height="wrap_content"
? ? android:layout_marginLeft="15dp"
? ? android:textColor="#888"
? ? android:textColorLink="#FF0066CC" /
ImageView android:
? ?android:src="@drawable/cat"
? ?android:layout_width="wrap_content"
? ?android:layout_height="wrap_content"
? ?android:layout_alignParentRight="true"
? ?android:layout_alignParentBottom="true"
? ?android:layout_marginRight="25dp"
? ?android:layout_marginLeft="10dp"
? ?android:layout_marginBottom="25dp" /
ImageView android:src="@drawable/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/miniTwitter_logo"
android:layout_alignBottom="@id/miniTwitter_logo"
android:paddingBottom="8dp"/
/RelativeLayout
/LinearLayout
主要的代碼:
1、用戶類User
view sourceprint?
01.package com.example.logindemo;
02.
03.import org.json.JSONException;
04.import org.json.JSONObject;
05.import android.util.Log;
06.
07.public class User {
08. private String mId;
09. private String mPwd;
10. private static final String masterPassA class=keylink href="" target=_blankword/A = "FORYOU"; // AES加密算法的種子
11. private static final String JSON_ID = "user_id";
12. private static final String JSON_PWD = "user_pwd";
13. private static final String TAG = "User";
14.
15. public User(String id, String pwd) {
16. this.mId = id;
17. this.mPwd = pwd;
18. }
19.
20. public User(JSONObject json) throws Exception {
21. if (json.has(JSON_ID)) {
22. String id = json.getString(JSON_ID);
23. String pwd = json.getString(JSON_PWD);
24. // 解密后存放
25. mId = AESUtils.decrypt(masterPassA class=keylink href="" target=_blankword/A, id);
26. mPwd = AESUtils.decrypt(masterPassword, pwd);
27. }
28. }
29.
30. public JSONObject toJSON() throws Exception {
31. // 使用AES加密算法加密后保存
32. String id = AESUtils.encrypt(masterPassword, mId);
33. String pwd = AESUtils.encrypt(masterPassword, mPwd);
34. Log.i(TAG, "加密后:" + id + " " + pwd);
35. JSONObject json = new JSONObject();
36. try {
37. json.put(JSON_ID, id);
38. json.put(JSON_PWD, pwd);
39. } catch (JSONException e) {
40. e.printStackTrace();
41. }
42. return json;
43. }
44.
45. public String getId() {
46. return mId;
47. }
48.
49. public String getPwd() {
50. return mPwd;
51. }
52.}
2、保存和加載本地User列表
view sourceprint?
01.package com.example.logindemo;
02.
03.import java.io.BufferedReader;
04.import java.io.FileInputStream;
05.import java.io.FileNotFoundException;
06.import java.io.IOException;
07.import java.io.InputStreamReader;
08.import java.io.OutputStream;
09.import java.io.OutputStreamWriter;
10.import java.io.Writer;
11.import java.util.ArrayList;
12.import org.json.JSONArray;
13.import org.json.JSONException;
14.import org.json.JSONTokener;
15.
16.import android.content.Context;
17.import android.util.Log;
18.
19.public class Utils {
20.
21. private static final String FILENAME = "userinfo.json"; // 用戶保存文件名
22. private static final String TAG = "Utils";
23.
24. /* 保存用戶登錄信息列表 */
25. public static void saveUserList(Context context, ArrayListUser users)
26. throws Exception {
27. /* 保存 */
28. Log.i(TAG, "正在保存");
29. Writer writer = null;
30. OutputStream out = null;
31. JSONArray array = new JSONArray();
32. for (User user : users) {
33. array.put(user.toJSON());
34. }
35. try {
36. out = context.openFileOutput(FILENAME, Context.MODE_PRIVATE); // 覆蓋
37. writer = new OutputStreamWriter(out);
38. Log.i(TAG, "json的值:" + array.toString());
39. writer.write(array.toString());
40. } finally {
41. if (writer != null)
42. writer.close();
43. }
44.
45. }
46.
47. /* 獲取用戶登錄信息列表 */
48. public static ArrayListUser getUserList(Context context) {
49. /* 加載 */
50. FileInputStream in = null;
51. ArrayListUser users = new ArrayListUser();
52. try {
53.
54. in = context.openFileInput(FILENAME);
55. BufferedReader reader = new BufferedReader(
56. new InputStreamReader(in));
57. StringBuilder jsonString = new StringBuilder();
58. JSONArray jsonArray = new JSONArray();
59. String line;
60. while ((line = reader.readLine()) != null) {
61. jsonString.append(line);
62. }
63. Log.i(TAG, jsonString.toString());
64. jsonArray = (JSONArray) new JSONTokener(jsonString.toString())
65. .nextValue(); // 把字符串轉(zhuǎn)換成JSONArray對象
66. for (int i = 0; i jsonArray.length(); i++) {
67. User user = new User(jsonArray.getJSONObject(i));
68. users.add(user);
69. }
70.
71. } catch (FileNotFoundException e) {
72. e.printStackTrace();
73. } catch (IOException e) {
74. e.printStackTrace();
75. } catch (JSONException e) {
76. e.printStackTrace();
77. } catch (Exception e) {
78. e.printStackTrace();
79. }
80.
81. return users;
82. }
83.}
3、AES加密/解密
view sourceprint?
01.package com.example.logindemo;
02.
03.
04.import java.security.SecureRandom;
05.
06.import javax.crypto.Cipher;
07.import javax.crypto.KeyGenerator;
08.import javax.crypto.SecretKey;
09.import javax.crypto.spec.IvParameterSpec;
10.import javax.crypto.spec.SecretKeySpec;
11.
12.public class AESUtils {
13. public static String encrypt(String seed, String cleartext)
14. throws Exception {
15. byte[] rawKey = getRawKey(seed.getBytes());
16. byte[] result = encrypt(rawKey, cleartext.getBytes());
17. return toHex(result);
18. }
19.
20. public static String decrypt(String seed, String encrypted)
21. throws Exception {
22. byte[] rawKey = getRawKey(seed.getBytes());
23. byte[] enc = toByte(encrypted);
24. byte[] result = decrypt(rawKey, enc);
25. return new String(result);
26. }
27.
28. private static byte[] getRawKey(byte[] seed) throws Exception {
29. KeyGenerator kgen = KeyGenerator.getInstance("AES");
30. SecureRandom sr = SecureRandom.getInstance("SHA1PRNG", "Crypto");
31. sr.setSeed(seed);
32. kgen.init(128, sr);
33. SecretKey skey = kgen.generateKey();
34. byte[] raw = skey.getEncoded();
35. return raw;
36. }
37.
38. private static byte[] encrypt(byte[] raw, byte[] clear) throws Exception {
39. SecretKeySpec skeySpec = new SecretKeySpec(raw, "AES");
40. Cipher cipher = Cipher.getInstance("AES");
41. cipher.init(Cipher.ENCRYPT_MODE, skeySpec, new IvParameterSpec(
42. new byte[cipher.getBlockSize()]));
43. byte[] encrypted = cipher.doFinal(clear);
44. return encrypted;
45. }
46.
47. private static byte[] decrypt(byte[] raw, byte[] encrypted)
48. throws Exception {
49. SecretKeySpec skeySpec = new SecretKeySpec(raw, "AES");
50. Cipher cipher = Cipher.getInstance("AES");
51. cipher.init(Cipher.DECRYPT_MODE, skeySpec, new IvParameterSpec(
52. new byte[cipher.getBlockSize()]));
53. byte[] decrypted = cipher.doFinal(encrypted);
54. return decrypted;
55. }
56.
57. private static String toHex(String txt) {
58. return toHex(txt.getBytes());
59. }
60.
61. private static String fromHex(String hex) {
62. return new String(toByte(hex));
63. }
64.
65. private static byte[] toByte(String hexString) {
66. int len = hexString.length() / 2;
67. byte[] result = new byte[len];
68. for (int i = 0; i len; i++)
69. result[i] = Integer.valueOf(hexString.substring(2 * i, 2 * i + 2),
70. 16).byteValue();
71. return result;
72. }
73.
74. private static String toHex(byte[] buf) {
75. if (buf == null)
76. return "";
77. StringBuffer result = new StringBuffer(2 * buf.length);
78. for (int i = 0; i buf.length; i++) {
79. appendHex(result, buf[i]);
80. }
81. return result.toString();
82. }
83.
84. private final static String HEX = "0123456789ABCDEF";
85.
86. private static void appendHex(StringBuffer sb, byte b) {
87. sb.append(HEX.charAt((b 4) 0x0f)).append(HEX.charAt(b 0x0f));
88. }
89.}
設(shè)計android的登錄界面的方法:
UI實現(xiàn)的代碼如下:
1、背景設(shè)置圖片:
background_login.xml
?xml?version="1.0"?encoding="utf-8"?
shape?xmlns:android=""??
gradient
android:startColor="#FFACDAE5"
android:endColor="#FF72CAE1"
android:angle="45"
/
/shape
2、圓角白框
效果圖上面的并不是白框,其實框是白色的,只是設(shè)置了透明值,也是靠一個xml文件實現(xiàn)的。
background_login_div.xml
?xml?version="1.0"?encoding="UTF-8"?
shape?xmlns:android=""??
solid?android:color="#55FFFFFF"?/
!--?設(shè)置圓角
注意:?bottomRightRadius是左下角而不是右下角??bottomLeftRadius右下角--
corners?android:topLeftRadius="10dp"?android:topRightRadius="10dp"
android:bottomRightRadius="10dp"?android:bottomLeftRadius="10dp"/
/shape
3、界面布局:
login.xml
?xml?version="1.0"?encoding="utf-8"?
LinearLayout
xmlns:android=""??
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/background_login"
!--?padding?內(nèi)邊距???layout_margin?外邊距
android:layout_alignParentTop?布局的位置是否處于頂部?--
RelativeLayout
android:id="@+id/login_div"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="15dip"
android:layout_margin="15dip"
android:background="@drawable/background_login_div_bg"?
!--?賬號?--
TextView
android:id="@+id/login_user_input"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="5dp"
android:text="@string/login_label_username"
style="@style/normalText"/
EditText
android:id="@+id/username_edit"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="@string/login_username_hint"
android:layout_below="@id/login_user_input"
android:singleLine="true"
android:inputType="text"/
!--?密碼?text?--
TextView
android:id="@+id/login_password_input"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/username_edit"
android:layout_marginTop="3dp"
android:text="@string/login_label_password"
style="@style/normalText"/
EditText
android:id="@+id/password_edit"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/login_password_input"
android:password="true"
android:singleLine="true"
android:inputType="textPassword"?/
!--?登錄button?--
Button
android:id="@+id/signin_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/password_edit"
android:layout_alignRight="@id/password_edit"
android:text="@string/login_label_signin"
android:background="@drawable/blue_button"?/
/RelativeLayout
RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"?
TextView??android:id="@+id/register_link"
android:text="@string/login_register_link"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:textColor="#888"
android:textColorLink="#FF0066CC"?/
ImageView?android:id="@+id/miniTwitter_logo"
android:src="@drawable/cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="25dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="25dp"?/
ImageView?android:src="@drawable/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/miniTwitter_logo"
android:layout_alignBottom="@id/miniTwitter_logo"
android:paddingBottom="8dp"/
/RelativeLayout
/LinearLayout
4、java源代碼,Java源文件比較簡單,只是實例化Activity,去掉標題欄。
package?com.mytwitter.acitivity;
import?android.app.Activity;
import?android.os.Bundle;
import?android.view.Window;
public?class?LoginActivity?extends?Activity?{
@Override
public?void?onCreate(Bundle?savedInstanceState)?{
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.login);
}
}
5、實現(xiàn)效果如下: