devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【Android入门到项目实战--3.2】—— 详解4种基本布局（线性布局、相对布局、帧布局、百分比布局）_android百分比布局

作者：你好赵伟 | 2024-05-17 09:27:01

赞

踩

android百分比布局

目录

一、线性布局

1、  android:layout_gravity属性

2、android:layout_weight属性

二、相对布局

如何相对于控件定位？

三、帧布局

四、百分比布局

本篇文章主要讲解四种基本的布局：线性布局、相对布局、帧布局、百分比布局。

一、线性布局

        LinearLayout又称线性布局，是非常常用的布局，此布局将它所包含的控件在线性方向上依次排列，其android:orientation属性指明了排列方向，如果是vertical，则为竖直排列，如果是horizontal，则是水平排列。

下面尝试演示。 

XML布局文件代码如下： 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="vertical"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent">
  6.  
  7.     <Button
  8.         android:id="@+id/button1"
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="wrap_content"
  11.         android:text="按钮1"/>
  12.  
  13.     <Button
  14.         android:id="@+id/button2"
  15.         android:layout_width="wrap_content"
  16.         android:layout_height="wrap_content"
  17.         android:text="按钮2"/>
  18.  
  19.     <Button
  20.         android:id="@+id/button3"
  21.         android:layout_width="wrap_content"
  22.         android:layout_height="wrap_content"
  23.         android:text="按钮3"/>
  24.  
  25. </LinearLayout>

 效果如下：

 

改变orientation属性为horizontal后效果如下：

 

1、  android:layout_gravity属性

下面加入新属性尝试一下。

XML布局文件代码如下：

         android:layout_gravity用于指定控件在布局中的对齐方式，而android:gravity指定文字在控件中的对齐方式。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="horizontal"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent">
  6.  
  7.     <Button
  8.         android:id="@+id/button1"
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="wrap_content"
  11.         android:layout_gravity="top"
  12.         android:text="按钮1"/>
  13.  
  14.     <Button
  15.         android:id="@+id/button2"
  16.         android:layout_width="wrap_content"
  17.         android:layout_height="wrap_content"
  18.         android:layout_gravity="center_vertical"
  19.         android:text="按钮2"/>
  20.  
  21.     <Button
  22.         android:id="@+id/button3"
  23.         android:layout_width="wrap_content"
  24.         android:layout_height="wrap_content"
  25.         android:layout_gravity="bottom"
  26.         android:text="按钮3"/>
  27.  
  28. </LinearLayout>

 效果如下：

 

2、android:layout_weight属性

         这个属性允许我们使用比例的方式来指定控件大小，在手机屏幕的适配性方面起到重要作用。

下面尝试实现：编写一个消息发送界面。

XML布局文件代码如下：  

        宽度属性都设置为0dp，因为宽度不再由android:layout_width指定；那么android:layout_weight属性该如何设置？系统会把LinearLayout下所有控件指定的layout_weight值相加，得到总值，然后每个控件所占的大小比例就是该控件的weight值除以刚才的总值，这里都为1，各占1/2比例。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="horizontal"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent">
  6.     
  7.     <EditText
  8.         android:id="@+id/input_message"
  9.         android:layout_width="0dp"
  10.         android:layout_height="wrap_content"
  11.         android:layout_weight="1"
  12.         android:hint="请输入"/>
  13.     
  14.     <Button
  15.         android:id="@+id/send"
  16.         android:layout_width="0dp"
  17.         android:layout_height="wrap_content"
  18.         android:layout_weight="1"
  19.         android:text="发送"/>
  20.  
  21. </LinearLayout>

 效果如下：

 

 

二、相对布局

        RelativeLayout又称相对布局，也是非常常用的布局，此布局可通过相对定位的方式让控件出现在布局的任何位置。

下面尝试演示一下。

XML布局文件代码如下：  

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="horizontal"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent">
  6.  
  7.     <Button
  8.         android:id="@+id/button1"
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="wrap_content"
  11.         android:layout_alignParentLeft="true"
  12.         android:layout_alignParentTop="true"
  13.         android:text="按钮1"/>
  14.  
  15.     <Button
  16.         android:id="@+id/button2"
  17.         android:layout_width="wrap_content"
  18.         android:layout_height="wrap_content"
  19.         android:layout_alignParentRight="true"
  20.         android:layout_alignParentTop="true"
  21.         android:text="按钮2"/>
  22.  
  23.     <Button
  24.         android:id="@+id/button3"
  25.         android:layout_width="wrap_content"
  26.         android:layout_height="wrap_content"
  27.         android:layout_centerInParent="true"
  28.         android:text="按钮3"/>
  29.  
  30.     <Button
  31.         android:id="@+id/button4"
  32.         android:layout_width="wrap_content"
  33.         android:layout_height="wrap_content"
  34.         android:layout_alignParentBottom="true"
  35.         android:layout_alignParentLeft="true"
  36.         android:text="按钮4"/>
  37.  
  38.     <Button
  39.         android:id="@+id/button5"
  40.         android:layout_width="wrap_content"
  41.         android:layout_height="wrap_content"
  42.         android:layout_alignParentBottom="true"
  43.         android:layout_alignParentRight="true"
  44.         android:text="按钮5"/>
  45.  
  46.  
  47. </RelativeLayout>

 效果如下：

 

 以上相对于父布局定位。

如何相对于控件定位？

XML布局文件代码如下：   

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="horizontal"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent">
  6.  
  7.     <Button
  8.         android:id="@+id/button1"
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="wrap_content"
  11.         android:layout_above="@+id/button3"
  12.         android:layout_toLeftOf="@+id/button3"
  13.         android:text="按钮1"/>
  14.  
  15.     <Button
  16.         android:id="@+id/button2"
  17.         android:layout_width="wrap_content"
  18.         android:layout_height="wrap_content"
  19.         android:layout_above="@+id/button3"
  20.         android:layout_toRightOf="@id/button3"
  21.         android:text="按钮2"/>
  22.  
  23.     <Button
  24.         android:id="@+id/button3"
  25.         android:layout_width="wrap_content"
  26.         android:layout_height="wrap_content"
  27.         android:layout_centerInParent="true"
  28.         android:text="按钮3"/>
  29.  
  30.     <Button
  31.         android:id="@+id/button4"
  32.         android:layout_width="wrap_content"
  33.         android:layout_height="wrap_content"
  34.         android:layout_below="@+id/button3"
  35.         android:layout_toLeftOf="@+id/button3"
  36.         android:text="按钮4"/>
  37.  
  38.     <Button
  39.         android:id="@+id/button5"
  40.         android:layout_width="wrap_content"
  41.         android:layout_height="wrap_content"
  42.         android:layout_below="@+id/button3"
  43.         android:layout_toRightOf="@+id/button3"
  44.         android:text="按钮5"/>
  45.  
  46.  
  47. </RelativeLayout>

 效果如下：

 

三、帧布局

        FrameLayout又称帧布局，此布局下所有控件默认摆放在布局的左上角。

XML布局文件代码如下： 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="horizontal"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent">
  6.  
  7.       <TextView
  8.         android:id="@+id/text_view"
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="wrap_content"
  11.         android:text="这是TextView"/>
  12.  
  13.     <ImageView
  14.         android:id="@+id/image_view"
  15.         android:layout_width="wrap_content"
  16.         android:layout_height="wrap_content"
  17.         android:src="@mipmap/ic_launcher"/>
  18.  
  19.  
  20. </FrameLayout>

 效果如下： 

 

四、百分比布局

        只有LinearLayout支持使用layout_weight属性实现按比例大小指定控件，而其他两个不支持，Android引入百分比布局解决此问题。

        此布局不同于前面的布局，属于新增布局，如何让新增布局在所有版本中能够使用？百分比布局在support库中，只需要在build.gradle中添加百分比布局库的依赖，就能保证兼容性。

此布局后继文章实现。

希望本文章对你有帮助，如果你对Android开发感兴趣，请持续关注本专栏，帮助你从入门到项目实战，你将收获：Android基础开发、各种经典功能实现、项目实战、开发自己的APP、将APP上传应用商店、靠广告赚钱等等，持续更新ing......

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/582945
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号