正文

Android基础总结（3）——UI界面布局

IP云
IP云V管理员/4 阅读
09/17
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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是指当前控件内部的内容的排列方式，而后者则是指当前控件相对于父布局的的排列方式。示例：效果见下图左边的图

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
    <Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:text="Button 1" />
    <Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:text="Button 2" />
    <Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:text="Button 3" />
    </LinearLayout>

  • android:layout_weight属性是指所设置的控件对剩余空间的权重(权重越小，所占空间越大)。示例：效果见上图右边的图

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
    <EditText
    android:id="@+id/input_message"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:hint="Type something"
    />
    <Button
    android:id="@+id/send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Send"
    />
    </LinearLayout> 

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

RelativeLayout

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Button 1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button 2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Button 3" />
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Button 4" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="Button 5" />
</RelativeLayout>

 

  • 相对于子控件的示例：效果见上图右边的图

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Button 3" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/button3"
android:layout_toLeftOf="@id/button3"
android:text="Button 1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/button3"
android:layout_toRightOf="@id/button3"
android:text="Button 2" />
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button3"
android:layout_toLeftOf="@id/button3"
android:text="Button 4" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button3"
android:layout_toRightOf="@id/button3"
android:text="Button 5" />
</RelativeLayout>

  • RelativeLayout中还有另外一组相对于控件进行定位的属性，android:layout_alignLeft表示让一个控件的左边缘和另一个控件的左边缘对齐，android:layout_alignRight表示让一个控件的右边缘和另一个控件的右边缘对齐，还有android:layout_alignTop、android:layout_alignBottom

FrameLayout

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

 

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
/>
<ImageView
android:id="@+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"
/>
</FrameLayout>

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

<pre name="code" class="java">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:layout_height="wrap_content"
android:text="Account:" />
<EditText
android:id="@+id/account"
android:layout_height="wrap_content"
android:hint="Input your account" />
</TableRow>
<TableRow>
<TextView
android:layout_height="wrap_content"
android:text="Password:" />
<EditText
android:id="@+id/password"
android:layout_height="wrap_content"
android:inputType="textPassword" />
</TableRow>
<TableRow>
<Button
android:id="@+id/login"
android:layout_height="wrap_content"
android:layout_span="2"
android:text="Login" />
</TableRow>
</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的区别一样，解决文字大小适配的问题（常用于文字）