深入理解Android UI设计：从布局管理器到常用控件的全面解析

最新推荐文章于 2024-10-04 11:47:50 发布

3ter

最新推荐文章于 2024-10-04 11:47:50 发布

阅读量870

点赞数 5

文章标签： android ui gitee

本文链接：https://blog.csdn.net/evolutionnn/article/details/139547909

版权

第三章：Android布局管理器

3.1 View与ViewGroup

3.2 Android布局管理器

3.3 线性布局（Linear Layout）

3.4 约束布局（Constraint Layout）

3.5 表格布局（Table Layout）

3.6 帧布局（Frame Layout）

3.7 相对布局（Relative Layout）

第四章：Android常用控件

4.1 TextView与EditText

4.2 Button

4.3 RadioButton

4.4 CheckBox与ImageView

第五章：Activity与Intent

5.1 Activity概述

5.2 Activity的属性配置

5.3 Intent与IntentFilter

安卓开发总结：布局管理、UI交互及持续改进

在深入探讨Android开发的旅程中，布局管理器和常用控件无疑是构建用户界面（UI）的基石。以下是对《安卓3-7章》内容的总结与深化，旨在通过详实的例证、深入的剖析以及周密的论述，提升文章的广度和深度。

第三章：Android布局管理器

3.1 View与ViewGroup

在Android应用开发中，布局管理器与常用控件扮演着至关重要的角色。它们不仅决定了应用界面的外观和用户体验，还影响着应用的性能和可维护性。以下是对Android开发中第三章至第七章内容的深入总结与拓展。

3.2 Android布局管理器

Android提供了多种布局管理器，用于控制UI组件的布局方式，包括线性布局、约束布局、表格布局、帧布局和相对布局。每种布局都有其独特的特性和适用场景。

3.3 线性布局（Linear Layout）

线性布局是最简单的布局方式之一，它按照水平或垂直方向排列子元素。在新闻阅读类应用中，我们常常可以看到使用线性布局来展示新闻列表。

·特点：线性布局按照垂直或水平方向排列子视图。

·适用场景：适用于简单的纵向或横向排列的布局需求。

E.g.：

```xml
<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Hello, Linear Layout!" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Click Me" />

</LinearLayout>

应用：在实际项目中，常用于需要简单排列的一组控件，例如表单的输入字段和按钮。

3.4 约束布局（Constraint Layout）

约束布局是Android Studio中推荐使用的布局方式，它通过定义元素之间的相对位置和大小关系来实现复杂的界面布局。在需要高度自定义界面的应用中，约束布局能够带来极大的便利。

特点：约束布局通过约束子视图之间及与父视图的关系来实现复杂的布局。

适用场景：适用于复杂界面布局，能够减少嵌套层级，提高性能。

E.g.：

```xml

<androidx.constraintlayout.widget.ConstraintLayout

android:layout_width="match_parent"

android:layout_height="match_parent">

<TextView

android:id="@+id/textView"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:text="Hello, Constraint Layout!"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent" />

<Button

android:id="@+id/button"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:text="Click Me"

app:layout_constraintTop_toBottomOf="@id/textView"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

应用：适用于需要精细控制视图位置的复杂界面设计，如登录界面、设置页面等。

3.5 表格布局（Table Layout）

表格布局允许我们像操作表格一样来管理界面元素，每个元素占据一行或一列。在需要展示表格数据的应用中，如成绩查询、订单列表等，表格布局是首选。

特点：表格布局按照行和列排列子视图。

适用场景：适用于需要以表格形式排列的内容。

E.g.：

```xml

<TableLayout

android:layout_width="match_parent"

android:layout_height="wrap_content">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Row 1, Column 1" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Row 1, Column 2" />

</TableRow>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Row 2, Column 1" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Row 2, Column 2" />

</TableRow>

</TableLayout>

应用：在实际项目中，表格布局常用于数据表格、排班表等结构化数据展示。

3.6 帧布局（Frame Layout）

帧布局将所有子元素放置在左上角，并允许它们重叠。虽然这种布局方式在常规应用中较少使用，但在一些特殊场景中，如制作覆盖层、弹出菜单等，帧布局能够发挥重要作用。

特点：帧布局用于堆叠子视图，后添加的视图会覆盖在先添加的视图之上。

适用场景：适用于简单的重叠视图，如加载指示器。

E.g.：

```xml

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent">

<ImageView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:src="@drawable/background_image" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Overlay Text"

android:layout_gravity="center" />

</FrameLayout>

应用：在实际项目中，帧布局常用于实现简单的重叠效果，如图片与文字叠加。

3.7 相对布局（Relative Layout）

相对布局允许我们根据子元素之间的相对位置来定义它们的布局。这种布局方式在需要灵活调整元素位置的应用中非常有用，如聊天界面、游戏界面等。

特点：相对布局通过子视图之间及与父视图的相对位置关系来排列子视图。

适用场景：适用于需要灵活控制视图相对位置的布局。

E.g.：

```xml

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="match_parent">

<TextView

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Relative Layout"

android:layout_centerInParent="true" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Click Me"

android:layout_below="@id/textView"

android:layout_centerHorizontal="true" />

</RelativeLayout>

应用：在实际项目中，相对布局常用于需要灵活控制视图相对位置的场景，如多按钮布局。

第四章：Android常用控件

4.1 TextView与EditText

TextView用于显示文本信息，而EditText则允许用户输入文本。在应用中，我们经常需要展示一些提示信息、用户输入等，这时就可以使用TextView和EditText控件。

TextView 用于显示文本，而 EditText 是可编辑文本框。

E.g.：

```xml

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Hello, TextView!" />

<EditText

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="Enter text here" />

应用：在实际项目中，TextView常用于静态文本显示，EditText用于用户输入。

4.2 Button

Button控件用于触发某个事件或执行某个操作。在应用中，我们通常会设置一些按钮来响应用户的操作，如提交表单、打开新页面等。

E.g.：

```xml

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Click Me"

android:onClick="handleButtonClick" />

E.g.：

```java

public void handleButtonClick(View view) {

// 处理点击事件

}

应用：在实际项目中，Button用于触发登录、提交等操作。

4.3 RadioButton

RadioButton控件用于表示一组单选按钮中的一个选项。在需要用户从多个选项中选择一个的应用中，如设置语言、选择性别等，RadioButton控件非常有用。

E.g.：

```xml

<RadioGroup

android:layout_width="wrap_content"

android:layout_height="wrap_content">

<RadioButton

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Option 1" />

<RadioButton

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Option 2" />

</RadioGroup>

应用：在实际项目中，RadioButton用于选择单个选项，如性别选择。

4.4 CheckBox与ImageView

CheckBox控件用于表示一个可切换（选中/未选中）的状态，而ImageView则用于显示图片。在应用中，我们经常需要展示一些复选框让用户选择多个选项，或者使用图片来丰富界面内容。

E.g.：

```xml

<CheckBox

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Check me" />

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/sample_image" />

应用：CheckBox用于多选列表，ImageView用于展示图片或图标。

第五章：Activity与Intent

5.1 Activity概述

除了介绍Activity的基本概念，可以详细讨论Activity的生命周期，包括onCreate、onStart、onResume、onPause、onStop、onDestroy等方法的调用时机和用途。通过实际场景和代码示例说明每个生命周期方法的执行顺序和作用。

5.2 Activity的属性配置

在介绍Activity属性配置时，可以深入探讨每个属性的作用和影响，并提供具体的示例和案例说明。例如，不同启动模式（launchMode）对Activity栈的影响，或者不同主题（Theme）对应用界面风格的改变。

5.3 Intent与IntentFilter

除了基本的Intent传递信息外，可以进一步讨论Intent的数据类型，如传递复杂对象、文件等；以及IntentFilter的匹配规则和实际应用场景，包括静态注册和动态注册的区别。

E.g.：

```java

Intent intent = new Intent(this, TargetActivity.class);

intent.putExtra("key", "value");

startActivity(intent);

应用：在实际项目中，Intent用于启动Activity、发送广播等操作。

5.4 数据传递

通过Intent可以在Activity之间传递数据，如字符串、整数等。

E.g.：

```java

Intent intent = new Intent(this, TargetActivity.class);

intent.putExtra("message", "Hello, World!");

startActivity(intent);

5.5 Fragment

Fragment 是一种可复用的UI组件，通常嵌入在Activity中。

E.g.：

```java

FragmentManager fragmentManager = getSupportFragmentManager();

FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

ExampleFragment fragment = new ExampleFragment();

fragmentTransaction.add(R.id.fragment_container, fragment);

fragmentTransaction.commit();

应用：在实际项目中，Fragment用于实现动态和灵活的UI布局，如选项卡界面。

第六章：Android高级控件

6.1 自动完成文本框

在Android开发中，AutoCompleteTextView是一个高级的文本输入控件，它允许用户从预定义的列表中选择值，从而加速输入过程。这对于需要用户输入大量重复数据或标准数据的场景特别有用。

E.g.：

```xml

<AutoCompleteTextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/autoCompleteTextView" />

E.g.：

```java

String[] suggestions = {"Apple", "Banana", "Cherry"};

ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, suggestions);

AutoCompleteTextView autoCompleteTextView = findViewById(R.id.autoCompleteTextView);

autoCompleteTextView.setAdapter(adapter);

应用：在实际项目中，用于搜索框和输入提示，如输入国家名时自动补全。

6.2 下拉列表

Spinner位于android：widget包下，每次只显示用户选中的元素，当用户再次点击时，会弹出选择列表供用户选择

E.g.：

```xml

<Spinner

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/spinner" />

E.g.：

```java

String[] options = {"Option 1", "Option 2", "Option 3"};

ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_spinner_item, options);

Spinner spinner = findViewById(R.id.spinner);

spinner.setAdapter(adapter);

应用：在实际项目中，用于提供选项列表，如选择性别、国家等。

6.3 滚动视图

ScrollView 允许用户滚动查看内容。

E.g.：

```xml

<ScrollView

android:layout_width="match_parent"

android:layout_height="match_parent">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

</LinearLayout>

</ScrollView>

应用：在实际项目中，ScrollView用于显示超出屏幕长度的内容，如长文本文字。

6.4 列表视图

ListView 用于显示可滚动的项目列表。

E.g.：

```xml

<ListView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:id="@+id/listView" />

E.g.：

```java

String[] items = {"Item 1", "Item 2", "Item 3"};

ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, items);

ListView listView = findViewById(R.id.listView);

listView.setAdapter(adapter);

应用：在实际项目中，ListView用于显示数据列表，如联系人列表。

6.5 网格视图

GridView 用于显示网格布局的项目。

E.g.：

```xml

<GridView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:numColumns="3" />

E.g.：

```java

String[] items = {"Item 1", "Item 2", "Item 3"};

ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, items);

GridView gridView = findViewById(R.id.gridView);

gridView.setAdapter(adapter);

应用：在实际项目中，GridView用于展示网格状的内容，如图片库。

6.6 进度条与滑块

ProgressBar 和 SeekBar 用于显示和控制进度。

E.g.：

```xml

<ProgressBar

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:progress="50" />

<SeekBar

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:max="100"

android:progress="50" />

E.g.：

```java

SeekBar seekBar = findViewById(R.id.seekBar);

seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {

@Override

public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

// 处理进度变化

}

@Override

public void onStartTrackingTouch(SeekBar seekBar) {}

@Override

public void onStopTrackingTouch(SeekBar seekBar) {}

});

应用：在实际项目中，ProgressBar用于显示任务进度，SeekBar用于用户滑动选择，如文件下载进度和音量控制。

6.7 选项卡

选项卡主要由TabHost、TabWidget和FrameLayout3个组件组成，用于实现一个多标签页的用户界面，通过它可以将一个复杂的对话框分割成若干个标签页，实现对信息的分类显示和管理。使用该组件不仅可以使界面简洁大方，还可以有效地减少窗体的个数。

在Android中，实现选项卡的一般步骤如下：

(1)在布局文件中添加实现选项卡所需的TabHost、TabWidget和FrameLayout组件。

(2)编写各标签页中需要显示内容所对应的XML布局文件。

(3)在Activity中，获取并初始化TabHost组件。

(4)为TabHost对象添加标签页

E.g.：

```xml

<com.google.android.material.tabs.TabLayout

android:layout_width="match_parent"

android:layout_height="wrap_content" />

<androidx.viewpager.widget.ViewPager

android:layout_width="match_parent"

android:layout_height="match_parent" />

E.g.：

```java

TabLayout tabLayout = findViewById(R.id.tabLayout);

ViewPager viewPager = findViewById(R.id.viewPager);

PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager());

viewPager.setAdapter(adapter);

tabLayout.setupWithViewPager(viewPager);

应用：在实际项目中，TabLayout用于实现多个页面的导航，如应用设置和用户信息。

6.8 画廊控件

所谓画廊，就是像我们手机相册那样可以直接用手左右滑动翻看图片的效果

E.g.：

```xml

<Gallery

android:layout_width="match_parent"

android:layout_height="wrap_content" />

E.g.：

```java

String[] images = {"image1.jpg", "image2.jpg", "image3.jpg"};

ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_gallery_item, images);

Gallery gallery = findViewById(R.id.gallery);

gallery.setAdapter(adapter);

gallery.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

// 处理点击事件

}

});

应用：在实际项目中，Gallery用于图片展示和选择，如照片查看应用。

第七章：Android菜单与对话框设计

7.1 Android选项菜单

选项菜单提供常用操作选项，通常在应用顶部。选项菜单是一种常见的用户界面组件，用于提供快捷操作，提高应用程序的易用性和用户满意度。选项菜单通常用于一些常见的场景，例如复制、粘贴、删除、设置、搜索或分享等操作。需要注意的是，在开发应用程序时需要考虑版本兼容性。

E.g.：

```java

@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.menu_main, menu);

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case R.id.action_settings:

// 处理菜单项点击事件

return true;

default:

return super.onOptionsItemSelected(item);

}

应用：在实际项目中，选项菜单用于提供全局操作选项，如设置和帮助。

7.2 Android上下文菜单

上下文菜单是针对特定视图提供的操作选项，通常通过长按触发。Android 上下文菜单（Context Menu）是一种在用户长按某个视图时显示的菜单，通常用于提供与所选内容相关的操作选项。它可以为应用程序提供快捷操作，并允许用户在特定上下文中执行操作。

E.g.：

```java

@Override

public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {

super.onCreateContextMenu(menu, v, menuInfo);

getMenuInflater().inflate(R.menu.context_menu, menu);

}

@Override

public boolean onContextItemSelected(MenuItem item) {

switch (item.getItemId()) {

case R.id.action_delete:

// 处理上下文菜单项点击事件

return true;

default:

return super.onContextItemSelected(item);

}

应用：在实际项目中，上下文菜单用于提供针对特定项的操作，如删除和分享。

7.3 Android对话框

对话框用于提示用户或获取用户输入。Dialog对话框是android常用的基础视图组件之一，本文总结了对话框常用的几种样式，以及自定义视图和带动画效果的对话框

Dialog虽然可以显示到屏幕上，但是Dialog并非继承自View，而是继承自Object。Dialog的生命周期由Activity来控制，所以当Activity被销毁后，如果再有对Dialog的操作会导致异常：java.lang.IllegalArgumentException: View not attached to window manager。

当Dialog显示的时候，下面的Activity会失去焦点，用户的注意力将全部集中在Dialog上，进行操作；当Dialog消失后，Activity将重新获得焦点。

E.g.：

```java

AlertDialog.Builder builder = new AlertDialog.Builder(this);

builder.setMessage("Are you sure?")

.setPositiveButton("Yes", new DialogInterface.OnClickListener() {

public void onClick(DialogInterface dialog, int id) {

// 处理确认操作

}

})

.setNegativeButton("No", new DialogInterface.OnClickListener() {

public void onClick(DialogInterface dialog, int id) {