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

什么是Android ViewGroup？

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

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

Android ViewGroup的类型

Android中一些重要的ViewGroup是：

• 线性布局
• 相对布局
• 框架布局
• 表格布局
• 协调器布局
• ConstraintLayout

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

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

1. LinearLayout

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

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

1.1)水平LinearLayout 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">

  <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@android:color/holo_green_light"
      android:text="Button 1" 

  <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Button 2" 

  <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@android:color/holo_purple"
      android:text="Button 1" 

</LinearLayout>

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

1.2)垂直LinearLayout 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="vertical"
  android:gravity="end"
  android:layout_height="match_parent">

  <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@android:color/holo_green_light"
      android:text="Button 1" 

  <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Button 2" 

  <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@android:color/holo_purple"
      android:text="Button 1" 

</LinearLayout>

重力值" end"代表"正确"对齐。
我们可以互换使用值" right"或者" end"。

同样，对于"向左"对齐，我们也可以使用"开始"。

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

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

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

1.3)LinearLayout权重

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

我们必须在子视图中为LinearLayout和android：layout_weight属性指定ʻandroid：weightSum`。

以下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">

  <Button
      android:layout_weight="1"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:background="@android:color/holo_green_light"
      android:text="Button 1" 

  <Button
      android:layout_weight="1"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:text="Button 2" 

  <Button
      android:layout_weight="1"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:text="Button 3" 

</LinearLayout>

• 在子视图上设置了" layout_weight"。
  我们必须将宽度指定为" 0dp"，以便使用LinearLayout中的布局权重自动计算宽度。

• 类似地，如果方向是垂直的，并且指定了布局权重，则必须将" layout_height"指定为" 0dp"。
  它会根据" layout_weight"属性自动计算得出。

1.4)嵌套的LinearLayout

以下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">

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="1"
      android:orientation="vertical"
      android:weightSum="0.8">

      <ImageView
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:layout_weight="0.4"
          android:src="@mipmap/ic_launcher" 

      <ImageView
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:layout_weight="0.2"
          android:src="@mipmap/ic_launcher" 

      <ImageView
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:layout_weight="0.2"
          android:src="@mipmap/ic_launcher" 

  </LinearLayout>

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="1.2"
      android:gravity="center"
      android:weightSum="1.5">

      <Button
          android: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" 

      <Button
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:layout_weight="0.6"
          android:text="Button 2" 

      <Button
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:layout_gravity="bottom|right"
          android:layout_weight="0.4"
          android:text="Button 3" 

  </LinearLayout>

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="1"
      android:gravity="center"
      android:weightSum="1.5">

      <TextView
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:layout_weight="0.4"
          android:background="@android:color/holo_green_light"
          android:text="Androidly 1" 

      <TextView
          android: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" 

      <TextView
          android: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>

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

1.5)以编程方式创建LinearLayout

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

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

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

让我们看看我们的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>

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

package net.androidly.androidlylayouts

import 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.LinearLayout

class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_main)
      linearLayout.weightSum = 3f
      linearLayout.orientation = LinearLayout.VERTICAL

      val params = LinearLayout.LayoutParams(
              LinearLayout.LayoutParams.MATCH_PARENT, 0)
      params.weight = 1f

      var button = Button(this)
      button.text = "Androidly Button 1"
      button.setBackgroundColor(ContextCompat.getColor(this, android.R.color.holo_purple))
      button.layoutParams = params

      linearLayout.addView(button)

      button = Button(this)
      button.text = "Androidly Button 2"
      button.setBackgroundColor(ContextCompat.getColor(this, android.R.color.holo_green_dark))
      button.layoutParams = params
      linearLayout.addView(button, 0)

      button = Button(this)
      button.text = "Androidly Button 3"
      button.setBackgroundColor(ContextCompat.getColor(this, android.R.color.holo_red_dark))
      button.layoutParams = params
      linearLayout.addView(button, linearLayout.childCount - 1)
  }
}

weightSum属性需要一个浮动值。

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

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

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

2. RelativeLayout

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

以下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">

  

  <Button
      android:text="Center"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true" 

  <Button
      android:text="Center-H"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="true" 

  <Button
      android:text="Center-V"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerVertical="true" 

  <Button
      android: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" 

  <Button
      android:text="Parent-BL"
      android:layout_alignParentBottom="true"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      

  <Button
      android:text="Parent-RT"
      android:layout_alignParentRight="true"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentEnd="true" 

  <Button
      android:text="Parent-LT"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      
  
</RelativeLayout>

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

• layout_centerVertical = true将视图设置在垂直中心。
  默认情况下，它将保持对齐状态。

• layout_centerHorizontal = true将视图设置在水平中心。
  默认情况下，它的顶部对齐。

• layout_centerInParent = true将视图设置在父级的水平和垂直中心。

• layout_alignParentEnd/Right = true将视图与视图的右端对齐。

2.1)相对于兄弟姐妹

• layout_above =" @ + id/sibling_id"用于将当前子级设置在同级之上。

• layout_below在下面进行设置。

• layout_alignLeft/layout_alignStart =" @ + id/sibling_id"将当前孩子的左边距与同级对齐

• layout_alignRight/layout_alignEnd =" @ + id/sibling_id"将当前孩子的右边距与同级对齐。

• 同样，alignBottom和alignTop分别对齐底部和顶部。

• android：layout_toEndOf/android：layout_toRightOf =" @ + id/sibling_id"将孩子放在同胞的右边。

• 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">

  <Button
      android: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" 

  <Button
      android: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" 

  <Button
      android: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" 

  <Button
      android: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"

  <Button
      android: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"
      

  <Button
      android: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

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

以下是我们的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>

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

package net.androidly.androidlylayouts

import 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.ViewGroup

class MainActivity : AppCompatActivity() {

  val ID_1 = 1
  val ID_2 = 2
  val ID_3 = 3

  override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_main)

      var button = Button(this)
      button.text = "1"
      button.id = ID_1

      val lp = RelativeLayout.LayoutParams(
              RelativeLayout.LayoutParams.WRAP_CONTENT,
              RelativeLayout.LayoutParams.WRAP_CONTENT)
      lp.addRule(RelativeLayout.CENTER_IN_PARENT)

      button.layoutParams = lp

      relativeLayout.addView(button)

      button = Button(this)
      button.text = "2"
      button.id = ID_2

      val params = RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
      params.addRule(RelativeLayout.BELOW, ID_1)
      button.layoutParams = params

      relativeLayout.addView(button)

      button = Button(this)
      button.text = "3"
      button.id = ID_3

      val lp2 = RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
      params.addRule(RelativeLayout.LEFT_OF, ID_2)
      button.layoutParams = lp2

      relativeLayout.addView(button)

  }
}

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