安卓移动应用开发：简单控件--视图基础与常用布局

本文链接：https://blog.csdn.net/qq_61115762/article/details/136509117

一、文本显示

1 设置文本的内容

1.1 设置文本内容的方式

① 在XML 文件中通过属性 android:text 设置文本；

② 在 Java 代码中调用文本视图对象 setText 方法来设置文本。

1.2 在 XML 文件中设置文本

方法：

android:text = "字符串"

① TextViewActivity.class 代码：

package com.example.ilikelearning;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class TextViewActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_view);
    }
}

② activity_text_view 代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TextViewActivity">

    <TextView
        android:id="@+id/tv_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="你好，这是一次文本填充测试" />

</LinearLayout>

③运行结果：

1.3 在 Java 代码中设置文本

方法：

TextView TextView变量 = findViewById(R.id.控件id);

TextView变量.setText("文本内容");

思维导图与具体实现：

① TextViewActivity.class 代码：

package com.example.ilikelearning;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.TextView;

public class TextViewActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_view);
        TextView tv_id = findViewById(R.id.tv_id);
        tv_id.setText("你好，这是从Java代码输入的字符串");
    }
}

② activity_text_view 代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TextViewActivity">

    <TextView
        android:id="@+id/tv_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

③运行结果：

1.4 字符串常量

当我们在 XML 文件中把字符串写死时，Android Studio会提示如下的警告。这里它推荐我们把字符串定义到资源文件中的 strings.xml 中（res -> values -> strings.xml）。

因为我们可能在多个 XML 或多个控件中都会要到该文本，当我们需要修改这个文本时，就需要一个一个修改，很麻烦。（学过编程的，懂的都懂）所以我们把这个字符串常量定义到strings.xml中，然后在 XML 控件中引用这个字符串常量就行。

定义格式：

<string name = "字符串常量名"> 字符串内容 </sring>

例子：

① strngs.xml 中的定义：

<resources>
    <string name="app_name">I Like Learning</string>
    <string name="hello">Hi Man</string>
</resources>

② 在 activity_text_view.xml中引用该字符串常量：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TextViewActivity">

    <TextView
        android:id="@+id/tv_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello"/>

</LinearLayout>

③ TextViewActivity.class 代码：

package com.example.ilikelearning;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.TextView;

public class TextViewActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_view);
    }
}

④运行结果：

2 设置文本的大小

2.1 设置文本大小的方式

① 在XML 文件中通过属性 android:textSize 设置文本大小；

② 在 Java 代码中调用文本视图对象 setTextSize 方法来设置文本大小。

常用单位：

px：手机屏幕的最小显示单位，与设备的显示屏有关；

dp：与设备无关的显示单位，只与屏幕的尺寸有关；

sp：专门用来设置字体的大小，在系统设置中可以调整字体的大小。

2.2 Android 中的尺寸知识简介

名称	意思
px（Pixel，像素）	图像元素，作为构成图像的基本单元，一个像素点为1px。
Resolution（分辨率）	指屏幕的垂直和水平方向的像素数量，如果分辨率为 1920*1080，那就是垂直方向有 1920 个像素点，水平方向有 1080 个像素点。
Dpi（Dots Per Inch，像素密度）	指屏幕上每英寸（1英寸 = 2.54厘米）距离中有多少个像素点。
Density（密度）	指屏幕上每平方英寸中含有的像素点个数。
Dip / dp（设备独立像素）	长度单位，具体效果与设备的密度有关。

其中，px = dip * dpi / 160。

2.3 在 XML 文件中设置文本的大小

方法：

android:textSize = "字符串大小单位"

注意：XML中设置文本大小一定要有单位，否则会报错！！！

① TextViewActivity.class 代码：

package com.example.ilikelearning;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.TextView;

public class TextViewActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_view);
    }
}

② activity_text_view 代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TextViewActivity">

    <TextView
        android:id="@+id/tv_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello"
        android:textSize="100sp"/>

</LinearLayout>

③运行结果：

2.4 在 Java 代码中设置文本的大小

方法：

TextView TextView变量 = findViewById(R.id.控件id);

TextView变量.setTextSize("文本大小"); // 不用单位，默认为sp

思维导图与具体实现：

① TextViewActivity.class 代码：

package com.example.ilikelearning;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.TextView;

public class TextViewActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_view);
        TextView tv_id = findViewById(R.id.tv_id);
        tv_id.setTextSize(50);
    }
}

② activity_text_view 代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TextViewActivity">

    <TextView
        android:id="@+id/tv_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

</LinearLayout>

③运行结果：

3 设置文本与背景的颜色

在 Java 代码中，可以调用 setTextColor 方法来设置文本的颜色，具体的颜色值可从 Color 类中获取。

Color 类中的颜色类型	说明
BLACK	黑色
DKGRAY	深灰色
GRAY	灰色
LTGRAY	浅灰色
WHITE	白色
RED	红色
GREEN	绿色
BLUE	蓝色
YELLOW	黄色
CYAN	青色
MAGENTA	玫瑰红
TRANSPARENT	透明

3.1 设置文本颜色的方式

① 在 XML 文件中通过属性 android:textColor 设置文本颜色；

② 在 Java 代码中调用文本视图对象 setTextColor 方法来设置文本颜色。

（具体步骤和上面的设置文本内容和大小一致，这里后面就演示其中一个）

注意：

在XML文件中，不管是定义文本颜色还是背景颜色，如果直接用RGB来定义颜色，设置前要加#。

3.2 RGB颜色定义

在 XML 文件中，通过 android:textColor 指定文本的颜色，色值由透明度 alpha 和 RGB 三原色（红色red、绿色green、蓝色blue）联合定义；

色值有八位十六进制与六位十六进制两种表达方式，例如在八位编码FFEEDDCC中，FF表示透明度，EE表示红色的浓度，DD表示绿色的浓度，CC表示蓝色的浓度（即数值越大，颜色越浓，亮度越亮），六位则表示默认不透明。

透明度为FF表示完全不透明，为00表示完全透明。

3.3 设置背景颜色的方式

① 在 XML 文件中通过属性 android:background 设置文本颜色；

② 在 Java 代码中调用文本视图对象 setBackgroundResource 方法来设置文本颜色。

3.4 设置文本颜色演示

① TextViewActivity.class 代码：

package com.example.ilikelearning;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Bundle;
import android.widget.TextView;

public class TextViewActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_view);
        TextView tv_id = findViewById(R.id.tv_id);
        tv_id.setTextSize(50);
        tv_id.setTextColor(Color.RED);
    }
}

② activity_text_view 代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TextViewActivity">

    <TextView
        android:id="@+id/tv_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

</LinearLayout>

③ 运行结果：

3.5 设置背景颜色演示

① TextViewActivity.class 代码：

package com.example.ilikelearning;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Bundle;
import android.widget.TextView;

public class TextViewActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_view);
        TextView tv_id = findViewById(R.id.tv_id);
        tv_id.setTextSize(50);
        tv_id.setTextColor(Color.RED);
        tv_id.setBackgroundColor(0xff00ff00);
    }
}

② activity_text_view 代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TextViewActivity">

    <TextView
        android:id="@+id/tv_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

</LinearLayout>

③ 运行结果：

二、视图基础

1 设置视图的视高

1.1 视图宽高的设置属性

试图（view）宽度通过属性android:layout_width表达，

视图高度通过属性android:layout_height表达，

宽高的取值主要有下列三种：

① match_parent：与上级视图一致；

② wrap_content：与内容自适应；

（最宽不超过上级视图，否则换行，最高也不可超过上级视图，否则隐藏）

③ 以dp为单位的具体尺寸。

1.2 代码中获取视图布局参数（宽度和高度）的方法

视图名.getLayoutParams();

（具体代码看 1.3 在代码中设置视图宽高的举例代码）

1.2 XML中设置视图宽高举例

① activity_size_text.xml 代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".TextSizeActivity">
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:textColor="@color/green"
        android:background="@color/black"
        android:text="这是采用视图宽高wrap_content定义的视图"
        android:textSize="17sp" />
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/green"
        android:layout_marginTop="10dp"
        android:background="#ff5412ff"
        android:text="这是采用视图宽度为match_parent的视图"
        android:textSize="17sp" />
    
    <TextView
        android:layout_width="300dp"
        android:layout_height="100dp"
        android:textColor="#ff0f00f0"
        android:background="#00ff00"
        android:layout_marginTop="10dp"
        android:text="这是采用固定大小的视图"
        android:textSize="17sp"/>

</LinearLayout>

运行结果：

1.3 在代码中设置视图宽高举例

① activity_size_text.xml 文件代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".TextSizeActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:textColor="@color/green"
        android:background="@color/black"
        android:text="这是采用视图宽高wrap_content定义的视图"
        android:textSize="17sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/green"
        android:layout_marginTop="10dp"
        android:background="#ff5412ff"
        android:text="这是采用视图宽度为match_parent的视图"
        android:textSize="17sp" />

    <TextView
        android:layout_width="300dp"
        android:layout_height="100dp"
        android:textColor="#ff0f00f0"
        android:background="#00ff00"
        android:layout_marginTop="10dp"
        android:text="这是采用固定大小的视图"
        android:textSize="17sp"/>

    <TextView
        android:id="@+id/tv_id03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#ff0f00f0"
        android:background="#00ff00"
        android:layout_marginTop="10dp"
        android:text="这是通过代码修改大小的视图"
        android:textSize="17sp"/>

</LinearLayout>

② TextSizeActivity.class 代码：

package com.example.ilikelearning;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.ViewGroup;
import android.widget.TextView;

import com.example.ilikelearning.utils.Utils;

public class TextSizeActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_size);
        TextView tv_id = findViewById(R.id.tv_id03);
        //获取tv_code的布局参数（含宽度和高度）
        ViewGroup.LayoutParams params = tv_id.getLayoutParams();
        //修改布局参数中的宽度数值，注意这里默认为px单位，需要把dp数值转化为px数值
        params.height = Utils.dip2px(this,100);
        params.width = Utils.dip2px(this,300);
        tv_id.setLayoutParams(params);
    }
}

③ Utils.class 代码（辅助dp与px转化的，可以不看）:

package com.example.ilikelearning.utils;

import android.content.Context;

public class Utils {

    public static int dip2px(Context context, float dpValue){
        //dpi：每英寸中像素的个数
        //px = dp * dpi / 160
        //获取当前手机的像素密度（1dp对应多少px）
        //context.getResources() 获取上下文
        float scale = context.getResources().getDisplayMetrics().density;
        //返回
        return (int)(dpValue * scale + 0.5f);

    }
}

运行结果：

2 设置视图的间距

2.1 视图间距设置的两种方式

① layout_margin 属性：

指定了当前视图与周围平级视图之间的距离，包括：

1、layout_margin

2、layout_marginLeft

3、layout_marginTop

4、layout_marginRight

5、layout_marginBottom

② padding 属性：

指定了当前视图与内部下级视图之间的距离，包括：

1、padding

2、paddingLeft

3、paddingTop

4、paddingRight

5、paddingBottom

2.2 示例代码

<?xml version="1.0" encoding="utf-8"?>
<!-- 最外层布局为蓝色 -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="400dp"
    android:background="#FF00AAFF"
    android:orientation="vertical"
    tools:context=".ViewMarginActivity">

    <!-- 中间布局为黄色 -->
    <!-- 只设margin值，表示上下左右全为这个值 -->
    <!-- 只设padding值，表示上下左右全为这个值 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="20dp"
        android:padding="50dp"
        android:background="#FFFFFF00">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/green"
            >

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

运行结果：

3 设置视图的对齐方式

3.1 设置视图对齐方式的两种方式

① 采用 layout_gravity 属性：指定当前视图相对与上级视图的对齐方式；

② 采用 gravity 属性：指定下级视图相对于当前视图的对齐方式。

layout_gravity 和 gravity 的取值包括：left、top、right、bottom，还可以用竖线连接各取值，例如 " left|top " 表示即靠左又靠上，也就是朝着左上角对齐。

3.2 示例代码

① activity_gravity_view.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:orientation="horizontal"
    android:background="#ff00f0ff"
    tools:context=".ViewGravityActivity">
    
    <!--  第一个子布局的背景为红色，在上级视图中朝下对齐，它的下级视图靠左对齐  -->
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:layout_weight="1"
        android:background="#ffff00ff"
        android:layout_margin="20dp"
        android:layout_gravity="bottom"
        android:gravity="left">
        
        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#ff00ff00"
            android:layout_margin="10dp">
            
        </LinearLayout>
        
    </LinearLayout>
    
    <!--  第二个子布局的背景为红色，在上级视图中朝上对齐，它的下级视图靠右对齐  -->
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:layout_weight="1"
        android:background="#ffff00ff"
        android:layout_margin="20dp"
        android:layout_gravity="top"
        android:gravity="right">

        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#ff00ff00"
            android:layout_margin="10dp">

        </LinearLayout>
        
    </LinearLayout>

</LinearLayout>

运行结果：

三、常用布局

1 线性布局 LinearLayout

1.1 线性布局的两种排列方式：

（orientation的两个属性值）

① horizontal：内部视图在水平方向上从左往右排列；

② vertical：内部视图在垂直方向上从上往下排列。

如果不指定 orientation 属性，则 LinearLayout 默认水平方向排列。

1.2 示例代码

XML 代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".LinearLayoutTestActivity">

    <!-- 第一个线性布局 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第一个线性布局的第一个元素"
            android:background="#ff00ff00"/>
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第一个线性布局的第二个元素"
            android:background="#ffff00ff"/>
        
    </LinearLayout>
    
    <!-- 第二个线性布局 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第二个线性布局的第一个元素"
            android:background="#ffffff00"
            />
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第二个线性布局的第二个元素"
            android:background="#ff00ffff"/>
        
    </LinearLayout>
</LinearLayout>

运行结果：

1.3 线性布局的权重：

① 线性布局的权重，指的是线性布局的下级视图各自拥有多大的比例宽高；

② 权重属性名为：layout_weight，该属性设置在LinearLayout下的下级视图设置，表示该下级视图占据的宽高比例。

当 layout_width 为 0dp 时，layout_weight 表示水平方向的宽度比例；

当 layout_height 为 0dp 时，layout_weight 表示垂直方向的高度比例。

1.4 示例代码

还是以 1.2 的代码为例，并在第一个 LinearLayout 中的 textview 设置 layout_weight：

XML 代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".LinearLayoutTestActivity">

    <!-- 第一个线性布局 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        
        <!-- 在Textview中设置权重，使其宽度对半分 -->
        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="第一个线性布局的第一个元素"
            android:background="#ff00ff00"/>

        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="第一个线性布局的第二个元素"
            android:background="#ffff00ff"/>

    </LinearLayout>

    <!-- 第二个线性布局 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第二个线性布局的第一个元素"
            android:background="#ffffff00"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第二个线性布局的第二个元素"
            android:background="#ff00ffff"/>

    </LinearLayout>
</LinearLayout>

运行结果：

2 相对布局 RelativeLayout

2.1 基本介绍

1、相对布局的下级视图位置由其他视图来决定。

2、用于确定下级视图位置的参照物分为两种：

① 与该视图自身平级的视图；

② 该视图的上级的视图（也就是它归属的RelativeLayout）

3、如果不设定下级视图的参照物，那么下级视图默认显示在RelativeLayout内的左上角。

2.2 相对取值

相对位置的取值	说明
layout_toLeftOf	当前视图在指定视图的左边
layout_toRightOf	当前视图在指定视图的右边
layout_above	当前视图在指定视图的上方
layout_below	当前视图在指定视图的下方
layout_alignLeft	当前视图与指定视图左对齐
layout_alignRight	当前视图与指定视图右对齐
layout_alignTop	当前视图与指定视图顶部对齐
layout_alignBottom	当前视图与指定视图底部对齐
layout_centerInParent	当前视图在上级视图的正中央
layout_centerHorizontal	当前视图在上级视图的水平中央
layout_centerVertical	当前视图在上级视图的垂直中央
layout_alignParentLeft	当前视图与上级视图的左侧对齐
layout_alignParentRight	当前视图与上级视图的右侧对齐
layout_alignParentTop	当前视图与上级视图的顶部对齐
layout_alignParentBottom	当前视图与上级视图的底部对齐

2.3 简单示例

XML 代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    tools:context=".RelativeLayoutTestActivity">

    <!-- 针对上级视图的对齐 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我想在RelativeLayout的中间"
        android:background="#ff00ffff"
        android:layout_centerInParent="true"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我想在水平中间"
        android:background="#ffff00ff"
        android:layout_centerHorizontal="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我想在垂直中间"
        android:background="#ff00ff00"
        android:layout_centerVertical="true"/>

    <TextView
        android:id="@+id/tv_parent_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我想在上级的左边对齐"
        android:background="#fff0f0af"
        android:layout_alignParentLeft="true"/>

    <TextView
        android:id="@+id/tv_parent_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我想在上级的右边对齐"
        android:background="#fff0f0af"
        android:layout_alignParentRight="true"/>

    <TextView
        android:id="@+id/tv_parent_bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我想在上级的底部对齐"
        android:background="#fff0f0af"
        android:layout_alignParentBottom="true" />

    <!-- 把和上级的左边对齐冲突覆盖了 -->
    <TextView
        android:id="@+id/tv_parent_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我想在上级的顶部对齐"
        android:background="#fff0f0af"
        android:layout_alignParentTop="true" />

    <!-- 与其他平级视图的对齐 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我想在 与上级的顶部对齐的视图 的下方"
        android:background="#ff00f0af"
        android:layout_below="@id/tv_parent_top" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我想在 与上级的底部对齐的视图 的上方"
        android:background="#ff00f0af"
        android:layout_above="@id/tv_parent_bottom" />


</RelativeLayout>

运行结果：

3 网格布局 GridLayout

3.1 基本介绍

1、网格布局支持多行多列的表格排列；

2、网格布局默认从左往右，从上到下。

3、它拥有两个特殊属性：

① columnCount属性：指定网格的列数，即每行放多少视图；

② rowCount属性：指定网格的行数，即每列能放多少视图。

3.2 简单示例

XML 代码：

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="1"
    android:rowCount="2"
    tools:context=".GridLayoutActivity">

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_rowWeight="1"
        android:rowCount="1"
        android:columnCount="2"
        >

        <ImageView
            android:id="@+id/iv_i"
            android:scaleType="fitXY"
            android:layout_width="0dp"
            android:layout_columnWeight="1"
            android:src="@drawable/i"/>

        <ImageView
            android:id="@+id/iv_like"
            android:scaleType="fitXY"
            android:layout_width="0dp"
            android:layout_columnWeight="1"
            android:src="@drawable/like"/>
    </GridLayout>

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_rowWeight="1"
        android:rowCount="1"
        android:columnCount="2">

        <ImageView
            android:id="@+id/iv_learning01"
            android:scaleType="fitXY"
            android:layout_width="0dp"
            android:layout_columnWeight="1"
            android:src="@drawable/learning01"/>

        <ImageView
            android:id="@+id/iv_learning02"
            android:scaleType="fitXY"
            android:layout_width="0dp"
            android:layout_columnWeight="1"
            android:src="@drawable/learning02"/>

    </GridLayout>

</GridLayout>

运行结果：

4 滚动布局 ScrollView

4.1 滚动视图的两种方式

① ScrollView：

1、垂直方向的滚动视图；

2、垂直方向滚动时，其内部视图：

layout_width属性值设置为match_parent；

layout_height属性设置为wrap_content。

② HorizontalSrollView：

1、水平方向的滚动视图；

2、水平方向滚动时，其内部视图：

layout_width属性值设置为wrap_content；

layout_height属性设置为match_parent。

4.2 简单示例

XML 代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ScrollViewTestActivity">

    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="200dp">

        <!-- 水平方向的布局：两个视图 -->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <View
                android:layout_width="300dp"
                android:layout_height="match_parent"
                android:background="#ff00ffff"/>

            <View
                android:layout_width="300dp"
                android:layout_height="match_parent"
                android:background="#ffffff00"/>

        </LinearLayout>

    </HorizontalScrollView>

    <ScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >

        <!-- 垂直方向的布局：两个视图 -->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <View
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:background="#ffa00fff"/>

            <View
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:background="#ffaabbcc"/>


        </LinearLayout>

    </ScrollView>

</LinearLayout>

运行结果：

（上半部分可左右滑动，下半部分可上下滑动）