1. Android的基础布局
LinearLayout 线性布局
RelativeLayout 相对布局
TableLayout 表格布局
FrameLayout 帧布局(框架布局)
ConstrantLayout 约束布局 (Android Studio默认布局) 用于拖拽的
2. LinearLayout 线性布局
2.1 怎么将Android Studio默认的ConstrantLayout改为LinearLayout
1. 在design页面下->component tree->ConstrainLayout右键->Convert view...->选择LinearLayout 点击apply
2. 在code页面下->直接修改代码 将 androidx.constraintlayout.widget.ConstraintLayout 改为 LinearLayout
2.2 线性布局有两种:
水平的线性布局 所有控件都是水平挨个排布
如果没有android:orientation属性的存在
或者
android:orientation="horizontal"
垂直的线性布局 所有控件都是垂直挨个排布
android:orientation="vertical"
tips: 在android中,所有在页面上显示的东西,必须具备两个属性,这两个属性是宽和高
android:layout_width 宽度
Android:layout_height 高度
对于宽度和高度,他们的值有三个
2.3 比重:
android:layout_weight
如何算总比重: 看同一父亲且同一级的各个控件的weight
一旦weight属性生效,android:layout_width失效
2.4 布局排布:
android:gravity 内容位置改变
android:layout_gravity 本身位置改变
2.5 分隔线:内部的线
android:divider="@color/black"
android:showDividers="middle"
2.6 嵌套线性布局结构
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout></LinearLayout>
3. RelativeLayout相对布局
3.1 属性
相对于兄弟元素
属性名称 属性含义
android:layout_below="@id/aaa" 在指定View的下方
android:layout_above="@id/aaa" 在指定View的上方
android:layout_toLeftOf="@id/aaa" 在指定View的左边
android:layout_toRightOf="@id/aaa" 在指定View的右边
android:layout_alignTop="@id/aaa" 与指定View的上边界一致
android:layout_alignBottom="@id/aaa" 与指定View下边界一致
android:layout_alignLeft="@id/aaa" 与指定View的左边界一致
android:layout_alignRight="@id/aaa" 与指定View的右边界一致
3.2 属性
相对于兄弟元素
属性名称 属性含义
android:layout_alignParentLeft="true" 在父元素内左边
android:layout_alignParentRight="true" 在父元素内右边
android:layout_alignParentTop="true" 在父元素内顶部
android:layout_alignParentBottom="true" 在父元素内底部
对齐方式
属性名称 属性含义
android:layout_centerInParent="true" 居中布局
android:layout_centerVertical="true" 垂直居中布局
android:layout_centerHorizontal="true" 水平居中布局
间隔
属性名称 属性含义
android:layout_marginBottom="" 离某元素底边缘的距离
android:layout_marginLeft="" 离某元素左边缘的距离
android:layout_marginRight ="" 离某元素右边缘的距离
android:layout_marginTop="" 离某元素上边缘的距离
android:layout_paddingBottom="" 往内部元素底边缘填充距离
android:layout_paddingLeft="" 往内部元素左边缘填充距离
android:layout_paddingRight ="" 往内部元素右边缘填充距离
android:layout_paddingTop="" 往内部元素右边缘填充距离
3.3 代码实现
<?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="match_parent"
tools:context=".MainActivity3"> <Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="中" /> <Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/button4"
android:layout_alignStart="@+id/button4"
android:layout_marginTop="20dp"
android:text="下" /> <Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/button4"
android:layout_alignStart="@+id/button4"
android:layout_marginBottom="20dp"
android:text="上" /> <Button
android:id="@+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toStartOf="@+id/button4"
android:layout_alignTop="@+id/button4"
android:layout_marginEnd="20dp"
android:text="左" /> <Button
android:id="@+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/button4"
android:layout_alignTop="@id/button4"
android:layout_marginStart="20dp"
android:text="右" /></RelativeLayout>
4. 常用的控件
TextView 文本控件 给用户一个文字性的提示
EditText 输入文本控件
ImageView 图片控件 显示图片
Button 按钮
TextView
常用属性
属性名 作用
id 为TextView设置一个组件id,根据id,我们可以在Java代码中通过findViewById()的方法获取到该对象,然后进行相关属性的设置
layout_width 组件的宽度
layout_height 组件的高度
gravity 设置控件中内容的对齐方向,TextView中是文字,ImageView中是图片等等
text 设置显示的文本内容,一般我们是把字符串写到string.xml文件中,然后通过@String/xxx取得对应的字符串内容的
textColor 设置字体颜色,同上,通过colors.xml资源来引用
textStyle 设置字体风格,三个可选值:normal(无效果),bold(加粗),italic(斜体)
textSize 字体大小,单位一般是用sp
background 控件的背景颜色,可以理解为填充整个控件的颜色,可以是图片
autoLink 识别链接类型 (web, email, phone ,map ,none, all)
文本设置边框
编写矩形边框的Drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 设置一个黑色边框 -->
<stroke android:width="2px" android:color="#000000"/>
<!-- 渐变 -->
<gradient
android:angle="270"
android:endColor="#C0C0C0"
android:startColor="#FCD209" />
<!-- 设置一下边距,让空间大一点 -->
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp"/>
</shape>
编写圆角矩形边框的Drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 设置透明背景色 -->
<solid android:color="#87CEEB" />
<!-- 设置一个黑色边框 -->
<stroke
android:width="2px"
android:color="#000000" />
<!-- 设置四个圆角的半径 -->
<corners
android:bottomLeftRadius="10px"
android:bottomRightRadius="10px"
android:topLeftRadius="10px"
android:topRightRadius="10px" />
<!-- 设置一下边距,让空间大一点 -->
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
</shape>
带图片(drawableXxx)的TextView
属性名 作用
android:drawableLeft 文本左边设置图片
android:drawableRight 文本右边设置图片
android:drawableBottom 文本下边设置图片
android:drawableTop 文本上边设置图片