- 浏览: 11457585 次
文章分类
最新评论
-
wahahachuang8:
我觉得这种东西自己开发太麻烦了,就别自己捣鼓了,找个第三方,方 ...
WebSocket和node.js -
xhpscdx:
写的这么详细,全面,对架构师的工作职责,个人能力都进行了梳理。 ...
架构师之路---王泽宾谈架构师的职责 -
xgbzsc:
是http://www.haoservice.com 吗?
android WIFI定位 -
lehehe:
http://www.haoservice.com/docs/ ...
android WIFI定位 -
lehehe:
http://www.haoservice.com/docs/ ...
android WIFI定位
Lance老师UI系列教程第三课->QQ登录注册界面的实现(android-2012最新版)
UI系列教程第三课:腾讯登录注册界面的实现
今天蓝老师要讲的是关于2012最新版腾讯登陆注册界面的实现。
从效果图童鞋们可以看出,小马哥此次版本的更新在界面部分作了很大改动
使得界面干净简洁,并将不太常用的功能都放到了菜单里,让用户一目了然
很符合android---ui设计简约而不简单的原则
虽然小马哥是国内最大的山寨企业的掌门人
但他的作品还是有很多值得我们学习和借鉴的地方
这也是在下为何以腾讯系列产品作为教材的主要原因
OK,言归正传,切入今天的主题
先上登录界面xml配置
<RelativeLayout android:orientation="vertical" android:id="@+id/loginpage" android:background="@drawable/login_bg" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <ImageView android:id="@+id/image" android:background="@drawable/login_pic2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="28.0dip" android:layout_marginTop="46.0dip" android:layout_marginRight="28.0dip" /> <LinearLayout android:orientation="vertical" android:id="@+id/input" android:background="@drawable/login_input" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="28.0dip" android:layout_marginRight="28.0dip" android:layout_below="@id/image"> <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"/> <View android:background="#ffc0c3c4" android:layout_width="fill_parent" android:layout_height="1.0px" android:layout_marginLeft="1.0px" android:layout_marginRight="1.0px" /> <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" /> </LinearLayout> <Button android:textSize="18.0sp" android:textColor="#ff333333" android:gravity="center" android:id="@+id/login" android:background="@drawable/chat_send_button_bg" android:paddingTop="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="28.0dip" android:layout_marginTop="12.0dip" android:layout_marginRight="28.0dip" android:text="@string/login" android:layout_below="@id/input" /> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="30.0dip" android:layout_marginTop="8.0dip" android:layout_marginRight="30.0dip" android:layout_below="@id/login" android:layout_weight="1" > <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"/> <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" /> </RelativeLayout> <LinearLayout android:orientation="vertical" android:id="@+id/menu" android:background="@drawable/login_moremenu_back" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true"> <RelativeLayout android:id="@+id/more" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="8.0dip" android:paddingBottom="8.0dip" android:clickable="true"> <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" /> <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" /> </RelativeLayout> <LinearLayout android:orientation="vertical" android:id="@+id/moremenu" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="wrap_content"> <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" /> <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"> <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" /> <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" /> </LinearLayout> <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"> <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" /> <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" /> </LinearLayout> </LinearLayout> </LinearLayout> </RelativeLayout>
以RelativeLayout作为底部局,然后从上至下内部嵌套多个布局
通过设定android:layout_marginLeft="28.0dip"
android:layout_marginRight="28.0dip"
来保持与屏幕两边的距离,这样就保持了布局的一致性
再看更多登录选项菜单里的实现
这个很有层次感的线条又是如何实现的呢?
<Viewandroid:background="#ff005484"android:layout_width="fill_parent"android:layout_height="1.0px"/>
<Viewandroid:background="#ff0883cb"android:layout_width="fill_parent"android:layout_height="1.0px"/>
其实是由两条线组成的,是不是很奇妙
再看checkbox的排列,很多人可能想到的是tablelayout来实现,这是一种方式
本例采用的是设置它们layout_weight来分隔在行布局中所占的比例来实现对齐
再看checkbox的排列,很多人可能想到的是tablelayout来实现,这是一种方式
本例采用的是设置它们layout_weight来分隔在行布局中所占的比例来实现对齐
<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"> <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" /> <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" /> </LinearLayout>
真可谓条条大路通罗马
注册界面的布局就不多说了,都差不多,贴上xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout android:orientation="vertical" android:background="@color/white" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <RelativeLayout android:orientation="vertical" android:background="@drawable/title_bar" android:layout_width="fill_parent" android:layout_height="50dip"> <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" /> </RelativeLayout> <LinearLayout android:orientation="vertical" android:background="@drawable/shape_bg" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="10.0dip" android:layout_marginTop="20.0dip" android:layout_marginRight="10.0dip"> <LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="50.0dip"> <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"/> <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"/> </LinearLayout> <View android:background="@drawable/shape_line" android:layout_width="fill_parent" android:layout_height="1.0px" /> <LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="50.0dip"> <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"/> <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"/> </LinearLayout> <View android:background="@drawable/shape_line" android:layout_width="fill_parent" android:layout_height="1.0px" /> <LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="50.0dip"> <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"/> <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"/> </LinearLayout> <View android:background="@drawable/shape_line" android:layout_width="fill_parent" android:layout_height="1.0px" /> <LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="50.0dip"> <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"/> <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"/> </LinearLayout> </LinearLayout> <LinearLayout android:gravity="left" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="20.0dip" android:layout_marginTop="10.0dip"> <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" /> </LinearLayout> <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="注 册" /> </LinearLayout>
简而言之,在五大布局的实现中,RelativeLayout和LinearLayout扮演着至关重要的角色
尽量少用和不用一些绝对的元素,这是使我们的产品能够兼容多分辨率的关键
另外对点九图的使用也是窍门,这需要我们UI部门的MM对android产品以及它的UI
实现要有一定的了解才能和我们开发人员快速配合制作出精美的界面避免重复返工而浪费时间
其它的没啥好说的了(喜欢就帮顶一下吧~)
附上源码工程:
http://download.csdn.net/detail/geniuseoe2012/4480701
欲知更多Android-UI技巧,请关注窝的下一堂课,更多精彩尽在http://blog.csdn.net/geniuseoe2012
相关推荐
HaoLi0.1 整合两个CSDN博客上的代码,基本实现了像新浪新闻的界面 20140731Android ActionBar应用实战,高仿微信主界面的设计Lance老师UI系列教程第四课->微信TAB界面的实现ActionBar增加两项,包名的修改,把...
注解与反射总结的的资料
1. 支付宝沙箱环境 ① 蚂蚁金服 开放平台 ----> 文档 ----> 开发工具包 ---> 沙箱环境 (仔细看参考文档) ② 下载.exe 生产公钥和私钥
Android移动应用开发基础教程(微课版)习题答案第1章1.Android平台具有哪些特点?答:Android平台特点主要包括:开放性、不再受营运商限制、丰富
喜剧角介绍您的每日剂量的终端lance。 是什么终端lance? ----- 终端Lance是由Lance公司Maximilian Uriarte,USMC创建的漫画。 终端Lance背后的想法是在海军陆战队嘲笑海军陆战队的乐趣,重点是咕噜咕噜咕噜咕噜咕噜...
z80汇编语言经典教程,很有用,内容非常详细。很古老的书了。
卡米诺UI 网络接口 ,最小的数字。 技术领域 组态 克隆回购: git clone https://github.com/MTES-MCT/camino-ui.git Renommer le fichier .env-example en .env和compléter。 安装 # installe les dépendances ...
一种列式数据格式,易于快速地进行版本、查询和训练。它被设计用于图像、视频、3D点云、音频,当然还有表格数据。它支持任何POSIX文件系统,以及像AWS S3和Google cloud storage这样的云存储
Lance Shuler在英特尔软件集团应用与系统工程中心担任高级经理。他在英特尔高性能计算和工作站领域工作了12年。他当前的工作包括领导英特尔SSG的全球软件团队从事石油行业支持,为OEM伙伴提供售前技术支持以及支持...
React Lance演示这是一个小测试项目,以查看是否可以轻松地将React用作游戏的渲染目标。 这使用标准的Lance Pong示例游戏。 我的目的是多方面的: 当安装组件时,可以有选择地启动lance客户端。 遗憾的是,一旦启动...
用python编写的进程调度程序。 兰斯提供顺序的定时任务/任务,工作链。 它内置有作业监视系统和Web GUI,以监视流程状态。 它是为Linux设计的,但也可以在Windows或Mac环境中运行。
【Android】掌握自定义LayoutManager(二) 实现流式布局 - zxt0601的博客 - CSDN博客博客专家【Android】掌握自定义Lay
Sprocket League-使用和构建的实时多人游戏)... 特征: 使用cannon.js实现的后端服务器上的物理引擎Lance实现的网络物理学Lance实现的客户端预测使用A-Frame实现的WebVR渲染DOM抽象资产抵免额- 来自的Wheel Icon由许可
009-2012 Lance http://www.pendrivelinux.com This Open Source tool falls under the GNU General Public License Version 2 Source Code is made available at time of download, from the official UUI page: ...
Symbian OS Architecture Lance Li Technical Consultant
Android拨号器 适用于Android N的Google拨号程序 下面的示例屏幕截图: ## APK下载 ## LIB: com.android.support:appcompat com.android.support:appcompat:recycleview ...
Unity3D中Android应用的退出脚本 Posted on 2013年03月07日 by U3d / Unity3D脚本/插件/被围观 265 次 Uni
2. 商城网站功能模块:信息发布系统3. 商城网站功能模块:网上购物系统主要功能:度可以进行三级级别分类设置、支持Excel批量导入商品、强大的支付接口、支持商
专题资料