谷歌手机平台Android开发的ui。
成都创新互联是一家业务范围包括IDC托管业务,网页空间、主机租用、主机托管,四川、重庆、广东电信服务器租用,服务器机柜租赁,成都网通服务器托管,成都服务器租用,业务范围遍及中国大陆、港澳台以及欧美等多个国家及地区的互联网数据服务公司。
UI及用户界面,就是所有你能看到的界面
activity 显示界面(就是UI)(显示的界面都是继承activity完成的)
service 服务(UI的后台)(后台运行的,可以理解为没有界面的activity)
Broadcast Receiver 广播(做广播,通知时候用到)
Content Provider 数据通信(数据之间通信,同个程序间数据,或者是不同程序间通信)
Android 的UI 可以分为两类,一类叫做ViewGroup容器,一类叫做View视图
View视图:(TextView,Button,ImageView)都是常用常见的视图.
ViewGroup容器:内部可以承载、放置、添加View视图
线性布局就是 从左到右 或 从上到下 按 顺序排列 的一种布局。下面讲一讲LinearLayout的基础属性。
相对布局在摆放子视图位置时,按照 指定的参考系 来摆放子视图的位置, 默认以屏幕左上角(0,0)位置 作为 参考系 摆放位置
使用layout_below使得后面一个组件位于前面一个组件的下方
配合layout_toRightOf使得后面一个组件位于前面一个组件的右方
组件的默认位置都是左上角,组件之间可以重叠。像千层饼一样,一层压着一层 可以设置上下左右的对齐、水平垂直居中、设置方式与线性布局相似
参考: 2021Android从零入门到实战(Kotlin版)
Android 资源类型
1.字符串资源
1.普通字符串
2.字符串数组
复制代码
resources
string-array name="planets_array"
itemaaa/item
itembbb/item
/string-array
/resources
复制代码
获取方式:getResources().getStringArray(R.array.planets_array)
3.复数字符串资源
某些自然语言中,不同的数字在使用方法上会有所不同,比如one book,two books。当数量大于1时,会使用不同的名词或其它复数形式;
复制代码
resources
plurals name="numberOfp"
item quantity="one"one person/item
item quantity="other"more persons/item
/plurals
/resources
复制代码
quantity属性的值除了one和other外,还可以是zero,two,few,many;
引用复数字符串:
// 引用数字为1的复数字符串
getResources().getQuantityString(R.pluarlas.numberOfp,1);
// 引用数字为其它值的复数字符串
getResources().getQuantityString(R.pluarlas.numberOfp,10,10);
4.占位符格式化字符串
常用的格式化字符串三种方法:
1.在字符串中使用引号
字符串中的值虽然可以随意指定,但是当遇到特殊符号时(双引号,单引号)就需要采取特殊的方法来处理这些符号。
如果是单引号(')可以使用转义符(\)或用双引号(")将整个字符串括起来,如果是双引号,可以在双引号前使用转义符(\)。
resources
string name="str1""This'll work"/string This'll work
string name="str2"This\'ll work/string This'll work
string name="str3"\"apple\"/string "apple"
/resources
2.用占位符格式化字符串
使用String.format(String,Object...)方法可以格式化带占位符的字符串,只需要在字符串中插入占位符,就可以使用String.format方法格式化字符串资源,format方法要求的占位符用%1,%,...,%n,其实第n个占位符与format方法的n+1个参数值对应;
resources
!-- $s表示该占位符被字符串替换,$d表示该占位符被整数替换 --
string name="str1"hello,%1$s!You have %2$d new message/string
/resources
String str1 =String.format(getResources().getString(R.string.str1), "ly", 17);
3.使用HTML标签格式化字符串资源
字符串资源支持一些HTML标签,因此可以直接在字符串资源中使用这些HTML标签格式化字符串
字符串资源支持如下的HTML标签
b粗体字
i斜体定
u带下划线的字
有时需要同时使用HTML标签和占位符格式化字符串,如果使用String.format方法格式化字符串,会忽略字符串中的所有HTML标签。为了使format方法可以格式化带
HTML标签的确字符,需要使用Html.formHTML方法处理字符串;
resources
string name="hello_world"Welcome to bandroid/b/string
string name="str2"Hello,%1$s! You have b %2d new messages /b/string !--同时包含占位符和html标签的字符串--
/resources
由于需要使用Html.formHTML方法处理字符串,因此HTML标签中的 "" 需要使用 "" 表示 "" 并不需要处理
获取字符串:
String text = String.format(getResources().getString(R.string.str2), "ly", 10);
CharSequence styledText = Html.fromHtml(text);
// 如果format的某个参数包含HTML的特殊字符,如"","",可以使用如下方式读取字符串的值;
String escapedUsername = TextUtils.htmlEncode("");
String text1 = String.format(getResources().getString(R.string.str2), "ly", 20);
2.Layout资源
1、如果根节点是View,除了requestFocus标签外,不能添加任何子标签,requestFocus可能被添加到布局文件的任何View中,表示该标签对应的控件在显示时处于焦点状态,整个布局文件只能有一个requestFocus标签
2、根节点是ViewGroup,常用的布局都是ViewGroup的子类
3、重用布局文件
如果想重用某个布局文件,可以使用include标签
include layout="@layout/xx_layout" /
如果想让一个布局文件被另一个布局文件引用(使用include标签),可以使用merge作为被引用布局文件的根节点,由于merge并不会生成任何标签(在大量引用布局文件时不至于生成大量无用的标签),但是xml文件必须要有一个根节点,因此merge所起的作用就是作为xml文件的根节点,以使xml文件在编译时不至于出错,可以把merge当成FrameLayout使用;
3.图像资源
在图像资源中可以存储图像文件,还可以使用xml格式的图像资源来控件图像的状态和行为;
1.普通图像资源
Drawable da = getResources().getDrawable(R.drawable.xxx);
2.xml图像资源
xml图像资源其实就是在drawable目录中指定的xml文件,此种方式可以额外指定图像的某些属性,如图像拉动、排列方式;
bitmap xmlns:android=""
android:src="@drawable/ic_launcher"
android:tileMode="repeat"
/bitmap
3.Nine-Patch图像资源
Nine-Patch图像资源文件必须以9.png作为文件扩展名,如abc.9.png
该图像资源的主要作用是:防止图像的某一部分被拉伸;确定将图像作为背景图的控件中内容显示的位置;
Android SDK本身提供了一个Draw 9-patch的工具,启动sdk目录\tools\draw9patch.bat命令启动该工具;
可以通过此工具在png图的四周绘制1个像素粗的直线,上边缘和左边缘的直线分别表示图像在水平和垂直方向可位值的范围。如果水平或垂直方向的某个区域不需要拉伸,则可不绘制相应的直线;右边缘和下边缘的直线分别表示图像所在控件中内容的显示范围,内容只在右边缘和下边缘绘制直线的区域显示,表示内容显示范围和拉伸范围的两给直线有一个重要区别就是表示内容显示范围的直线中间不能断开,而表示拉伸范围的直线中间可以断开;
Nine-Patch图像资源与普通图像资源引用方法相同,在引用时只写文件名,活力.9.png;
4.XML Nine-Patch图像资源
Nine-Patch图像资源也有与其对应的xml图像资源,使用nine-patch标签来引用Nine-Patch格式的图像,有一个设置抖动的android:dither属性;
5.图层资源
图层资源类似于FrameLayout不同的是FrameLayout标签中可以包含任意的控件,而图层资源每一层都只有是图像,定义图层资源必须使用layer-list作为资源文件的根节点,layer-list标签中包含多个item标签,每一个标签表示一个图像,最后一个item标签显示在最顶层;
默认情况下,图像会尽量充满显示图像的范围,图像可能会有拉伸,为了避免图像拉伸,可以在item标签中使用bitmap标签引用图像;
复制代码
layer-list xmlns:android=""
item
android:bottom="10dip" 底端偏移的像素
android:left="10dip" 左侧偏移的像素
android:right="10dip" ...
android:top="10dip" ...
bitmap
android:gravity="center"
android:src="@drawable/hell" /
/item
/layer-list
复制代码
某些情况下,可以使用图层来代替FrameLayout
6.图像状态资源,处理控件不同状态下的显示状态
复制代码
selector xmlns:android=""
item android:drawable="@drawable/bm" android:state_focused="true"/item
item android:drawable="@drawable/bm" android:state_pressed="true"/item
item android:drawable="@drawable/bm"/item
/selector
// android:state_focused/pressed设置为true表示当前item的drawable属性为获取焦点和按下时的drawable样式
复制代码
7.图像级别(Level)资源
图像资源状态只能指定几种有限的状态,可以通过图像级别指定更多的状态;图像级别是一个整数的区间,可以通过ImageView.setImageLevel或Drawable.setLevel方法切换不同状态的图像;图像级别资源是xml文件,必须以level-list为根节点,每一个item表示一个级别区间,下面是一个xml文件;通过ImageView.setImageLevel(level),根据level所在的区间设定显示的图像资源,如果level不在任一区间内则清空ImageView当前图像;
level-list xmlns:android=""
item android:maxLevel="2" android:minLevel="0" android:drawable="@drawable/hell" /
item android:maxLevel="4" android:minLevel="3" android:drawable="@drawable/hell" /
/level-list
8.淡入淡出(Cross-fade)资源
也是切换两个图像(不支持多于两个图像的切换),并且使这两个图像以淡入淡出效果进行切换,如电灯在开关时逐渐变亮或逐渐变暗;
transition xmlns:android=""
item android:drawable="@drawable/hell"/
item android:drawable="@drawable/hell"/
/transition
TransitionDrawable da = ...;
// 从第一张图片切换到第二张图片,时间效果为1秒
da.startTransition(1000);
// 从第二张图片切换到第一张图片,时间效果为1秒
da.reverseTransition(1000);
9.嵌入(insert)图像资源
使用场景:要显示的图像要求要小于装载图像的View(图小于View区域),也是通过xml资源定义,只有一个节点inset。
inset xmlns:android=""
android:drawable="@drawable/hell"
android:insetLeft="10dip" !--图像距离左边的距离,延伸--上/下/右的距离--
/inset
10.剪切(Clip)图像资源,使用剪切图像资源可以只显示图像的一部分,如可以通过此来制作进度条;
clip xmlns:android=""
android:clipOrientation="horizontal" // 指定截取的方向
android:drawable="@drawable/hell" // 指定要截取的图像
android:gravity="left" // 指定截取的方式,在此为从左侧开始截取
/clip
ClipDrawable cd = ...;
cd.setLevel(1000);
上面ClipDrawable.setLevel(level)设置截取的图像宽度,ClipDrawable预设了最大值10000(表示不进行截取),最小值为0(表示不显示);
11. 比例(Scale)图像资源
scale xmlns:android=""
android:drawable="@drawable/hell"
android:scaleGravity="center" // 设置图像显示的位置
android:scaleHeight="70%" // 设置图像显示的高度
android:scaleWidth="80%" // 设置图像显示的宽度
/scale
12.形状资源
复制代码
shape xmlns:android=""
android:shape="rectangle" shape可以指定就矩形,oval(椭圆),line(直线),ring(圆)
corners 定义圆角
/corners
gradient
android:angle="45"
android:startColor="#000000"
android:endColor="#FFFFFF" 定义颜色渐变,从左下角到或上角
/gradient
padding 定义控件内容到边框的距离
/padding
stroke 定义边线
/stroke
solid 定义填充
/solid
size 定义大小
/size
/shape
复制代码
13.菜单资源
菜单不仅可以在onCreateContextMenu或onCreateOptionsMenu方法中通过代码创建,还可以在res/menu目录中建立相应的菜单资源文件,并在上面两个方法中加载菜单资源;
菜单资源文件必须以menu标签作为根节点,每一个菜单项用一个item表示,如果要定义子菜单,可以在item标签中包含menu标签;如果想将多个菜单项划为一组,可以使用group包含多个item标签;
复制代码
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.main, menu);
return true;
}
复制代码
查看MenuInflater.inflate(int,Menu)
复制代码
/**
* Inflate a menu hierarchy from the specified XML resource.
*
* @param menuRes Resource ID for an XML layout resource to load (e.g., codeR.menu.main_activity/code)
* @param menu The Menu to inflate into. The items and submenus will be added to this Menu.
*/
public void inflate(int menuRes, Menu menu) {
XmlResourceParser parser = null;
try {
parser = mContext.getResources().getLayout(menuRes);
AttributeSet attrs = Xml.asAttributeSet(parser);
parseMenu(parser, attrs, menu);
} catch ...finally {
if (parser != null) parser.close();
}
}
复制代码
14.样式与主题(style/theme)
1.样式style
android中样式和css中样式作用是一样的,都是用于为界面元素定义显示风格,它是一个包含一个或者多个控件属性的集合。
定义样式需要在res/values/styles.xml中进行定义,如下是一个样式的定义:
style name="textViewStyle"
item name="android:textSize"22sp/item
item name="android:textColor"#FF0000/item
/style
style name="textViewStyle1" parent="textViewStyle"/style!-- 此样式继承自textViewStyle --
style name="textViewStyle.Livingstone"!-- 样式继承的另一种写法,但不可用此写法继承Android自带的定义样式? --
item name="android:textColor"#00FF00/item
/style
所有定义的样式都会在R文件中自动生成一个资源ID,加一个点表示样式继承会生成上图所示的资源id;
样式的引用:
TextView
style="@style/textViewStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="hello" /
2.主题Theme
主题应用于整个应用或者activity,样式应用于具体的控件上。主题的应用与样式定义一样,不同的是主题还可以设置窗口的显示风格;主题的引用需要在清单文件中进行引用,如引用到整个应用之上就需要在Application节点中进行配置引用,而引用到单个Activity只需要在此Activity中进行配置引用;
复制代码
style name="Livingstonetheme"!--此定义是一个无Title的主题--
item name="android:windowNoTitle"true/item
item name="android:windowFullscreen"?android:windowNoTitle/item
!-- 问号表示引用此主题中android:windowNoTitle属性的值 --
item name="android:textSize"18sp/item
/style
复制代码
android系统定义了一些属性,如android:theme="@android:style/Theme.Dialog",该主题可以让Activity看起来像一个对话框,更多主题可以在文档reference-android-R.style中查看。当主题里面的样式属性值与样式里面的属性值发生冲突的时候会显示样式里面的值;
15.其它资源
在资源文件中还可以包括尺寸(dimen)、整数(integer)、布尔(bool) 、整形数组资源(integer-array)、资源数组(array)、颜色(color)
TypedArray ta = getResources().obtainTypedArray(int id); // 获取数组资源,包括integer-array、array
Final总结:
除了res/values目录中的资源名,其它目录的资源都会以文件名在R类的相应子类中生成变量;而res/values中的资源会以name属性值为变量名在R类的相应子类中生成变量;
移动端的App界面,不论是iOS还是Android ,一般都由四个元素组成,分别是:状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。
状态栏:主要用于显示信号、运营商、电量等手机状态的区域;
导航栏:主要显示当前界面的名称,包含相应的功能或者页面间的跳转按钮;
主菜单栏:类似于页面的主菜单,提供整个应用的分类内容的快速跳转;
内容区域:展示应用提供的相应内容;
需要注意的一点就是,由于Android在4.0之后移除了实体键而使用屏幕下方的虚拟键,所以,Android将iOS中的主菜单从下方移动到了上方,从而避免误操作虚拟键。
说到这里,就不得不说,虽然android和iOS都是移动端的操作系统,但是他们在UI设计还是存在很大的差异性。这是为什么呢? 其实这基本上都是因为iOS的闭源导致的,由于它的商业化,导致很多设计被申请了专利,Android在很多地方都必须有所不同,说的最多的就是iOS的弹性滚动,其实Android的ScrollView要实现这样的效果,只需要修改一个参数的值即可,但是由于这个效果iOS申请的专利,所以Android就无法使用了。
从事UI设计行业的朋友都知道,每一张设计稿都是有规范尺寸的,并且IOS的和Android还不同,IOS UI设计规范为375*667 1x的尺寸,那么Android UI规范是什么呢,下面让我们一起来了解一下。
01
在做Android UI设计的时候,画布的尺寸我们一般都是选择360*640 1x,也就是说是选择720*1280这个尺寸。
02
我们从上到下来进行了解,最上边的是状态栏,状态栏的高度是25。
03
在状态栏中肯定就是信号、电源以及时间这些了,每个Android定制系统的摆放样式都不同,这一点不用纠结。
04
状态栏下边就是导航栏了,导航栏起到的是导航作用,高度是45px。
05
导航栏中间一般都是有文字来起到提醒作用的,导航文字的大小一般都是18px。
06
在最下方就是我们的标签栏了,标签栏的作用就是给用户提供切换界面的作用,标签栏的高度为50px。
07
在标签栏中摆放的肯定就是我们的ICON图标了,要注意,图标的切图点击区域不能够小于24px。
08
一些ICON图标的下方还会有文本,这里文本的大小一般就是10或者是11px了,因为范围有限。
特别提示
本文尺寸均为1x。