Android布局

绵绵思远道～

已于 2022-07-28 15:16:55 修改

阅读量478

点赞数

文章标签：大数据 android-studio

于 2022-07-14 22:17:54 首次发布

本文链接：https://blog.csdn.net/weixin_53431933/article/details/125793483

版权

1.布局综述

2.LinearLayout(线性布局)

2.1基本框架

<?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="horizontal">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1"
        android:layout_marginTop="20dp"/>
    
    ...
    
</LinearLayout>

2.2属性

2.3横向布局

android:orientation="horizontal"

<?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="horizontal">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1"
        android:layout_marginTop="20dp"/>
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"/>
    <Button
        android:id="@+id/button3"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="按钮3"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"/>
</LinearLayout>

2.4纵向排列

android:orientation="vertical"

<?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/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1"
        android:layout_marginTop="20dp"/>
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"/>
    <Button
        android:id="@+id/button3"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="按钮3"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"/>
</LinearLayout>

2.5 排序方式 gravity

决定子view的排布方式。 gravity 有“重力”的意思，我们引申为子view会向哪个方向靠拢。 gravity有几个选项可以选择，常用的有start，end，left，right，top，bottom。

例如:

<LinearLayout
  	android:layout_width="match_parent"
  	android:layout_height="wrap_content"
  	android:gravity="start"
    android:orientation="vertical">
</LinearLayout>

2.6 子view的layout_gravity

layout_gravity看起来和gravity有些相似。

android:gravity 控制自己内部的子元素。
android:layout_gravity 是告诉父元素自己的位置。

取值范围和gravity是一样的。代表的含义也相似。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:orientation="horizontal">
    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="#90CAF9"
      android:text="none" />
    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:background="#9FA8DA"
      android:text="center" />
  </LinearLayout>

2.7分割线（divider）

设置divider与showDividers属性。

android:divider="@drawable/divider_linear_1"
android:showDividers="middle"

直接给divider设置颜色是无效的。

在drawable目录里新建一个xml，叫做 divider_linear_1.xml 。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="#7986CB" />
  <size
    android:width="1dp"
    android:height="1dp" />
</shape>

size必须指定，否则当做divider来用时会显示不出来。

LinearLayout设置divider。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#eaeaea"
    android:divider="@drawable/divider_linear_1"
    android:orientation="vertical"
    android:showDividers="middle">
   ....

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_marginTop="20dp"
    android:background="#FFD9D9"
    android:divider="@drawable/divider_linear_1"
    android:orientation="horizontal"
    android:showDividers="middle">
   ...

showDividers有几种可选

middle 中间的分割线
beginning 开始的分割线
end 结束的分割线
none 没有分割线

3.RelativeLayout相对布局

RelativeLayout和LinearLayout类似，都是ViewGroup，能“容纳”多个子view。 RelativeLayout 是一个以相对位置显示子视图的视图组。每个视图的位置可以指定为相对于同级元素的位置（例如，在另一个视图的左侧或下方）或相对于父级 RelativeLayout 区域的位置（例如在底部、左侧或中心对齐）。

子view可以是TextView，Button，或者是LinearLayout，RelativeLayout等等。如果不添加其他配置它们默认是在RelativeLayout的左上角。在RelativeLayout中，子View可以根据另一个子View来确定位置。但必须注意的是，RelativeLayout和它的子View不能互相依赖。比如RelativeLayout设置高度为wrap_content，子View设置了ALIGN_PARENT_BOTTOM，这样你会发现RelativeLayout被撑到最大。RelativeLayout能消除嵌套视图组并使布局层次结构保持扁平化。

3.1基本框架

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/RelativeLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent" >    
       
    <ImageView    
        android:id="@+id/img1"     
        android:layout_width="80dp"    
        android:layout_height="80dp"    
        android:layout_centerInParent="true"    
        android:src="@drawable/pic1"/>    
 	
    ...
  
</RelativeLayout>

3.2属性

相对于兄弟元素

相对于父类元素
对齐方式

间隔

3.3父容器典韦属性示意图

3.4根据兄弟组件定位

例如：

实现代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/RelativeLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent" >    
    
    <!-- 这个是在容器中央的 -->    
        
    <ImageView    
        android:id="@+id/img1"     
        android:layout_width="80dp"    
        android:layout_height="80dp"    
        android:layout_centerInParent="true"    
        android:src="@drawable/pic1"/>    
        
    <!-- 在中间图片的左边 -->    
    <ImageView    
        android:id="@+id/img2"     
        android:layout_width="80dp"    
        android:layout_height="80dp"    
        android:layout_toLeftOf="@id/img1"    
        android:layout_centerVertical="true"    
        android:src="@drawable/pic2"/>    
        
    <!-- 在中间图片的右边 -->    
    <ImageView    
        android:id="@+id/img3"     
        android:layout_width="80dp"    
        android:layout_height="80dp"    
        android:layout_toRightOf="@id/img1"    
        android:layout_centerVertical="true"    
        android:src="@drawable/pic3"/>    
        
    <!-- 在中间图片的上面-->    
    <ImageView    
        android:id="@+id/img4"     
        android:layout_width="80dp"    
        android:layout_height="80dp"    
        android:layout_above="@id/img1"    
        android:layout_centerHorizontal="true"    
        android:src="@drawable/pic4"/>    
        
    <!-- 在中间图片的下面 -->    
    <ImageView    
        android:id="@+id/img5"     
        android:layout_width="80dp"    
        android:layout_height="80dp"    
        android:layout_below="@id/img1"    
        android:layout_centerHorizontal="true"    
        android:src="@drawable/pic5"/>    
</RelativeLayout>

3.4 margin与padding的区别

首先margin代表的是偏移,比如marginleft = "5dp"表示组件离容器左边缘偏移5dp; 而padding代表的则是填充,而填充的对象针对的是组件中的元素,比如TextView中的文字比如为TextView设置paddingleft = "5dp",则是在组件里的元素的左边填充5dp的空间！ margin针对的是容器中的组件，而padding针对的是组件中的元素，要区分开来！

下面通过简单的代码演示两者的区别:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    android:paddingBottom="@dimen/activity_vertical_margin"    
    android:paddingLeft="@dimen/activity_horizontal_margin"    
    android:paddingRight="@dimen/activity_horizontal_margin"    
    android:paddingTop="@dimen/activity_vertical_margin"    
    tools:context=".MainActivity" >    
    
    <Button    
        android:id="@+id/btn1"     
        android:layout_height="wrap_content"    
        android:layout_width="wrap_content"    
        android:text="Button"/>    
    <Button    
        android:paddingLeft="100dp"     
        android:layout_height="wrap_content"    
        android:layout_width="wrap_content"    
        android:text="Button"    
        android:layout_toRightOf="@id/btn1"/>    
        
    <Button    
        android:id="@+id/btn2"     
        android:layout_height="wrap_content"    
        android:layout_width="wrap_content"    
        android:text="Button"    
        android:layout_alignParentBottom="true"/>    
    <Button    
        android:layout_marginLeft="100dp"     
        android:layout_height="wrap_content"    
        android:layout_width="wrap_content"    
        android:text="Button"    
        android:layout_toRightOf="@id/btn2"     
        android:layout_alignParentBottom="true"/>    
        
</RelativeLayout>

4.TextView

TextView (文本框)，用于显示文本的一个控件。

4.1TextView的基本使用

文本的字体尺寸单位为 sp
sp: scaled pixels(放大像素). 主要用于字体显示。
文本常用属性：

例如：

<TextView
    android:id="@+id/tv1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World" />

4.2文本设置边框

实现原理：

编写一个ShapeDrawable的资源文件！然后TextView将 background 设置为这个drawable资源即可
ShapeDrawable的资源文件
- <solid android:color="xxx" > 这个是设置背景颜色的
- <stroke android:width="xdp" android:color="xxx"> 这个是设置边框的粗细,以及边
  
  框颜色的
- <padding androidLbottom="xdp"> 这个是设置边距的
- <corners android:topLeftRadius="10px"> 这个是设置圆角的
- <gradient> 这个是设置渐变色的,可选属性有: startColor:起始颜色 endColor:结束颜色 centerColor:中间颜色 angle:方向角度,等于0时,从左到右,然后逆时针方向转,当angle = 90度时从下往上 type:设置渐变的类型
  - 编写矩形边框的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>

4.3带图片的TextView

应用场景：

属性使用

<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"  
  xmlns:tools="http://schemas.android.com/tools" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  tools:context="com.jay.example.test.MainActivity" > 
  <TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_centerInParent="true" 
    android:drawableTop="@drawable/show1" 
    android:drawableLeft="@drawable/show1" 
    android:drawableRight="@drawable/show1" 
    android:drawableBottom="@drawable/show1" 
    android:drawablePadding="10dp" 
    android:text="张全蛋" /> 
</RelativeLayout>

效果展示