Android基础总结(3)——UI界面布局

  Android的UI设计有好几种界面程序编写方式。大体上可分为两大类:一类是利用可视化工具来进行,允许你进行拖拽控件来进行布局;还有一类是编写xml文档来进行布局。这两种方法可以相互转换。

1、常见的控件的使用方法

  • TextView
  • Button:一般需要注册监听器来对点击按键的事件做出响应
  • EditText:允许用户在控件里输入和编辑内容,并可以在在程序中对这些内容进行处理。此外,可以使用android:hint属性来指定一段提示性的文本。
  • ImageView:展示图片的一个控件。通过android:src属性来指定图片的位置
  • ProcessBar:用于在界面显示一个进度条(用android:style属性可以设置为圆形或条状),并且可以通过android:visible属性来设置控件的可见性(三种:visible、invisible(控件不可见,但是仍然占用屏幕空间,可以理解为变为了透明状态)、gone(控件不可见,并且不再占用屏幕空间))。
  • AlertDialog:可以在当前界面弹出一个对话框,这个对话框是置顶于所有界面元素之上的,能够屏蔽掉其他控件的交互能力,因此AlertDialog一般用于提示一些非常重要的内容或警告信息,例如一些确认信息等。
  • ProgressDialog:和AlertDialog类似,都可以在界面弹出一个对话框,并且可以屏蔽掉其他界面的交互能力。不同的是,该控件会在对话框中显示一个进度条,一般用于表示比较耗时的当前操作,让用户耐心等待。

2、四种基本布局

LinearLayout

LinearLayout又称作线性布局,是一种非常常用的布局。该布局有一个专属属性android:orientation,这个属性有两个选择vertical和horizontal,代表着线性排列的规律(水平方向还是垂直方向)。

演示:左图是vertical,右图是horizonal

  • 如果LinearLayout 的排列方向是 horizontal,内部的控件就绝对不能将宽度指定为match_parent,因为这样的话单独一个控件就会将整个水平方向占满,其他的控件就没有可放置的位置了。
  • 同样的道理,如果LinearLayout 的排列方向是 vertical,内部的控件就不能将高度指定为match_parent。
  • gravity和layout_gravity的区别就是gravity是指当前控件内部的内容的排列方式,而后者则是指当前控件相对于父布局的的排列方式。示例:效果见下图左边的图
 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2 android:layout_width="match_parent"
 3 android:layout_height="match_parent"
 4 android:orientation="horizontal" >
 5 <Button
 6 android:id="@+id/button1"
 7 android:layout_width="wrap_content"
 8 android:layout_height="wrap_content"
 9 android:layout_gravity="top"
10 android:text="Button 1" />
11 <Button
12 android:id="@+id/button2"
13 android:layout_width="wrap_content"
14 android:layout_height="wrap_content"
15 android:layout_gravity="center_vertical"
16 android:text="Button 2" />
17 <Button
18 android:id="@+id/button3"
19 android:layout_width="wrap_content"
20 android:layout_height="wrap_content"
21 android:layout_gravity="bottom"
22 android:text="Button 3" />
23 </LinearLayout>
  • android:layout_weight属性是指所设置的控件对剩余空间的权重(权重越小,所占空间越大)。示例:效果见上图右边的图
 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2 android:layout_width="match_parent"
 3 android:layout_height="match_parent"
 4 android:orientation="horizontal" >
 5 <EditText
 6 android:id="@+id/input_message"
 7 android:layout_width="0dp"
 8 android:layout_height="wrap_content"
 9 android:layout_weight="1"
10 android:hint="Type something"
11 />
12 <Button
13 android:id="@+id/send"
14 android:layout_width="wrap_content"
15 android:layout_height="wrap_content"
16 android:text="Send"
17 />
18 </LinearLayout>

  注意这里我们将edittext的权重设为1,而width设为0只是一个规范化写法,因为send的width是wrapcontent,所以这一行的剩余空间分到所有权重之和(1)上,1/1即为edittext所占比例。

RelativeLayout

RelativeLayout 又称作相对布局,也是一种非常常用的布局。就和名字一样,这种布局内的控件排列全部按照相对的父布局或其它子控件等的方式进行布局。示例:效果见下图左边的图

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2 android:layout_width="match_parent"
 3 android:layout_height="match_parent" >
 4 <Button
 5 android:id="@+id/button1"
 6 android:layout_width="wrap_content"
 7 android:layout_height="wrap_content"
 8 android:layout_alignParentLeft="true"
 9 android:layout_alignParentTop="true"
10 android:text="Button 1" />
11 <Button
12 android:id="@+id/button2"
13 android:layout_width="wrap_content"
14 android:layout_height="wrap_content"
15 android:layout_alignParentRight="true"
16 android:layout_alignParentTop="true"
17 android:text="Button 2" />
18 <Button
19 android:id="@+id/button3"
20 android:layout_width="wrap_content"
21 android:layout_height="wrap_content"
22 android:layout_centerInParent="true"
23 android:text="Button 3" />
24 <Button
25 android:id="@+id/button4"
26 android:layout_width="wrap_content"
27 android:layout_height="wrap_content"
28 android:layout_alignParentBottom="true"
29 android:layout_alignParentLeft="true"
30 android:text="Button 4" />
31 <Button
32 android:id="@+id/button5"
33 android:layout_width="wrap_content"
34 android:layout_height="wrap_content"
35 android:layout_alignParentBottom="true"
36 android:layout_alignParentRight="true"
37 android:text="Button 5" />
38 </RelativeLayout>
  • 相对于子控件的示例:效果见上图右边的图
 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2 android:layout_width="match_parent"
 3 android:layout_height="match_parent" >
 4 <Button
 5 android:id="@+id/button3"
 6 android:layout_width="wrap_content"
 7 android:layout_height="wrap_content"
 8 android:layout_centerInParent="true"
 9 android:text="Button 3" />
10 <Button
11 android:id="@+id/button1"
12 android:layout_width="wrap_content"
13 android:layout_height="wrap_content"
14 android:layout_above="@id/button3"
15 android:layout_toLeftOf="@id/button3"
16 android:text="Button 1" />
17 <Button
18 android:id="@+id/button2"
19 android:layout_width="wrap_content"
20 android:layout_height="wrap_content"
21 android:layout_above="@id/button3"
22 android:layout_toRightOf="@id/button3"
23 android:text="Button 2" />
24 <Button
25 android:id="@+id/button4"
26 android:layout_width="wrap_content"
27 android:layout_height="wrap_content"
28 android:layout_below="@id/button3"
29 android:layout_toLeftOf="@id/button3"
30 android:text="Button 4" />
31 <Button
32 android:id="@+id/button5"
33 android:layout_width="wrap_content"
34 android:layout_height="wrap_content"
35 android:layout_below="@id/button3"
36 android:layout_toRightOf="@id/button3"
37 android:text="Button 5" />
38 </RelativeLayout>
  • RelativeLayout中还有另外一组相对于控件进行定位的属性,android:layout_alignLeft表示让一个控件的左边缘和另一个控件的左边缘对齐,android:layout_alignRight表示让一个控件的右边缘和另一个控件的右边缘对齐,还有android:layout_alignTop、android:layout_alignBottom

FrameLayout

这种布局没有任何的定位方式,所有的控件都会摆放在布局的左上角,该布局类型主要运用于碎片处理。示例效果见下图左边的图

 1 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2 android:layout_width="match_parent"
 3 android:layout_height="match_parent"
 4 >
 5 <Button
 6 android:id="@+id/button"
 7 android:layout_width="wrap_content"
 8 android:layout_height="wrap_content"
 9 android:text="Button"
10 />
11 <ImageView
12 android:id="@+id/image_view"
13 android:layout_width="wrap_content"
14 android:layout_height="wrap_content"
15 android:src="@drawable/ic_launcher"
16 />
17 </FrameLayout>

TableLayout

  TableLayout允许我们使用表格的方式来排列控件。例如,设计一个登录界面,允许用户输入账号密码后登录,示例效果见上图右边的图

 1 <pre name="code" class="java">
 2 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3 android:layout_width="match_parent"
 4 android:layout_height="match_parent" 
 5 android:stretchColumns="1">
 6 <TableRow>
 7 <TextView
 8 android:layout_height="wrap_content"
 9 android:text="Account:" />
10 <EditText
11 android:id="@+id/account"
12 android:layout_height="wrap_content"
13 android:hint="Input your account" />
14 </TableRow>
15 <TableRow>
16 <TextView
17 android:layout_height="wrap_content"
18 android:text="Password:" />
19 <EditText
20 android:id="@+id/password"
21 android:layout_height="wrap_content"
22 android:inputType="textPassword" />
23 </TableRow>
24 <TableRow>
25 <Button
26 android:id="@+id/login"
27 android:layout_height="wrap_content"
28 android:layout_span="2"
29 android:text="Login" />
30 </TableRow>
31 </TableLayout>

  在TableLayout 中每加入一个 TableRow 就表示在表格中添加了一行,然后在TableRow中每加入一个控件,就表示在该行中加入了一列,TableRow中的控件是不能指定宽度的。使用android:layout_span="2"让登录按钮占据两列的空间,android:stretchColumns="1"使得第二个控件自动拉伸并占慢剩余空间。

3、如何自定义控件

参考:http://www.cnblogs.com/0616--ataozhijia/p/4003380.html

4、定制ListView的界面(P129)

5、ListView的效率优化(P133)

  ListView的效率瓶颈存在的原因在于:

    • getView()方法中每次都将布局进行重新加载一次,当ListView快速滚动时导致加载缓慢
    • 每次在getView()方法中还是会调用View的findViewById()方法来获取一次控件的实例

  对于第一个问题,我们可以通过重写getView()方法,getView()方法中的convertView参数可以用于将之前加载好的布局进行缓存,以便以后进行重用

  对于第二个问题,我们可以借助一个ViewHolder来对这部分进行优化,用ViewHolder对控件的实例进行缓存

6、单位和尺寸

  • px:就是pixel,像素,即屏幕中可以显示的最小元素单元,大小是相对屏幕的分辨率而言的。
  • pt:就是point,磅数,是印刷行业常用单位,等于1/72英寸,绝对大小。一般pt用作字体的单位来使用
  • dp:就是device independent pixels,设备独立像素,和px相比,它在不同密度的屏幕中的显示比例保持一致。(常用)
  • sp:就是scaled pixels,可伸缩像素,和pt相比,其区别和dp和px的区别一样,解决文字大小适配的问题(常用于文字)

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android知识点总结

Android关于Canvas你所知道的和不知道的一切

Picture相当于先拍一张照片,并且是在别的Canvas上,在别的Canvas上,在别的Canvas上! 重要的话说三遍:当需要的时候在贴在当前的canva...

52620
来自专栏Android相关

TextInputLayout的使用与实现

在Gradle的依赖中添加上com.android.support:design:23.0.0,其中23版本根据编译的android版本来调整对应版本即可

23440
来自专栏超然的博客

响应式图像

将picture元素和srcset,sizes属性纳入html5规范,新规范意在解决:

7710
来自专栏Coding01

推荐一款快速生成海报的微信小插件

现在很多小程序都有生成海报,分享海报的功能。我们自己的几个小程序 (如:爸妈搜商城、爸妈搜云课堂、幼师大学、跟着外教学英语等) 也都有生成海报的功能。因此技术团...

13220
来自专栏web开发

img标签实现和背景图一样的显示效果——object-fit和object-position

不知大家在做前端页面的时候,有没有遇到类似这样的问题:有一个不是正方形的图片,可能是宽度大于高度的,也可能是高度大于宽度的,而你又并不想用背景图的方式来做,要实...

41360
来自专栏韩东吉的Unity杂货铺

零基础入门 19: UGUI ScrollBar

通常在实际项目中,对ScrollBar的应用非常简单,主要用于配合TableView或者ScrollView来进行使用,下一节我们将说明一下Unity里的Scr...

28920
来自专栏数据小魔方

创意九宫格图片制作技巧!

今天给大家分享九宫格照片的制作技巧! ▽ 是不是每次看到朋友圈有人发九宫格图片 都觉得特别羡慕 其实这种图片可以自己制作 步骤也不复杂 下面交给大家三种制作方法...

56890
来自专栏小蠢驴iOS专题

iOS中Cell约束--使用xib实现多label的自动约束--高度随内容自适应

48560
来自专栏mukekeheart的iOS之旅

iOS学习——Quartz2D学习之UIKit绘制

  在IOS中绘图技术主要包括:UIKit、Quartz 2D、Core Animation和OpenGL ES。其中Core Animation提供动画实现技...

13620
来自专栏小轻论坛

一些实用的Photoshop快捷键

将所选文本的文字大小减小10 点像素 【Ctrl】+【Alt】+【Shift】+【<】

13430

扫码关注云+社区

领取腾讯云代金券