您现在的位置是:网站首页> Android

Android——六大基本布局总结

  • Android
  • 2022-03-06
  • 822人已阅读
摘要

基本理论:

Android六大基本布局分别是:


线性布局LinearLayout


表格布局TableLayout


相对布局RelativeLayout


层布局FrameLayout


绝对布局AbsoluteLayout


网格布局GridLayout。

其中,表格布局是线性布局的子类。网格布局是android 4.0后新增的布局。

在手机程序设计中,绝对布局基本上不用,用得相对较多的是线性布局和相对布局。


(一)线性布局LinearLayout

线性布局在开发中使用最多,具有垂直方向与水平方向的布局方式,通过设置属性“android:orientation”控制方向,属性值垂直(vertical)和水平(horizontal),默认水平方向。

android:gravity:内部控件对齐方式,常用属性值有center、center_vertical、center_horizontal、top、bottom、left、right等。

这个属性在布局组件RelativeLayout、TableLayout中也有使用,FrameLayout、AbsoluteLayout则没有这个属性。

center:居中显示,这里并不是表示显示在LinearLayout的中心,当LinearLayout线性方向为垂直方向时,center表示水平居中,但是并不能垂直居中,此时等同于center_horizontal的作用;同样当线性方向为水平方向时,center表示垂直居中,等同于center_vertical。

top、bottom、left、right顾名思义为内部控件居顶、低、左、右布局。

这里要与android:layout_gravity区分开,layout_gravity是用来设置自身相对于父元素的布局。

android:layout_weight:权重,用来分配当前控件在剩余空间的大小。

使用权重一般要把分配该权重方向的长度设置为零,比如在水平方向分配权重,就把width设置为零。


先来看一下效果:

1.png



下面来看看代码:


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

 

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/LinearLayout1"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    tools:context="${relativePackage}.${activityClass}" >

 

    <EditText 

        android:id="@+id/edit"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" />

 

    <!-- 

        第一线性布局

        LinearLayout一定要设置方向

        android:orientation 值:horizontal 元素水平摆放  |  vertical 元素垂直摆放

        android:gravity="right"设置对齐方式

     -->

     <LinearLayout 

         android:layout_width="match_parent"

         android:layout_height="wrap_content"

         android:orientation="horizontal"

         android:gravity="center" >

         

         <Button

             android:id="@+id/button" 

             android:layout_width="wrap_content"

             android:layout_height="wrap_content"

             android:text="确定"/>

         <Button 

             android:id="@+id/button1"

             android:layout_width="wrap_content"

             android:layout_height="wrap_content"

             android:text="取消" />

     </LinearLayout>

     

     <!-- 第二线性布局 -->

     <LinearLayout 

         android:layout_width="match_parent"

         android:layout_height="wrap_content"

         android:orientation="horizontal" >

         

         <TextView 

             android:layout_width="wrap_content"

             android:layout_height="200dp"

             android:layout_weight="1"

             android:background="#ff0000"

             android:text="红色"/>

         

         <TextView 

             android:layout_width="wrap_content"

             android:layout_height="200dp"

             android:layout_weight="1"

             android:background="#00ff00"

             android:text="绿色"/>

         

         <TextView 

             android:layout_width="wrap_content"

             android:layout_height="200dp"

             android:layout_weight="1"

             android:background="#0000ff"

             android:text="蓝色"/>

         

         <TextView 

             android:layout_width="wrap_content"

             android:layout_height="200dp"

             android:layout_weight="2"

             android:background="#00ffff"

             android:text="青色"/>

     </LinearLayout>

</LinearLayout>

 


(二)相对布局RelativeLayout

相对布局可以让子控件相对于兄弟控件或父控件进行布局,可以设置子控件相对于兄弟控件或父控件进行上下左右对齐。

RelativeLayout能替换一些嵌套视图,当我们用LinearLayout来实现一个简单的布局但又使用了过多的嵌套时,就可以考虑使用RelativeLayout重新布局。

相对布局就是一定要加Id才能管理。


RelativeLayout中子控件常用属性:

1、相对于父控件,例如:android:layout_alignParentTop=“true”

android:layout_alignParentTop      控件的顶部与父控件的顶部对齐;

android:layout_alignParentBottom  控件的底部与父控件的底部对齐;

android:layout_alignParentLeft      控件的左部与父控件的左部对齐;

android:layout_alignParentRight     控件的右部与父控件的右部对齐;


2、相对给定Id控件,例如:android:layout_above=“@id/**”

android:layout_above 控件的底部置于给定ID的控件之上;

android:layout_below     控件的底部置于给定ID的控件之下;

android:layout_toLeftOf    控件的右边缘与给定ID的控件左边缘对齐;

android:layout_toRightOf  控件的左边缘与给定ID的控件右边缘对齐;

android:layout_alignBaseline  控件的baseline与给定ID的baseline对齐;

android:layout_alignTop        控件的顶部边缘与给定ID的顶部边缘对齐;

android:layout_alignBottom   控件的底部边缘与给定ID的底部边缘对齐;

android:layout_alignLeft       控件的左边缘与给定ID的左边缘对齐;

android:layout_alignRight      控件的右边缘与给定ID的右边缘对齐;


3、居中,例如:android:layout_centerInParent=“true”

android:layout_centerHorizontal 水平居中;

android:layout_centerVertical    垂直居中;

android:layout_centerInParent  父控件的中央;


先来看一下效果:

2.png



版本低了,文本框可以在AndroidManifest.xml里更改主体:

3.png



下面来看看代码:


<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:padding="10dp"

    tools:context="${relativePackage}.${activityClass}" >

    

    <TextView

        android:id="@+id/text1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignBaseline="@+id/et1"

        android:text="@string/username" />

    

    <EditText 

        android:id="@+id/et1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_toRightOf="@id/text1"

        android:layout_marginTop="23dp"

        android:inputType="text"

        android:maxLines="12"

        android:hint="用户名" />

    

    <TextView

        android:id="@+id/text2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignBaseline="@+id/et2"

        android:text="@string/pwd" />

    <EditText

        android:id="@+id/et2"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_below="@id/et1"

        android:layout_marginTop="23dp"

        android:inputType="text"

        android:maxLines="12"

        android:layout_toRightOf="@id/text2"

        android:hint="密码" />

 

    <Button

        android:id="@+id/button1"

        android:layout_width="100dp"

        android:layout_height="wrap_content"

        android:layout_alignBaseline="@+id/button2"

        android:layout_alignBottom="@+id/button2"

        android:layout_marginRight="14dp"

        android:layout_toLeftOf="@+id/button2"

        android:text="登录" />

 

    <Button

        android:id="@+id/button2"

        android:layout_width="100dp"

        android:layout_height="wrap_content"

        android:layout_alignRight="@+id/et2"

        android:layout_below="@+id/et2"

        android:layout_marginTop="23dp"

        android:text="退出" />

    

</RelativeLayout>


 


(三)层布局FrameLayout


帧布局或叫层布局,从屏幕左上角按照层次堆叠方式布局,后面的控件覆盖前面的控件。

该布局在开发中设计地图经常用到,因为是按层次方式布局,我们需要实现层面显示的样式时就可以

采用这种布局方式,比如我们要实现一个类似百度地图的布局,我们移动的标志是在一个图层的上面。

在普通功能的软件设计中用得也不多。层布局主要应用就是地图方面。


上面有三层颜色,点击下面的案列上面会出现对应的样式


4.png


activity_main.xml中代码:


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/LinearLayout1"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    tools:context="${relativePackage}.${activityClass}" >

 

    <FrameLayout 

        android:id="@+id/frame"

        android:layout_width="match_parent"

        android:layout_margin="20dp"

        android:layout_height="wrap_content" >

        

        <TextView 

            android:id="@+id/text1"

            android:layout_width="match_parent"

            android:layout_height="300dp"

            android:background="#0000ff" />

        

        <TextView 

            android:id="@+id/text2"

            android:layout_width="match_parent"

            android:layout_height="300dp"

            android:background="#00ff00" />

        

        <TextView 

            android:id="@+id/text3"

            android:layout_width="match_parent"

            android:layout_height="300dp"

            android:background="#ff0000" />

    </FrameLayout>

    

    <LinearLayout 

        android:id="@+id/linear"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal" >

        

        <Button 

            android:id="@+id/button1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:layout_marginLeft="20dp"

            android:background="#0000ff"

            android:text="颜色1"/>

        

        <Button 

            android:id="@+id/button2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:layout_marginRight="20dp"

            android:layout_marginLeft="20dp"

            android:background="#00ff00"

            android:text="颜色2"/>

        

        <Button 

            android:id="@+id/button3"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:background="#ff0000"

            android:layout_marginRight="20dp"

            android:text="颜色3"/>

    </LinearLayout>

 

</LinearLayout>


MainActivity.java中代码:


public class MainActivity extends Activity {

    

    private FrameLayout frame;

    private TextView text1;

    private TextView text2;

    private TextView text3;

    private Button button1;

    private Button button2;

    private Button button3;

    

    private OnClickListener listener = new OnClickListener() {

        

        @Override

        public void onClick(View v) {

            switch (v.getId()) {

            case R.id.button1:

                //删除

                frame.removeView(text1);

                //创建

                frame.addView(text1);

                break;

            case R.id.button2:

                frame.removeViewInLayout(text2);

                frame.addView(text2);

                break;

            case R.id.button3:

                frame.removeViewInLayout(text3);

                frame.addView(text3);

                break;

            default:

                break;

            }

        }

    };

    

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        

        frame = (FrameLayout) findViewById(R.id.frame);

        text1 = (TextView) findViewById(R.id.text1);

        text2 = (TextView) findViewById(R.id.text2);

        text3 = (TextView) findViewById(R.id.text3);

        button1 = (Button) findViewById(R.id.button1);

        button2 = (Button) findViewById(R.id.button2);

        button3 = (Button) findViewById(R.id.button3);

        

        button1.setOnClickListener(listener);

        button2.setOnClickListener(listener);

        button3.setOnClickListener(listener);

    }

}

 


(四)绝对布局AbsoluteLayout

 绝对布局中将所有的子元素通过设置android:layout_x 和 android:layout_y属性,将子元素的坐标位置固定下来,即坐标(android:layout_x, android:layout_y) ,layout_x用来表示横坐标,layout_y用来表示纵坐标。屏幕左上角为坐标(0,0),横向往右为正方,纵向往下为正方。实际应用中,这种布局用的比较少,因为Android终端一般机型比较多,各自的屏幕大小。分辨率等可能都不一样,如果用绝对布局,可能导致在有的终端上显示不全等。所有基本不会使用,这里就不多介绍了。


 


(五)表格布局TableLayout

表格布局,适用于多行多列的布局格式,每个TableLayout是由多个TableRow组成,一个TableRow就表示TableLayout中的每一行,这一行可以由多个子元素组成。实际上TableLayout和TableRow都是LineLayout线性布局的子类。但是TableRow的参数android:orientation属性值固定为horizontal,且android:layout_width=MATCH_PARENT,android:layout_height=WRAP_CONTENT。所以TableRow实际是一个横向的线性布局,且所以子元素宽度和高度一致。

注意:在TableLayout中,单元格可以为空,但是不能跨列,意思是只能不能有相邻的单元格为空。

TableLayout常用属性:

android:shrinkColumns:设置可收缩的列,内容过多就收缩显示到第二行

android:stretchColumns:设置可伸展的列,将空白区域填充满整个列

android:collapseColumns:设置要隐藏的列

列的索引从0开始,shrinkColumns和stretchColumns可以同时设置。

子控件常用属性:

android:layout_column:第几列

android:layout_span:占据列数


效果图是一个计数器页面:

5.png



代码(这里这是页面,数据处理部分,完整功能计算器请访问:https://blog.csdn.net/qq_40205116/article/details/88550843):


<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/TableLayout1"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:stretchColumns="*" >

 

    <TextView

        android:id="@+id/text"

        android:layout_width="match_parent"

        android:layout_height="150dp"

        android:background="@android:color/holo_blue_bright"

        android:textSize="30dp"

        android:gravity="center|right"

        android:text="" />

    

    <TableRow 

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_weight="1" >

        <Button

            android:id="@+id/btn01"

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:text="C" />

        <Button

            android:id="@+id/btn02"

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:text="←" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:text="%" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:text="÷" />

    </TableRow>

    <TableRow 

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_weight="1" >

        <Button

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:text="7" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:text="8" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:text="9" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:text="x" />

    </TableRow>

    <TableRow 

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_weight="1" >

        <Button

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:text="4" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:text="5" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:text="6" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:text="-" />

    </TableRow>

    <TableRow 

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_weight="1" >

        <Button

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:text="1" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:text="2" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:text="3" />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:text="+" />

    </TableRow>

    <TableRow 

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_weight="1" >

        <Button

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:text="." />

        <Button

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:text="0" />

        <Button

            android:id="@+id/btn19"

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:layout_span="2"

            android:text="=" />

    </TableRow>

</TableLayout>


 


(六)网格布局GridLayout

作为android 4.0 后新增的一个布局,与前面介绍过的TableLayout(表格布局)其实有点大同小异;

不过新增了一些东东

①跟LinearLayout(线性布局)一样,他可以设置容器中组件的对齐方式

②容器中的组件可以跨多行也可以跨多列(相比TableLayout直接放组件,占一行相比较)

因为是android 4.0新增的,API Level 14,在这个版本以前的sdk都需要导入项目。这里不解释。


常用属性:

排列对齐:

①设置组件的排列方式:   android:orientation=""     vertical(竖直,默认)或者horizontal(水平)

②设置组件的对齐方式:   android:layout_gravity=""   center,left,right,buttom


设置布局为几行几列:

①设置有多少行: android:rowCount="4"        //设置网格布局有4行

②设置有多少列: android:columnCount="4"    //设置网格布局有4列


设置某个组件位于几行几列

注:都是从0开始算的哦!

①组件在第几行: android:layout_row = "1"   //设置组件位于第二行 

②组件在第几列: android:layout_column = "2"   //设置该组件位于第三列


设置某个组件横跨几行几列(合并):

横跨几行: android:layout_rowSpan = "2"     //纵向横跨2行

横跨几列: android:layout_columnSpan = "3"     //横向横跨2列


android:layout_gravity="fill"填充


效果图:

6.png



这里只简单的设置了一下按钮演示,大家也可以用gridLayout来做一个计数器页面(这里我就不写了,因为和上面那个表格布局差不多)。


<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/GridLayout1"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:columnCount="4"

    android:rowCount="3"

    android:orientation="horizontal"

    tools:context="${relativePackage}.${activityClass}" >

    <!--

        columnCount列

        rowCount行

        orientation排列方式,horizontal水平,vertical垂直

      -->

 

    <!-- 

        layout_columnSpan合并列单元格

        layout_rowSpan合并行单元格

        layout_gravity="fill"填充

     -->

    <Button

        android:id="@+id/button1"

        android:layout_columnSpan="2"

        android:layout_gravity="fill"

        android:text="bun11" />

 

    <Button

        android:id="@+id/button2"

        android:text="bun12" />

 

    <Button

        android:id="@+id/button3"

        android:layout_rowSpan="2"

        android:layout_gravity="fill"

        android:text="bun13" />

 

    <Button

        android:id="@+id/button5"

        android:text="bun21" />

 

    <Button

        android:id="@+id/button6"

        android:text="bun22" />

 

    <Button

        android:id="@+id/button7"

        android:text="bun23" />

 

</GridLayout>


 


除上面讲过之外常用的几个布局的属性:

(1)layout_margin 

用于设置控件边缘相对于父控件的边距

android:layout_marginLeft 

android:layout_marginRight

android:layout_marginTop

android:layout_marginBottom


(2) layout_padding 

用于设置控件内容相对于控件边缘的边距

android:layout_paddingLeft

android:layout_paddingRight

android:layout_paddingTop

android:layout_paddingBottom


(3) layout_width/height

用于设置控件的高度和宽度

wrap_content 内容包裹,表示这个控件的里面文字大小填充

fill_parent 跟随父窗口

match_parent


(4) gravity 

用于设置View组件里面内容的对齐方式

top bottom left   right  center等


Top