Android自定义控件背景及其Drawable以实现扁平化
来源:互联网 发布:淘宝申请退款 编辑:程序博客网 时间:2024/04/30 14:52
扁平化?
人们都说扁平化是从IOS和WindowsPhone那边吹过来的邪风,但是不可否认:扁平化是我见过的最舒服、最自然的表现方式。从开发角度上来讲,扁平化的设计可以使得我们从许多屏幕适配和尺寸调节的工作中解放出来(虽然只是那么一点点),更加关注功能;而在在使用层面上,只要文化水平不是特别地低(没有恶意),拟物化的那点提示作用也不是那么明显,当然这里不是说拟物化不好,总之:相对于其他表现方式,扁平化碉堡了。
咱们也做一个扁平化
上面说了,扁平化的控件其实在开发中是非常容易的。这里让我们一起动手,实现下面这个效果(红色部分为本文讲解部分,蓝色的你可以自行练习完成):
上图中所有的元素都很简单,其本质都是一个带有黑色边框,无填充背景的View(Button(图中1处),ViewGroup(图种2处))。
为View(途中1处)定义一个扁平化的背景
从上面的分析可知,我们只需要给组件定义一个扁平化了的背景,并且在布局上尽量追求简洁即可实现扁平化效果。下面是一个粗0.5dp、填充色为白色的背景:
bordered_black_blue_bg.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" > <corners android:radius="5dp" /> <solid android:color="@android:color/white" /> <stroke android:width="0.5dp" android:color="@android:color/black" /></shape>
我们的设计中还包括:用户点击按钮时,背景色变为蓝色。所以,上面的drawable资源也仅仅是默认状态下的显示,下面我们再创建一个扁平化Button按下时的效果:
bordered_black_blue_bg_pressed.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" > <corners android:radius="5dp" /> <!-- 自定义的浅蓝色 --> <solid android:color="@color/blue" /> <stroke android:width="0.5dp" android:color="@android:color/black" /></shape>
接下来我们根据上面两个drawable文件为Button建立一个selector对象。
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/bordered_black_blue_bg_pressed" android:state_pressed="true"/> <item android:drawable="@drawable/bordered_black_blue_bg"/></selector>
为ViewGroup定义一个扁平化背景
观察上图2处可知,ViewGroup的背景和View在正常状态下的背景是一致的。所以他们的drawable文件内容是一致的。
bordered_black_bg.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" > <corners android:radius="5dp" /> <solid android:color="@android:color/white" /> <stroke android:width="0.5dp" android:color="@android:color/black" /></shape>
2处的那些小条目的布局文件:
view_info_item.xml
<?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="wrap_content" android:background="@drawable/bordered_black_bg" android:gravity="center_vertical" android:orientation="horizontal" android:padding="@dimen/default_padding" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:ellipsize="marquee" android:marqueeRepeatLimit="marquee_forever" android:maxWidth="@dimen/info_item_max_text_width" android:text="chinese address" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/margin_large" android:text="北京市\n朝阳区\n大望路\n34号n34号n34号n34号n34号n34号" /></LinearLayout>
ListView的扁平化处理
根据上面的介绍,我们已经可以做出一个非常“带感”的扁平化的按钮了(或TextView、等等),为了使的图种2处的这些小条目可以滚动并易于管理,我们把它放到ListView中,下面是上图的布局文件:
fragment_department_detail.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="@dimen/default_padding" ><!-- 这是我自定义的View,对应于上图中的蓝色部分,可作为你的练习作业 --> <org.xiaom.butler.view.TopNav android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/margin_large" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/margin_large" android:text="Baby Home Care Center" android:textSize="@dimen/text_size_larger" android:textStyle="bold" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="宝贝家早教中心" android:textSize="@dimen/text_size_large" /> <!-- 此Button使用了之前定义的扁平化背景@drawable/selector/selector_button_normal_bg --> <Button android:id="@+id/btn" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/margin_large" android:background="@drawable/selector_button_normal_bg" android:text="Show Taxi Card" android:textColor="@android:color/black" android:textSize="@dimen/text_size_large" android:textStyle="bold" /><!-- 注意divider及dividerHeight这两个属性 --> <ListView android:id="@+id/list" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:background="@null" android:divider="@null" android:dividerHeight="@dimen/list_dirver_height" android:paddingBottom="@dimen/list_view_padding_v" android:paddingTop="@dimen/list_view_padding_v" > </ListView></LinearLayout>
我们知道,ListView在默认情况下丑的一逼,而且还item之间还没有间隔,简直不忍直视~~~~~为了使得ListView也能赶上扁平化这股春风,我们需要对其进行配置。
- android:divider="@null",配置ListView内Item的间隔为@null,即——没有间隔。
- android:dividerHeight="@dimen/list_dirver_height",配置分割的高度即——item之间的间隔“距离”。上面的xml中,间隔为5dp
任何需要积分的下载都是耍(da)流(nao)氓(can)。
1 0
- Android自定义控件背景及其Drawable以实现扁平化
- Android利用drawable文件夹自定义控件背景、样式
- Android利用drawable文件夹自定义控件背景、样式
- Android自定义扁平化对话框
- Android自定义扁平化对话框
- android 自定义标签的使用,实现扁平化UI设计
- Android UI——使用Drawable来实现扁平化的按钮
- QT 扁平化界面风格,自定义TabWidget控件
- Android自定义控件实现及其布局
- Android自定义控件实现及其布局
- Android自定义控件实现及其布局
- Android自定义控件实现及其布局
- Android自定义控件实现及其布局
- Android Drawable实现自定义动画
- android自定义控件实现及其完整的生命周期(一)
- 自定义android控件EditText 自定义边框 背景
- 自定义android控件EditText 自定义边框 背景
- Android Drawable系列(1):自定义背景以及注意事项
- HIVE中MAPJOIN可以使用的场景分析
- Eclipse构建Maven项目
- VC++启动RTTI
- 重构机房收费系统2之错误异常“System.AccessViolationException”类型
- java 实现获取本机 字体包
- Android自定义控件背景及其Drawable以实现扁平化
- cocos2dx-lua中如何使用自定义类以及tolua++的使用
- 解决TextView错位的问题
- Sqlserver连接oracle进行读写数据库
- linux nohup命令
- Qt中添加背景图片的方法
- Shell数值、字符串比较
- 使用ArcEngine自定义GP Tool
- 做红烧排骨都有什么讲究