Android:布局实例之常见用户设置界面
实现效果:
整理思路:
1、控件:文字TextView 和 右箭头ImageView
2、因为考虑到点击效果,设计为:最外层为全圆角,内层有四种情况,分别为上圆角、无圆角、下圆角和全圆角。
3、内层样式效果:需要初始样式、和点击样式
4、需要知识:结合style、shake、selector组合样式
布局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#F0F3F6"
> <LinearLayout style="@style/wrap_layout" >
<!-- 上圆角-->
<LinearLayout style="@style/top_layout">
<TextView style="@style/usertext" android:text="个性签名" />
<ImageView style="@style/img_arrow"/>
</LinearLayout> <!-- 分割线 -->
<View style="@style/bg_line"/>
<!-- 无圆角-->
<LinearLayout style="@style/mid_layout">
<TextView style="@style/usertext" android:text="我的资料" />
<ImageView style="@style/img_arrow"/>
</LinearLayout>
<View style="@style/bg_line"/>
<!-- 下圆角-->
<LinearLayout style="@style/bottom_layout">
<TextView style="@style/usertext" android:text="消息通知" />
<ImageView style="@style/img_arrow"/>
</LinearLayout> </LinearLayout> <!-- 全圆角-->
<LinearLayout style="@style/wrap_layout">
<LinearLayout style="@style/single_layout">
<TextView style="@style/usertext" android:text="辅助功能"/>
<ImageView style="@style/img_arrow"/>
</LinearLayout> </LinearLayout> </LinearLayout>
布局文件
样式:
<!-- 最外层样式 -->
<style name="wrap_layout">
<item name="android:orientation">vertical</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_marginLeft">8dp</item>
<item name="android:layout_marginRight">8dp</item>
<item name="android:layout_marginTop">8dp</item>
<item name="android:padding">1px</item>
<item name="android:background">@drawable/bg_layout_shape</item> </style> <!-- 共用层样式 -->
<style name="base_layout">
<item name="android:orientation">horizontal</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:paddingTop">16dp</item>
<item name="android:paddingBottom">16dp</item>
<item name="android:paddingLeft">12dp</item>
<item name="android:paddingRight">12dp</item>
<item name="android:gravity">center_vertical</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
</style>
layout样式
<!-- textview样式 -->
<style name="usertext">
<item name="android:textSize">16dp</item>
<item name="android:textColor">@color/text_clo</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">1</item>
</style> <!-- 文本右边箭头样式 -->
<style name="img_arrow">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:src">@drawable/setting_arrow</item> </style> <!-- view分割线样式 -->
<style name="bg_line">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1px</item>
<item name="android:background">@color/border_clo</item>
</style>
控件样式
<!-- 上圆角样式 -->
<style name="top_layout" parent="base_layout">
<item name="android:background">@drawable/top_layout_selector</item>
</style> <!--无圆角样式 -->
<style name="mid_layout" parent="base_layout">
<item name="android:background">@drawable/mid_layout_selector</item>
</style> <!-- 下圆角样式 -->
<style name="bottom_layout" parent="base_layout">
<item name="android:background">@drawable/bottom_layout_selector</item>
</style> <!-- 全圆角样式 -->
<style name="single_layout" parent="base_layout">
<item name="android:background">@drawable/single_layout_selector</item>
</style>
点击样式和默认样式
其中举例上圆角的背景设置为:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" android:drawable="@drawable/top_select"></item>
<item android:state_focused="true" android:drawable="@drawable/top_select"></item>
<item android:drawable="@drawable/top_unselect"></item>
</selector>
top_layout_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="@color/blue"/>
<corners android:topRightRadius="8dp" android:topLeftRadius="8dp"/>
</shape>
top_select.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="@color/white"/>
<corners android:topRightRadius="8dp" android:topLeftRadius="8dp"/>
</shape>
top_unselect.xml
Android:布局实例之常见用户设置界面的更多相关文章
- [转]Android:布局实例之模仿QQ登录界面
Android:布局实例之模仿QQ登录界面 预览图: 准备: 1.找到模仿对象 QQ登陆界面UI下载>>>>> 2.导入工程 3.查看布局结构和使用控件 其对应效果图分布 ...
- Android:布局实例之模仿QQ登录界面
预览图: 准备: 1.找到模仿对象 QQ登陆界面UI下载>>>>> 2.导入工程 3.查看布局结构和使用控件 其对应效果图分布为 4.分析样式选择器 下拉箭头2种样式:点 ...
- Android:布局实例之模仿京东登录界面
预览图及布局结构参考: 布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout ...
- ZT Android布局】在程序中设置android:gravity 和 android:layout_Gravity属性
Android布局]在程序中设置android:gravity 和 android:layout_Gravity属性 分类: [Android基础] 2011-04-19 16:06 54739人阅读 ...
- Android调用系统自带的设置界面
Android有很多系统自带的设置界面,如设置声音,设置网络等. 在开发中可以调用这些系统自带的设置界面. 点击以下列表中的选项,就可以调出相应的系统自带的设置界面. 如点击“无线和网络设置”,可以调 ...
- 【Android布局】在程序中设置android:gravity 和 android:layout_Gravity属性
在进行UI布局的时候,可能常常会用到 android:gravity 和 android:layout_Gravity 这两个属性. 关于这两个属性的差别,网上已经有许多人进行了说明,这边再简单说一 ...
- 【Android布局】在程序中设置android:gravity 和 android:layout_Gravity属性——位置设置偏向
LinearLayout有两个非常相似的属性: android:gravity与android:layout_gravity. 他们的区别在于: android:gravity 属性是对该view中内 ...
- android 跳转到应用通知设置界面的示例
4.4以下并没有提过从app跳转到应用通知设置页面的Action,可考虑跳转到应用详情页面,下面是直接跳转到应用通知设置的代码: if (android.os.Build.VERSION.SDK_IN ...
- Android笔记——PreferenceActivity结合PreferenceFragment创建设置界面
1.创建类继承PreferenceActivity 2.该类必须重写OnBuildHeaders和isValidFragment方法. (1)OnBuildHeaders方法中使用lo ...
随机推荐
- 生成随机字符串(UUID方法)
这是另一种用UUID生成随机字符串的方法. public class RandomGenerator{ private int length; public void setLength(int le ...
- info sed 中文不完全文档
快速指南: sed 的一般使用方法:sed -option 'adress|command' -f scpritfiles(1)'|' 只是用来说明性的分隔 adress 和 command,实际使用 ...
- IIS安装Web Deploy之后没有显示右键菜单
Bug描述: 使用IIS自带的"Web平台安装程序"安装完Web Deploy组件之后,鼠标右键点击网站,弹出的菜单中并没有新增的"部署"选项. Bug解决: ...
- web项目嵌入Jetty运行的两种方式(Jetty插件和自制Jetty服务器)
在开发Java web项目时候,可以在项目中嵌入Jetty服务的方式来运行web程序. 由于最近开发web项目,自己使用的是比较旧的eclipse不支持导入tomcat来运行项目,于是就学习了下使用项 ...
- Call与Apply
1.前言 ECMAscript中提供了两个方法(call,apply)用于改变对象内部的this指针,它们两个的作用都是一样的,但是传递的参数有点不大相同. 它们的大概语法为: call(this, ...
- web组件新学--layer
在之前项目后台管理界面开发中,不知道有layer这样好用的组件,我的内心是这样的的...呀!这个框架有弹框,哈哈哈,好开心,不用自己写遮罩层,不用自己写弹框,好开森.. 当知道有layer之后.... ...
- JAVASCRIPT实现翻页保存已勾选的项目
<input type="checkbox" name="a" value="1" /><br/> <inpu ...
- php代码加密|PHP源码加密——实现方法
Encipher - PHP代码加密 | PHP源码加密下载地址:https://github.com/uniqid/encipher 该加密程序是用PHP代码写的,加密后代码无需任何附加扩展,无需安 ...
- 不加好友实现QQ在线代码状态临时会话
网友在介绍怎么样使用QQ来强制聊天,才想到以前一直遇到的QQ在线生成代码后,遇到的必须添加好友才能聊天的一个疑问. 公告:“QQ在线状态”V2.0正式发布,解决了QQ2009用户点击“在线状态”后须添 ...
- The connection to adb is down
有一周时间没有打开ADT了,最近想为我的APP增加下些新的功能,但是在编译的时候出现了一个奇怪问题 [2013-10-18 14:43:50 - zzbus] Android Launch![2013 ...