做android应用开发,UI的东东既是基础又很重要,也是实现良好用户体验的第一步。而大多数我们的应用要实现的界面效果基本上在现有的第三方应用上都能找的到原型,此刻我们会特别希望在需要实现某种UI效果的时候能有个模板进行参照,这样便可以轻而易举地输出我们自个儿的精美布局。有鉴于此,蓝老师决定推出UI系列教程,结合当下流行应用的界面视觉效果为大家讲解其实现原理,以造福于广大新手以及刚入行的童鞋,老鸟们请飘过。。。
-----前言
UI系列教程第一课:QQ设置界面布局的实现
类似QQ设置界面这种布局排版相信很多应用都会用到,大家关心的无非就是就是布局的圆角问题,这其中包括全圆角,上半圆角,下半圆角以及无圆角
下面贴上布局文件为童鞋们讲解
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<!-- 界面显示 -->
<LinearLayout
style="@style/leba_bg_layout">
<LinearLayout
style="@style/leba_bg_single_layout">
<TextView android:textSize="16.0dip" android:textColor="#ff333333" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="12.0dip" android:text="界面显示" android:layout_weight="1.0" />
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="12.0dip" android:src="@drawable/setting_arrow"/>
</LinearLayout>
</LinearLayout>
<!-- 反馈建议 关于 -->
<LinearLayout
style="@style/leba_bg_layout">
<!-- 反馈建议 -->
<LinearLayout
style="@style/leba_bg_top_layout">
<TextView android:textSize="16.0dip" android:textColor="#ff333333" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="12.0dip" android:text="反馈建议" android:layout_weight="1.0" />
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="12.0dip" android:src="@drawable/setting_arrow"/>
</LinearLayout>
<View android:background="@drawable/leba_shape_line" android:layout_width="fill_parent" android:layout_height="1.0px" />
<!-- 关于 -->
<LinearLayout
style="@style/leba_bg_bottom_layout">
<TextView android:textSize="16.0dip" android:textColor="#ff333333" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="12.0dip" android:text="关于" android:layout_weight="1.0" />
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="12.0dip" android:src="@drawable/setting_arrow"/>
</LinearLayout>
</LinearLayout>
<!-- 声音提示 震动提示 消息提示 -->
<LinearLayout
style="@style/leba_bg_layout">
<!-- 声音提示 -->
<LinearLayout
style="@style/leba_bg_top_layout">
<TextView android:textSize="16.0dip" android:textColor="#ff333333" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="12.0dip" android:text="声音" android:layout_weight="1.0" />
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="12.0dip" android:src="@drawable/setting_arrow"/>
</LinearLayout>
<View android:background="@drawable/leba_shape_line" android:layout_width="fill_parent" android:layout_height="1.0px" />
<!-- 震动提示 -->
<LinearLayout
style="@style/leba_bg_mid_layout">
<TextView android:textSize="16.0dip" android:textColor="#ff333333" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="12.0dip" android:text="震动提示" android:layout_weight="1.0" />
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="12.0dip" android:src="@drawable/setting_arrow"/>
</LinearLayout>
<View android:background="@drawable/leba_shape_line" android:layout_width="fill_parent" android:layout_height="1.0px" />
<!-- 消息提示 -->
<LinearLayout
style="@style/leba_bg_bottom_layout">
<TextView android:textSize="16.0dip" android:textColor="#ff333333" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="12.0dip" android:text="消息提示" android:layout_weight="1.0" />
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="12.0dip" android:src="@drawable/setting_arrow"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
style="@style/leba_bg_layout"
android:padding="10.0dip">
<TextView
android:textSize="16.0dip"
android:textColor="#ffaa0000"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="12.0dip"
android:text="@string/blog_addr"
android:layout_weight="1.0"
android:ellipsize="marquee"
android:focusable="true"
android:focusableInTouchMode="true"
android:scrollHorizontally="true"
/>
</LinearLayout>
</LinearLayout>
再上style风格属性资源文件
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="leba_bg_layout">
<item name="android:orientation">vertical</item>
<item name="android:background">@drawable/leba_shape_bg</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_marginLeft">8.0dip</item>
<item name="android:layout_marginTop">10.0dip</item>
<item name="android:layout_marginRight">8.0dip</item>
</style>
<style name="leba_bg_base_layout">
<item name="android:orientation">horizontal</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:gravity">center_vertical</item>
<item name="android:paddingTop">16.0dip</item>
<item name="android:paddingBottom">16.0dip</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
</style>
<style name="leba_bg_top_layout" parent="@style/leba_bg_base_layout">
<item name="android:background">@drawable/leba_bg_top_selector</item>
</style>
<style name="leba_bg_mid_layout" parent="@style/leba_bg_base_layout">
<item name="android:background">@drawable/leba_bg_mid_selector</item>
</style>
<style name="leba_bg_bottom_layout" parent="@style/leba_bg_base_layout">
<item name="android:background">@drawable/leba_bg_bottom_selector</item>
</style>
<style name="leba_bg_single_layout" parent="@style/leba_bg_base_layout">
<item name="android:background">@drawable/leba_bg_single_selector</item>
</style>
</resources>
大家可以看到,布局中用到了大量的STYLE,而style无非就是些android attribute的集合
以上四大块布局都是以@style/leba_bg_layout风格作为底布局
其中<itemname="android:background">@drawable/leba_shape_bg</item>
leba_shape_bg是全圆角
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/white" />
<stroke android:width="1.0px" android:color="@color/shape_line" />
<corners android:radius="8.0dip" />
<padding android:left="1.0px" android:top="1.0px" android:right="1.0px" android:bottom="1.0px" />
</shape>
再以第二块布局(反馈建议和关于)为例
“反馈建议”横布局是上半圆角使用@style/leba_bg_top_layout风格作为底布局
其中<itemname="android:background">@drawable/leba_bg_top_selector</item>
leba_bg_top_selector
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="false" android:state_pressed="false" android:drawable="@drawable/leba_bg_mid_unselected" />
<item android:state_pressed="true" android:drawable="@drawable/leba_bg_mid_selected" />
<item android:state_focused="true" android:drawable="@drawable/leba_bg_mid_selected" />
<item android:drawable="@drawable/leba_bg_mid_unselected" />
</selector>
leba_bg_top_selected和leba_bg_top_unselected都是上半圆角
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/button_selected" />
<corners android:topLeftRadius="8.0dip" android:topRightRadius="8.0dip" android:bottomLeftRadius="1.0dip" android:bottomRightRadius="1.0dip" />
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/white" />
<corners android:topLeftRadius="8.0dip" android:topRightRadius="8.0dip" android:bottomLeftRadius="1.0dip" android:bottomRightRadius="1.0dip" />
</shape>
“关于”横布局使用@style/leba_bg_bottom_layout风格作为底布局,自然就是下半圆角了(具体配置就不贴了,其它布局同理)
而中间的小横线则更为简单
<View android:background="@drawable/leba_shape_line" android:layout_width="fill_parent" android:layout_height="1.0px" />
leba_shape_line
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/shape_line" />
</shape>
本文讲解之布局较为简单,每行只是ImageView和TextView构成
若需添加更多UI控件只要在合适位置插入即可
根据需要可能要使用ReleativeLayout作为行布局来规划实现UI效果
其它就没啥好说的了,对于style和shape以及selector还不甚了解的童鞋先补习一下相关知识吧
下面附上工程链接:
http://download.csdn.net/detail/geniuseoe2012/4425939
欲知更多Android-UI技巧,且听下回分解,更多精彩请关注窝的CSDN博客:http://blog.csdn.net/geniuseoe2012
分享到:
相关推荐
HaoLi0.1 整合两个CSDN博客上的代码,基本实现了像新浪新闻的界面 20140731Android ActionBar应用实战,高仿微信主界面的设计Lance老师UI系列教程第四课->微信TAB界面的实现ActionBar增加两项,包名的修改,把...
1. 支付宝沙箱环境 ① 蚂蚁金服 开放平台 ----> 文档 ----> 开发工具包 ---> 沙箱环境 (仔细看参考文档) ② 下载.exe 生产公钥和私钥
注解与反射总结的的资料
喜剧角介绍您的每日剂量的终端lance。 是什么终端lance? ----- 终端Lance是由Lance公司Maximilian Uriarte,USMC创建的漫画。 终端Lance背后的想法是在海军陆战队嘲笑海军陆战队的乐趣,重点是咕噜咕噜咕噜咕噜咕噜...
Android移动应用开发基础教程(微课版)习题答案第1章1.Android平台具有哪些特点?答:Android平台特点主要包括:开放性、不再受营运商限制、丰富
卡米诺UI 网络接口 ,最小的数字。 技术领域 组态 克隆回购: git clone https://github.com/MTES-MCT/camino-ui.git Renommer le fichier .env-example en .env和compléter。 安装 # installe les dépendances ...
【Android】掌握自定义LayoutManager(二) 实现流式布局 - zxt0601的博客 - CSDN博客博客专家【Android】掌握自定义Lay
z80汇编语言经典教程,很有用,内容非常详细。很古老的书了。
一种列式数据格式,易于快速地进行版本、查询和训练。它被设计用于图像、视频、3D点云、音频,当然还有表格数据。它支持任何POSIX文件系统,以及像AWS S3和Google cloud storage这样的云存储
React Lance演示这是一个小测试项目,以查看是否可以轻松地将React用作游戏的渲染目标。 这使用标准的Lance Pong示例游戏。 我的目的是多方面的: 当安装组件时,可以有选择地启动lance客户端。 遗憾的是,一旦启动...
Lance Shuler在英特尔软件集团应用与系统工程中心担任高级经理。他在英特尔高性能计算和工作站领域工作了12年。他当前的工作包括领导英特尔SSG的全球软件团队从事石油行业支持,为OEM伙伴提供售前技术支持以及支持...
用python编写的进程调度程序。 兰斯提供顺序的定时任务/任务,工作链。 它内置有作业监视系统和Web GUI,以监视流程状态。 它是为Linux设计的,但也可以在Windows或Mac环境中运行。
Android拨号器 适用于Android N的Google拨号程序 下面的示例屏幕截图: ## APK下载 ## LIB: com.android.support:appcompat com.android.support:appcompat:recycleview ...
Sprocket League-使用和构建的实时多人游戏)... 特征: 使用cannon.js实现的后端服务器上的物理引擎Lance实现的网络物理学Lance实现的客户端预测使用A-Frame实现的WebVR渲染DOM抽象资产抵免额- 来自的Wheel Icon由许可
Unity3D中Android应用的退出脚本 Posted on 2013年03月07日 by U3d / Unity3D脚本/插件/被围观 265 次 Uni
Symbian OS Architecture Lance Li Technical Consultant
2. 商城网站功能模块:信息发布系统3. 商城网站功能模块:网上购物系统主要功能:度可以进行三级级别分类设置、支持Excel批量导入商品、强大的支付接口、支持商
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: ...
将音乐发布到网站上此仓库中有一首非常小的歌曲,该歌曲会在网站打开后立即开始播放音乐