一、文本显示
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>
运行结果:
(上半部分可左右滑动,下半部分可上下滑动)