凯发K8_凯发K8平台_凯发K8网址_网易新闻
全国免费咨询热线

区块链技术

程序员

当前位置:主页 > 程序员 >

联系我们

CONTACT

地址:
电话:
传真:
邮箱:

Android自定义控件背景及其Drawable以实现扁平化

2019-01-28

扁平化?

人们都说扁平化是从IOS和WindowsPhone那边吹过来的邪风,但是不可否认:扁平化是我见过的最舒服、最自然的表现方式。从开发角度上来讲,扁平化的设计可以使得我们从许多屏幕适配和尺寸调节的工作中解放出来(虽然只是那么一点点),更加关注功能;而在在使用层面上,只要文化水平不是特别地低(没有恶意),拟物化的那点提示作用也不是那么明显,当然这里不是说拟物化不好,总之:相对于其他表现方式,扁平化碉堡了。

咱们也做一个扁平化 上面说了,扁平化的控件其实在开发中是非常容易的。这里让我们一起动手,实现下面这个效果(红色部分为本文讲解部分,蓝色的你可以自行练习完成):
上图中所有的元素都很简单,其本质都是一个带有黑色边框,无填充背景的View(Button(图中1处),ViewGroup(图种2处))。 为View(途中1处)定义一个扁平化的背景 从上面的分析可知,我们只需要给组件定义一个扁平化了的背景,并且在布局上尽量追求简洁即可实现扁平化效果。下面是一个粗0.5dp、填充色为白色的背景:
如果有对Android中shape的使用不熟的朋友,可以参考下这位同学的总结或参考官方api文档。

我们的设计中还包括:用户点击按钮时,背景色变为蓝色。所以,上面的drawable资源也仅仅是默认状态下的显示,下面我们再创建一个扁平化Button按下时的效果:

bordered_black_blue_bg_pressed.xml




    
    
    
    

    

接下来我们根据上面两个drawable文件为Button建立一个selector对象。



    
    

为ViewGroup定义一个扁平化背景

观察上图2处可知,ViewGroup的背景和View在正常状态下的背景是一致的。所以他们的drawable文件内容是一致的。 bordered_black_bg.xml



    

    

    


2处的那些小条目的布局文件:
view_info_item.xml



    

    

ListView的扁平化处理 根据上面的介绍,我们已经可以做出一个非常“带感”的扁平化的按钮了(或TextView、等等),为了使的图种2处的这些小条目可以滚动并易于管理,我们把它放到ListView中,下面是上图的布局文件: fragment_department_detail.xml

	
    
    

    

 	
    

我们知道,ListView在默认情况下丑的一逼,而且还item之间还没有间隔,简直不忍直视~~~~~为了使得ListView也能赶上扁平化这股春风,我们需要对其进行配置。 android:divider="@null",配置ListView内Item的间隔为@null,即——没有间隔。
android:dividerHeight="@dimen/list_dirver_height",配置分割的高度即——item之间的间隔“距离”。上面的xml中,间隔为5dp
为ListView填充自定义的数据,这里就不说了,继承一个BaseAdapter即可。启动Activity也不说了,这里是本次博文的源码。 任何需要积分的下载都是耍(da)流(sha)氓(bi)。

http://www.bkjia.com/Androidjc/815350.htmlwww.bkjia.comtruehttp://www.bkjia.com/Androidjc/815350.htmlTechArticle扁平化? 人们都说扁平化是从IOS和WindowsPhone那边吹过来的邪风,但是不可否认: 扁平化是我见过的最舒服、最自然的表现方式。 从开发角...

本文源自: 凯发K8

Copyright 2018 凯发K8_凯发K8平台_凯发K8网址_网易新闻 版权所有

友情链接: