Easy Tutorial
❮ Javascript Console Object Programmer Joke 21 ❯

2.1 Concept of View and ViewGroup

Category Android Basic Introduction Tutorial

Introduction to This Section

Having bid farewell to the first chapter, we now embark on the second chapter, which delves into the detailed explanation of UI (User Interface) components in Android. In this section, we will focus on the parent classes of all controls, View and ViewGroup! Inspired by a sudden thought, let's directly translate the official documentation's introduction to these two concepts. By the way, due to restrictions in China, accessing Google and Android developer sites is not possible. We can modify the hosts file or use a VPN, or alternatively, use a domestic API mirror, such as this one: http://androiddoc.qiniudn.com/guide/topics/ui/overview.html, which mirrors the API for version 5.0!


UI Overview


In Android apps, all user interface elements are composed of View and ViewGroup objects. A View is an object that draws on the screen and with which users can interact. A ViewGroup, on the other hand, is a container that holds other View (and ViewGroup) objects, acting as a layout container! Android provides us with a collection of View and ViewGroup subclasses, including common input controls (like buttons and text fields) and various layout patterns (like linear or relative layouts).

User Interface Layout


Each component on your app's user interface is constructed using a hierarchy of View and ViewGroup objects, as shown in Figure 1. Each ViewGroup is an invisible container that organizes child Views, which could be input controls or widgets that draw a specific area on the UI. With a hierarchy tree, you can design simple or complex layouts according to your needs (simpler layouts perform better).

To define your layout, you can instantiate View objects in code and start building your tree, but the easiest and most efficient way to define your layout is to use an XML file. XML layout is more human-readable, similar to HTML. The name of the XML element represents a View. So, a <TextView> element creates a TextView control in your interface, while a <LinearLayout> creates a LinearLayout container. For example, a simple vertical layout with a text view and a button looks like this:

<?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:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="I am a Button" />
</LinearLayout>

When your app loads the above layout resource, Android instantiates each node in the layout into objects, and you can define additional behaviors, query the state of these objects, or modify the layout. For a complete guide to creating UI layouts, refer to XML Layouts.

User Interface Components


You don't need to create your UI layout entirely with View and ViewGroup objects. Android provides several standard UI layouts that you can define content for. These UI components come with API documentation that introduces their attributes, such as the action bar, dialogs, and status notification bars.


Summary of This Section

Well, the translation might be a bit awkward. Alas, as someone with limited English proficiency, I've done my best. To summarize the above content simply:

>

Graphical interfaces in Android are composed of View and ViewGroup and their subclasses: View: The parent class of all visual controls, providing methods for component rendering and event handling. ViewGroup: A subclass of the View class that can contain child controls, acting as a container. Android UI controls are stacked in a hierarchical tree structure, and there are two ways to create UI layouts: writing code in Java or defining layouts in XML, with the latter being more convenient and easier to understand! It's also the most commonly used method. Additionally, we rarely use View and ViewGroup directly to create layouts; instead, we usually use their subclass controls or containers to build layouts.

So, having a general understanding of View and ViewGroup is sufficient. We usually don't use them directly; they are typically used when customizing views.

-1.0 Android Basic Introduction Tutorial

-1.0.1 2015年最新Android基础入门教程目录

-1.1 背景相关与系统架构分析

-1.2 开发环境搭建

-1.2.1 使用Eclipse + ADT + SDK开发Android APP

-1.2.2 使用Android Studio开发Android APP

-1.3 SDK更新不了问题解决

-1.4 Genymotion模拟器安装

-1.5.1 Git使用教程之本地仓库的基本操作

-1.5.2 Git之使用GitHub搭建远程仓库

-1.6 9(九妹)图片怎么玩

-1.7 界面原型设计

-1.8 工程相关解析(各种文件,资源访问)

-1.9 Android程序签名打包

-1.11 反编译APK获取代码&资源

-2.2.1 LinearLayout(线性布局)

-2.2.2 RelativeLayout(相对布局)

-2.2.3 TableLayout(表格布局)

-2.2.4 FrameLayout(帧布局)

-2.2.5 GridLayout(网格布局)

-2.2.6 AbsoluteLayout(绝对布局)

-2.3.1 TextView(文本框)详解

-2.3.2 EditText(输入框)详解

-2.3.3 Button(按钮)与ImageButton(图像按钮)

-2.3.4 ImageView(图像视图)

-2.3.5.RadioButton(单选按钮)&Checkbox(复选框)

-2.3.6 开关按钮ToggleButton和开关Switch

-2.3.7 ProgressBar(进度条)

-2.3.8 SeekBar(拖动条)

-2.3.9 RatingBar(星级评分条)

-2.4.1 ScrollView(滚动条)

-2.4.2 Date & Time组件(上)

-2.4.3 Date & Time组件(下)

-2.4.4 Adapter基础讲解

-2.4.5 ListView简单实用

-2.4.6 BaseAdapter优化

-2.4.7ListView的焦点问题

-2.4.8 ListView之checkbox错位问题解决

-2.4.9 ListView的数据更新问题

-2.5.0 构建一个可复用的自定义BaseAdapter

-2.5.1 ListView Item多布局的实现

Follow on WeChat

❮ Javascript Console Object Programmer Joke 21 ❯