Lance老师UI系列教程第三课->QQ登录注册界面的实现(android-2012最新版)

 
分类: android UI教程   3731人阅读  评论(6)  收藏  举报

 UI系列教程第三课:腾讯登录注册界面的实现

 

 

 

 

今天蓝老师要讲的是关于2012最新版腾讯登陆注册界面的实现。

从效果图童鞋们可以看出,小马哥此次版本的更新在界面部分作了很大改动

使得界面干净简洁,并将不太常用的功能都放到了菜单里,让用户一目了然

很符合android---ui设计简约而不简单的原则

虽然小马哥是国内最大的山寨企业的掌门人

但他的作品还是有很多值得我们学习和借鉴的地方

这也是在下为何以腾讯系列产品作为教材的主要原因

OK,言归正传,切入今天的主题

 

先上登录界面xml配置

[java]  view plain copy
  1. <RelativeLayout   
  2.     android:orientation="vertical"   
  3.     android:id="@+id/loginpage"  
  4.     android:background="@drawable/login_bg"   
  5.     android:layout_width="fill_parent"   
  6.     android:layout_height="fill_parent"  
  7.     xmlns:android="http://schemas.android.com/apk/res/android">  
  8.   
  9.        
  10.     <ImageView android:id="@+id/image"   
  11.         android:background="@drawable/login_pic2"   
  12.         android:layout_width="wrap_content"   
  13.         android:layout_height="wrap_content"   
  14.         android:layout_marginLeft="28.0dip"   
  15.         android:layout_marginTop="46.0dip"   
  16.         android:layout_marginRight="28.0dip" />  
  17.   
  18.     <LinearLayout   
  19.         android:orientation="vertical"   
  20.         android:id="@+id/input"   
  21.         android:background="@drawable/login_input"   
  22.         android:layout_width="fill_parent"   
  23.         android:layout_height="wrap_content"   
  24.         android:layout_marginLeft="28.0dip"   
  25.         android:layout_marginRight="28.0dip"   
  26.         android:layout_below="@id/image">    
  27.         <EditText android:textSize="16.0sp" android:textColor="#ff1d1d1d" android:textColorHint="#ff666666" android:id="@+id/accounts" android:background="#00ffffff" android:paddingLeft="12.0dip" android:layout_width="fill_parent" android:layout_height="44.0dip" android:hint="@string/account" android:maxLines="1" android:maxLength="16"     android:inputType="number"/>  
  28.         <View android:background="#ffc0c3c4" android:layout_width="fill_parent" android:layout_height="1.0px" android:layout_marginLeft="1.0px" android:layout_marginRight="1.0px" />  
  29.         <EditText android:textSize="16.0sp" android:textColor="#ff1d1d1d" android:textColorHint="#ff666666" android:gravity="center_vertical" android:id="@+id/password" android:background="#00ffffff" android:paddingLeft="12.0dip" android:layout_width="fill_parent" android:layout_height="44.0dip" android:hint="@string/password" android:maxLines="1" android:maxLength="16" android:inputType="textPassword" />  
  30.     </LinearLayout>  
  31.       
  32.   
  33.     <Button   
  34.         android:textSize="18.0sp"   
  35.         android:textColor="#ff333333"   
  36.         android:gravity="center"   
  37.         android:id="@+id/login"   
  38.         android:background="@drawable/chat_send_button_bg"   
  39.         android:paddingTop="5.0dip"   
  40.         android:layout_width="fill_parent"  
  41.         android:layout_height="wrap_content"   
  42.         android:layout_marginLeft="28.0dip"   
  43.         android:layout_marginTop="12.0dip"   
  44.         android:layout_marginRight="28.0dip"   
  45.         android:text="@string/login"      
  46.         android:layout_below="@id/input" />  
  47.   
  48.   
  49.     <RelativeLayout   
  50.         android:layout_width="fill_parent"   
  51.         android:layout_height="wrap_content"   
  52.         android:layout_marginLeft="30.0dip"  
  53.         android:layout_marginTop="8.0dip"   
  54.         android:layout_marginRight="30.0dip"   
  55.         android:layout_below="@id/login"  
  56.         android:layout_weight="1" >  
  57.         <CheckBox android:textSize="12.0sp" android:textColor="#ffffffff" android:layout_alignParentLeft="true"  android:id="@+id/auto_save_password" android:background="@null" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:button="@null" android:text="@string/auto_save_password" android:drawableLeft="@drawable/checkbox_bg1" android:drawablePadding="4.0dip"/>  
  58.         <Button  android:textSize="12.0sp" android:textColor="#ffffffff" android:layout_alignParentRight="true" android:gravity="left|center"  android:id="@+id/regist" android:background="@drawable/login_regist_bg" android:paddingLeft="8.0dip" android:paddingRight="18.0dip" android:clickable="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/register2" />  
  59.     </RelativeLayout>  
  60.       
  61.     <LinearLayout   
  62.         android:orientation="vertical"   
  63.         android:id="@+id/menu"   
  64.         android:background="@drawable/login_moremenu_back"   
  65.         android:layout_width="fill_parent"   
  66.         android:layout_height="wrap_content"   
  67.         android:layout_alignParentBottom="true">  
  68.           
  69.         <RelativeLayout   
  70.             android:id="@+id/more"   
  71.             android:layout_width="fill_parent"   
  72.             android:layout_height="wrap_content"  
  73.             android:paddingTop="8.0dip"  
  74.             android:paddingBottom="8.0dip"  
  75.             android:clickable="true">  
  76.             <TextView android:textSize="14.0sp" android:textColor="#ffc6e6f9" android:gravity="center" android:id="@+id/more_text" android:background="@null" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/more_login_setting" android:maxLines="1" android:layout_centerInParent="true" />  
  77.             <ImageView android:id="@+id/more_image" android:clickable="false" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/login_more_up" android:layout_toLeftOf="@+id/more_text" android:layout_marginRight="5.0dip" android:layout_centerVertical="true" />  
  78.         </RelativeLayout>  
  79.   
  80.   
  81.         <LinearLayout   
  82.             android:orientation="vertical"   
  83.             android:id="@+id/moremenu"   
  84.             android:visibility="gone"   
  85.             android:layout_width="fill_parent"   
  86.             android:layout_height="wrap_content">  
  87.               
  88.                <View android:background="#ff005484" android:layout_width="fill_parent" android:layout_height="1.0px" />  
  89.                <View android:background="#ff0883cb" android:layout_width="fill_parent" android:layout_height="1.0px" />  
  90.                  
  91.             <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="30.0dip" android:layout_marginTop="12.0dip" android:layout_marginRight="30.0dip">  
  92.                 <CheckBox android:textSize="12.0sp" android:textColor="#ffc6e6f9" android:id="@+id/hide_login" android:background="@null" android:layout_width="1.0px" android:layout_height="wrap_content" android:checked="false" android:button="@null" android:text="@string/hide_login" android:drawableLeft="@drawable/checkbox_bg1" android:drawablePadding="4.0dip" android:layout_weight="2.0" />  
  93.                 <CheckBox android:textSize="12.0sp" android:textColor="#ffc6e6f9" android:id="@+id/silence_login" android:background="@null" android:layout_width="1.0px" android:layout_height="wrap_content" android:checked="false" android:button="@null" android:text="@string/silence_login" android:drawableLeft="@drawable/checkbox_bg1" android:drawablePadding="4.0dip" android:layout_weight="1.0" />  
  94.             </LinearLayout>  
  95.             <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="30.0dip" android:layout_marginTop="18.0dip" android:layout_marginRight="30.0dip" android:layout_marginBottom="18.0dip">  
  96.                 <CheckBox android:textSize="12.0sp" android:textColor="#ffc6e6f9" android:id="@+id/accept_accounts" android:background="@null" android:layout_width="1.0px" android:layout_height="wrap_content" android:checked="true" android:button="@null" android:text="@string/info_accounts" android:singleLine="true" android:drawableLeft="@drawable/checkbox_bg1" android:drawablePadding="4.0dip" android:layout_weight="2.0" />  
  97.                 <CheckBox android:textSize="12.0sp" android:textColor="#ffc6e6f9" android:id="@+id/accept_troopmsg" android:background="@null" android:layout_width="1.0px" android:layout_height="wrap_content" android:checked="true" android:button="@null" android:text="@string/info_troopmessage" android:drawableLeft="@drawable/checkbox_bg1" android:drawablePadding="4.0dip" android:layout_weight="1.0" />  
  98.             </LinearLayout>  
  99.         </LinearLayout>  
  100.           
  101.     </LinearLayout>  
  102.       
  103. </RelativeLayout>  

 

RelativeLayout作为底部局,然后从上至下内部嵌套多个布局

通过设定 android:layout_marginLeft="28.0dip" 

android:layout_marginRight="28.0dip" 

来保持与屏幕两边的距离,这样就保持了布局的一致性

 

再看更多登录选项菜单里的实现

这个很有层次感的线条又是如何实现的呢?

  <View android:background="#ff005484" android:layout_width="fill_parent" android:layout_height="1.0px" />

               <View android:background="#ff0883cb" android:layout_width="fill_parent" android:layout_height="1.0px" />

其实是由两条线组成的,是不是很奇妙

 

再看checkbox的排列,很多人可能想到的是tablelayout来实现,这是一种方式

本例采用的是设置它们layout_weight来分隔在行布局中所占的比例来实现对齐

 

再看checkbox的排列,很多人可能想到的是tablelayout来实现,这是一种方式

本例采用的是设置它们layout_weight来分隔在行布局中所占的比例来实现对齐

[java]  view plain copy
  1. <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="30.0dip" android:layout_marginTop="12.0dip" android:layout_marginRight="30.0dip">  
  2.                <CheckBox android:textSize="12.0sp" android:textColor="#ffc6e6f9" android:id="@+id/hide_login" android:background="@null" android:layout_width="1.0px" android:layout_height="wrap_content" android:checked="false" android:button="@null" android:text="@string/hide_login" android:drawableLeft="@drawable/checkbox_bg1" android:drawablePadding="4.0dip" android:layout_weight="2.0" />  
  3.                <CheckBox android:textSize="12.0sp" android:textColor="#ffc6e6f9" android:id="@+id/silence_login" android:background="@null" android:layout_width="1.0px" android:layout_height="wrap_content" android:checked="false" android:button="@null" android:text="@string/silence_login" android:drawableLeft="@drawable/checkbox_bg1" android:drawablePadding="4.0dip" android:layout_weight="1.0" />  
  4. </LinearLayout>  

 真可谓条条大路通罗马

 

 

注册界面的布局就不多说了,都差不多,贴上xml

[java]  view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout      
  3.   android:orientation="vertical"   
  4.   android:background="@color/white"   
  5.   android:layout_width="fill_parent"   
  6.   android:layout_height="fill_parent"   
  7.   xmlns:android="http://schemas.android.com/apk/res/android">  
  8.   
  9.     <RelativeLayout   
  10.         android:orientation="vertical"  
  11.         android:background="@drawable/title_bar"   
  12.         android:layout_width="fill_parent"   
  13.         android:layout_height="50dip">  
  14.         <TextView android:layout_centerInParent="true" android:textSize="20.0sp" android:textColor="@color/white"  android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/qr_register" />  
  15.     </RelativeLayout>  
  16.       
  17.           
  18.     <LinearLayout   
  19.         android:orientation="vertical"   
  20.         android:background="@drawable/shape_bg"   
  21.         android:layout_width="fill_parent"   
  22.         android:layout_height="wrap_content"   
  23.         android:layout_marginLeft="10.0dip"   
  24.         android:layout_marginTop="20.0dip"   
  25.         android:layout_marginRight="10.0dip">         
  26.         
  27.         <LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="50.0dip">  
  28.             <TextView android:textSize="18.0sp" android:textColor="@android:color/black" android:paddingLeft="15.0dip" android:layout_width="1px" android:layout_height="wrap_content" android:gravity="right" android:text="邮    箱:" android:layout_weight="1"/>  
  29.             <EditText android:textSize="16.0sp" android:textColor="#ff545454" android:id="@+id/email" android:background="@android:color/white" android:paddingLeft="10.0dip" android:layout_width="1px" android:layout_height="wrap_content" android:layout_marginLeft="10.0dip" android:layout_marginRight="15.0dip" android:hint="请输入邮箱" android:inputType="textEmailAddress" android:maxLength="20" android:layout_weight="3"/>  
  30.         </LinearLayout>  
  31.           
  32.         <View android:background="@drawable/shape_line" android:layout_width="fill_parent" android:layout_height="1.0px" />  
  33.           
  34.         <LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="50.0dip">  
  35.             <TextView android:textSize="18.0sp" android:textColor="@android:color/black" android:paddingLeft="15.0dip" android:layout_width="1px" android:layout_height="wrap_content" android:gravity="right" android:text="用户名:" android:layout_weight="1"/>  
  36.             <EditText android:textSize="16.0sp" android:textColor="#ff545454" android:id="@+id/password" android:background="@android:color/white" android:paddingLeft="10.0dip" android:layout_width="1px" android:layout_height="wrap_content" android:layout_marginLeft="10.0dip" android:layout_marginRight="15.0dip" android:hint="请输入用户名" android:maxLength="20" android:layout_weight="3"/>  
  37.         </LinearLayout>  
  38.           
  39.         <View android:background="@drawable/shape_line" android:layout_width="fill_parent" android:layout_height="1.0px" />  
  40.           
  41.         <LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="50.0dip">  
  42.             <TextView android:textSize="18.0sp" android:textColor="@android:color/black" android:paddingLeft="15.0dip" android:layout_width="1px" android:layout_height="wrap_content" android:gravity="right" android:text="密    码:" android:layout_weight="1"/>  
  43.             <EditText android:textSize="16.0sp" android:textColor="#ff545454" android:id="@+id/name" android:background="@android:color/white" android:paddingLeft="10.0dip" android:layout_width="1px" android:layout_height="wrap_content" android:layout_marginLeft="10.0dip" android:layout_marginRight="15.0dip" android:hint="请输入密码" android:maxLength="20"  android:layout_weight="3" android:inputType="textPassword"/>  
  44.         </LinearLayout>  
  45.           
  46.         <View android:background="@drawable/shape_line" android:layout_width="fill_parent" android:layout_height="1.0px" />  
  47.           
  48.         <LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="50.0dip">  
  49.             <TextView android:textSize="18.0sp" android:textColor="@android:color/black" android:paddingLeft="15.0dip" android:layout_width="1px" android:layout_height="wrap_content" android:gravity="right" android:text="手机号:" android:layout_weight="1"/>  
  50.             <EditText android:textSize="16.0sp" android:textColor="#ff545454" android:id="@+id/phone" android:background="@android:color/white" android:paddingLeft="10.0dip" android:layout_width="1px" android:layout_height="wrap_content" android:layout_marginLeft="10.0dip" android:layout_marginRight="15.0dip" android:hint="请输入手机号" android:maxLength="20" android:inputType="number" android:layout_weight="3"/>  
  51.         </LinearLayout>  
  52.           
  53.     </LinearLayout>  
  54.       
  55.     <LinearLayout   
  56.         android:gravity="left"   
  57.         android:orientation="horizontal"   
  58.         android:layout_width="fill_parent"   
  59.         android:layout_height="wrap_content"   
  60.         android:layout_marginLeft="20.0dip"   
  61.         android:layout_marginTop="10.0dip">         
  62.         <TextView android:textSize="14.0sp" android:textColor="@color/button_unselected"  android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/register_tip" />  
  63.     </LinearLayout>  
  64.   
  65.     <Button android:id="@+id/register_btn"  android:textSize="18.0sp" android:textColor="#ff000000"  android:background="@drawable/op_bg_selector" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="20.0dip" android:layout_marginTop="20.0dip" android:layout_marginRight="20.0dip" android:text="注 册" />  
  66.       
  67. </LinearLayout>  

简而言之,在五大布局的实现中,RelativeLayout和LinearLayout扮演着至关重要的角色

尽量少用和不用一些绝对的元素,这是使我们的产品能够兼容多分辨率的关键

另外对点九图的使用也是窍门,这需要我们UI部门的MMandroid产品以及它的UI

实现要有一定的了解才能和我们开发人员快速配合制作出精美的界面避免重复返工而浪费时间

其它的没啥好说的了(喜欢就帮顶一下吧~)

附上源码工程:

http://download.csdn.net/detail/geniuseoe2012/4480701 

 

欲知更多Android-UI技巧,请关注窝的下一堂课,更多精彩尽在http://blog.csdn.net/geniuseoe2012

welcome to join android develop group:298044305


上一课Lance老师UI系列教程第二课->腾讯微博(下拉刷新+点击更多)listview的实现 (android)

下一课:Lance老师UI系列教程第四课->微信TAB界面的实现

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值