Android的LinearLayout和RelativeLayout以及常用的控件

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 线性布局有两种：

1. 水平的线性布局 所有控件都是水平挨个排布

   如果没有android:orientation属性的存在

   或者

   android:orientation="horizontal"

2. 垂直的线性布局 所有控件都是垂直挨个排布

   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="头像"/>