一、第一个程序
Hello world!
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:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello world!" />
</LinearLayout>
Java代码：
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity4 extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main4);
}
}
运行效果：
二、文本显示
1. 设置文本的内容
设置文本内容有两种方式：
-
在 XML 文件中通过属性 android:text 设置文本
-
在 Java 代码中调用文本视图对象的 setText 方法设置文本
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">
<TextView
android:id="@+id/tv_hello"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="你好，世界"/>
</LinearLayout>
Java:
import android.os.Bundle;
import android.widget.TextView;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
public class TextViewActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_text_view);
TextView tv_hello = findViewById(R.id.tv_hello);
tv_hello.setText("你好，世界");
}
}
运行效果：
引用字符串资源
-
在XML文件中引用（@string/***）
-
在Java代码中引用（R.string. ***）
values/strings.xml中：
<resources>
<string name="hello">你好，世界</string>
</resources>
XML:
<TextView
android:id="@+id/tv_hello"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello"/>
Java:
import android.os.Bundle;
import android.widget.TextView;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
public class TextViewActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_text_view);
TextView tv_hello = findViewById(R.id.tv_hello);
tv_hello.setText(R.string.hello);
}
}
2. 设置文本的大小
-
在 Java 代码中调用 setTextSize 方法，即可指定文本大小(默认单位SP)。
-
在 XML 文件中则通过属性 android:textSize 指定文本大小，此时需要指定字号单位。
- px：它是手机屏幕的最小显示单位，与设备的显示屏有关。
- dp：它是与设备无关的显示单位，只与屏幕的尺寸有关。
- sp：它专门用来设置字体大小，在系统设置中可以调整字体大小。
Java:
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;
public class TextSizeActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_text_size);
TextView tv_px = findViewById(R.id.tv_sp);
tv_px.setTextSize(30);
}
}
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">
<TextView
android:id="@+id/tv_px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello"
android:textSize="30px"/>
<TextView
android:id="@+id/tv_dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello"
android:textSize="30dp"/>
<TextView
android:id="@+id/tv_sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello"
android:textSize="30sp"/>
</LinearLayout>
运行效果：
3. 设置文本的颜色
-
在 Java 代码中调用 setTextColor 方法即可设置文本颜色，具体色值可从Color 类取。
-
在XML文件中则通过属性 android:textColor 指定文本颜色，色值由透明度alpha和RGB三原色（红色red、绿色green、蓝色blue）联合定义。
RGB颜色定义：
-
色值有八位十六进制数与六位十六进制数两种表达方式，例如八位编码FFEEDDCC中，FF表示透明度，EE表示红色的浓度，DD表示绿色的浓度，CC表示蓝色的浓度。
-
透明度为FF表示完全不透明，为00表示完全透明。RGB三色的数值越大，表示颜色越浓，也就越亮；数值越小，表示颜色越淡，也就越暗。
使用色值定义文字颜色：
- 在Java代码中设置色值需要添加0x前缀表示十六进制数。
- 在XML文件中设置色值需要添加“#”前缀。
引用颜色资源：
- 在XML文件中引用（@color/***）。
- 在Java代码中引用（R.color. ***）。
values/strings.xml中：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="green">#00ff00</color>
</resources>
Java:
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.TextView;
public class TextColorActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_text_color);
// 从布局文件中获取名叫tv_code_system的文本视图
TextView tv_code_system = findViewById(R.id.tv_code_system);
// 将tv_code_system的文字颜色设置系统自带的绿色
tv_code_system.setTextColor(Color.GREEN);
// 从布局文件中获取名叫tv_code_eight的文本视图
TextView tv_code_eight = findViewById(R.id.tv_code_eight);
// 将tv_code_eight的文字颜色设置为不透明的绿色，即正常的绿色
tv_code_eight.setTextColor(0xff00ff00);
// 从布局文件中获取名叫tv_code_six的文本视图
TextView tv_code_six = findViewById(R.id.tv_code_six);
// 将tv_code_six的文字颜色设置为透明的绿色，透明就是看不到
tv_code_six.setTextColor(0x00ff00);
// 从布局文件中获取名叫tv_code_background的文本视图
TextView tv_code_background = findViewById(R.id.tv_code_background);
// 将tv_code_background的背景颜色设置为绿色
//tv_code_background.setBackgroundColor(Color.GREEN);
// 颜色来源于资源文件
tv_code_background.setBackgroundResource(R.color.green);
}
}
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">
<TextView
android:id="@+id/tv_code_system"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="代码设置系统自带的颜色"
android:textSize="17sp"/>
<TextView
android:id="@+id/tv_code_eight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="代码设置八位文字颜色"
android:textSize="17sp"/>
<TextView
android:id="@+id/tv_code_six"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="代码设置六位文字颜色"
android:textSize="17sp"/>
<TextView
android:id="@+id/tv_xml"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="布局文件设置六位文字颜色"
android:textSize="17sp"
android:textColor="#00ff00"/>
<TextView
android:id="@+id/tv_values"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="资源文件引用六位文字颜色"
android:textSize="17sp"
android:textColor="@color/green"/>
<TextView
android:id="@+id/tv_code_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="背景设置为绿色"
android:textSize="17sp"/>
<!-- android:background="@color/green" -->
</LinearLayout>
运行效果：
三、视图基础
1. 设置视图的宽高
-
XML中视图宽度通过属性android:layout_width表达，视图高度通过属性android:layout_height表达，宽高的取值主要有下列三种：
-
match_parent：表示与上级视图保持一致。
-
wrap_content：表示与内容自适应。
-
以dp为单位的具体尺寸。
-
-
在代码中设置视图宽高，首先确保XML中的宽高属性值为wrap_content，接着打开该页面对应的Java代码，依序执行以下三个步骤：
- 调用控件对象的getLayoutParams方法，获取该控件的布局参数。
- 布局参数的width属性表示宽度，height属性表示高度，修改这两个属性值。
- 调用控件对象的setLayoutParams方法，填入修改后的布局参数使之生效。
Utils类：
import android.content.Context;
public class Utils {
// 根据手机的分辨率从 dp 的单位 转成为 px(像素)
public static int dip2px(Context context, float dpValue) {
// 获取当前手机的像素密度（1个dp对应几个px）
float scale = context.getResources().getDisplayMetrics().density;
// 四舍五入取整
return (int) (dpValue * scale + 0.5f);
}
}
Java:
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.ViewGroup;
import android.widget.TextView;
import com.dongnaoedu.chapter03.util.Utils;
public class ViewBorderActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_border);
TextView tv_code = findViewById(R.id.tv_code);
// 获取tv_code的布局参数（含宽度和高度）
ViewGroup.LayoutParams params = tv_code.getLayoutParams();
// 修改布局参数中的宽度数值，注意默认px单位，需要把dp数值转成px数值
params.width = Utils.dip2px(this,300);
// 设置tv_code的布局参数
tv_code.setLayoutParams(params);
}
}
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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#00ffff"
android:text="视图宽度采用wrap_content定义"
android:textColor="#000000"
android:textSize="17sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#00ffff"
android:text="视图宽度采用match_parent定义"
android:textColor="#000000"
android:textSize="17sp" />
<TextView
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#00ffff"
android:text="视图宽度采用固定大小"
android:textColor="#000000"
android:textSize="17sp" />
<TextView
android:id="@+id/tv_code"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#00ffff"
android:text="通过代码指定视图宽度"
android:textColor="#000000"
android:textSize="17sp" />
</LinearLayout>
效果如下：
2. 设置视图的间距
设置视图的间距有两种方式：
- 采用layout_margin属性，它指定了当前视图与周围平级视图之间的距离。包括layout_margin、layout_marginLeft、layout_marginTop、layout_marginRight、layout_marginBottom
- 采用padding属性，它指定了当前视图与内部下级视图之间的距离。包括padding、paddingLeft、paddingTop、paddingRight、paddingBottom
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="300dp"
android:background="#00AAFF"
android:orientation="vertical">
<!-- 中间层的布局背景为黄色 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:background="#FFFF99"
android:padding="60dp">
<!-- 最内层的视图背景为红色 -->
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF0000"/>
</LinearLayout>
</LinearLayout>
Java:
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class ViewMarginActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_margin);
}
}
效果如下：
3. 设置视图的对齐方式
设置视图的对齐方式有两种途径：
- 采用layout_gravity属性，它指定了当前视图相对于上级视图的对齐方式。
- 采用gravity属性，它指定了下级视图相对于当前视图的对齐方式。
- layout_gravity与gravity的取值包括：left、top、right、bottom，还可以用竖线连接各取值，例如“left|top”表示即靠左又靠上，也就是朝左上角对齐。
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="300dp"
android:background="#ffff99"
android:orientation="horizontal">
<!-- 第一个子布局背景为红色，它在上级视图中朝下对齐，它的下级视图则靠左对齐 -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_gravity="bottom"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="#ff0000"
android:padding="10dp"
android:gravity="left">
<!-- 内部视图的宽度和高度都是100dp，且背景色为青色 -->
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#00ffff"/>
</LinearLayout>
<!-- 第二个子布局背景为红色，它在上级视图中朝上对齐，它的下级视图则靠右对齐 -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_gravity="top"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="#ff0000"
android:padding="10dp"
android:gravity="right">
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#00ffff"/>
</LinearLayout>
</LinearLayout>
Java:
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class ViewGravityActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_gravity);
}
}
效果如下:
四、常用布局
1. 线性布局LinearLayout
线性布局内部的各视图有两种排列方式：
- orientation属性值为 horizontal 时，内部视图在水平方向从左往右排列。
- orientation属性值为 vertical 时，内部视图在垂直方向从上往下排列。
如果不指定orientation属性，则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">
<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:textSize="17sp"
android:textColor="#000000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="横排第二个"
android:textSize="17sp"
android:textColor="#000000"/>
</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:textSize="17sp"
android:textColor="#000000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="竖排第二个"
android:textSize="17sp"
android:textColor="#000000"/>
</LinearLayout>
</LinearLayout>
Java:
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class LinearLayoutActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_linear_layout);
}
}
效果如下:
线性布局的权重概念，指的是线性布局的下级视图各自拥有多大比例的宽高。
权重属性名叫layout_weight，但该属性不在LinearLayout节点设置，而在线性布局的直接下级视图设置，表示该下级视图占据的宽高比例。
- layout_width填0dp时，layout_weight表示水平方向的宽度比例。
- layout_height填0dp时，layout_weight表示垂直方向的高度比例。
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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="横排第一个"
android:textSize="17sp"
android:textColor="#000000"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="横排第二个"
android:textSize="17sp"
android:textColor="#000000"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="竖排第一个"
android:textSize="17sp"
android:textColor="#000000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="竖排第二个"
android:textSize="17sp"
android:textColor="#000000"/>
</LinearLayout>
</LinearLayout>
Java部分代码不变。
效果如下：
2. 相对布局RelativeLayout
相对布局的下级视图位置由其他视图决定。用于确定下级视图位置的参照物分两种：
- 与该视图自身平级的视图；
- 该视图的上级视图（也就是它归属的RelativeLayout）
如果不设定下级视图的参照物，那么下级视图默认显示在RelativeLayout内部的左上角。
相对位置的取值：
XML：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="150dp">
<TextView
android:id="@+id/tv_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#ffffff"
android:text="我在中间"
android:textColor="#000000"
android:textSize="11sp" />
<TextView
android:id="@+id/tv_center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#ffffff"
android:text="我在水平中间"
android:textColor="#000000"
android:textSize="11sp" />
<TextView
android:id="@+id/tv_center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="#ffffff"
android:text="我在垂直中间"
android:textColor="#000000"
android:textSize="11sp" />
<TextView
android:id="@+id/tv_parent_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#ffffff"
android:text="我跟上级左边对齐"
android:textColor="#000000"
android:textSize="11sp" />
<TextView
android:id="@+id/tv_parent_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#ffffff"
android:text="我跟上级右边对齐"
android:textColor="#000000"
android:textSize="11sp" />
<TextView
android:id="@+id/tv_parent_top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#ffffff"
android:text="我跟上级顶部对齐"
android:textColor="#000000"
android:textSize="11sp" />
<TextView
android:id="@+id/tv_parent_bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#ffffff"
android:text="我跟上级底部对齐"
android:textColor="#000000"
android:textSize="11sp" />
<TextView
android:id="@+id/tv_left_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/tv_center"
android:layout_alignTop="@id/tv_center"
android:background="#ffffff"
android:text="我在中间左边"
android:textColor="#000000"
android:textSize="11sp" />
<TextView
android:id="@+id/tv_right_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/tv_center"
android:layout_alignBottom="@id/tv_center"
android:background="#ffffff"
android:text="我在中间右边"
android:textColor="#000000"
android:textSize="11sp" />
<TextView
android:id="@+id/tv_above_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/tv_center"
android:layout_alignLeft="@id/tv_center"
android:background="#ffffff"
android:text="我在中间上面"
android:textColor="#000000"
android:textSize="11sp" />
<TextView
android:id="@+id/tv_below_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tv_center"
android:layout_alignRight="@id/tv_center"
android:background="#ffffff"
android:text="我在中间下面"
android:textColor="#000000"
android:textSize="11sp" />
</RelativeLayout>
Java:
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class RelativeLayoutActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_relative_layout);
}
}
效果如下：
3. 网格布局GridLayout
网格布局支持多行多列的表格排列。
网格布局默认从左往右、从上到下排列，它新增了两个属性：
- columnCount属性，它指定了网格的列数，即每行能放多少个视图；
- rowCount属性，它指定了网格的行数，即每列能放多少个视图
XML：
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:rowCount="2">
<TextView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_columnWeight="1"
android:background="#ffcccc"
android:gravity="center"
android:text="浅红色"
android:textColor="#000000"
android:textSize="17sp" />
<TextView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_columnWeight="1"
android:background="#ffaa00"
android:gravity="center"
android:text="橙色"
android:textColor="#000000"
android:textSize="17sp" />
<TextView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_columnWeight="1"
android:background="#00ff00"
android:gravity="center"
android:text="绿色"
android:textColor="#000000"
android:textSize="17sp" />
<TextView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_columnWeight="1"
android:background="#660066"
android:gravity="center"
android:text="深紫色"
android:textColor="#000000"
android:textSize="17sp" />
</GridLayout>
Java:
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class GridLayoutActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_grid_layout);
}
}
效果如下：
4. 滚动视图ScrollView
滚动视图有两种：
- ScrollView，它是垂直方向的滚动视图；垂直方向滚动时，layout_width属性值设置为match_parent，layout_height属性值设置为wrap_content。
- HorizontalScrollView，它是水平方向的滚动视图；水平方向滚动时，layout_width属性值设置为wrap_content，layout_height属性值设置为match_parent。
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">
<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="#aaffff" />
<View
android:layout_width="300dp"
android:layout_height="match_parent"
android:background="#ffff00"/>
</LinearLayout>
</HorizontalScrollView>
<ScrollView
android:layout_width="match_parent"
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="#00ff00"/>
<View
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="#ffffaa"/>
</LinearLayout>
</ScrollView>
</LinearLayout>
Java:
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class ScrollViewActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_scroll_view);
}
}
运行效果：
上面部分可以水平滚动，下面部分可以垂直滚动。
五、简单控件
1. 按钮控件Button
按钮控件Button由TextView派生而来，它们之间的区别有：
- Button拥有默认的按钮背景，而TextView默认无背景；
- Button的内部文本默认居中对齐，而TextView的内部文本默认靠左对齐；
- Button会默认将英文字母转为大写，而TextView保持原始的英文大小写；
按钮控件的新增属性
与TextView相比，Button增加了两个新属性：
- textAllCaps属性，它指定了是否将英文字母转为大写，为true是表示自动转为大写，为false表示不做大写转换。
- onClick属性，它用来接管用户的点击动作，指定了点击按钮时要触发哪个方法；
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:padding="5dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="下面的按钮英文默认大写"
android:textColor="@color/black"
android:textSize="17sp" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello World"
android:textColor="@color/black"
android:textSize="17sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="下面的按钮英文保持原状"
android:textColor="@color/black"
android:textSize="17sp" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello World"
android:textAllCaps="false"
android:textColor="@color/black"
android:textSize="17sp"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="直接指定点击方法"
android:textAllCaps="false"
android:textColor="@color/black"
android:textSize="17sp"
android:onClick="doClick"/>
<TextView
android:id="@+id/tv_result"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="这里查看按钮的点击结果"
android:textColor="@color/black"
android:textSize="17sp" />
</LinearLayout>
Java:
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import com.dongnaoedu.chapter03.util.DateUtil;
public class ButtonStyleActivity extends AppCompatActivity {
private TextView tv_result;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_button_style);
tv_result = findViewById(R.id.tv_result);
}
public void doClick(View view) {
String desc = String.format("%s 您点击了按钮： %s", DateUtil.getNowTime(), ((Button) view).getText());
tv_result.setText(desc);
}
}
DateUtil:
import java.text.SimpleDateFormat;
import java.util.Date;
public class DateUtil {
public static String getNowTime(){
SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss");
return sdf.format(new Date());
}
}
效果如下：
点击按钮后，显示文本。
监听器，意思是专门监听控件的动作行为。只有控件发生了指定的动作，监听器才会触发开关去执行对应的代码逻辑。
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">
<Button
android:id="@+id/btn_click_single"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="指定单独的点击监听器"
android:textColor="#000000"
android:textSize="15sp"/>
<Button
android:id="@+id/btn_click_public"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="指定公共的点击监听器"
android:textColor="#000000"
android:textSize="15sp"/>
<TextView
android:id="@+id/tv_result"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:gravity="center"
android:textColor="#000000"
android:textSize="15sp"
android:text="这里查看按钮的点击结果"/>
</LinearLayout>
Java:
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import com.dongnaoedu.chapter03.util.DateUtil;
public class ButtonClickActivity extends AppCompatActivity implements View.OnClickListener {
private TextView tv_result;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_button_click);
tv_result = findViewById(R.id.tv_result);
Button btn_click_single = findViewById(R.id.btn_click_single);
btn_click_single.setOnClickListener(new MyOnClickListener(tv_result));
Button btn_click_public = findViewById(R.id.btn_click_public);
btn_click_public.setOnClickListener(this);
}
//公共点击事件
@Override
public void onClick(View v) {
if (v.getId() == R.id.btn_click_public) {
String desc = String.format("%s 您点击了按钮： %s", DateUtil.getNowTime(), ((Button) v).getText());
tv_result.setText(desc);
}
// if(v.getId() == xxxx)
}
static class MyOnClickListener implements View.OnClickListener {
private final TextView tv_result;
public MyOnClickListener(TextView tv_result) {
this.tv_result = tv_result;
}
@Override
public void onClick(View v) {
String desc = String.format("%s 您点击了按钮： %s", DateUtil.getNowTime(), ((Button) v).getText());
tv_result.setText(desc);
}
}
}
点击第一个按钮时效果如下：
点击第二个按钮时效果如下：
点击事件和长按事件
按钮控件有两种常用的监听器：
- 点击监听器，通过setOnClickListener方法设置。按钮被按住少于500毫秒时，会触发点击事件。
- 长按监听器，通过setOnLongClickListener方法设置。按钮被按住超过500毫秒时，会触发长按事件。
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">
<Button
android:id="@+id/btn_long_click"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="指定长按的点击监听器"
android:textColor="#000000"
android:textSize="15sp"/>
<TextView
android:id="@+id/tv_result"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:gravity="center"
android:textColor="#000000"
android:textSize="15sp"
android:text="这里查看按钮的点击结果"/>
</LinearLayout>
Java:
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import com.dongnaoedu.chapter03.util.DateUtil;
public class ButtonLongClickActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_button_long_click);
TextView tv_result = findViewById(R.id.tv_result);
Button btn_long_click = findViewById(R.id.btn_long_click);
btn_long_click.setOnLongClickListener(v -> {
String desc = String.format("%s 您点击了按钮： %s", DateUtil.getNowTime(), ((Button) v).getText());
tv_result.setText(desc);
return true;
});
}
}
快速点击按钮没反应，长按按钮后效果如下：
禁用与恢复按钮：
在实际业务中，按钮通常拥有两种状态，即不可用状态与可用状态，它们在外观和功能上的区别如下：
- 不可用按钮：按钮不允许点击，即使点击也没反应，同时按钮文字为灰色；
- 可用按钮：按钮允许点击，点击按钮会触发点击事件，同时按钮文字为正常的黑色；
是否允许点击由enabled属性控制，属性值为true时表示允许点击，为false时表示不允许点击。
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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/btn_enable"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="启用测试按钮"
android:textColor="#000000"
android:textSize="17sp" />
<Button
android:id="@+id/btn_disable"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="禁用测试按钮"
android:textColor="#000000"
android:textSize="17sp" />
</LinearLayout>
<Button
android:id="@+id/btn_test"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:enabled="false"
android:text="测试按钮"
android:textColor="#888888"
android:textSize="17sp" />
<TextView
android:id="@+id/tv_result"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="这里查看测试按钮的点击结果"
android:textColor="#000000"
android:textSize="17sp" />
</LinearLayout>
Java:
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import com.dongnaoedu.chapter03.util.DateUtil;
public class ButtonEnableActivity extends AppCompatActivity implements View.OnClickListener {
private Button btn_test;
private TextView tv_result;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_button_enable);
Button btn_enable = findViewById(R.id.btn_enable);
Button btn_disable = findViewById(R.id.btn_disable);
btn_test = findViewById(R.id.btn_test);
tv_result = findViewById(R.id.tv_result);
btn_enable.setOnClickListener(this);
btn_disable.setOnClickListener(this);
btn_test.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_enable:
// 启用当前控件
btn_test.setEnabled(true);
// 设置按钮的文字颜色
btn_test.setTextColor(Color.BLACK);
break;
case R.id.btn_disable:
// 禁用当前控件
btn_test.setEnabled(false);
btn_test.setTextColor(Color.GRAY);
break;
case R.id.btn_test:
String desc = String.format("%s 您点击了按钮： %s", DateUtil.getNowTime(), ((Button) v).getText());
tv_result.setText(desc);
break;
}
}
}
点击启用测试按钮后：
点击禁用测试按钮后：
2. 图像视图ImageView
图像视图展示的图片通常位于res/drawable目录，设置图像视图的显示图片有两种方式：
- 在XML文件中，通过属性 android:src 设置图片资源，属性值格式形如“@drawable/不含扩展名的图片名称” 。
- 在Java代码中，调用 setImageResource 方法设置图片资源，方法参数格式形如“R.drawable.不含扩展名的图片名称” 。
图片在res/drawable/apple.png
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">
<ImageView
android:id="@+id/iv_scale"
android:layout_width="match_parent"
android:layout_height="220dp"
android:layout_marginTop="5dp"
android:src="@drawable/apple"
<!--android:src="@drawable/apple" -->
</LinearLayout>
Java:
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
public class ImageScaleActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_image_scale);
ImageView iv_scale = findViewById(R.id.iv_scale);
iv_scale.setImageResource(R.drawable.apple);
}
}
效果如下：
ImageView本身默认图片居中显示，若要改变图片的显示方式，可通过 scaleType 属性设定，该属性的取值说明如下：
XML:
android:scaleType="fitXY"
Java:
iv_scale.setScaleType(ImageView.ScaleType.CENTER);
3. 图像按钮ImageButton
ImageButton是显示图片的图像按钮，但它继承自ImageView，而非继承Button。
ImageButton和Button之间的区别有：
- Button既可显示文本也可显示图片，ImageButton只能显示图片不能显示文本。
- ImageButton上的图像可按比例缩放，而Button通过背景设置的图像会拉伸变形。
- Button只能靠背景显示一张图片，而ImageButton可分别在前景和背景显示图片，从而实现两张图片叠加的效果。
在某些场合，有的字符无法由输入法打出来，或者某些文字以特殊字体展示，就适合适合先切图再放到ImageButton。
例如：开平方符号 ，等等。
ImageButton与ImageView之间的区别有：
- ImageButton有默认的按钮背景，ImageView默认无背景。
- ImageButton默认的缩放类型为center，而ImageView默认的缩放类型为fitCenter。
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">
<ImageButton
android:layout_width="match_parent"
android:layout_height="80dp"
android:scaleType="fitCenter"
android:src="@drawable/sqrt" />
</LinearLayout>
Java:
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class ImageButtonActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_image_button);
}
}
显示效果：
同时展示文本与图像的可能途径包括：
- 利用LinearLayout对ImageView和TextView组合布局。
- 通过按钮控件Button的 drawable 属性设置文本周围的图标。
- drawableTop：指定文字上方的图片。
- drawableBottom：指定文字下方的图片。
- drawableLeft：指定文字左边的图片。
- drawableRight：指定文字右边的图片。
- drawablePadding：指定图片与文字的间距。
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">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="图标在左"
android:drawableLeft="@drawable/ic_about"
android:background="#FFFFFF"
android:drawablePadding="5dp"/>
</LinearLayout>
Java:
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class ImageTextActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_image_text);
}
}
效果如下：
177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
