码迷，mamicode.com
首页 > 其他好文 > 详细

MiniTwitter记住密码等功能实现

时间：2015-07-02 11:48:04      阅读：121      评论：0      收藏：0      [点我收藏+]

标签：

本文要演示的Android开发实例是如何完成一个Android中的miniTwitter登录界面，下面将分步骤讲解怎样实现图中的界面效果，让大家都能轻松的做出美观的登录界面。

       miniTwitter登录界面效果图

       先贴上最终要完成的效果图：

技术分享

       miniTwitter登录界面的布局分析

       首先由界面图分析布局，基本可以分为三个部分，下面分别讲解每个部分。

       第一部分是一个带渐变色背景的LinearLayout布局，关于背景渐变色就不再贴代码了，效果如下图所示：

技术分享

       第二部分，红色线区域内，包括1,2,3,4  如图所示：

技术分享

       红色的1表示的是一个带圆角且背景色为#55FFFFFF（淡蓝色）的RelativeLayout布局，代码如下：

XML/HTML代码
<?xml version="1.0" encoding="UTF-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android">  

       <solid android:color="#55FFFFFF" />  

        <!-- 设置圆角   

        注意：        bottomRightRadius是左下角而不是右下角  bottomLeftRadius右下角-->  <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"  android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp"/>  </shape>  

       solid表示填充色，这里填充的是淡蓝色。corners是设置圆角。

       dp (即dip,device independent pixels)设备独立像素：这个和设备硬件有关，一般我们为了支持WVGA、HVGA和QVGA ，不依赖像素。在android上开发的程序将会在不同分辨率的手机上运行。为了让程序外观不至于相差太大，所以引入了dip的概念。比如定义一个矩形 10 x 10dip. 在分辨率为160dpi 的屏上，比如G1，正好是10 x 10像素。 而在240 dpi 的屏，则是15 x 15 像素。换算公式为 pixs = dips * (density/160)。density 就是屏的分辨率。

       然后RelativeLayou的background引用此drawable，具体RelativeLayout设置如下：

XML/HTML代码
<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"  

>  

</RelativeLayout>  

       padding 是指内边距(也就是指内容与边框的距离)，layout_margin为外边距(它的上一层与边框的距离)。

       接下来是区域2，为账号的文本和输入框，首先是账号的文本，代码如下：

XML/HTML代码
<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"/>  

       android:layout_alignParentTop 这里表示此TextView的位置处于顶部

       android:layout_marginTop="5dp" 这里表示此TextView的边框与RelativeLayout的顶部边框距离有5dp

       这里需要对这个TextView设置下字体颜色和字体大小，定义在res/style.xml里面：

XML/HTML代码
  1. <style name="normalText" parent="@android:style/TextAppearance">  
  2.        <item name="android:textColor">#444</item>  
  3.         <item name="android:textSize">14sp</item>  
  4. </style>  

       定义账号的输入框，如下：

XML/HTML代码
  1. <EditText  
  2.         android:id="@+id/username_edit"  
  3.         android:layout_width="fill_parent"  
  4.         android:layout_height="wrap_content"  
  5.         android:hint="@string/login_username_hint"  
  6.         android:layout_below="@id/login_user_input"  
  7.         android:singleLine="true"  
  8.         android:inputType="text"/>  

      android:hint 输入框里面的提示文字，android:layout_below这里是设置为在账号的文本框的下面，android:singleLine 为单行输入（即你输入回车的时候不会在换行了），android:inputType这里text表示输入的类型为文本。

       区域3是密码文本和输入框，同区域2，代码如下：

XML/HTML代码
  1. <TextView  
  2.      android:id="@+id/login_password_input"  
  3.      android:layout_width="wrap_content"  
  4.      android:layout_height="wrap_content"  
  5.      android:layout_below="@id/username_edit"  
  6.      android:layout_marginTop="3dp"  
  7.      android:text="@string/login_label_password"  
  8.      style="@style/normalText"/>  
  9. <EditText  
  10.      android:id="@+id/password_edit"  
  11.      android:layout_width="fill_parent"  
  12.      android:layout_height="wrap_content"  
  13.      android:layout_below="@id/login_password_input"  
  14.      android:password="true"  
  15.      android:singleLine="true"  
  16.      android:inputType="textPassword"  
  17. />  

       区域4，登录按钮：

XML/HTML代码
  1. <Button  
  2.       android:id="@+id/signin_button"  
  3.       android:layout_width="wrap_content"  
  4.       android:layout_height="wrap_content"  
  5.       android:layout_below="@id/password_edit"  
  6.       android:layout_alignRight="@id/password_edit"  
  7.       android:text="@string/login_label_signin"  
  8.       android:background="@drawable/blue_button"  
  9. />  

       第三部分：底下的文字和两张图片，分别标记了1,2,3,4：

技术分享

       区域1：还是一个RelativeLayout，但这里设置的很简单，代码如下：

XML/HTML代码
  1. <RelativeLayout  
  2.       android:layout_width="fill_parent"  
  3.       android:layout_height="wrap_content">  
  4. </RelativeLayout>  

       区域2："没有账号?注册"这几个文字定义在string里面，包含了一个<a>标签：

XML/HTML代码
  1. <string name="login_register_link">没有帐号？ <a href="#" mce_href="#">注册</a></string>  

       定义如下：

XML/HTML代码
  1. <TextView  android:id="@+id/register_link"  
  2.     android:text="@string/login_register_link"  
  3.     android:layout_width="wrap_content"  
  4.     android:layout_height="wrap_content"  
  5.     android:layout_marginLeft="15dp"  
  6.     android:textColor="#888"  
  7.     android:textColorLink="#FF0066CC"  
  8. />  

       TextView是支持简单的html标签的，如<a>标签,但并不是支持所有标签，支持更复杂的html标签得用webView组件。

       android:textColorLink是设置文字链接的颜色. 虽然TextView支持<a>标签，但是这里是不能点此链接的，不要被假象迷惑。

       区域3是一直猫的卡通图片，貌似有点丑，将就下吧：

XML/HTML代码
  1. <ImageView android:id="@+id/miniTwitter_logo"  
  2.         android:src="@drawable/cat"  
  3.         android:layout_width="wrap_content"  
  4.         android:layout_height="wrap_content"  
  5.         android:layout_alignParentRight="true"  
  6.         android:layout_alignParentBottom="true"  
  7.         android:layout_marginRight="25dp"  
  8.         android:layout_marginLeft="10dp"  
  9.         android:layout_marginBottom="25dp"  
  10. />  
  11.   

       android:layout_alignParentRight="true" 位于layout的最右边

       android:layout_alignParentBottom="true"  位于layout的最底部

       android:layout_marginRight="25dp"  该imageView的边框距离layout边框有25dp,其他的margin类似。

       区域4 是一个带文字的图片的ImageView：

XML/HTML代码
  1. <ImageView android:src="@drawable/logo"  
  2.      android:layout_width="wrap_content"  
  3.      android:layout_height="wrap_content"  
  4.      android:layout_toLeftOf="@id/miniTwitter_logo"  
  5.      android:layout_alignBottom="@id/miniTwitter_logo"  
  6.      android:paddingBottom="8dp"  
  7. />  

       android:layout_toLeftOf="@id/miniTwitter_logo"  在那个小猫ImageView的左边（水平位置）

       android:layout_alignBottom="@id/miniTwitter_logo"  这里意思是这两个ImageView(区域3和区域4)下边缘对齐

       android:paddingBottom="8dp"  图片距离ImageView底部边框8dp，也就是将图片上抬个8dp

       实现miniTwitter登陆界面的具体步骤

       具体步骤如下：

       第一步：一些字符串定义

       /miniTwitterLoginDemo/res/values/strings.xml

XML/HTML代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.     <string name="hello">Hello World, LoginActivity!</string>  
  4.     <string name="login_label_username">帐号</string>  
  5.     <string name="login_label_password">密码</string>  
  6.     <string name="login_label_signin">登 录</string>  
  7.     <string name="login_status_logging_in">登录中...</string>  
  8.     <string name="login_username_hint">Email或手机号</string>  
  9.     <string name="login_register_link">没有帐号？ <a href="#" mce_href="#">注册</a></string>  
  10.     <string name="app_name">miniTwitter</string>  
  11. </resources>  

       第二步：

       /miniTwitterLoginDemo/res/values/style.xml

XML/HTML代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.         <style name="normalText" parent="@android:style/TextAppearance">                        
  4.         <item name="android:textColor">#444</item>  
  5.         <item name="android:textSize">14sp</item>  
  6.         </style>  
  7. </resources>  

       第三步：背景色为渐变色

       /miniTwitterLoginDemo/res/drawable-mdpi/background_login.xml

XML/HTML代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android">  
  3.       <gradient  
  4.            android:startColor="#FFACDAE5"  
  5.            android:endColor="#FF72CAE1"  
  6.            android:angle="45"  
  7.       />  
  8. </shape>  

       第四步：背景色味淡蓝色且为圆角

       /miniTwitterLoginDemo/res/drawable-mdpi/background_login_div_bg.xml

XML/HTML代码
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android">  
  3.         <solid android:color="#55FFFFFF" />  
  4.         <!-- 设置圆角   
  5.         注意：        bottomRightRadius是左下角而不是右下角  bottomLeftRadius右下角-->  
  6.         <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"  
  7.                 android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp"/>  
  8. </shape>  

       第五步：

       /miniTwitterLoginDemo/res/layout/login.xml

XML/HTML代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout  
  3.   xmlns:android="http://schemas.android.com/apk/res/android"  
  4.   android:orientation="vertical"  
  5.   android:layout_width="fill_parent"  
  6.   android:layout_height="fill_parent"  
  7.   android:background="@drawable/background_login">  
  8.   <!-- padding 内边距   layout_margin 外边距   
  9.                   android:layout_alignParentTop 布局的位置是否处于顶部 -->  
  10.   <RelativeLayout  
  11.           android:id="@+id/login_div"  
  12.           android:layout_width="fill_parent"  
  13.           android:layout_height="wrap_content"  
  14.           android:padding="15dip"  
  15.           android:layout_margin="15dip"  
  16.           android:background="@drawable/background_login_div_bg"  
  17.           >  
  18.           <!-- 账号 -->  
  19.           <TextView  
  20.                   android:id="@+id/login_user_input"  
  21.                   android:layout_width="wrap_content"  
  22.                   android:layout_height="wrap_content"  
  23.                   android:layout_alignParentTop="true"  
  24.                   android:layout_marginTop="5dp"  
  25.                   android:text="@string/login_label_username"  
  26.                   style="@style/normalText"/>  
  27.           <EditText  
  28.                   android:id="@+id/username_edit"  
  29.                   android:layout_width="fill_parent"  
  30.                   android:layout_height="wrap_content"  
  31.                   android:hint="@string/login_username_hint"  
  32.                   android:layout_below="@id/login_user_input"  
  33.                   android:singleLine="true"  
  34.                   android:inputType="text"/>  
  35.     <!-- 密码 text -->  
  36.     <TextView  
  37.             android:id="@+id/login_password_input"  
  38.             android:layout_width="wrap_content"  
  39.             android:layout_height="wrap_content"  
  40.             android:layout_below="@id/username_edit"  
  41.             android:layout_marginTop="3dp"  
  42.             android:text="@string/login_label_password"  
  43.             style="@style/normalText"/>  
  44.     <EditText  
  45.             android:id="@+id/password_edit"  
  46.             android:layout_width="fill_parent"  
  47.             android:layout_height="wrap_content"  
  48.             android:layout_below="@id/login_password_input"  
  49.             android:password="true"  
  50.             android:singleLine="true"  
  51.             android:inputType="textPassword"  
  52.     />  
  53.     <!-- 登录button -->  
  54.     <Button  
  55.             android:id="@+id/signin_button"  
  56.             android:layout_width="wrap_content"  
  57.             android:layout_height="wrap_content"  
  58.             android:layout_below="@id/password_edit"  
  59.             android:layout_alignRight="@id/password_edit"  
  60.             android:text="@string/login_label_signin"  
  61.             android:background="@drawable/blue_button"  
  62.     />  
  63.   </RelativeLayout>  
  64.   
  65.   
  66.   <RelativeLayout  
  67.       android:layout_width="fill_parent"  
  68.       android:layout_height="wrap_content"  
  69.       >  
  70.          <TextView  android:id="@+id/register_link"  
  71.              android:text="@string/login_register_link"  
  72.              android:layout_width="wrap_content"  
  73.              android:layout_height="wrap_content"  
  74.              android:layout_marginLeft="15dp"  
  75.              android:textColor="#888"  
  76.              android:textColorLink="#FF0066CC"  
  77.           />  
  78.             <ImageView android:id="@+id/miniTwitter_logo"  
  79.                 android:src="@drawable/cat"  
  80.                 android:layout_width="wrap_content"  
  81.                 android:layout_height="wrap_content"  
  82.                 android:layout_alignParentRight="true"  
  83.                 android:layout_alignParentBottom="true"  
  84.                 android:layout_marginRight="25dp"  
  85.                 android:layout_marginLeft="10dp"  
  86.                 android:layout_marginBottom="25dp"  
  87.                  />  
  88.          <ImageView android:src="@drawable/logo"  
  89.              android:layout_width="wrap_content"  
  90.              android:layout_height="wrap_content"  
  91.              android:layout_toLeftOf="@id/miniTwitter_logo"  
  92.              android:layout_alignBottom="@id/miniTwitter_logo"  
  93.              android:paddingBottom="8dp"  
  94.               />  
  95.             </RelativeLayout>  
  96.   
  97. </LinearLayout>  

       第七步：

      /miniTwitterLoginDemo/src/com/mytwitter/acitivity/LoginActivity.java

       这里要注意的是，该Activity是无标题的，设置无标题需要在setContentView之前设置，否则会报错。

Java代码
  1. package com.mytwitter.acitivity;   
  2.   
  3. import android.app.Activity;   
  4. import android.os.Bundle;   
  5. import android.view.Window;   
  6.   
  7. public class LoginActivity extends Activity {   
  8.     @Override  
  9.     public void onCreate(Bundle savedInstanceState) {   
  10.         super.onCreate(savedInstanceState);   
  11.         requestWindowFeature(Window.FEATURE_NO_TITLE);   
  12.         setContentView(R.layout.login);   
  13.     }   
  14. }  

MiniTwitter记住密码等功能实现

标签：

原文地址：http://www.cnblogs.com/wangyujin0313/p/4615337.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！