作者:Attect阅读:2401
发布/修定:2016-10-07 21:59/2018-03-29 19:20
本文内容禁止转载、引用!如有需要,请使用本页网址

安卓界面设计基础3

本节教程将根据前两节的内容进行实际界面设计书写演示(使用xml进行描述)

本节内容主要为视觉画面,在视频中看到效果,不适合文字描述。
本文附带简单安卓界面属性参考(不包含布局方式部分)

五花肉:这一篇内容请一定根据自己所处阶段进行选择性观看,一些内容可在经过之后的学习后反复查看。

一、Google官方资料(高阶,新手请跳过)

美工设计:如何使用material design风格设计界面

英文(国外):https://developer.android.com/design/index.html
五花肉:这个风格即为目前安卓应用主流风格,moeapk也是如此设计的

面向对象的程序思想:用户界面布局对象层次结构

针对掌握面向对象编程思想的人群

中文(国外):https://developer.android.com/guide/topics/ui/overview.html
五花肉:谷歌官方文档的描述非常准确和切中要害(无论中英),并不适合初心者阅读,可留待以后慢慢消化

常用界面控件预览

此处Google翻译出来的"控件”指的就是“视图"(View)

中文(国外)https://developer.android.com/guide/topics/ui/controls.html

二、将图片放入项目中

支持的常用格式:png与jpg

推荐使用png,虽然体积会比jpg大,但是图片质量和加载速度都比png更高,更重要的是png支持透明。

注意:图片尺寸不宜过大,以同时载入三张720P就会因为内存不足导致程序崩溃为基准。

五花肉:图像大小应考虑移动设备屏幕大小,比如你放个中国地图上去,缩小了基本就看不清了

在资源管理器中找到drawable文件夹

在左侧项目管理中,右键drawable文件夹,选择Show in file manager,就会自动打开文件管理器的窗口,可以看到drawable文件夹,将图片放在里面。
五花肉:此处初心者最好使用复制操作,不要剪切

文件名要求

只能使用小写英文字母+数字+下划线+1个小数点(英文句号)组成
其中不能以数字开头
五花肉:英文符号很重要

重命名文件的方法

在左侧项目管理中,右键要修改名称的文件,鼠标指向Refacter,选择第一项Rename,输入名称后点击Refacter完成。
或者
在左侧项目管理中,选中要修改名称的文件,按下Shift + F6,输入名称后点击Refacter完成。
五花肉:作为一个键盘不熟悉的人,初心者我只推荐按照视频里鼠标操作,快捷键需要专门练习以免误操作

三、视频中最后完成的代码

五花肉:还记得固有格式吗?

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="test.myapplication.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="萌萌安卓\n  MoeApk"
        android:textColor="#d2cda4"
        android:textSize="40sp" />

    <ImageView
        android:layout_width="240dp"
        android:layout_height="320dp"
        android:layout_alignParentBottom="true"
        android:src="@drawable/image_a" />

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="40dp"
        android:layout_marginRight="40dp"
        android:src="@drawable/image_c" />

    <ImageView
        android:layout_width="260dp"
        android:layout_height="180dp"
        android:src="@drawable/image_b"
        android:layout_alignParentRight="true"
        />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/image_9"
        android:layout_centerInParent="true"
        />
</RelativeLayout>

五花肉:可以试着去“翻译”一下代码

参考释义

直接使用Google或百度搜索黑色部分名称可得到更多信息。

常见视图

TextView:文本视图
ImageView:图片视图
Button:按钮
CheckBox:可选框
ProgressBar:进度条
EditText:文本输入框
WebView:内嵌网页视图
VideoView:视频视图

常见属性

通用属性


android:id:实体id,每个xml文件中所有东西的id都不能重复。作用是用于给视图或布局命名。格式为

@+id/名称
名称只能以数字和字母以及下划线组成

五花肉:就像大家都有名字一样。

android:layout_width:定义宽度,可以填写以下几种类型:

  1. 数字0,表示没有宽度。需要特殊的预加载但是又不希望用户提前看到它时可以设置为0

  2. dp值,例如240dp。具体长度。

  3. wrap_content,这个布局或视图的内容有多宽,自身就有多宽。

  4. fill_parent或match_parent,填满父层宽度。两种写法效果完全相同,但fill_parent会被开发环境显示为 fill parent ,这是因为这是弃用的写法。如果你的程序不需要在安卓2.2以前的版本运行,那么需要填满父层时,填写match_parent,如果需要兼容十分古董的设备(2010年以前的),那么需要写fill_parent。

五花肉:建议放弃对古董设备的完全支持...
android:layout_height:定义高度,与上方相同。


android:layout_margin:上下左右外边距大小,单位为dp。如果需要不同方向不同边距,使用下面四种方法。

外边距:自身边界与其它东西的距离
外边距的单位都为dp,也可谓无单位的0。(以及引用值,以后会讲)
外边距具体效果,会在下一节内容讲解。

android:layout_marginTop:上外边距大小
android:layout_marginBottom:下外边距大小
android:layout_marginLeft:左外边距大小
android:layout_marginRight:右外边距大小


android:padding:上下左右内边距大小,单位为dp。如果需要不同方向不同边距,使用下面四种方法。

内边距:内部的东西与自身边界的距离
内边距的单位都为dp,也可谓无单位的0。(以及引用值,以后会讲)
内边距具体效果,会在下一节内容讲解。

android:paddingTop:上内边距大小
android:paddingBottom:下内边距大小
android:paddingLeft:左内边距大小
android:paddingRight:右内边距大小
五花肉:dp是一个神奇的单位,不用担心不同手机显示效果有较大差异


android:background:视图内部背景(包含内边距部分,但不包含外边距部分),可以为以下几种

图片
颜色
xml定义的效果(未来会讲,例如渐变颜色)


android:visibility:是否可见。有以下三种值

visible:可见
invisible:隐藏,但依然占据着位置
gone:隐藏,但不占据位置

android:alpha:透明度。可以实现半透明效果,数值为小数,范围从0到1.0之间。0为完全透明,0.5为半透明,1.0为完全不透明。

android:gravity:视图内容靠的方向,对布局无效,例如TextView中的文字居左、居中、居右效果。常用值

start;靠起始位置
end:靠结束位置
left:靠左
center:居中
right:靠右
top:靠顶
bottom:靠底
注意,可以组合填写,例如顶部居中:top|center
组合时使用|符分割。|符号通常位于退格键附近。
宽高都是wrap_content时可能此属性没有意义。


android:rotation:旋转度数。填写整数或小数。小于0时方向相反。
android:scaleX:水平方向(横向)缩放。填写整数或小数。

大于1时:水平放大
等于1时:原始尺寸
小于1大于0时:水平缩小。
0时无效果
小于0大于-1时:水平翻转并水平缩小
等于-1时:水平翻转
大于-1时:水平翻转并水平放大


实际计算公式:
已知X轴正方向向右
设视图/布局原始左边界位置为a
视图/布局原始右边界位置为b
填写的缩放值为c
缩放后a和b的位置A和B为
A = (a+b)÷2+(b-a)÷2×c
B = (a+b)÷2-(b-a)÷2×c

android:scaleY:垂直方向(竖向)缩放。填写整数或小数。

大于1时:垂直放大
等于1时:原始尺寸
小于1大于0时:垂直缩小。
0时无效果
小于0大于-1时:垂直翻转并垂直缩小
等于-1时:垂直翻转
大于-1时:垂直翻转并垂直放大


实际计算公式:
已知Y轴正方向向下
设视图/布局原始下边界位置为a
视图/布局原始上边界位置为b
填写的缩放值为c
缩放后a和b的位置A和B为
A = (a+b)÷2+(b-a)÷2×c
B = (a+b)÷2-(b-a)÷2×c


针对带文字的视图(控件)属性

主要为TextView、Button之类的

android:text:文字内容。换行用\n表示。(高阶:开发环境可能会提示你用string资源引用的方式,主要是为了支持多种语言考虑)

android:textColor:颜色值。可直接为十六进制的ARGB值或RGB值(往下看如何得到十六进制颜色)。也可为颜色资源引用。

android:textSize:字体大小。单位为sp,具体往下看字体大小单位

android:lines:非负整数。固定显示行数。

android:minLines:非负整数。至少显示的行数。

android:maxLines:非负整数。最多显示的行数。


针对带图片的视图(控件)属性

主要为ImageView

android:src:图像来源。可为文件,或定义的效果,以及其它可绘制的东西。

较大的图片可能导致界面初始化时间过长或者卡顿。

android:scaleType:图像在这个视图种的缩放策略。有以下几种值

以下效果最好实践中尝试
center:按照原始像素绘制在屏幕上,位置位于视图的中心。如果大小超过了视图,那么超出部分会被裁掉。
centerCrop:按图像原始比例放大图像,用于图像比视图小时,位置位于视图的中心。使图像的宽等于视图的宽,或图像的高等于视图的高。
centerInside:按图像原始比例缩小图像,用于图像比视图大时,位置位于视图的中心。使图像的宽等于视图的宽,或图像的高等于视图的高。
fitCenter:按图像原始比例放大或缩小图像,用于不确定图像是否在大于或小于视图大小(不同屏幕上像素的密度不一样),位置位于视图的中心。使图像的宽等于视图的宽,或图像的高等于视图的高。
fitStart:按图像原始比例放大或缩小图像,用于不确定图像是否在大于或小于视图大小,位置位于视图的起始(靠左上角)。使图像的宽等于视图的宽,或图像的高等于视图的高。
fitStart:按图像原始比例放大或缩小图像,用于不确定图像是否在大于或小于视图大小,位置位于视图的结束(靠右下角)。使图像的宽等于视图的宽,或图像的高等于视图的高。
fitXY:不按比例放大或缩小图像,使其填满整个视图
matrix:使用矩阵确定缩放规则

字体大小单位

sp
例如:14sp
使用此单位可以保证在不同的移动设备上,无论屏幕尺寸和像素(密度)如何,字的实际看到的大小都保持一致

长度/距离单位

dp
例如:240dp
使用此单位可以保证在不同的移动设备上,无论屏幕尺寸和像素(密度)如何,定义的长度都保持一致(可以用尺子在不同的屏幕上量一量)

颜色的十六进制表示方式

计算机编程中通常用十六进制来表示颜色
我们不深究,它的样子大概是:#0099ff 或 #6f1a2453 这样的
在安卓界面设计中,如果属性是颜色值,那么只需要设置为#000 ,然后在这行的左边会出现一个黑块,双击它就可以选择颜色。

如果真要了解它的格式,以下便是
A:透明度,范围:(十进制)0 ~ 255,(十六进制)0 ~ FF,最大为不透明
R:红色。范围:(十进制)0 ~ 255,(十六进制)0 ~ FF
G:绿色。范围:(十进制)0 ~ 255,(十六进制)0 ~ FF
B:蓝色。范围:(十进制)0 ~ 255,(十六进制)0 ~ FF
如果#号后面有八个字符,格式为ARGB
如果#号后面如果只有六个字符,则为RGB,A则为最大的FF

五花肉:看到这里是不是已经头昏脑胀了?其实刚开始不用太过硬记,用到的时候来翻翻文档就好啦