0
0

Android学习之路(3) 布局

线性布局LinearLayout

前几个小节的例程中，XML文件用到了LinearLayout布局，它的学名为线性布局。顾名思义，线性布局 像是用一根线把它的内部视图串起来，故而内部视图之间的排列顺序是固定的，要么从左到右排列，要 么从上到下排列。在XML文件中，LinearLayout通过属性android:orientation区分两种方向，其中从左 到右排列叫作水平方向，属性值为horizontal；从上到下排列叫作垂直方向，属性值为vertical。如果LinearLayout标签不指定具体方向，则系统默认该布局为水平方向排列，也就是默认

  1. android:orientation="horizontal"

.

下面做个实验，让XML文件的根节点挂着两个线性布局，第一个线性布局采取horizontal水平方向，第 二个线性布局采取vertical垂直方向。然后每个线性布局内部各有两个文本视图，通过观察这些文本视图 的排列情况，从而检验线性布局的显示效果。详细的XML文件内容如下所示：

  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.  
  4.     android:layout_width="match_parent"
  5.  
  6.     android:layout_height="match_parent"
  7.  
  8.     android:orientation="vertical">
  9.  
  10.     <LinearLayout
  11.  
  12.         android:layout_width="match_parent"
  13.  
  14.         android:layout_height="wrap_content"
  15.  
  16.         android:orientation="horizontal">
  17.  
  18.         <TextView
  19.  
  20.             android:layout_width="wrap_content"
  21.             android:layout_height="wrap_content"
  22.  
  23.             android:text="横排第一个"
  24.  
  25.             android:textSize="17sp"
  26.  
  27.             android:textColor="#000000" />
  28.  
  29.         <TextView
  30.  
  31.             android:layout_width="wrap_content"
  32.  
  33.             android:layout_height="wrap_content"
  34.  
  35.             android:text="横排第二个"
  36.  
  37.             android:textSize="17sp"
  38.  
  39.             android:textColor="#000000" />
  40.  
  41.     </LinearLayout>
  42.  
  43.     <LinearLayout
  44.  
  45.         android:layout_width="match_parent"
  46.  
  47.         android:layout_height="wrap_content"
  48.  
  49.         android:orientation="vertical">
  50.  
  51.         <TextView
  52.  
  53.             android:layout_width="wrap_content"
  54.  
  55.             android:layout_height="wrap_content"
  56.  
  57.             android:text="竖排第一个"
  58.  
  59.             android:textSize="17sp"
  60.  
  61.             android:textColor="#000000" />
  62.  
  63.         <TextView
  64.  
  65.             android:layout_width="wrap_content"
  66.  
  67.             android:layout_height="wrap_content"
  68.  
  69.             android:text="竖排第二个"
  70.  
  71.             android:textSize="17sp"
  72.  
  73.             android:textColor="#000000" />
  74.  
  75.     </LinearLayout>
  76. </LinearLayout>

运行测试App，进入如下图所示的演示页面，可见horizontal为横向排列，vertical为纵向排列，说明android:orientation的方向属性确实奏效了。

除了方向之外，线性布局还有一个权重概念，所谓权重，指的是线性布局的下级视图各自拥有多大比例 的宽高。比如一块蛋糕分给两个人吃，可能两人平均分，也可能甲分三分之一，乙分三分之二。两人平 均分的话，先把蛋糕切两半，然后甲分到一半，乙分到另一半，此时甲乙的权重比为1:1。甲分三分之 一、乙分三分之二的话，先把蛋糕平均切成三块，然后甲分到一块，乙分到两块，此时甲乙的权重比为1:2。就线性布局而言，它自身的尺寸相当于一整块蛋糕，它的下级视图们一起来分这个尺寸蛋糕，有的 视图分得多，有的视图分得少。分多分少全凭每个视图分到了多大的权重，这个权重在XML文件中通过 属性

  1. android:layout_weight

来表达。

把线性布局看作蛋糕的话，分蛋糕的甲乙两人就相当于线性布局的下级视图。假设线性布局平均分为左 右两块，则甲视图和乙视图的权重比为1:1，意味着两个下级视图的layout_weight属性都是1。不过视图 有宽高两个方向，系统怎知layout_weight表示哪个方向的权重呢？所以这里有个规定，一旦设置了layout_weight属性值，便要求layout_width填0dp或者layout_height填0dp。如果layout_width填0dp，则layout_weight表示水平方向的权重，下级视图会从左往右分割线性布局；如果layout_height填0dp，则layout_weight表示垂直方向的权重，下级视图会从上往下分割线性布局。 按照左右均分的话，线性布局设置水平方向horizontal，且甲乙两视图的layout_width都填0dp，layout_weight都填1，此时横排的XML片段示例如下：

  1. <LinearLayout
  2.  
  3.         android:layout_width="match_parent"
  4.  
  5.         android:layout_height="wrap_content"
  6.  
  7.         android:orientation="horizontal">
  8.  
  9.     <TextView
  10.  
  11.               android:layout_width="0dp"
  12.  
  13.               android:layout_height="wrap_content"
  14.  
  15.               android:layout_weight="1"
  16.  
  17.               android:text="横排第一个"
  18.  
  19.               android:textSize="17sp"
  20.  
  21.               android:textColor="#000000" />
  22.  
  23.     <TextView
  24.  
  25.               android:layout_width="0dp"
  26.  
  27.               android:layout_height="wrap_content"
  28.  
  29.               android:layout_weight="1"
  30.  
  31.               android:text="横排第二个"
  32.  
  33.               android:textSize="17sp"
  34.  
  35.               android:textColor="#000000" />
  36. </LinearLayout>

按照上下均分的话，线性布局设置垂直方向vertical，且甲乙两视图的layout_height都填0dp，layout_weight都填1，此时竖排的XML片段示例如下：

  1. <LinearLayout
  2.  
  3.         android:layout_width="match_parent"
  4.  
  5.         android:layout_height="wrap_content"
  6.  
  7.         android:orientation="vertical">
  8.  
  9.     <TextView
  10.  
  11.               android:layout_width="wrap_content"
  12.  
  13.               android:layout_height="0dp"
  14.  
  15.               android:layout_weight="1"
  16.  
  17.               android:text="竖排第一个"
  18.  
  19.               android:textSize="17sp"
  20.  
  21.               android:textColor="#000000" />
  22.  
  23.     <TextView
  24.  
  25.               android:layout_width="wrap_content"
  26.  
  27.               android:layout_height="0dp"
  28.  
  29.               android:layout_weight="1"
  30.  
  31.               android:text="竖排第二个"
  32.  
  33.               android:textSize="17sp"
  34.  
  35.               android:textColor="#000000" />
  36. </LinearLayout>

把上面两个片段放到新页面的XML文件，其中第一个是横排区域采用红色背景（色值为ff0000），第二 个是竖排区域采用青色背景（色值为00ffff）。重新运行测试App，打开演示界面如下图所示，可见横 排区域平均分为左右两块，竖排区域平均分为上下两块。

相对布局RelativeLayout

线性布局的下级视图是顺序排列着的，另一种相对布局的下级视图位置则由其他视图决定。相对布局名 为RelativeLayout，因为下级视图的位置是相对位置，所以得有具体的参照物才能确定最终位置。如果不设定下级视图的参照物，那么下级视图默认显示在RelativeLayout内部的左上角。 用于确定下级视图位置的参照物分两种，一种是与该视图自身平级的视图；另一种是该视图的上级视图 （也就是它归属的RelativeLayout）。综合两种参照物，相对位置在XML文件中的属性名称说明见下表。

为了更好地理解上述相对属性的含义，接下来使用RelativeLayout及其下级视图进行布局来看看实际效果图。下面是演示相对布局的XML文件例子：

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.  
  3.     android:layout_width="match_parent"
  4.  
  5.     android:layout_height="150dp" >
  6.  
  7.         <TextView
  8.  
  9.         android:id="@+id/tv_center"
  10.  
  11.         android:layout_width="wrap_content"
  12.  
  13.         android:layout_height="wrap_content"
  14.  
  15.         android:layout_centerInParent="true"
  16.  
  17.         android:background="#ffffff"
  18.  
  19.         android:text="我在中间"
  20.  
  21.         android:textSize="11sp"
  22.  
  23.         android:textColor="#000000" />
  24.  
  25.     
  26.     <TextView
  27.  
  28.         android:id="@+id/tv_center_horizontal"
  29.  
  30.         android:layout_width="wrap_content"
  31.  
  32.         android:layout_height="wrap_content"
  33.  
  34.         android:layout_centerHorizontal="true"
  35.  
  36.         android:background="#eeeeee"
  37.  
  38.         android:text="我在水平中间"
  39.  
  40.         android:textSize="11sp"
  41.  
  42.         android:textColor="#000000" />
  43.  
  44.     
  45.     <TextView
  46.  
  47.         android:id="@+id/tv_center_vertical"
  48.  
  49.         android:layout_width="wrap_content"
  50.  
  51.         android:layout_height="wrap_content"
  52.  
  53.         android:layout_centerVertical="true"
  54.  
  55.         android:background="#eeeeee"
  56.  
  57.         android:text="我在垂直中间"
  58.  
  59.         android:textSize="11sp"
  60.  
  61.         android:textColor="#000000" />
  62.  
  63.     
  64.     <TextView
  65.  
  66.         android:id="@+id/tv_parent_left"
  67.  
  68.         android:layout_width="wrap_content"
  69.  
  70.         android:layout_height="wrap_content"
  71.  
  72.         android:layout_alignParentLeft="true"
  73.  
  74.         android:background="#eeeeee"
  75.  
  76.         android:text="我跟上级左边对齐"
  77.  
  78.         android:textSize="11sp"
  79.  
  80.         android:textColor="#000000" />
  81.  
  82.     <TextView
  83.  
  84.         android:id="@+id/tv_parent_right"
  85.  
  86.         android:layout_width="wrap_content"
  87.  
  88.         android:layout_height="wrap_content"
  89.  
  90.         android:layout_alignParentRight="true"
  91.  
  92.         android:background="#eeeeee"
  93.  
  94.         android:text="我跟上级右边对齐"
  95.  
  96.         android:textSize="11sp"
  97.  
  98.         android:textColor="#000000" />
  99.  
  100.     <TextView
  101.  
  102.         android:id="@+id/tv_parent_top"
  103.  
  104.         android:layout_width="wrap_content"
  105.  
  106.         android:layout_height="wrap_content"
  107.  
  108.         android:layout_alignParentTop="true"
  109.  
  110.         android:background="#eeeeee"
  111.  
  112.         android:text="我跟上级顶部对齐"
  113.  
  114.         android:textSize="11sp"
  115.         android:textColor="#000000" />
  116.  
  117.     <TextView
  118.  
  119.         android:id="@+id/tv_parent_bottom"
  120.  
  121.         android:layout_width="wrap_content"
  122.  
  123.         android:layout_height="wrap_content"
  124.  
  125.         android:layout_alignParentBottom="true"
  126.  
  127.         android:background="#eeeeee"
  128.  
  129.         android:text="我跟上级底部对齐"
  130.  
  131.         android:textSize="11sp"
  132.  
  133.         android:textColor="#000000" />
  134.  
  135.     
  136.     <TextView
  137.  
  138.         android:id="@+id/tv_left_center"
  139.  
  140.         android:layout_width="wrap_content"
  141.  
  142.         android:layout_height="wrap_content"
  143.  
  144.         android:layout_toLeftOf="@+id/tv_center"
  145.  
  146.         android:layout_alignTop="@+id/tv_center"
  147.  
  148.         android:background="#eeeeee"
  149.  
  150.         android:text="我在中间左边"
  151.  
  152.         android:textSize="11sp"
  153.  
  154.         android:textColor="#000000" />
  155.  
  156.     
  157.     <TextView
  158.  
  159.         android:id="@+id/tv_right_center"
  160.  
  161.         android:layout_width="wrap_content"
  162.  
  163.         android:layout_height="wrap_content"
  164.  
  165.         android:layout_toRightOf="@+id/tv_center"
  166.  
  167.         android:layout_alignBottom="@+id/tv_center"
  168.  
  169.         android:background="#eeeeee"
  170.  
  171.         android:text="我在中间右边"
  172.  
  173.         android:textSize="11sp"
  174.  
  175.         android:textColor="#000000" />
  176.  
  177.     
  178.     <TextView
  179.  
  180.         android:id="@+id/tv_above_center"
  181.  
  182.         android:layout_width="wrap_content"
  183.  
  184.         android:layout_height="wrap_content"
  185.  
  186.         android:layout_above="@+id/tv_center"
  187.  
  188.         android:layout_alignLeft="@+id/tv_center"
  189.  
  190.         android:background="#eeeeee"
  191.  
  192.         android:text="我在中间上面"
  193.  
  194.         android:textSize="11sp"
  195.  
  196.         android:textColor="#000000" />
  197.  
  198.     
  199.     <TextView
  200.  
  201.         android:id="@+id/tv_below_center"
  202.  
  203.         android:layout_width="wrap_content"
  204.  
  205.         android:layout_height="wrap_content"
  206.  
  207.         android:layout_below="@+id/tv_center"
  208.  
  209.         android:layout_alignRight="@+id/tv_center"
  210.  
  211.         android:background="#eeeeee"
  212.  
  213.         android:text="我在中间下面"
  214.  
  215.         android:textSize="11sp"
  216.  
  217.         android:textColor="#000000" />
  218. </RelativeLayout>

上述XML文件的布局效果如下图所示，RelativeLayout的下级视图都是文本视图，控件上的文字说明 了所处的相对位置，具体的控件显示方位正如XML属性中描述的那样。

Java程序如下：

  1. package com.example.chapter03;
  2. import androidx.appcompat.app.AppCompatActivity;
  3. import android.os.Bundle;
  4.  
  5. public class RelativeLayoutActivity extends AppCompatActivity {
  6.     @Override
  7.     protected void onCreate(Bundle savedInstanceState) {
  8.         super.onCreate(savedInstanceState);
  9.         setContentView(R.layout.activity_relative_layout);
  10.     }
  11. }
标签： android 学习
本文转载自: https://blog.csdn.net/qq_32907491/article/details/132264030
版权归原作者 星如雨ｸﾞｯ!(๑•̀ㅂ•́)و✧ 所有， 如有侵权，请联系我们删除。
登录后发布评论

“Android学习之路(3) 布局”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？