专栏首页分享达人秀Android用户界面开发概述

Android用户界面开发概述

相信通过前面15期的学习,Android的开发环境已经基本掌握了,如果仍有问题,欢迎到Android零基础入门技术讨论微信群交流,从本期开始正式来一步一步踏入Android开发之路。

Android应用开发的一项内容就是用户界面的开发。Android提供了非常丰富的用户界面组件,借助于这些用户界面组件,开发者可以非常方便地进行用户界面开发,而且可以开发出非常优秀的用户界面。

一、界面UI元素介绍

Android应用是运行于手机系统上的程序,这种程序给用户的第一印象就是用户界面。接下来从以下几个方面来认识了解Android的界面UI元素。

1.1视图组件View

在Android中View类是最基本的一个UI类,基本上所有的高级UI组件都是继承View类实现的。Android应用的绝大部分UI组件都放在android.widget包及其子包、android.view包及其子包中,可以看到Android应用的所有UI组件都继承了 View类。View类是Android系统平台上用户界面表示的基本单元,View的一些子类被统称为Widgets (工具),提供了诸如文本输入框和按钮之类的UI对象的完整实现。

一个视图(View)在屏幕上占据了一块矩形区域,它负责渲染这块矩形区域(如将这块矩形区域变成其他颜色),也可以处理这块矩形区域发生的事件(如用户单击事件),并且可以设置这块区域是否可见、是否可以获取焦点等。

1.2视图容器组件ViewGroup

View类有一个非常重要的子类ViewGroup,其为View的一个扩展,可以容纳多个 View,通过ViewGroup类可以创建有联系的子View组成的复合控件。

下图表示Android图形用户界面的组件层次。

从上图可以看出,多个视图组件(View)可以存放在一个视图容器(ViewGroup)中,该容器可以与其他视图组件共同存放在另一个容器中,但是一个界面文件中必须有且只有一个容器作为根结点。

Android的所有UI组件都是建立在View、ViewGroup基础之上的,Android采用了 “组合器”设计模式来设计View和ViewGroup。对于一个Android应用的图形用户界面来说,ViewGroup作为容器来盛装其他组件,而ViewGroup里除了可以包含普通View组件之外,还可以再次包含ViewGroup组件。

1.3布局组件Layout

Android的界面组件比较多,为了更好的管理用户界面里的各组件,Android提供了布局组件来进行管理。通过使用布局组件,Android应用的图形用户界面具有良好的平台无关性。

目前Android中主要有六种布局,分别如下:

LinearLayout(线性布局)

按照水平或垂直的顺序将子元素(可以是控件或布局)依次按照顺序排列,每一个元素都位于前面一个元素之后。

RelativeLayout(相对布局)

按照子元素之间的位置关系完成布局的,作为Android系统五大布局中最灵活也是最常用的一种布局方式,非常适合于一些比较复杂的界面设计。

TableLayout(表格布局)

以行和列的形式对控件进行管理,每一行为一个TableRow对象,或一个View控件。

FrameLayout(帧布局)

将所有的子元素放在整个界面的左上角,后面的子元素直接覆盖前面的子元素。

AbsoluteLayout(绝对布局)

将所有的子元素通过设置android:layout_x 和 android:layout_y属性,将子元素的坐标位置固定下来。

GridLayout(网格布局)

是Android 4.0新增的布局管理器,把整个容器划分成为"行*列"个网格,每个网格可以放置一个组件,另外,也可以设置一个组件横跨多个列和多个行。

以上几种布局类图如下图 所示:

关于布局组件的内容,会在后续课程进行详细学习,此处不做过多说明。

1.4布局参数LayoutParams

LayoutParams是用来设置视图布局的基类,基本的LayoutParams类只是用来描述视图的宽度和高度。

Android提供的布局类都是LayoutParams的子类,LayoutParams的子类主要有:

 AbsListView.LayoutParams

 AbsoluteLayout.LayoutParams

 FrameLayout.LayoutParams

 LinearLayout.LayoutParams

 RadioGroup.LayoutParams

 RelativeLayout.LayoutParams

 TableLayout.LayoutParams

 TableRow.LayoutParams

 ViewGroup.MarginLayoutParams

 WindowManager.LayoutParams

其中常用的是RelativeLayout.LayoutParams、LinearLayout.LayoutParams、ViewGroup.MarginLayoutParams。将会在后续内容中陆续学习,此处不在赘述。

二、UI界面通用属性和方法

View类是所有UI组件的基类,其包含的XML属性和方法是所有组件都可使用的,接下来一起先来整体学习,如下表所示。

XML属性

相关方法

使用说明

android:alpha

setAlpha(float)

设置该组件的透明度

android:background

setBackgroundResource(int)

设置该组件的背景颜色

android:clickable

setClickable(boolean)

设置该组件是否可以激发单击事件

android:contentDescription

setContentDescription(CharSequence)

设置该组件的内容描述信息

android:drawingCacheQuality

setDrawingCacheQuality(int)

设置该组件所使用的绘制缓存的质量

android:elevation

setElevation(float)

设置该组件“浮”起来的高度,通过设置该属性可让该组件呈现3D效果

android:fadeScrollbars

setScrollbarFadingEnabled(boolean)

当不使用该组件的滚动条时,是否淡出显示滚动条

android:fadingEdge

setVerticalFadingEdgeEnabled(boolean)

设置滚动该组件时组件边界是否使用淡出效果

android:fadingEdgeLength

getVerticalFadingEdgeLength()

设置淡出边界的长度

android:focusable

setFocusable(boolean)

设置该组件是否可以得到焦点

android:focusablelnTouchMode

setFocusablelnTouchMode(boolean)

设置该组件在触摸模式下是否可以得到焦点

android:id

setld(int)

设置该组件的唯一标识。在java代码中可通过findViewById来获取它

android:isScrollContainer

setScrollContainer(boolean)

设置该组件是否作为可滚动容器使用

android:keepScreenOn

setKeepScreenOn(boolean)

设置该组件是否会强制手机屏幕一直打开

android:longCIickable

setLongClickable(boolean)

设置该组件是否可以响应长单击事件

android:minHeight

setMinimumHeight(int)

设置该组件的最小高度

android:minWidth

etMinimumWidth(int)

设置该组件的最小宽度

android:nextFocusDown

setNextFocusDownld(int)

设置焦点在该组件上,且单击向下键时获得焦点的组件ID

android:nextFocusLeft

setNextFocusLefUd(int)

设置焦点在该组件上,且单击向左键时获得焦点的组件ID

android:nextFocusRight

setNextFocusRightld(int)

设置焦点在该组件上,且单击向右键时获得焦点的组件ID

androidrnextFocusUp

setNexlFocusUpId(int)

设置焦点在该组件上,且单击向上键时获得焦点的组件ID

android.onClick

为该组件的单击事件绑定监听器

android:padding

setPadding(int,int,int,int)

在组件的四边设置填充区域

android:paddingBottom

setPadding(int,int,int,int)

在组件的下边设置填充区域

android:paddingLeft

setPadding(int,int,int,int)

在组件的左边设置填充区域

android:paddingRight

setPadding(int,int,int,int)

在组件的右边设置填充区域

android:paddingTop

setPadding(int,int,int,int)

在组件的上边设罝填充区域

android:rotation

setRotation(float)

设置该组件旋转的角度

android:rotationX

setRotationX(float)

设置该组件绕Xi轴旋转的角度

android:rotationY

setRotationY(float)

设置该组件绕Y轴旋转的角度

android:saveEnabled

setSaveEnabled(boolean)

如果设置为false,那么当该组件被冻结时不会保存它的状态

android:scaleX

setScaleX(float)

设置该组件在水平方向的缩放比

android:scaleY

setScaleY(float)

设置该组件在垂直方向的缩放比

android:scrollX

该组件初始化后的水平滚动偏移

android:scrollY

该组件初始化后的垂直滚动偏移

android:scrollbarAlwaysDrawHorizontalTrack

设置该组件是否总是显示水平滚动条的轨道

android:scrollbarAlwaysDrawVerticalTrack

设置该组件是否总是显示垂直滚动条的轨道

android:scrollbarDefaultDelayBeforeFade

setScrollBarDefaultDelayBeforeFade(int)

设置滚动条在淡出隐藏之前延迟多少毫秒

androidiscrollbarFadeDuration

setScrollBarFadeDuration(int)

设置滚动条淡出隐藏过程需要多少秒

android:scrol1barSize

setScrollBarSize(int)

设置垂直滚动条的宽度和水平滚动条的高度

android:scrollbarStyle

setScrollBarStyle(int)

设置滚动条的风格和位置。该属性支持如下属性值: insideOverlay insidelnset outsideOverlay outsidelnset

androidiscrollbarThumbHorizontal

设罝该组件的水平滚动条的滑块对应的Drawable对象

android:scrollbarThumbVertical

设罝该组件的垂直滚动条的滑块对应的Drawable对象

android:scrollbarTrackHorizontal

设置该组件的水平滚动条的轨道对应的Drawable对象

android:scrollbarTrackVertical

设置该组件的垂直滚动条的轨道对应的Drawable对象

android:scrollbars

定义该组件滚动时显示几个滚动条。 该属性支持如下厲性值: none:不显示滚动条 horizontal:显示水平滚动条 vertical:显示垂直滚动条

Android:soundEffectsEnabled

setSoundEffectsEnabled(boolean)

设置该组件被单击时是否使用音效

android:tag

为该组件设置一个字符串类型的tag值。接下来可通过View的getTag()获取该字符串,或通过findViewWithTag() 査找该组件

android:transformPivotX

setPivolX(float)

设置该组件旋转时中心的X坐标

android:transformPivotY

setPivolY(float)

设置该组件旋转时中心的Y坐标

android:translationX

setTranslationX(float)

设置该组件在X方向上的位移

android:translationY

setTranslationY(float)

设置该组件在Y方向上的位移

android:translationZ

setTranslationZ(float)

设置该组件在Z方向上的位移

android:visibility

setVisibility(int)

设置该组件时候可见

ViewGroup继承了 View类,当然也可以当成普通View来使用,但ViewGroup主要还是当成容器类使用。但由于ViewGroup是一个抽象类,因此实际使用中通常总是使用ViewGroup 的子类来作为容器,例如各种布局管理器。

ViewGroup容器控制其子组件的分布依赖于ViewGroup.LayoutParams、ViewGroup. MarginLayoutParams两个内部类。这两个内部类中都提供了一些XML属性,ViewGroup容器中的子组件可以指定这些XML属性。

其中ViewGroup.LayoutParams所支持的两个XML属性如下:

 android:layout_width:指定该组件的布局宽度。

 android:layout_height:指定该组件的布局高度。

关于上面这两个属性,其属性值一般为如下3个属性值其一。

fill_parent

指定子组件的高度、宽度与父容器组件的高度、宽度相同(实际上还要减去填充的空白距离)。

match_parent

该属性值与fill_parent完全相同,而且从Android 2.2开始就推荐使用这个属性值来代替fill_parent。

wrap_content

指定子组件的大小恰好能包裹它的内容即可。

除了以上这3个属性值,还可以指定具体的宽高像素值,如80dp。其中dp为一个尺寸单位。

在正式学习Android组件之前,先来一起了解几个基本概念。

px

像素(pixels),1px代表屏幕上一个物理的像素点。px单位不被建议使用,因为同样100px的图片,在不同手机上显示的实际大小可能不同。偶尔用到px的情况,是需要画1像素表格线或阴影线的时候,用其他单位如dp会显得模糊。

dp

设备独立像素(Density-independent pixel),一种基于屏幕密度的抽象单位。在每英寸160点的显示器上,1dp=1px,但随着屏幕密度的改变,dp与px的换算会发生改变,换算公式为dips=(pixs*160)/densityDpi。

dip

设备独立像素,与dp完全相同,只是名字不同而已。在早期的Android版本里多使用dip,后来为了与sp统一就建议使用dp。

sp

比例像素(scale-independent pixel),主要处理字体的大小,可以根据用户的字体大小首选项进行缩放。当文字尺寸是“正常”时1sp=1dp=0.00625英寸,而当文字尺寸是“大”或“超大”时1sp>1dp=0.00625英寸。

in

英寸,标准长度单位,1英寸=2.54厘米(约)。

mm

毫米,标准长度单位。

pt

磅(point),标准长度单位,1pt=1/72英寸=0.035厘米。

ppi

每英寸像素数(pixel per inch),该值越高,则屏幕越细腻。

dpi

每英寸多少点(dot per inch),该值越高,则图片越细腻。

安卓端屏幕大小各不相同,根据其像素密度,主要分为几种规格,如下表所示。

密度

ldpi

mdpi

hdpi

xhdpi

xxhdpi

密度值

120

160

240

320

480

密度值比

0.75

1

1.5

2

3

代表分辨率

240*320

320*480

480*800

720*1280

1080*1920

ViewGroup.MarginLayoutParams用于控制子组件周围的页边距(Margin,也就是组件四周的空白),它支持的XML属性如下表所示。

XML属性

相关方法

说明

android:layout_marginBottom

setMargins(int, int, int, int)

指定该子组件下边的页边距

android:layout_marginLeft

setMargins(int, int, int, int)

指定该子组左下边的页边距

android:layout_marginRight

setMargins(int, int, int, int)

指定该子组件右边的页边距

android:layout_marginTop

setMargins(int, int, int, int)

指定该子组件上边的页边距

三、创建UI界面

在前面的内容指出过,Android推荐使用XML布局文件来定义用户界面,而不是使用Java代码来开发用户界面,所有组件都提供了两种方式来控制组件的行为。

 在XML布局文件中通过XML属性进行控制。

 在Java程序代码中通过调用方法进行控制。

实际上不管使用哪种方式,它们控制Android用户界面行为的本质是完全一样的。大部分时候,控制UI组件的XML属性还有对应的方法。UI界面的创建主要分为如下三种情况。

3.1使用XML布局文件

实际上在创建HelloWorld应用程序的时候就是使用该方法,这种方法是Android推荐使用的,不仅简单、明了,而且可以将应用的视图控制逻辑从Java代码中分离出来,放入XML文件中控制,从而更好地体现MVC原则。

当我们在Android应用的app/src/main/res/layout目录下定义一个XML布局文件之后(R.java会自动收录该布局资源),Java代码可通过如下方法在Activity中显示该视图:

setContentView (R.layout.<资源文件名字>);

当在布局文件中添加多个UI组件时,都可以为该UI组件指定android:id属性,该属性的属性值代表该组件的唯一标识。接下来如果希望在Java代码中访问指定UI组件,则可通过如下代码来访问它:

findViewByld (R.id.<android.id 属性值>);

一旦在Java程序中获得指定UI组件之后,接下来就可以通过代码来控制各UI组件的外观行为了,包括为UI组件绑定事件监听器等。

3.2使用Java代码

虽然Android推荐使用XML布局文件来控制UI界面,但如果开发者愿意,Android允许开发者完全在Java代码中控制UI界面。 如果希望在代码中控制UI界面,那么所有的UI组件都将通过new关键字创建出来,然后以合适的方式添加到UI界面即可。

为了更好的学习这一块内容内容,在HelloWorld工程中将app/src/main/java/MainActivity.java文件的代码修改一下,具体控制代码如下:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.activity_main);


        // 创建一个线性布局
        LinearLayout layout = new LinearLayout(this);
        layout.setOrientation(LinearLayout.VERTICAL);

        // 创建一个显示Hello World!的TextView
        TextView show = new TextView(this);
        show.setText("Hello World!");

        // 向layout容器添加一个TextView
        layout.addView(show);

        // 设置该Activity显示layout
        setContentView(layout);
    }
}

从上面程序的字代码可以看出,该程序中所用到的UI组件都是通过new关键字创建出来的,然后程序使用LinearLayout容器来容纳这些UI组件,这样就组成了图形用户界面。

从上面的程序代码中可以看出,创建UI组件时需要传入一个this参数,这是由于Context代表访问Android应用环境的全局信息的 API。让UI组件持有一个Context参数,可以让这些UI组件通过该Context参数来获取Android 应用环境的全局信息。Context本身是一个抽象类,Android应用的 Activity、Service 都继承了 Context,因此Activity、Service都可直接作为Context使用。关于这一块的内容现在可能会看不太懂,不过没关系,经过后续的学习就明白了。

通过XML布局和通过Java代码都可以实现同样的功能,但是发现通过Java代码实现程序非常臃肿,而用XML布局代码要简单得多,因此在开发中不推荐使用这种方式。

3.3混合使用XML布局文件和Java代码

前面己经提到,完全使用Java代码来控制UI界面不仅烦琐,而且不利于解耦;而完全利用XML布局文件来控制UI界面虽然方便、便捷,但难免有失灵活。因此有些时候,可能需要混合使用XML布局文件和代码来控制UI界面。

当混合使用XML布局文件和代码来控制UI界面时,习惯上把变化小、行为比较固定的组件放在XML布局文件中管理,而那些变化较多、行为控制比较复杂的组件则交给Java代码来管理。

此处不做过多介绍,在后续课程中会陆续接触到这种混合使用的方式来控制UI界面。

本文分享自微信公众号 - 分享达人秀(ShareExpert),作者:鑫鱻

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-07-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 两种对齐方式,layout_gravity和gravity大不同

    上一期我们一起学习了LinearLayout线性布局的方向、填充模型和权重,本期来一起学习LinearLayout线性布局的对齐。 一、LinearLay...

    分享达人秀
  • AdapterViewFlipper轻松完成图片轮播

    上一期学习了ExpandableListView的使用,你已经掌握了吗?本期开始学习AdapterViewFilpper的使用。 一、认识Adapter...

    分享达人秀
  • StackView实现卡片堆叠如此简单

    上一期学习了AdapterViewFilpper的使用,你已经掌握了吗?本期开始学习同系列的StackView控件的使用方法。 一、认识StackView ...

    分享达人秀
  • 30 道 Vue 面试题,内含详细讲解(中)

    比如有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现:

    咻咻ing
  • 前端知识点总结——Vue

    作用:将表达式执行的结果 输出当调用元素的 innerHTML 中;还可以将数据绑定到视图。

    CSDN技术头条
  • mpvue-小程序之蹲坑记

    mpvue 是兼容微信小程序的生命周期与 vue 的生命周期,vue 实例会接管小程序 Page 实例的生命钩子,因此需要使用到小程序的生命周期钩子时,可将相应...

    超然
  • 用好uni-app开发小程序,这些组件库了解一下!

    组件是现代开发的重要里程碑。组件重构了分工模型,让大量的轮子出现,让开发者可以拿来轮子直接用,大幅提升了整个产业的效率。

    极乐君
  • React组件设计实践总结04 - 组件的思维

    在 React 的世界里”一切都是组件“, 组件可以映射作函数式编程中的函数,React 的组件和函数一样的灵活的特性不仅仅可以用于绘制 UI,还可以用于封装业...

    _sx_
  • 轻量、可靠的移动端组件库 Vant 1.0 正式发布

    说实话,最近已经快一年没有接触过原生开发了,随着接触开发微信小程序,接触 Vue 等,也越来越喜欢这种 JS 前端开发,感觉特别好玩。不管是 Vue ,还是 R...

    非著名程序员
  • Vue 2.X 文档阅读笔记二 (深入组件)

    官方推荐使用写法1来定义全局注册组件命名,以避免可能出现的与HTML元素相冲突的情况。

    前端_AWhile

扫码关注云+社区

领取腾讯云代金券