安卓(android)五大布局总结以及实例演示

下面来介绍一下安卓开发中必不可少的五大布局的使用。

1、线性布局LinearLayout :

这种布局会自动按照属性中设置好的水平或者垂直方向进行控件的编排,使用起来比较简单。比较重要的一个属性orientation用于设置线性布局的布局方向,分为水平方向(horizontal)和垂直方向(vertical)。

举例如下:

    <LinearLayout 
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >
         <Button 
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          />
      <Button 
          android:id="@+id/button2"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          />
    </LinearLayout>

2、相对布局 RelativeLayout:

这种布局是按照各个控件之间的相对顺序进行编排的布局方式,比较重要的属性有layout_toLeftOf、layout_toRightOf、layout_above、layout_below来规定控件之间的相对位置。

举例如下:

<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:gravity="center">

  <Button 
      android:id="@+id/button1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="button1"
      android:textSize="16dp"
      />
       
   <Button 
       android:id="@+id/button2"
       android:layout_toRightOf="@id/button1"
       android:layout_below="@id/button1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="button2"
       android:textSize="16dp"
       />

</RelativeLayout>

3、绝对布局AbsoluteLayout:

这种布局方式是通过硬性的定义控件所在的绝对位置坐标来完成布局,比较重要的属性是layout_x、layout_y,用于决定控件的绝对位置坐标。这样的方式使用起来比较生硬,也会带来各个品牌的安卓产品屏幕大小不同产生控件位置显示不一致的问题,不建议使用。

举例如下:

<AbsoluteLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <TextView 
        android:layout_x="50dp"
        android:layout_y="50dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</AbsoluteLayout>
4、框架布局(帧布局)FrameLayout:

这种布局方式是用层叠的方式来编排控件的,控件之间会出现相互覆盖的效果,后加载的控件会在重叠的区域覆盖先加载的控件。

举例如下:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView 
        android:id="@+id/image"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/test"
        android:layout_gravity="center"
        />
    <ImageView 
        android:id="@+id/image1"
        android:layout_width="63dp"
        android:layout_height="46dp"
        android:background="@drawable/test1"
        android:layout_gravity="center"
        android:layout_marginTop="80dp"
        />
    <ImageView 
        android:id="@+id/image2"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_marginEnd="70dp"
        android:background="@drawable/test2"
        />
</FrameLayout>

5、表格布局TableLayout:

这种布局使用TableRow这个属性来表示表格中的一行,padding表示间隔,collapseColumns表示被隐藏的列索引shrinkColumns 表示被收缩的列索引,stretchColimns设置允许被拉伸列索引,这三个设置列索引的属性中如果涉及到多个列用逗号隔开。

 <TableLayout 
         android:id="@+id/tablelayout1"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:background="#FFFFFF"
         android:stretchColumns="0"
         >
         <TableRow 
             android:id="@+id/tablerow1"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             >
             <TextView 
                 android:id="@+id/textview"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:background="#fd8d8d"
                 android:textColor="#000000"
                 android:padding="4dp"
                 android:text="表格布局的使用"
                 />
             
         </TableRow>
         
     </TableLayout>
     <TableLayout 
         android:id="@+id/mytable2"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:stretchColumns="0,1,2,3"
         >
         <TableRow 
             android:id="@+id/tablerow2"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             >
             <Button 
                 android:id="@+id/button1"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="button1" 
                 />
              <Button 
                 android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="button2"
                 />
               <Button 
                 android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="button3"
                 />
               <Button 
                 android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="button4"
                 />
         </TableRow>
         
     </TableLayout>
     <TableLayout 
         android:id="@+id/mytablelayout3"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:stretchColumns="0"
         >
         <TableRow 
             android:id="@+id/tablerow1"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             >
             <EditText 
                 android:id="@+id/edittext"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:text="查询"
                 />
             
         </TableRow>
         
     </TableLayout>
以上五大布局有各自适合的使用场景,开发人员可以根据不同的需求 相互嵌套 使用以达到满意的效果。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值