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"
在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文件编写矩形边框的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 | 文本上边设置图片 |
代码案例
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:drawableTop="@drawable/head_image"
android:drawableLeft="@drawable/head_image"
android:drawableRight="@drawable/head_image"
android:drawableBottom="@drawable/head_image"
android:padding="10dp"
android:text="头像"/>