Android - UI 设计

在本章中，我们将了解 Android 屏幕的不同 UI 组件。本章还涵盖了创建更出色 UI 设计的技巧，并解释了如何设计 UI。

UI 屏幕组件

Android 应用的典型用户界面由操作栏和应用内容区域组成。

• 主操作栏
• 视图控制
• 内容区域
• 拆分操作栏

这些组件也已在下图中显示 -

了解屏幕组件

Android 应用的基本单元是活动 (Activity)。UI 在 XML 文件中定义。在编译期间，XML 中的每个元素都会编译成等效的 Android GUI 类，其属性由方法表示。

视图 (View) 和视图组 (ViewGroup)

一个活动 (Activity) 由视图 (View) 组成。视图 (View) 只是出现在屏幕上的一个小部件。它可以是按钮等。一个或多个视图可以组合成一个 ViewGroup。ViewGroup 的示例包括布局。

布局类型

有许多类型的布局。其中一些列在下面 -

• 线性布局 (LinearLayout)
• 绝对布局 (AbsoluteLayout)
• 表格布局 (TableLayout)
• 框架布局 (FrameLayout)
• 相对布局 (RelativeLayout)

线性布局 (LinearLayout)

线性布局进一步细分为水平和垂直布局。这意味着它可以在一列或一行中排列视图。以下是包含文本视图的线性布局（垂直）的代码。

<?xml version=”1.0” encoding=”utf-8”?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   android:orientation=”vertical” >
   
   <TextView
      android:layout_width=”fill_parent”
      android:layout_height=”wrap_content”
      android:text=”@string/hello” />
</LinearLayout>

绝对布局 (AbsoluteLayout)

AbsoluteLayout 允许您指定其子元素的确切位置。它可以像这样声明。

<AbsoluteLayout
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
   
   <Button
      android:layout_width=”188dp”
      android:layout_height=”wrap_content”
      android:text=”Button”
      android:layout_x=”126px”
      android:layout_y=”361px” />
</AbsoluteLayout>

表格布局 (TableLayout)

TableLayout 将视图分组到行和列中。它可以像这样声明。

<TableLayout
   xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_height=”fill_parent”
   android:layout_width=”fill_parent” >
   
   <TableRow>
      <TextView
         android:text=”User Name:”
         android:width =”120dp”
         />
      
      <EditText
         android:id=”@+id/txtUserName”
         android:width=”200dp” />
   </TableRow>
   
</TableLayout>

相对布局 (RelativeLayout)

RelativeLayout 允许您指定子视图相对于彼此的位置。它可以像这样声明。

<RelativeLayout
   android:id=”@+id/RLayout”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
</RelativeLayout>

框架布局 (FrameLayout)

FrameLayout 是屏幕上的一个占位符，您可以使用它来显示单个视图。它可以像这样声明。

<?xml version=”1.0” encoding=”utf-8”?>
<FrameLayout
   android:layout_width=”wrap_content”
   android:layout_height=”wrap_content”
   android:layout_alignLeft=”@+id/lblComments”
   android:layout_below=”@+id/lblComments”
   android:layout_centerHorizontal=”true” >
   
   <ImageView
      android:src = “@drawable/droid”
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content” />
</FrameLayout>

除了这些属性之外，还有其他属性在所有视图和 ViewGroup 中都是通用的。它们列在下面 -

测量单位

在指定 Android UI 上元素的大小时，您应该记住以下测量单位。