android设置ui
‘壹’ AndroidUI控件switch使用方法
首先添加控件:
<Switch
android:id="@+id/sw_sfktmmzf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:showText="false"
android:switchMinWidth="50dp"
android:thumb="@drawable/thumb"
android:track="@drawable/track" />
以下是该控件的常用属性:
textOn:控件打开时显示的文字
textOff:控件关闭时显示的文字
thumb:控件开关的图片(设置小圆圈颜色)
track:控件开关的轨迹图片(设置小圆圈背景颜色)
typeface:设置字体类型
switchMinWidth:开关最小宽度
switchPadding:设置开关 与文字的空白距离
switchTextAppearance:设置文本的风格
checked:设置初始选中状态
splitTrack:是否设置一个间隙,让滑块与底部图片分隔(API 21及以上)
showText:设置是否显示开关上的文字(API 21及以上)
创建北京控制文件在drawable文件下
1、thumb.xml
<?xml version="1.0" encoding="utf-8"?><!-- 按钮的选择器,可以设置按钮在不同状态下的时候,按钮不同的颜色 -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/green_thumb" android:state_checked="true" />
<item android:drawable="@drawable/gray_thumb" />
颜色文件:
green_thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- 高度40 -->
<size android:height="@dimen/switch_height" android:width="@dimen/switch_height"/>
<!-- 圆角弧度 20 -->
<corners android:radius="20dp"/>
<!-- 变化率 -->
<gradient
android:endColor="#eeeeee"
android:startColor="#eeeeee" />
<stroke android:width="1dp"
android:color="@color/home_text1"/>
</shape>
gray_thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- 高度40 -->
<size android:height="@dimen/switch_height" android:width="@dimen/switch_height"/>
<!-- 圆角弧度 20 -->
<corners android:radius="20dp"/>
<!-- 变化率 -->
<gradient
android:endColor="#eeeeee"
android:startColor="#eeeeee" />
<stroke android:width="1dp"
android:color="@color/text_color03"/>
</shape>
2、track.xml
<?xml version="1.0" encoding="utf-8"?><!-- 底层下滑条的样式选择器,可控制Switch在不同状态下,底下下滑条的颜色 -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/green_track" android:state_checked="true" />
<item android:drawable="@drawable/gray_track" />
</selector>
颜色文件:
green_track.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 高度40 -->
<size android:height="@dimen/switch_height"/>
<!-- 圆角弧度 20 -->
<corners android:radius="15dp"/>
<!-- 变化率 -->
<gradient
android:endColor="@color/home_text1"
android:startColor="@color/home_text1" />
</shape>
gray_track.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 高度30 此处设置宽度无效-->
<size android:height="@dimen/switch_height" />
<!-- 圆角弧度 15 -->
<corners android:radius="15dp" />
<!-- 变化率 定义从左到右的颜色不变 -->
<gradient
android:endColor="@color/text_color03"
android:startColor="@color/text_color03" />
</shape>
switch 控件监听事件:
aSwitch.setOnCheckedChangeListener(newCompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
//控制开关字体颜色
if(isChecked) {
//打开
}else{
//关闭
}
}
});
‘贰’ android ui设计中的标题怎么设置
Android 应用程序窗体显示状态操作(requestWindowFeature()的应用)
我们在开发程序是经常会需要软件全屏显示、自定义标题(使用按钮等控件)和其他的需求,requestWindowFeature(featrueId),它的功能是启用窗体的扩展特性。参数是Window类中定义的常量。
枚举常量:
1.DEFAULT_FEATURES:系统默认状态,一般不需要指定
2.FEATURE_CONTEXT_MENU:启用ContextMenu,默认该项已启用,一般无需指定
3.FEATURE_CUSTOM_TITLE:自定义标题。当需要自定义标题时必须指定。如:标题是一个按钮时
4.FEATURE_INDETERMINATE_PROGRESS:不确定的进度
5.FEATURE_LEFT_ICON:标题栏左侧的图标
6.FEATURE_NO_TITLE:吴标题
7.FEATURE_OPTIONS_PANEL:启用“选项面板”功能,默认已启用。
8.FEATURE_PROGRESS:进度指示器功能
9.FEATURE_RIGHT_ICON:标题栏右侧的图标
一。FEATURE_CUSTOM_TITLE详解
this.requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
setContentView(R.layout.main);
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.title);
自定义标题完成,它是一个xml文件布局
title.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon"/>
<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="文本" />
</LinearLayout>
二。FEATURE_NO_TITLE
可用于全屏显示
实现代码
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.main);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
‘叁’ android的ui布局有哪些
布局(Layout)的概念是针对Activity的,Activity就是布满整 个Android设备的窗口或者悬浮于其他窗口上的交互界面。在一个应用程序中通常由多个Activity构成,每个需要显示的Activity都需要在AndroidManifest.xml文件之中声明。
通常情况下,开发人员可以使用两种方式来创建UI组件,一种方式是使用XML方式来配置UI组件的相关属性,然后装载这些UI组件,这也是最常用的方式。但是有些特殊情况下,需要动态生成UI组件,则需要使用第二种方式,完全使用java代码来创建UI组件。
XML布局文件是Android系统中定义的Layout的常用方式,所有布局文件必须包含在res/layout目录中,且必须符合Java的命名 规范。当在res/layout目录下新增了布局文件之后,R.java文件会自动收录该布局资源,Java代码可通过setContentView方法 在Activity中显示该Layout。
setContentView(R.layout.<资源名称>);
在布局文件中可以指定UI组件的android:id属性,该属性的属性值代表该组件的唯一标识。通过Activity.findViewById()访问,并且findViewById()必须在setContentView加载xml文件之后使用,否则会抛出异常。
findViewById(R.id.)
Android应用的绝大部分UI组件都放在android.widget包及其子包、android.view包及其子包中,Android应用的 所有UI组件都继承了View类。View类还有一个重要的子类:ViewGroup,ViewGroup类是所有布局管理器的父类。
ViewGroup容器控制其子组件的分布依赖于ViewGroup.LayoutParams、ViewGroup.MarginLayoutParams两个内部类。
ViewGroup.LayoutParams提供两个XML属性设定组件的大小。
android:layout_height:指定该子组件的基本高度;
android:layout_width:指定该子组件的基本宽度。
这两个属性有三个基本值,这两个属性有三个特定的值:
fill_parent:指定组件的高度、宽度与父容器组件的一样。
match_parent:与fill_parent一样,Android2.2开始推荐使用。
warp_content:内容包裹。
ViewGroup.MarginLayoutParams用于控制子组件周围的页边距。
android:layout_marginBottom(下边距);
android:layout_marginLeft(左边距);
android:layout_marginRight(右边距):
layout_marginTop(上边距)
对于View的尺寸,android提供了三种单位供选择使用:
px:像素。
dp:dpi,表示屏幕实际的像素。
sp:与scale无关的像素,与dp类似。
尺寸单位选择的技巧:如果设置长度、高度等属性时可以使用dp或sp,但是如果设置字体,需要使用px。如果使用dp或sp,系统会根据屏幕密度的变化进行转换。
为了适应各种界面风格,Android提供了五种布局规范,利用这五种布局,基本上可以在设备上随心所欲的摆放任何UI组件,这五种布局分别是:
FrameLayout(帧布局)。
LinearLayout(线性布局)
RelativeLayout(相对布局)。
TableLayout(表格布局)。
AbsoluteLayout(绝对布局)。
线性布局(LinearLayout)
LinearLayout是最常用的布局方式,在XML文件中使用标记。它会将容器里的UI组件一个一个挨着排列起来。但是LinearLayout不会换行,当UI组件超出屏幕之后,则不会被显示出来。LinearLayout有两个重要的XML属性:androidgravity(对齐方 式);android:orientation(排列方式)。
android:orientation(排列方式),设定了LinearLayout中包含的UI组件的排列方式,有两个选项vertical(竖向)、horizontal(横向,默认值)
android:gravity(对齐方式),设定LinearLayout中包含UI组件的对齐方式,其选项很多,常用上(top)、下(bottom)、左(left)、右(right)。
‘肆’ Android常用UI尺寸规范
在信息流的设计中,左右的间距会保持一致,通常设定为32px,从而保证有足够的留白,如图所示。信息流中的文本、图片和头像都会依据间距进行左右对齐,以此来保证页面的规则性。
在1080px×1920px的设计图中,文字要有主次。把字号大小分为3个级别,例如主文案的昵称会设置为46px,描述文字会设置为36px,而最小字号的时间等信息文字的大小会设置为30px,如图所示。
‘伍’ Android UI规范是什么
从事UI设计行业的朋友都知道,每一张设计稿都是有规范尺寸的,并且IOS的和Android还不同,IOS UI设计规范为375*667 1x的尺寸,那么Android UI规范是什么呢,下面让我们一起来了解一下。
在做Android UI设计的时候,画布的尺寸我们一般都是选择360*640 1x,也就是说是选择720*1280这个尺寸。
我们从上到下来进行了解,最上边的是状态栏,状态栏的高度是25。
在状态栏中肯定就是信号、电源以及时间这些了,每个Android定制系统的摆放样式都不同,这一点不用纠结。
状态栏下边就是导航栏了,导航栏起到的是导航作用,高度是45px。
导航栏中间一般都是有文字来起到提醒作用的,导航文字的大小一般都是18px。
在最下方就是我们的标签栏了,标签栏的作用就是给用户提供切换界面的作用,标签栏的高度为50px。
在标签栏中摆放的肯定就是我们的ICON图标了,要注意,图标的切图点击区域不能够小于24px。
一些ICON图标的下方还会有文本,这里文本的大小一般就是10或者是11px了,因为范围有限。
特别提示
本文尺寸均为1x。
‘陆’ IOS与Android的UI设配方案
IOS与Android共用一套设计效果图 1242*2208
IOS与 Android常用的尺寸中,最大尺寸为6p的尺寸,即1242*2208px
IOS常用尺寸: 1242*2208 750*1334 640*1136 640*960,其中750*1334 640*1136 640*960 同为@2x 1242*2208为@3x,所以750*1334 640*1136 640*960只做一套640*1136就好。
Android 常用尺寸:1080*1920 720*1080 480*800,他们之间相邻是可以整除1.5的,也就是1080除以1.5等于720,720除以1.5等于480,即这三个尺寸可以等比缩放大小,只做一套1080*1920就可以。
那么问题来了。
IOS要做两套尺寸,1242*2208与640*1136
Android要做一套尺寸,1080*1920
这样不就是三套设计图了吗?设计师们会被气死的?
其实,6p的尺寸1242*2208整除1.15就刚好就等于1080*1920,也就是说,1242*2208与1080*1920是可以等比缩放的。
现在就剩下IOS的640*1136。
那么就有人问,那IOS的1242*2208可以直接等比缩放成640*1136。答案是不可以的,因为他们之间不能整除的,但是我们把1242*2208的设计图直接在Photoshop里面直接等不缩放到宽度为640的尺寸,我们会发现原本的2208变成了1138,也就是说比1136多了2个像素,2个像素的误差对于没有有强迫证的也就无所谓了,2个像素的误差我们会将1138硬改成1136,现在你会发现,里面的图标,1136跟1138大小其实是一样。
为什么提到图标呢?因为我们交付的物只需要一套效果图与五套切图就好了。即
一套效果图 1242*2208
五套切图 1242*2208 640*1136 1080*1920 720*1080 480*800
最后注意缩放的图标要细调一下,由于转换有误差,共用一套效果图是有一定风险的,例如UI细节上的风险。开发前,设计师与开发人员要先共同确认此适配方案,要全程沟通,及时改正UI方面的问题。
IOS与Android共用一套设计效果图 750*1334
上面提到过,750*1334 640*1136 640*960 同为@2x,所以750跟640用同一套图标,同一套字体,至于其他尺寸大小,只要跟着尺寸延伸就没问题啦。尺寸750*1334应用1242*2208,则需要把@2x导出成@3x,也就是把字体放大1.5倍,其余的直接放到1242就可以啦。
至于Android版本,我个人的做法是把750*1334直接换算成1080*1920,因为只有1PX像素只差,直接忽略。换算出1080*1920,Android的其他尺寸就按他们之间的规律处理就可以啦。
因为我们交付的物只需要一套效果图与五套切图就好了。即
一套效果图 750*1334
五套切图 1242*2208 640*1136 1080*1920 720*1080 480*800
IOS与Android各做两套设计效果图
原理跟方案一、二差不多,但为了追求细节上的完美,可以多做一套设计图,即两套设计图:1242*2208和640*1136.
1242*2208适配6P、Android三种尺寸。
1242*2208整除1.5等于1080*1920:
1080*1920整除1.5等于720*1280:
720*1280整除1.5等于480*800:
640*1136适配6 5 5S等尺寸。
如果追求完美,那就需要三套图。即:
1242*2208 640*1136 1080*1920
还可以加上一套640*960,总之分开做越多套,出来的效果图就会越精细,反之,你懂得,不过这也取决设计师本人和公司领导的决策,会不会给那么多时间。不说废话了,希望能帮到各位!
‘柒’ Android UI 的设计规则
软件界面设计相关的各项介绍
界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化优化规范化的设计分支。具体包括软件启动封面设计,软
件框架设计,按钮设计,面板设计,菜单设计,标签设计,图标设计,滚动条及状态栏设计,安装过程设计,包装及商品化。
在设计的过程中有较多注意的关键问题,以下列出几点:
(1)软件启动封面设计
应使软件启动封面最终为高清晰度的图像,如软件启动封面需在不同的平台、操作系统上使用将考虑转换不同的格式,并且对选用的色彩不
宜超过256 色,最好为216色安全色。软件启动封面大小多为主流显示器分辨率的1/6大。如果是系列软件将考虑整体设计的统一和延续性。在上面应该醒目的标注制作或支持的公司标志、产品商标,软件名称,版本号,网址,版权声明,序列号等信息,以树立软件形象,方便使用者或购买者在软件启动的时候得到提示。插图宜使用具有独立版权的,象征性强的,识别性高的,视觉传达效果好的图形,若使用摄影也应该进行数位处理,以形成该软件的个性化特征。
(2)软件框架设计
软件的框架设计就复杂得多,因为涉及软件的使用功能,应该对该软件产品的程序和使用比较了解,这就需要设计师有一定的软件跟进经验,能够快速的学习软件产品,并且在和软件产品的程序开发员及程序使用对象进行共同沟通,以设计出友好的,独特的,符合程序开发原则的软件框架。软件框架设计应该简洁明快,尽量少用无谓的装饰,应该考虑节省屏幕空间,各种分辨率的大小,缩放时的状态和原则,并且为将来设计的按钮,菜单,标签,滚动条及状态栏预留位置。设计中将整体色彩组合进行合理搭配,将软件商标放在显着位置,主菜单应放在左边或上边,滚动条放在右边,状态栏放在下边,以符合视觉流程和用户使用心理。
(3)软件按钮设计
软件按钮设计应该具有交互性,即应该有3到6种状态效果:点击时状态;鼠标放在上面但未点击的状态;点击前鼠标未放在上面时的状态;点击后鼠标未放在上面时的状态;不能点击时状态;独立自动变化的状态。按钮应具备简洁的图示效果,应能够让使用者产生功能关联反应,群组内按钮应该风格统一,功能差异大的按钮应该有所区别。
(4)软件面板设计
软件面板设计应该具有缩放功能,面板应该对功能区间划分清晰,应该和对话框,弹出框等风格匹配,尽量节省空间,切换方便。
(5)菜单设计
菜单设计一般有选中状态和未选中状态,左边应为名称,右边应为快捷键,如果有下级菜单应该有下级箭头符号,不同功能区间应该用线条分割。
(6)标签设计
标签设计应该注意转角部分的变化,状态可参考按钮。
(7)图标设计
图标设计色彩不宜超过64色,大小为16x16、32x32两种,图标设计是方寸艺术,应该加以着重考虑视觉冲击力,它需要在很小的范围表现出软件的内涵,所以很多图标设计师在设计图标时使用简单的颜色,利用眼睛对色彩和网点的空间混合效果,做出了许多精彩图标。
(8)滚动条及状态栏设计
滚动条主要是为了对区域性空间的固定大小中内容量的变换进行设计,应该有上下箭头,滚动标等,有些还有翻页标。状态栏是为了对软件当前状态的显示和提示。
(9)安装过程设计
安装过程设计主要是将软件安装的过程进行美化,包括对软件功能进行图示化。
(10)包装及商品化
最后软件产品的包装应该考虑保护好软件产品,功能的宣传融合于美观中,可以印刷部分产品介绍,产品界面设计。
图标设计规范
数位设计引入了一种新的图标设计样式。以下是设计和创建样式图标的具体规范。
图标样式应该有趣、色彩丰富且充满活力,因为现在的系统支持图标是32位图标,并且边缘非常平滑。在矢量程序中绘制完每个图标后,再用Adobe Photoshop进行处理可使图像更加完美。本规范是专为设计者编写的。在创建图像时,建议您与高水平的图形设计者一起工作,尤其是具有丰富的矢量和 3D软件经验的图形设计者。
图标设计概述的目的是让您熟悉WindowsXP的新样式,为创建图标做好准备。
图标样式特性
(1) 色彩丰富,是对WindowsXP外观的补充。
(2) 不同的角度和透视特性为图像增添了动态活力。
(3) 元素的边角十分柔和,并略微有些圆滑。
(4) 光源位于图标的左上角,同时有环绕光照亮图标的其它部分。
(5) 渐变效果使图标具有立体感,进而使图标的外观更加丰满。
(6) 投影使图标更具对比度和立体感。
(7) 添加轮廓可使图像更清晰。
(8) 日常对象(如计算机和设备)具有更现代化的个人外观。
图标尺寸
Windows XP图标有四种尺寸,建议使用以下四种尺寸:
(1) 48x48像素
(2) 32x32像素
(3) 24x24像素
(4) 16x16像素
图标色彩深度支持
WindowsXP支持32位图标。32位图标为24位图像加上8位alpha通道。使图标边缘非常平滑,且与背景相融合。
每个WindowsXP图标应包含以下三种色彩深度,以支持不同的显示器显示设置:
24位图像加上8位alpha通道(32位)
8位图像(256色),加上1位透明色
4位图像(16色),加上1位透明色
调色板
图标中使用的主要颜色。
对象的角度和分组
WindowsXP样式图标使用的透视网格:并非所有对象使用16?6的复杂图像都能获得较好效果。某些对象通常以直观图像显示:文档图标、符号图标(如警告或信息图标)、单一对象图标(如放大镜)
除非创建重叠辅助对象可以更清楚地表达图标的含义,否则就可读性和完整性而言,还是应使用直观图像。还应考虑如何按组查看图标,以便确定如何将对象分组。
投影
使用投影后,WindowsXP图标将更清晰且更具立体感。可在Photoshop中实现这种效果,本指南的后面部分将对此进行描述。若要为图像添加投影,请在 Photoshop中双击图像的图层,并选择Drop Shadow。然后将Angle更改为135,Distance更改为 2,Size更改为2。此时投影为75%不透明黑色。
轮廓
绘制XP样式图标时,为图像添加轮廓可使之更清晰,并可保证图像在不同背景色上都具有较好效果。
概念
设计图标时,请考虑以下因素:
使用已有概念以确保真实表达了用户的想法。考虑图标在用户界面环境中以何种形式出现,以及如何作为图标集的一部分使用。考虑图形的
文化背景。避免在图标中使用字母、单词、手或脸。必须用图标表示人或用户时,请尽可能使其大众化。如果图标中的图像由多个对象组成,应考虑如何使图像尺寸更小。建议在图标中使用的对象不超过三个。对于 16?6的尺寸大小,还可考虑删除某些对象或简化图像使之更容易辨认。
透明工具
将Gif Movie Gear(GMG)打开一个对话框,其中显示您的图标。使用吸管工具单击图标的背景色。此颜色将更改为暗黄绿色(或在 GMG中选作
透明背景色的颜色)。重复所有4位和8位帧。若要保存图标,请选择 File->Save Icon As...。
创建工具栏
Windows工具栏图标除不使用投影之外,使用的样式与其它图标相同。由于工具栏图标非常小,建议您使用简单的图像。如果以直观方式显示
图像即可清晰地表达图标的含义,则不必使用其它复杂方式。
创建AVI
WindowsXP使用8位AVI。创建.avi文件的过程与创建图标的过程相同-在Photoshop中准备图像,然后将其拖动到GMG 中。请按以下指导创建8位图标。若要使用GMG保存AVI,请转至File->Export As->AVI file。创建.avi文件时,请考虑以下因素:使用品红(R255 G0 B255)作为背景透明色。在Photoshop中,重要的一点是不要出现杂散像素。请将填充能力设置为0,并确认未选中取消锯齿。
软件人机界面
UI即User Interface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得
有个性有品味,还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。
美丽的事物常常会让人无法抗拒。这就是为什么产品出色的外观设计对于电脑、汽车、日用品、家具、食品、服装等等几乎所有商品的销售与推广,都有着举足轻重的作用的原因。
同样的道理,对于软件公司来说,软件产品就是他们的商品,而软件界面就是他们产品的外观,界面的美观与否,直接关系到了软件产品的营销成败。
我们可以清楚地看到,微软公司对软件界面设计的重视。请回想一下您在第一次见到win2000时的情景,与nt4.0相比是否惊叹他界面的美观性与易用性?而您如果使用过xp系统,则会被其令人神奇的感官概念而震惊折服!金山公司的金山词霸就是国内软件成功的例子了,从金山词霸3.0到金山词霸2001 的变化堪称经典。着名的网页动画制作软件flash从3.0到4.0,仅仅修改了图标和窗体,立即大为增色…
现今世界上成功的软件公司都非常重视软件界面的美化设计工作,因为他们深刻地知道,在激烈的市场竞争中,仅仅有强大的功能是远远不够的,不足以战胜强劲的对手。我们可以相象一下,您在挑选手机的时候,如果有两款手机,性能相同,而第一款比第二款要美观很多,那么您将选择哪一款呢?当然是美观的那一款了。试想,您的客户,也会拿您和您竞争对手的软件做这样的比较的。
现在的软件企业都知道,广告和市场推销活动对市场营销的作用是多么的重要,并不遗余力地打广告、做活动、做推广。但我们知道,这些活动的最终目的,是为了让用户购买并使用软件产品,而用户最终使用的也是您的产品,那么为什么不在软件界面的美观性上多下些工夫呢?在诸如家用电器、汽车、电脑等成熟的市场中,用非常精美的广告去推广一种功能强大却丑陋无比的产品,是一种笑话。然而,这样的笑话在软件行业里却屡见不鲜。这也是像中国足球一样,中国软件业与国外相比较存在的一个很大的差距。
实践证明,各商家只要在产品美观设计方面很小投入,将会有很大产出。其投入产出比,要比在功能领先性开发上的投入大得多。
在用户把软件买回去后,他们和您企业的联系,或者说您企业形象在客户眼中的表现,很大一部分是通过您软件的界面来传达的,那么美观友好的用户界面对于宣传您的企业文化,对于给客户灌输您的企业理念,对于您企业的宣传运做都将是非常有益的。尤其如果您的公司做的是项目承包形式的业务,那么无论是在竞标的时候,还是在项目交付使用以后,美观的界面都会给您的客户以信心和良好的印象。
要成为一款有竞争力的软件,不光要有强大的功能,也需要有一个友好的界面设计。纵观当今的it行业,其软件界面设计的发展趋势大体上有如下几种技术:
1. 命令语言用户界面的发展。
根据其语言的特点,及人机交互的形式的分为
a. 形式语言
b. 自然语言。
c. 类自然语言。
2. 图形用户界面的广泛应用
图形用户界面和人机交互过程极大地依赖视觉和手动控制的参与,因此具有强烈的直接操作特点
3. 直接操纵用户界面技术的成熟。
用户最终关心的是他欲控制和操作的对象,他只关心任务语义,而不用过多为计算机语义和句法而分心。对于大量物理的、几何空间的以及形象的任务,直接操纵已表现出巨大的优越性。
4. 多媒体用户界面及多通道用户界面的发展大大丰富了计算机信息的表现形式。
5. 虚拟现实技术的应用
虚拟现实系统向用户提供身临其境(immerse)和多感觉通道(multi-sensory)体验,作为一种新型人机交互形式,虚拟现实技术比以前任何人机交互形式都有希望彻底实现和谐的、以“人为中心”的人机界面。
‘捌’ Android UI绘制之View绘制的工作原理
这是AndroidUI绘制流程分析的第二篇文章,主要分析界面中View是如何绘制到界面上的具体过程。
ViewRoot 对应于 ViewRootImpl 类,它是连接 WindowManager 和 DecorView 的纽带,View的三大流程均是通过 ViewRoot 来完成的。在 ActivityThread 中,当 Activity 对象被创建完毕后,会将 DecorView 添加到 Window 中,同时会创建 ViewRootImpl 对象,并将 ViewRootImpl 对象和 DecorView 建立关联。
measure 过程决定了 View 的宽/高, Measure 完成以后,可以通过 getMeasuredWidth 和 getMeasuredHeight 方法来获取 View 测量后的宽/高,在几乎所有的情况下,它等同于View的最终的宽/高,但是特殊情况除外。 Layout 过程决定了 View 的四个顶点的坐标和实际的宽/高,完成以后,可以通过 getTop、getBottom、getLeft 和 getRight 来拿到View的四个顶点的位置,可以通过 getWidth 和 getHeight 方法拿到View的最终宽/高。 Draw 过程决定了 View 的显示,只有 draw 方法完成后 View 的内容才能呈现在屏幕上。
DecorView 作为顶级 View ,一般情况下,它内部会包含一个竖直方向的 LinearLayout ,在这个 LinearLayout 里面有上下两个部分,上面是标题栏,下面是内容栏。在Activity中,我们通过 setContentView 所设置的布局文件其实就是被加到内容栏中的,而内容栏id为 content 。可以通过下面方法得到 content:ViewGroup content = findViewById(R.android.id.content) 。通过 content.getChildAt(0) 可以得到设置的 view 。 DecorView 其实是一个 FrameLayout , View 层的事件都先经过 DecorView ,然后才传递给我们的 View 。
MeasureSpec 代表一个32位的int值,高2位代表 SpecMode ,低30位代表 SpecSize , SpecMode 是指测量模式,而 SpecSize 是指在某种测量模式下的规格大小。
SpecMode 有三类,如下所示:
UNSPECIFIED
EXACTLY
AT_MOST
LayoutParams需要和父容器一起才能决定View的MeasureSpec,从而进一步决定View的宽/高。
对于顶级View,即DecorView和普通View来说,MeasureSpec的转换过程略有不同。对于DecorView,其MeasureSpec由窗口的尺寸和其自身的LayoutParams共同确定;
对于普通View,其MeasureSpec由父容器的MeasureSpec和自身的Layoutparams共同决定;
MeasureSpec一旦确定,onMeasure就可以确定View的测量宽/高。
小结一下
当子 View 的宽高采用 wrap_content 时,不管父容器的模式是精确模式还是最大模式,子 View 的模式总是最大模式+父容器的剩余空间。
View 的工作流程主要是指 measure 、 layout 、 draw 三大流程,即测量、布局、绘制。其中 measure 确定 View 的测量宽/高, layout 确定 view 的最终宽/高和四个顶点的位置,而 draw 则将 View 绘制在屏幕上。
measure 过程要分情况,如果只是一个原始的 view ,则通过 measure 方法就完成了其测量过程,如果是一个 ViewGroup ,除了完成自己的测量过程外,还会遍历调用所有子元素的 measure 方法,各个子元素再递归去执行这个流程。
如果是一个原始的 View,那么通过 measure 方法就完成了测量过程,在 measure 方法中会去调用 View 的 onMeasure 方法,View 类里面定义了 onMeasure 方法的默认实现:
先看一下 getSuggestedMinimumWidth 和 getSuggestedMinimumHeight 方法的源码:
可以看到, getMinimumWidth 方法获取的是 Drawable 的原始宽度。如果存在原始宽度(即满足 intrinsicWidth > 0),那么直接返回原始宽度即可;如果不存在原始宽度(即不满足 intrinsicWidth > 0),那么就返回 0。
接着看最重要的 getDefaultSize 方法:
如果 specMode 为 MeasureSpec.UNSPECIFIED 即未指定模式,那么返回由方法参数传递过来的尺寸作为 View 的测量宽度和高度;
如果 specMode 不是 MeasureSpec.UNSPECIFIED 即是最大模式或者精确模式,那么返回从 measureSpec 中取出的 specSize 作为 View 测量后的宽度和高度。
看一下刚才的表格:
当 specMode 为 EXACTLY 或者 AT_MOST 时,View 的布局参数为 wrap_content 或者 match_parent 时,给 View 的 specSize 都是 parentSize 。这会比建议的最小宽高要大。这是不符合我们的预期的。因为我们给 View 设置 wrap_content 是希望View的大小刚好可以包裹它的内容。
因此:
如果是一个 ViewGroup,除了完成自己的 measure 过程以外,还会遍历去调用所有子元素的 measure 方法,各个子元素再递归去执行 measure 过程。
ViewGroup 并没有重写 View 的 onMeasure 方法,但是它提供了 measureChildren、measureChild、measureChildWithMargins 这几个方法专门用于测量子元素。
如果是 View 的话,那么在它的 layout 方法中就确定了自身的位置(具体来说是通过 setFrame 方法来设定 View 的四个顶点的位置,即初始化 mLeft , mRight , mTop , mBottom 这四个值), layout 过程就结束了。
如果是 ViewGroup 的话,那么在它的 layout 方法中只是确定了 ViewGroup 自身的位置,要确定子元素的位置,就需要重写 onLayout 方法;在 onLayout 方法中,会调用子元素的 layout 方法,子元素在它的 layout 方法中确定自己的位置,这样一层一层地传递下去完成整个 View 树的 layout 过程。
layout 方法的作用是确定 View 本身的位置,即设定 View 的四个顶点的位置,这样就确定了 View 在父容器中的位置;
onLayout 方法的作用是父容器确定子元素的位置,这个方法在 View 中是空实现,因为 View 没有子元素了,在 ViewGroup 中则进行抽象化,它的子类必须实现这个方法。
1.绘制背景( background.draw(canvas); );
2.绘制自己( onDraw );
3.绘制 children( dispatchDraw(canvas) );
4.绘制装饰( onDrawScrollBars )。
dispatchDraw 方法的调用是在 onDraw 方法之后,也就是说,总是先绘制自己再绘制子 View 。
对于 View 类来说, dispatchDraw 方法是空实现的,对于 ViewGroup 类来说, dispatchDraw 方法是有具体实现的。
通过 dispatchDraw 来传递的。 dispatchDraw 会遍历调用子元素的 draw 方法,如此 draw 事件就一层一层传递了下去。dispatchDraw 在 View 类中是空实现的,在 ViewGroup 类中是真正实现的。
如果一个 View 不需要绘制任何内容,那么就设置这个标记为 true,系统会进行进一步的优化。
当创建的自定义控件继承于 ViewGroup 并且不具备绘制功能时,就可以开启这个标记,便于系统进行后续的优化;当明确知道一个 ViewGroup 需要通过 onDraw 绘制内容时,需要关闭这个标记。
参考:《Android开发艺术探索》