从零开始学Android1（保姆级笔记）简单控件（一）

Gisele_Watson

已于 2023-03-17 17:02:13 修改

阅读量319

点赞数 1

分类专栏： Android 文章标签： android java 开发语言

于 2023-03-09 15:21:57 首次发布

本文链接：https://blog.csdn.net/Gisele_CJPwoke/article/details/129351113

版权

Android 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

声明：编译器使用的是Android Studio，以及我是跟随B站的up动脑学院的课程学习的~

文章目录

一、文本显示
二、视图基础
三、常用布局

一、文本显示

1.文本内容

创建一个新的module，选择empty activity，除了mainactivity之外，再创建一个我们自己的activity，用来进行此次练习（新模块，新事件，感觉是个好习惯）

设置文本内容有两种方式：
（1）在XML文件中通过属性android:text来设置
（2）在Java文件中通过调用文本视图对象的setText方法来设置

（1）在XML文件中：（可以设置多种布局，后面会讲）
<TextView中间这里/>可以设置这个文本视图的id、宽、高、文本内容等，都是通过android:的属性来设置，如：

android:text = "你好世界"         <!--直接写-->

如果一段文本的应用次数非常多的话，可以在strings.xml文件中设置成一个常量，这样也便于后期万一要全部修改，如：

<string name = "hello">你好世界</string>

这样在需要时直接引用"@string/hello"

android:text = "@string/hello"    <!--设置常量后-->

通过在Java文件中重写onCreate函数，设置setContentView(R.layout.事件名)来显示

（2）在Java文件中：通过获取id来设置

TextView tv_hello = FindViewById(R.id.tv_hello);
tv_hello.setText("你好世界");         //直接写
tv_hello.setText(R.string.hello);    //设置常量后的方法

2.文本大小

同样是有两种方法：
（1）在XML文件中通过属性android:textSize来设置
有三种单位，如下：

android:textSize = "30px"     <!--这个是固定的大小，同一个设备上显示效果永远不会改变-->
android:textSize = "30dp"     <!--这个也是固定的大小，同一个设备上显示效果永远不会改变-->
android:textSize = "30sp"     <!--这个手机系统可以通过调整字体大小而改变-->

px：它是手机屏幕的最小显示单位，与设备的显示屏有关。
dp：它是与设备无关的显示单位，只与屏幕的尺寸有关。
sp：它专门用来设置字体大小，在系统设置中可以调整字体大小。
dpi：像素密度，每英寸有多少个像素点。
dip/dp：设备独立像素，同一个单位，在不同的设备上有不同的显示效果。
关系公式：px = (dpi x dip)/160
在使用时要注意区分、转化。
对于相同尺寸的手机，即使分辨率不同，同dp的组件占用屏幕比例也相同。

综上:
dp的UI效果只在相同尺寸的屏幕上相同，如果屏幕尺寸差异过大，则需要重做dp适配。这也是平板需要单独做适配的原因，可见dp不是比例。

（2）在Java文件中通过调用文本视图对象的setTextSize方法来设置

TextView tv_hello = FindViewById(R.id.tv_hello);
tv_hello.setTextSize(30);     //此处单位默认是sp

3.文本颜色

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

android:textcolor="#00ff00"            <!--需要有一个井号键-->
android:textcolor="@Color/GREEN"       <!--系统的-->
android:textcolor="@color/green"       <!--自定义的-->

色值有8位十六进制数与6位十六进制数两种表达方式，例如八位编码EEDDCCBB中，EE表示透明度，DD表示红色的浓度，CC表示绿色的浓度，BB表示蓝色的浓度。透明度为ff表示完全不透明，为00表示完全透明。RGB三色的数值越大，表示颜色越浓，也就越亮；数值越小，表示颜色越淡，也就越暗。
在XML文件中使用六位表示色值时，系统默认前两位透明度是ff，即完全不透明；但是在Java文件中使用六位时，则系统默认前面两位为00，即透明。

也可以在colors.xml文件中自定义颜色的数值并命名，方便后续使用。

（2）在Java代码中调用setTextColor方法即可设置文本颜色，可以自己用8位十六进制数或6位十六进制数指定，或者也可以从Color类取系统自带的颜色，如BLACK、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_system.setTextColor(Color.GREEN);

另外，不仅可以设置文字颜色，还可以设置背景颜色。
（1）在XML文件中则通过属性android:background指定背景颜色。

android:background = "@Color/GREEN"     <!--系统的-->
android:background = "@color/green"     <!--自定义的-->

（2）在Java代码中调用setBackgroundColor方法即可设置背景颜色。

//从布局文件中获取名叫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);

二、视图基础

1.设置视图的宽高

（1）在XML文件中，视图宽度通过属性android:layout_width表达，视图高度通过属性android:layout_height表达，宽高的取值主要有下列三种：
①match_parent：表示与上级视图保持一致；
②wrap_content：表示与内容自适应；
③以dp为单位的具体尺寸。

（2）在Java文件中设置视图宽高，首先要确保XML中的宽高属性值为wrap_content，接着打开该页面对应的Java代码，依序执行以下三个步骤：
①调用控件对象的getLayoutParams方法，获取该控件的布局参数。
②布局参数的width属性表示宽度，height属性表示高度，修改这两个属性值。
③调用控件对象的setLayoutParams方法，填入修改后的布局参数使之生效。

不过在Java文件中默认的单位是px，而非dp，需要先进行转换，可以新建类、定义一个方法，如下：
首先创建一个util包，再创建一个Utils类，然后编写dip2px方法。

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);
	}
}

使用如下：

TextView tv_code = findViewById(R.id.tv_code);
//获取tv_code的布局参数（含宽度和高度)
ViewGroup.LayoutParams params = tv_code.getLayoutParams();
//修改布局参数中的宽度数值，注意默认px单位，需要把dp数值转成px数值
params.width = Utils.dip2px(context: this,dpValue: 300);
//设置tv_code的布局参数
tv_code.setLayoutParams(params);

2.设置视图的间距

在XML文件中，设置视图的间距有两种方式：
（1）采用layout_margin属性（外间距），它指定了当前视图与周围平级视图之间的距离。包括layout_margin（上下左右同时控制）、layout_marginLeft、layout_marginTop、layout_marginRight、layout_marginBottom。
（2）采用padding属性（内间距），它指定了当前视图与内部下级视图之间的距离。包括padding、paddingLeft、paddingTop、paddingRight、paddingBottom。

<!--最外层的布局背景为蓝色-->
<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>

预览如下：
在这里插入图片描述

3.设置视图的对齐方式

设置视图的对齐方式有两种途径（XML文件中）：
（1）采用layout_gravity属性，它指定了当前视图相对于上级视图的对齐方式。
（2）采用gravity属性，它指定了下级视图相对于当前视图的对齐方式。
layout _gravity与gravity的取值包括：left、top、right、bottom，还可以用竖线连接各取值，例如“left|top”表示即靠左又靠上，也就是朝左上角对齐。

另外：属性layout_weight可以设置平级视图之间宽or高的占比关系。注意，此时相应的宽or高要设置为0dp，详情见下线性布局。

<?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="#ff0000"
    android:orientation="horizontal">
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:layout_weight="1"
        android:background="#00ff00"
        android:layout_margin="10dp"
        android:padding="10dp"
        android:layout_gravity="bottom"
        android:gravity="top">
        <View
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#0000ff"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:layout_weight="1"
        android:background="#00ff00"
        android:layout_margin="10dp"
        android:padding="10dp"
        android:layout_gravity="top"
        android:gravity="right">
        <View
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#0000ff"/>
    </LinearLayout>
</LinearLayout>

预览如下：
在这里插入图片描述

三、常用布局

1.线性布局LinearLayout

线性布局内部的各视图有两种排列方式：
（1）orientation属性值为horizontal时，内部视图在水平方向从左往右排列。
（2）orientation属性值为vertical时，内部视图在垂直方向从上往下排列。
如果不指定orientation属性，则LinearLayout默认水平方向排列。

线性布局的权重概念，指的是线性布局的下级视图各自拥有多大比例的宽高。
权重属性名叫layout_weight，但该属性不在LinearLayout节点设置，而在线性布局的直接下级视图设置，表示该下级视图占据的宽高比例。
layout_width填0dp时，layout_weight表示水平方向的宽度比例。
layout_height填0dp时，layout_weight表示垂直方向的高度比例。

2.相对布局RelativeLayout

相对布局的下级视图位置由其他视图决定。用于确定下级视图位置的参照物分两种：
（1）与该视图自身平级的视图；
（2）该视图的上级视图（也就是它归属的RelativeLayout）。
如果不设定下级视图的参照物，那么下级视图默认显示在RelativeLayout内部的左上角。
在这里插入图片描述

<?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="300dp">
    <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_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"/>
</RelativeLayout>

预览如下：
在这里插入图片描述

3.网格布局GridLayout

网格布局支持多行多列的表格排列。
网格布局默认从左往右、从上到下排列，它新增了两个属性：columnCount属性，它指定了网格的列数，即每行能放多少个视图；rowCount属性，它指定了网格的行数，即每列能放多少个视图。
在父容器中用上述属性指定两行两列后：
在这里插入图片描述支线任务：让文字居中。
方法：在TextView中设置android:gravity=“center”，即可让文字居中。
另外，在网格布局中如何设置权重？
在TextView中，将android:layout_width=“0dp”，然后将android:layout_columnWeight="1"可以设置两列的权重为1：1。（与之前略有不同）
最终得到如下：
在这里插入图片描述

4.滚动视图ScrollView

滚动视图有两种：
ScrollView，垂直方向的滚动视图；垂直方向滚动时，layout_width属性值设置为match_parent， layout_height属性值设置为wrap_content。
HorizontalScrollView，它是水平方向的滚动视图；水平方向滚动时，layout_width属性值设置为wrap_content，layout_height属性值设置为match_parent。
拿水平滚动举例：

<?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>
</LinearLayout>