Android ViewGroup class is used to create the screen views. In this tutorial, we will learn about the ViewGroup and look at some simple examples.

Android ViewGroup类用于创建屏幕视图。 在本教程中，我们将学习ViewGroup并查看一些简单的示例。

什么是Android ViewGroup？ (What is an Android ViewGroup?)

A ViewGroup is a container to hold views. All the android activities, fragment layouts, etc. are ViewGroups.

ViewGroup是用于保存视图的容器。 所有的android活动，片段布局等都是ViewGroups。

The ViewGroup classes are extended from Views. They are used as containers on the android app screen.

ViewGroup类是从Views扩展的。 它们用作android应用程序屏幕上的容器。

Android ViewGroup的类型 (Types of Android ViewGroup)

Some of the important ViewGroups in Android are:

Android中一些重要的ViewGroup是：

• LinearLayout线性布局
• RelativeLayout相对布局
• FrameLayout框架布局
• TableLayout表格布局
• CoordinatorLayout协调器布局
• ConstraintLayoutConstraintLayout

The name of these classes ends with “Layout” because they are used to create different types of layouts.

这些类的名称以“ Layout”结尾，因为它们用于创建不同类型的布局。

Let’s look into some examples of ViewGroups in the Android app.

让我们看一下Android应用程序中ViewGroups的一些示例。

1. LinearLayout (1. LinearLayout)

LinearLayout is a ViewGroup that aligns all of its child views in one direction: vertically or horizontally.

LinearLayout是一个ViewGroup，它在一个方向（垂直或水平）上对齐其所有子视图。

The android:orientation attribute is used to set the direction in XML layout.

android:orientation属性用于在XML布局中设置方向。

1.1）水平LinearLayout XML代码 (1.1) Horizontal LinearLayout XML Code)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@android:color/holo_green_light"android:text="Button 1" /><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button 2" /><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@android:color/holo_purple"android:text="Button 1" /></LinearLayout>

By default the orientation is horizontal and the gravity is left aligned.

默认情况下，方向是水平的，并且重力保持对齐。

1.2）垂直LinearLayout XML代码 (1.2) Vertical LinearLayout XML Code)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:orientation="vertical"android:gravity="end"android:layout_height="match_parent"><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@android:color/holo_green_light"android:text="Button 1" /><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button 2" /><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@android:color/holo_purple"android:text="Button 1" /></LinearLayout>

The gravity value end represents right alignment. We can use both the values “right” or “end” interchangeably.

重力值end代表right对齐。 我们可以互换使用值“ right”或“ end”。

Similarly, for left alignment we can use start too.

同样，对于left对齐，我们也可以使用start 。

The “start” and “end” are the preferred values to ensure that the layout behavior is correct in the right to left locales.

首选“开始”和“结束”是确保从右到左语言环境正确的布局行为。

The android:gravity can have either of the following values: left, start, right, end, top, bottom, center, center_horizontal, center_vertical.

android:gravity可以具有以下值之一：left，start，right，end，top，bottom，center，center_horizo​​ntal，center_vertical。

The following image shows how right-aligned Vertical LinearLayout looks in the android app screen.

下图显示了在Android应用程序屏幕中右对齐的Vertical LinearLayout的外观。

1.3）LinearLayout权重 (1.3) LinearLayout Weights)

LinearLayout allows us to set weights on the child views. This will signify the share of width or height that particular view uses from its parent view.

LinearLayout允许我们在子视图上设置权重。 这将表示特定视图从其父视图使用的宽度或高度份额。

We have to specify android:weightSum to the LinearLayout and android:layout_weight attribute in the child view.

我们必须在子视图android:weightSum指定为LinearLayout和android:layout_weight属性。

The following XML layout creates the child’s views with equal width.

以下XML布局创建宽度相等的子视图。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:orientation="horizontal"android:weightSum="3"android:layout_height="match_parent"><Buttonandroid:layout_weight="1"android:layout_width="0dp"android:layout_height="wrap_content"android:background="@android:color/holo_green_light"android:text="Button 1" /><Buttonandroid:layout_weight="1"android:layout_width="0dp"android:layout_height="wrap_content"android:text="Button 2" /><Buttonandroid:layout_weight="1"android:layout_width="0dp"android:layout_height="wrap_content"android:text="Button 3" /></LinearLayout>

• The layout_weight is set on the child views. We have to assign the width as 0dp so that the widths would be automatically calculated using the Layout Weights in LinearLayout.layout_weight在子视图上设置。 我们必须将宽度指定为0dp以便使用LinearLayout中的布局权重自动计算宽度。
• Similarly, if the orientation is vertical and Layout weights are specified, we have to specify the layout_height as 0dp. It will be calculated automatically from the layout_weight attribute.同样，如果方向是垂直的并且指定了布局权重，则必须将layout_height指定为0dp 。 它将根据layout_weight属性自动计算。

1.4）嵌套的LinearLayout (1.4) Nested LinearLayout)

The following XML layout shows Nested Layouts, horizontal, and vertical layouts with the layout weights.

以下XML布局显示了嵌套布局，水平布局和垂直布局以及布局权重。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:weightSum="3"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:orientation="vertical"android:weightSum="0.8"><ImageViewandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="0.4"android:src="@mipmap/ic_launcher" /><ImageViewandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="0.2"android:src="@mipmap/ic_launcher" /><ImageViewandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="0.2"android:src="@mipmap/ic_launcher" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1.2"android:gravity="center"android:weightSum="1.5"><Buttonandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_gravity="top"android:layout_weight="0.5"android:background="@android:color/holo_green_light"android:text="Button 1" /><Buttonandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="0.6"android:text="Button 2" /><Buttonandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_gravity="bottom|right"android:layout_weight="0.4"android:text="Button 3" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:gravity="center"android:weightSum="1.5"><TextViewandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="0.4"android:background="@android:color/holo_green_light"android:text="Androidly 1" /><TextViewandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="0.7"android:background="@android:color/black"android:gravity="center"android:text="Androidly 2"android:textColor="@android:color/white" /><TextViewandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="0.4"android:background="@android:color/holo_purple"android:text="Androidly 3"android:textColor="@android:color/white" /></LinearLayout></LinearLayout>

We’ve set layout weights on each of the child LinearLayouts. The gravity attribute is used to set the gravity of all the child’s views. The layout_gravity is used to set the gravity of a ChildView relative to the layout.

我们已经为每个子级LinearLayouts设置了布局权重。 重力属性用于设置所有儿童视图的重力。 layout_gravity用于设置ChildView相对于布局的重力。

1.5）以编程方式创建LinearLayout (1.5) Creating LinearLayout Programmatically)

We can create the LinearLayout in our Kotlin Activity class.

我们可以在Kotlin Activity类中创建LinearLayout。

We can add the buttons in the LinearLayout using addView() function on the instance. It’ll attach the view passed to the end of the layout.

我们可以在实例上使用addView()函数将按钮添加到LinearLayout中。 它将把传递的视图附加到布局的末尾。

We can pass the index as the second argument in the addView() function to add the child view in a particular position.

我们可以在addView（）函数中将索引作为第二个参数传递，以将子视图添加到特定位置。

Let’s look at the activity_main.xml code in our Android Studio Project.

让我们看看我们的Android Studio项目中的activity_main.xml代码。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/linearLayout"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:orientation="horizontal"android:weightSum="3"></LinearLayout>

The following code adds child views in the LinearLayout programmatically in the MainActivity.kt class.

以下代码以编程方式在MainActivity.kt类的LinearLayout中添加子视图。

package net.androidly.androidlylayoutsimport android.graphics.drawable.GradientDrawable
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v4.content.ContextCompat
import android.support.v7.widget.LinearLayoutCompat
import android.widget.Button
import kotlinx.android.synthetic.main.activity_main.*
import android.widget.LinearLayoutclass MainActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)linearLayout.weightSum = 3flinearLayout.orientation = LinearLayout.VERTICALval params = LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 0)params.weight = 1fvar button = Button(this)button.text = "Androidly Button 1"button.setBackgroundColor(ContextCompat.getColor(this, android.R.color.holo_purple))button.layoutParams = paramslinearLayout.addView(button)button = Button(this)button.text = "Androidly Button 2"button.setBackgroundColor(ContextCompat.getColor(this, android.R.color.holo_green_dark))button.layoutParams = paramslinearLayout.addView(button, 0)button = Button(this)button.text = "Androidly Button 3"button.setBackgroundColor(ContextCompat.getColor(this, android.R.color.holo_red_dark))button.layoutParams = paramslinearLayout.addView(button, linearLayout.childCount - 1)}
}

The weightSum property requires a floating value.

weightSum属性需要一个浮点值。

For each of the Buttons, we’ve created a LayoutParams instance in which we’ve set the layout_weight using the property weight.

对于每个Button，我们创建了一个LayoutParams实例，在其中，我们使用weight属性设置了layout_weight 。

The childCount property gives us the current number of child views present in the LinearLayout.

childCount属性为我们提供了LinearLayout中当前存在的子视图数。

We’ve set the second button on the top, and the third button at the index one less than child count(3-1=2). Hence it comes up in the middle and the first button is at the bottom.

我们将第二个按钮设置在顶部，将第三个按钮设置在索引上，该索引比子项计数（3-1 = 2）少一个。 因此，它出现在中间，而第一个按钮在底部。

2. RelativeLayout (2. RelativeLayout)

RelativeLayout is used to align the views relative to each other as well as relative to its parent view.

RelativeLayout用于使视图相对于彼此以及相对于其父视图对齐。

The following XML layout creates the RelativeLayout view.

以下XML布局创建RelativeLayout视图。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/relativeLayout"android:layout_width="match_parent"android:layout_height="match_parent"><Buttonandroid:text="Center"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true" /><Buttonandroid:text="Center-H"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true" /><Buttonandroid:text="Center-V"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true" /><Buttonandroid:text="Center-VR"android:layout_width="wrap_content"android:layout_alignParentRight="true"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_alignParentEnd="true" /><Buttonandroid:text="Parent-BL"android:layout_alignParentBottom="true"android:layout_width="wrap_content"android:layout_height="wrap_content"/><Buttonandroid:text="Parent-RT"android:layout_alignParentRight="true"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentEnd="true" /><Buttonandroid:text="Parent-LT"android:layout_width="wrap_content"android:layout_height="wrap_content"/></RelativeLayout>

The default position of a RelativeLayout view is top-left.

RelativeLayout视图的默认位置在左上方。

• layout_centerVertical = true sets the view in the vertical center. By default, it’ll be left aligned.layout_centerVertical = true将视图设置在垂直中心。 默认情况下，它将保持对齐状态。
• layout_centerHorizontal = true sets the view in the horizontal center. By default, it’ll be top aligned.layout_centerHorizontal = true将视图设置在水平中心。 默认情况下，它将在最上面对齐。
• layout_centerInParent = true sets the view in the horizontal and vertical center of the parent.layout_centerInParent = true将视图设置在父级的水平和垂直中心。
• layout_alignParentEnd/Right = true aligns the view to the right end of the view.layout_alignParentEnd/Right = true将视图与视图的右端对齐。

2.1）相对于兄弟姐妹 (2.1) Relative to siblings)

• layout_above = “@+id/sibling_id” is used to set the current child above the sibling.layout_above =“ @ + id / sibling_id”用于将当前子级设置在同级之上。
• layout_below sets it below.layout_below在下面进行设置。
• layout_alignLeft/layout_alignStart = "@+id/sibling_id" aligns the left margins of the current child with the siblinglayout_alignLeft/layout_alignStart = "@+id/sibling_id"将当前子项的左边界与同项对齐
• layout_alignRight/layout_alignEnd = "@+id/sibling_id" aligns the right margins of the current child with the sibling.layout_alignRight/layout_alignEnd = "@+id/sibling_id"将当前子级的右边界与同级对齐。
• Similarly alignBottom and alignTop align for the bottom and top respectively.同样，alignBottom和alignTop分别对齐底部和顶部。
• android:layout_toEndOf/android:layout_toRightOf = "@+id/sibling_id" puts the child to the right of the sibling.android:layout_toEndOf/android:layout_toRightOf = "@+id/sibling_id"将孩子放在同级兄弟的右边。
• android:layout_alignBaseline="@+id/sibling_id" aligns the bottom baseline.android:layout_alignBaseline="@+id/sibling_id"对齐底部基线。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/relativeLayout"android:layout_width="match_parent"android:layout_height="match_parent"><Buttonandroid:id="@+id/button1"android:text="1"android:background="@android:color/holo_red_dark"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true" /><Buttonandroid:id="@+id/button2"android:text="2"android:background="@android:color/holo_blue_dark"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_above="@+id/button1" /><Buttonandroid:id="@+id/button3"android:text="3"android:background="@android:color/darker_gray"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@+id/button4" /><Buttonandroid:id="@+id/button4"android:text="4"android:background="@android:color/holo_orange_light"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@+id/button1"android:layout_alignRight="@+id/button1"android:layout_alignEnd="@+id/button1"/><Buttonandroid:id="@+id/button5"android:text="5"android:background="@android:color/holo_purple"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_toRightOf="@+id/button2"android:layout_toEndOf="@+id/button2"/><Buttonandroid:id="@+id/button6"android:text="6"android:background="@android:color/holo_green_light"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_toRightOf="@+id/button2"android:layout_toEndOf="@+id/button2"android:layout_alignBaseline="@+id/button2"/></RelativeLayout>

2.2）以编程方式创建RelativeLayout (2.2) Creating RelativeLayout Programmatically)

We can set the child views using rules in our Kotlin Activity class.

我们可以使用Kotlin Activity类中的规则设置子视图。

Following is our activity_main.xml XML layout.

以下是我们的activity_main.xml XML布局。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/relativeLayout"android:layout_width="match_parent"android:layout_height="match_parent"></RelativeLayout>

The MainActivity.kt class is setting the relative layout views.

MainActivity.kt类正在设置相对布局视图。

package net.androidly.androidlylayoutsimport android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.RelativeLayout
import kotlinx.android.synthetic.main.activity_main.*
import android.view.ViewGroupclass MainActivity : AppCompatActivity() {val ID_1 = 1val ID_2 = 2val ID_3 = 3override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)var button = Button(this)button.text = "1"button.id = ID_1val lp = RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT)lp.addRule(RelativeLayout.CENTER_IN_PARENT)button.layoutParams = lprelativeLayout.addView(button)button = Button(this)button.text = "2"button.id = ID_2val params = RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)params.addRule(RelativeLayout.BELOW, ID_1)button.layoutParams = paramsrelativeLayout.addView(button)button = Button(this)button.text = "3"button.id = ID_3val lp2 = RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)params.addRule(RelativeLayout.LEFT_OF, ID_2)button.layoutParams = lp2relativeLayout.addView(button)}
}

We have to use addRule() method to set the child layout relative to parents and each other.

我们必须使用addRule()方法设置相对于父级和彼此的子级布局。

结论 (Conclusion)

Android ViewGroup classes are used to create different types of layouts on the screen. We also looked at the most important layout classes and how to create them in XML as well as in the activity code.

Android ViewGroup类用于在屏幕上创建不同类型的布局。 我们还研究了最重要的布局类，以及如何在XML和活动代码中创建它们。

翻译自: https://www.journaldev.com/114/android-viewgroup