zoukankan      html  css  js  c++  java

  • Android开发实例之miniTwitter登录界面的实现

    原文： http://www.jizhuomi.com/android/example/134.html

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

           miniTwitter登录界面效果图

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

    Android miniTwitter登陆界面

           miniTwitter登录界面的布局分析

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

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

    Android渐变色背景

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

    Android miniTwitter登录界面

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

    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>  

           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代码
    1. <RelativeLayout  
    2.           android:id="@+id/login_div"  
    3.           android:layout_width="fill_parent"  
    4.           android:layout_height="wrap_content"  
    5.           android:padding="15dip"  
    6.           android:layout_margin="15dip"  
    7.           android:background="@drawable/background_login_div_bg"  
    8.           >  
    9. </RelativeLayout>  

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

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

    XML/HTML代码
    1. <TextView  
    2.         android:id="@+id/login_user_input"  
    3.         android:layout_width="wrap_content"  
    4.         android:layout_height="wrap_content"  
    5.         android:layout_alignParentTop="true"  
    6.         android:layout_marginTop="5dp"  
    7.         android:text="@string/login_label_username"  
    8.         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：

    Android miniTwitter登录界面

           区域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. }  

           到此，Android中的miniTwitter登录界面的制作就介绍完毕了，是不是做出不错的登录界面并不算难呢？
  • 相关阅读:
    Java实现 蓝桥杯VIP 算法训练 黑色星期五
    Java实现 蓝桥杯VIP 算法训练 比赛安排
    Java实现 蓝桥杯VIP 算法训练 比赛安排
    Java实现 蓝桥杯VIP 算法训练 斜率计算
    Java实现 蓝桥杯VIP 算法训练 斜率计算
    Java实现 蓝桥杯VIP 算法训练 整数平均值
    Java实现 蓝桥杯VIP 算法训练 整数平均值
    控件动态产生器（使用RegisterClasses提前进行注册）
    Delphi编写自定义控件以及接口的使用（做了一个TpgDbEdit）
    Log4delphi使用心得
  • 原文地址：https://www.cnblogs.com/mochaMM/p/5131371.html
Copyright © 2011-2022 走看看