Android官方开发文档Training系列课程中文版:使用Fragment构建动态UI之Fragment创建

简介: 原文地址:http://android.xsoftlab.net/training/basics/fragments/index.html导言为了在Android中创建动态的多面板用户界面,你需要将UI组件和活动的行为封装到模块中,这些模块可以在activity中互相交换。

原文地址:http://android.xsoftlab.net/training/basics/fragments/index.html

导言

为了在Android中创建动态的多面板用户界面,你需要将UI组件和活动的行为封装到模块中,这些模块可以在activity中互相交换。你可以使用类Fragment创建这些模块,这些习性看起来像一个鸟巢状的activity,它允许定义自己的布局和管理自己的生命周期。

当Fragment指定了布局,它可以与其它fragment以不同的方式组合进activity中,以便可以对不同的屏幕尺寸做适应,小屏幕可能需要在同一时刻只展示一个fragment,而大屏幕可以同时展示两个或两个以上的fragment。

这节课将会展示如何通过fragment创建动态的用户效果,并改进APP在不同屏幕尺寸上的展示的用户效果,同时继续支持运行Android1.6系统的设备。

创建一个Fragment

你可以把fragment想象为activity的一个单独的模块,这个模块拥有自己的生命周期,并且可以接收用户输入。并且可以在activity运行的时候添加或移除fragment。这节课展示了如何继承支持库中的Fragment,从而可以使APP可以运行在Android1.6这种低版本上。

Note:如果选择了APP的最低支持版本为11或者11以上,那么就不需要使用支持库。这时可以使用框架中的Fragment类。不过需要意识到这节课使用的是支持库中的Fragment,这里的API名称可能会与框架中的Fragment名称有稍微的不同。

在开始这节课之前,必须确认工程已经使用了支持库。如果还没有使用支持库的话,请选择v4包中的支持库。你也可以使用包含了ActionBar的v7支持库,不过它只能运行在Android2.1及以上的版本上。

创建一个Fragment类

如果要创建一个Fragment,需要继承Fragment类,然后重写关键的生命周期函数,与Activity类的方式很相似。

唯一的不同就是在创建Fragment时必须使用onCreateView方法定义布局。实际上,如果要简单运行的话,这是唯一个需要重写的方法。举个例子:

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.ViewGroup;
public class ArticleFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.article_view, container, false);
    }
}

正如Activity一样,一个fragment应该实现其它生命周期函数,这些生命周期函数可以管理各种状态,比如说添加到activity的状态或是从activity移除的状态,或是像activity类似的生命周期状态。举个例子,当activity的onPause方法被调用时,在activity中的每一个fragment的onPause方法也会被调用。

有关更多fragment的生命周期以及回调函数介绍请参见Fragments开发文档。

使用XML将Fragment添加到Activity中

虽然fragment有可重用化、UI组件模块化的特点,但是每一个fragment都需要与FragmentActivity关联才能使用。你可以在activity的XML布局文件中通过定义的方式达成这种关联。

**Note:**FragmentActivity是支持库中一个特殊的activity,它使得fragment可以在版本11以下的设备上运行。如果APP的最低支持版本在11及11以上的话,可以使用正规的Activity类。

下面的这个布局例子展示了当设备的屏幕被认为是”large”时,添加了两个Fragment到Activity中(特别指明布局文件夹的目录包含”large”标识符):
res/layout-large/news_articles.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <fragment android:name="com.example.android.fragments.HeadlinesFragment"
              android:id="@+id/headlines_fragment"
              android:layout_weight="1"
              android:layout_width="0dp"
              android:layout_height="match_parent" />
    <fragment android:name="com.example.android.fragments.ArticleFragment"
              android:id="@+id/article_fragment"
              android:layout_weight="2"
              android:layout_width="0dp"
              android:layout_height="match_parent" />
</LinearLayout>

Tips:有关更多针对不同的屏幕尺寸创建布局的信息,请参见:Supporting Different Screen Sizes(本系列也有翻译,请自行查找)

然后将布局应用到Activity中:

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
public class MainActivity extends FragmentActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.news_articles);
    }
}

如果你使用了v7 appcompat library,Activity应该替换为继承ActionBarActivity,它是FragmentActivity的子类。

Note:如果通过XML布局的方式将Fragment添加到了Activity中,那么在运行时是不可以移除Fragment的。如果你计划在用户使用的时候将Fragment换进换出,那么你必须在Activity第一次启动的时候把fragment添加进去。下一节课将会讨论这些。

目录
相关文章
|
6月前
|
存储 开发框架 JavaScript
深入探讨Flutter中动态UI构建的原理、方法以及数据驱动视图的实现技巧
【6月更文挑战第11天】Flutter是高效的跨平台移动开发框架,以其热重载、高性能渲染和丰富组件库著称。本文探讨了Flutter中动态UI构建原理与数据驱动视图的实现。动态UI基于Widget树模型,状态变化触发UI更新。状态管理是关键,Flutter提供StatefulWidget、Provider、Redux等方式。使用ListView等可滚动组件和StreamBuilder等流式组件实现数据驱动视图的自动更新。响应式布局确保UI在不同设备上的适应性。Flutter为开发者构建动态、用户友好的界面提供了强大支持。
115 2
|
3月前
|
JavaScript 前端开发 开发工具
使用vue3+element-ui plus 快速构建后台管理模板
本文介绍了如何使用Vue 3和Element UI Plus快速构建后台管理模板的步骤,包括安装Vue 3脚手架、Element UI Plus以及如何全局配置Element UI Plus。然后详细讲解了如何使用Element UI Plus构建布局,包括Header组件、Aside组件和HomeView视图的创建和样式调整,以及App.vue和main.css的修改,最后提供了项目的文件结构图和效果展示。
使用vue3+element-ui plus 快速构建后台管理模板
|
4月前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
196 0
|
4月前
|
前端开发 开发者 C#
深度解析 Uno Platform 中的 MVVM 模式:从理论到实践的全方位指南,助你轻松掌握通过 C# 与 XAML 构建高效可维护的跨平台应用秘籍
【8月更文挑战第31天】本文详细介绍如何在优秀的跨平台 UI 框架 Uno Platform 中实施 MVVM(Model-View-ViewModel)模式,通过一个简单的待办事项列表应用演示其实现过程。MVVM 模式有助于分离视图层与业务逻辑层,提升代码组织性、易测性和可维护性。Uno Platform 的数据绑定机制使视图与模型间的同步变得高效简便。文章通过构造 `TodoListViewModel` 类及其相关视图,展示了如何解耦视图与模型,实现动态数据绑定及命令处理,从而提高代码质量和开发效率。通过这一模式,开发者能更轻松地构建复杂的跨平台应用。
64 0
|
4月前
|
前端开发 JavaScript 开发者
Angular Material 超厉害!与传统自定义 UI 大对比,构建美观一致 UI 的绝佳选择!
【8月更文挑战第31天】在前端开发中,构建美观一致的用户界面至关重要。Angular Material 是一个基于 Material Design 规范的强大 UI 组件库,提供丰富的预定义组件和设计指南。本文通过对比 Angular Material 和传统自定义 UI,展示了前者在设计理念、组件丰富度、响应式设计及主题定制方面的显著优势。
80 0
|
1月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
2月前
|
开发框架 JavaScript 前端开发
鸿蒙NEXT开发声明式UI是咋回事?
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS,提供高效简洁的开发体验。ArkTS扩展了TypeScript,支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化,UI将自动更新,简化了开发流程。此外,其前后端分层设计与编译时优化确保了高性能运行,利于生态发展。通过组件创建、状态管理和渲染控制等方式,开发者能快速构建高质量的鸿蒙应用。
140 3
|
2天前
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
21天前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
1月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
114 8