【Android】UI基础六节详解

第一节(UI元素)

1.UI分类

android中所有用户可以看到的界面都是一个View视图,在UI界面上布置的所有元素都是View组件
View类是所有UI元素的父类

把View下的UI元素分为两大类:
第一类:普通UI组件元素:一般用户直接操作的元素
第二类:ViewGroup组件元素:可以包含其他View元素

2.常用UI元素

普通UI元素

(1)TextView系列
(2)ImageView系列
(3)ProgressBar系列
(4)其他

ViewGroup

(1)日期时间选择器
(2)布局组件
(3)高级组件
(4)其他

3.界面UI设计

(1)每个界面都只有一个根元素(一般是布局元素)
(2)从根节点元素开始,嵌套其他View,设计出UI界面
(3)每个UI元素在界面中都占据一个矩形区域

3.1 普通UI元素

(1)TextView系列:TextView这个UI元素,用来在界面上展示文本
(2)ImageView系列
(3)ProgressBar系列

3.2 日期时间选择器

3.3 所有View常用的属性

(1)layout_width:宽度

(2)layout_height:高度

宽度和高度一般给三种值:
a.match_parent:以父元素匹配大小
b.wrap_content:以包裹内容匹配大小
c.具体尺寸值,单位一般为dp

(3)background:背景
背景可以给两种值:颜色和图片

(4)外边距:layout_margin:当前元素和四周其他元素的距离,可以四周一起设置,也可以单独设置某一个方向的距离

a.layout_margin
b.layout_marginleft
c.layout_marginright
d.layout_margintop
e.layout_marginbottom
f.layout_marginhorizontal
g.layout_marginvertical

(5)内边距:padding:当前元素和内边包含内容(子元素)的距离:类同外边距
a.padding
b.paddingleft
c..
...

(6)id:view元素的ID值,唯一标识,一般这个整数ID值,不要自己生成,由系统自动生成,使用@+id/变量名(自定义)来定义id值,引用时候使用@变量名即可
android:id="@+id/XXXX"

3.4 关于尺寸值与颜色值

(1)尺寸值
a.字体大小一般使用sp
b.宽高及边距一般使用dp

(2)颜色值
使用24位二进制颜色值(6位16进制数值):黑色:#000000;白:#ffffff
使用32位二进制颜色值(8位16进制数值):前两位16进制代表透明度,后面与24位一样:黑色:#00000000


第二节(TextView系列的元素常用属性):

在xml文件中,用标签代表这个元素,在元素中设置属性

(1)text:设置文本
(2)textSize:文本字体大小
(3)textColor:文本字颜色
(4)gravity:默认左上,设置元素中的文本靠左,靠右,靠上,靠下,水平居中,数值居中
gravity可以有多个值,位或值:gravity="right | bottom"
(5)drawableTop drawableBottom drawableLeft drawableRight
这四个属性用来在TextView中文本的上下左右方设置一个小图标 
(6)drawablePadding
这个属性配合上边四个属性,设置四个方向图标和文本内容的距离
(7)lines控制TextView展示几行文本的高度(一般用于EditText)
a.lineHeight:行高
b.maxLines:最大行数
c.minLines:最小行数
(8)maxLength:显示的最大字符个数


第三节(TextView的子类):

(TextView的子类控件具有TextView所有特性和属性)

1.EditText:编辑框,用户通过编辑可以实现输入功能

EditText特有的属性:
(1)hint:设置编辑框中默认显示的提示信息(没有text时显示,有text时候隐藏)
(2)textColorHint:hint文字的颜色
(3)InputType:输入类型

设置用户输入的文本的类型:
a.text(默认,设备会弹出字母键盘)
b.textPassworkd(文本密码)
c.textXxx
d.date
e.time
f.dateTime
g.number(数字类型,设备会弹出数字键盘)
h.numberPassword
...

2.Button:类型TextView,有制式的textView,有按钮的样式效果和事件处理

(1)RadioButton:单选按钮:

一般是成组出现,选项互斥,一组内只能选择一个选项
注意:同一组的单选按钮需要放在RadioGroup这个ViewGroup中,才能互斥
RadioButton的属性
a.checked:true/false 设置单选按钮是否能选中(不建议使用)默认设置时,是可以多选的。
b.button:设置单选按钮的按钮图标
RadioGroup属性:
checkedButton:id值,通过id值选择默认选中的单选按钮

(2)CheckBox:复选按钮:可以多选

属性:
a.checked:true/false 多选中的默认选中
b.button

(3)ToggleButton:开关按钮

a.checked:true/false 默认选中
b.textOn:开的文字
c.textOff:关的文字

(4)Switch:开关选条(),高版本新出的按钮

a.checked:true/false 默认选中
b.textOn:开的文字
c.textOff:关的文字
d.showText:是否显示文字text
e.switchTextAppearance:文字显示,主题相关(Switch文字显示与textSize无关)
f.switchMinWidth
g.track:底部的背景
h.thumb:上边的滑块
i.thumbTextPadding:滑块上文字在开关状态之间的距离

3.Clock:时钟显示,只是显示不能走,需要单独设置刷新频率(每隔0.1ms更新)才能走

(1)TextClock,新版的时钟显示

(2)DigistClock,老版时钟显示:使用老版要注意修改最低支持的API版本,修改最小支持的SDK版本在build.gradle中minSdkVersin参数中修改支持版本

(3)AnalogClock,老版表盘时钟显示


第四节:

1.ImageView系列

图片View:主要用来展示图片
ImageView可以直接展示的图片是res资源包中的drawable资源或者mipmap资源。也就是需要把图片粘贴到res资源包中的drawable中

属性:
(1)src:引用drawable中的图片资源
(2)scaleType:缩放类型,ImageView控件的宽高和图片本身的宽高比匹配时,缩放模式
a.fitCenter:默认,会缩放,保证长边也要完全显示,短边居中
b.fitStart:会缩放,保证长边也要完全显示,短边靠起始边(左或者上)
c.fitEnd:会缩放,保证长边也要完全显示,短边靠终止边(右或者下)
d.fitXY:会缩放,直接完全填充,不等比例缩放,会抽象
e.center:不缩放,如果空间不够,直接只显示图片中间区域
f.centerCrop:会缩放,保证短边只要完全显示,长边显示中间区域
g.centerinside:会缩放,保证长边也要完全显示,短边居中

2.ImageButton

图片按钮,是ImageView的子类,就是一个可以显示图片的按钮


第五节:

1.ProgressBar系列

进度条

ProgressBar:ProgressBar进度条有两种展示模式:
(1)圆形进度条
(2)水平进度条:style=“@style/widget.AppCompat.ProgressBar.Horizontal”

属性

progress:当前进度值(默认0)
max:最大进度值(默认100)
min:最小进度值(默认0)
修改进度条的样式,我们在进行图片资源讲解时候进行说明

2.ProgressBar的子类

(1)SeekBar:拖动条:与ProgressBar相比,加了一个可以拖动进度的特点
(2)RatingBar:星级评分条
属性:
a.numStars:设置总星的个数
b.stepSize:步长,一次最少加几个星(可以小数)
c.rating:当前评分数(允许小数)
d.isIndicator:一旦评分了,用户就不能修改评分

第六节:

1.DatePicker

属性:
(1)startYear
(2)endYear
(3)datePickerMode:显示模式
a.calendar 日历模式(默认)
b.spinner (滚动选择模式)

2.TimePicker

属性:
timePickerMode
显示模式:
a.clock 始终模式(默认)默认当前系统时间,如需要更改,需要结合布局进行修改
b.spinner(滚动选择模式)

3.CalendarView:

只显示日历,与DatePicker区别是DatePicker既显示日历,日历上面又显示具体日期

4.第三方也封装了一些滚动选择器

(1)DatePickerView
(2)TimePickerView
(3)OptionsPickerView:选项由自己定义:就可以实现省市区或其他等样式的选择器

猜你喜欢

转载自blog.csdn.net/Luoxiaobaia/article/details/124714411
今日推荐