基础复习——线性布局LinearLayout——相对布局RelativeLayout——网格布局GridLayout——滚动视图ScrollView...

约定不等于承诺〃 2023-09-28 17:38 109阅读 0赞

线性布局LinearLayout

线性布局内部的各视图有两种排列方式：

(1)orientation属性值为horizontal时，内部视图在水平方向从左往右排列。

(2)orientation属性值为vertical时，内部视图在垂直方向从上往下排列。

如果不指定orientation属性，则LinearLayout默认水平方向排列。

布局：

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width="match_parent"
  3.     android:layout_height="match_parent"
  4.     android:orientation="vertical">
  6.     <LinearLayout
  7.         android:layout_width="match_parent"
  8.         android:layout_height="wrap_content"
  9.         android:background="#ffff99"
  10.         android:orientation="horizontal">
  12.         <TextView
  13.             android:layout_width="wrap_content"
  14.             android:layout_height="wrap_content"
  15.             android:text="横排第一个"
  16.             android:textSize="17sp"
  17.             android:textColor="#000000" />
  19.         <TextView
  20.             android:layout_width="wrap_content"
  21.             android:layout_height="wrap_content"
  22.             android:text="横排第二个"
  23.             android:textSize="17sp"
  24.             android:background="#00ffff"
  25.             android:textColor="#000000" />
  26.     </LinearLayout>
  28.     <LinearLayout
  29.         android:layout_width="match_parent"
  30.         android:layout_height="wrap_content"
  31.         android:background="#ff0000"
  32.         android:orientation="vertical">
  34.         <TextView
  35.             android:layout_width="wrap_content"
  36.             android:layout_height="wrap_content"
  37.             android:text="竖排第一个"
  38.             android:textSize="17sp"
  39.             android:textColor="#000000" />
  41.         <TextView
  42.             android:layout_width="wrap_content"
  43.             android:layout_height="wrap_content"
  44.             android:text="竖排第二个"
  45.             android:textSize="17sp"
  46.             android:background="#00ffff"
  47.             android:textColor="#000000" />
  48.     </LinearLayout>
  50. </LinearLayout>

6767450c985d284dc11369ee26bee1eb.png

e6db96c335a1afed6eba93a641ccd54c.png

90e8c22a3a7daf9b1851352f36a54730.png

bd2a2879af66c55fe0813c3ff9a9f2d9.png

759f9937a5d54eb0d469c431b2dac865.png

线性布局的权重概念，指的是线性布局的下级视图各自拥有多大比例的宽高。

权重属性名叫layout_weight，但该属性不在LinearLayout节点设置，而在线性布局的直接下级视图设置，表示该下级视图占据的宽高比例。

(1)layout_width填0dp时，layout_weight表示水平方向的宽度比例。

(2)layout_height填0dp时，layout_weight表示垂直方向的高度比例。

d9b00319af8e19ad29821af5f013cf57.png

6c5a07fc5cf256deb6e9f6714a6f6dc3.png

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width="match_parent"
  3.     android:layout_height="match_parent"
  4.     android:orientation="vertical">
  6.     <LinearLayout
  7.         android:layout_width="match_parent"
  8.         android:layout_height="wrap_content"
  9.         android:background="#ff0000"
  10.         android:orientation="horizontal">
  12.         <TextView
  13.             android:layout_width="0dp"
  14.             android:layout_height="wrap_content"
  15.             android:layout_weight="1"
  16.             android:gravity="center"
  17.             android:text="横排第一个"
  18.             android:textSize="17sp"
  19.             android:textColor="#000000" />
  21.         <TextView
  22.             android:layout_width="0dp"
  23.             android:layout_height="wrap_content"
  24.             android:layout_weight="1"
  25.             android:gravity="center"
  26.             android:text="横排第二个"
  27.             android:textSize="17sp"
  28.             android:textColor="#000000" />
  29.     </LinearLayout>
  31.     <LinearLayout
  32.         android:layout_width="match_parent"
  33.         android:layout_height="100dp"
  34.         android:background="#00ffff"
  35.         android:orientation="vertical">
  37.         <TextView
  38.             android:layout_width="match_parent"
  39.             android:layout_height="0dp"
  40.             android:layout_weight="1"
  41.             android:gravity="center"
  42.             android:text="竖排第一个"
  43.             android:textSize="17sp"
  44.             android:textColor="#000000" />
  46.         <TextView
  47.             android:layout_width="match_parent"
  48.             android:layout_height="0dp"
  49.             android:layout_weight="1"
  50.             android:gravity="center"
  51.             android:text="竖排第二个"
  52.             android:textSize="17sp"
  53.             android:textColor="#000000" />
  54.     </LinearLayout>
  56. </LinearLayout>

32431215d76b60e95a35678af572cdad.png

ee2d01eb941f79f3f0b30a8456c92ec7.png

b974200f857f21501a85b2b8d2c18704.png

a9bf49c244cebea4c9b71559bf293465.png

=====================================================================================================

相对布局RelativeLayout

相对布局的下级视图位置由其他视图决定。用于确定下级视图位置的参照物分两种：

(1)与该视图自身平级的视图；

(2)该视图的上级视图(也就是它归属的RelativeLayout)

如果不设定下级视图的参照物，那么下级视图默认显示在RelativeLayout内部的左上角。

下面是相对位置的取值说明：

80425924a1a5694c442bd361db3d1eba.png

布局：

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width="match_parent"
  3.     android:layout_height="150dp" >
  5.     <TextView
  6.         android:id="@+id/tv_center"
  7.         android:layout_width="wrap_content"
  8.         android:layout_height="wrap_content"
  9.         android:layout_centerInParent="true"
  10.         android:background="#ffffff"
  11.         android:text="我在中间"
  12.         android:textSize="11sp"
  13.         android:textColor="#000000" />
  15.     <TextView
  16.         android:id="@+id/tv_center_horizontal"
  17.         android:layout_width="wrap_content"
  18.         android:layout_height="wrap_content"
  19.         android:layout_centerHorizontal="true"
  20.         android:background="#eeeeee"
  21.         android:text="我在水平中间"
  22.         android:textSize="11sp"
  23.         android:textColor="#000000" />
  25.     <TextView
  26.         android:id="@+id/tv_center_vertical"
  27.         android:layout_width="wrap_content"
  28.         android:layout_height="wrap_content"
  29.         android:layout_centerVertical="true"
  30.         android:background="#eeeeee"
  31.         android:text="我在垂直中间"
  32.         android:textSize="11sp"
  33.         android:textColor="#000000" />
  35.     <TextView
  36.         android:id="@+id/tv_parent_left"
  37.         android:layout_width="wrap_content"
  38.         android:layout_height="wrap_content"
  39.         android:layout_alignParentLeft="true"
  40.         android:background="#eeeeee"
  41.         android:text="我跟上级左边对齐"
  42.         android:textSize="11sp"
  43.         android:textColor="#000000" />
  45.     <TextView
  46.         android:id="@+id/tv_parent_right"
  47.         android:layout_width="wrap_content"
  48.         android:layout_height="wrap_content"
  49.         android:layout_alignParentRight="true"
  50.         android:background="#eeeeee"
  51.         android:text="我跟上级右边对齐"
  52.         android:textSize="11sp"
  53.         android:textColor="#000000" />
  55.     <TextView
  56.         android:id="@+id/tv_parent_top"
  57.         android:layout_width="wrap_content"
  58.         android:layout_height="wrap_content"
  59.         android:layout_alignParentTop="true"
  60.         android:background="#eeeeee"
  61.         android:text="我跟上级顶部对齐"
  62.         android:textSize="11sp"
  63.         android:textColor="#000000" />
  65.     <TextView
  66.         android:id="@+id/tv_parent_bottom"
  67.         android:layout_width="wrap_content"
  68.         android:layout_height="wrap_content"
  69.         android:layout_alignParentBottom="true"
  70.         android:background="#eeeeee"
  71.         android:text="我跟上级底部对齐"
  72.         android:textSize="11sp"
  73.         android:textColor="#000000" />
  75.     <TextView
  76.         android:id="@+id/tv_left_center"
  77.         android:layout_width="wrap_content"
  78.         android:layout_height="wrap_content"
  79.         android:layout_toLeftOf="@+id/tv_center"
  80.         android:layout_alignTop="@+id/tv_center"
  81.         android:background="#eeeeee"
  82.         android:text="我在中间左边"
  83.         android:textSize="11sp"
  84.         android:textColor="#000000" />
  86.     <TextView
  87.         android:id="@+id/tv_right_center"
  88.         android:layout_width="wrap_content"
  89.         android:layout_height="wrap_content"
  90.         android:layout_toRightOf="@+id/tv_center"
  91.         android:layout_alignBottom="@+id/tv_center"
  92.         android:background="#eeeeee"
  93.         android:text="我在中间右边"
  94.         android:textSize="11sp"
  95.         android:textColor="#000000" />
  97.     <TextView
  98.         android:id="@+id/tv_above_center"
  99.         android:layout_width="wrap_content"
  100.         android:layout_height="wrap_content"
  101.         android:layout_above="@+id/tv_center"
  102.         android:layout_alignLeft="@+id/tv_center"
  103.         android:background="#eeeeee"
  104.         android:text="我在中间上面"
  105.         android:textColor="#000000"
  106.         android:textSize="11sp" />
  108.     <TextView
  109.         android:id="@+id/tv_below_center"
  110.         android:layout_width="wrap_content"
  111.         android:layout_height="wrap_content"
  112.         android:layout_below="@+id/tv_center"
  113.         android:layout_alignRight="@+id/tv_center"
  114.         android:background="#eeeeee"
  115.         android:text="我在中间下面"
  116.         android:textSize="11sp"
  117.         android:textColor="#000000" />
  118. </RelativeLayout>

6cd76291d84da02ea8a2e718ccd9a743.png

=================================================================================================================

网格布局GridLayout

网格布局支持多行多列的表格排列。

网格布局默认从左往右、从上到下排列，它新增了两个属性：

(1) columnCount属性，它指定了网格的列数，即每行能放多少个视图；

(2) rowCount属性，它指定了网格的行数，即每列能放多少个视图；

布局：

  1. <!-- 根布局为两行两列的网格布局，其中列数由columnCount指定，行数由rowCount指定 -->
  2. <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:columnCount="2"
  6.     android:rowCount="2">
  8.     <TextView
  9.         android:layout_width="100dp"
  10.         android:layout_height="60dp"
  11.         android:gravity="center"
  12.         android:background="#ffcccc"
  13.         android:text="浅红色"
  14.         android:textColor="#000000"
  15.         android:textSize="17sp" />
  17.     <TextView
  18.         android:layout_width="100dp"
  19.         android:layout_height="60dp"
  20.         android:gravity="center"
  21.         android:background="#ffaa00"
  22.         android:text="橙色"
  23.         android:textColor="#000000"
  24.         android:textSize="17sp" />
  26.     <TextView
  27.         android:layout_width="205dp"
  28.         android:layout_height="60dp"
  29.         android:gravity="center"
  30.         android:background="#00ff00"
  31.         android:text="绿色"
  32.         android:textColor="#000000"
  33.         android:textSize="17sp" />
  35.     <TextView
  36.         android:layout_width="205dp"
  37.         android:layout_height="60dp"
  38.         android:gravity="center"
  39.         android:background="#660066"
  40.         android:text="深紫色"
  41.         android:textColor="#000000"
  42.         android:textSize="17sp" />
  44. </GridLayout>

e903f1eac0dc114a376313d319197be3.png

布局：

  1. <!-- 根布局为两行两列的网格布局，其中列数由columnCount指定，行数由rowCount指定 -->
  2. <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:columnCount="2"
  6.     android:rowCount="2">
  8.     <TextView
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="wrap_content"
  11.         android:gravity="center"
  12.         android:background="#ffcccc"
  13.         android:text="浅红色"
  14.         android:layout_margin="20dp"
  15.         android:textColor="#000000"
  16.         android:textSize="17sp" />
  18.     <TextView
  19.         android:layout_width="80dp"
  20.         android:layout_height="40dp"
  21.         android:gravity="center"
  22.         android:layout_gravity="center"
  23.         android:layout_margin="40dp"
  24.         android:background="#ffaa00"
  25.         android:text="橙色"
  26.         android:textColor="#000000"
  27.         android:textSize="17sp" />
  29.     <TextView
  30.         android:layout_width="205dp"
  31.         android:layout_height="60dp"
  32.         android:gravity="center"
  33.         android:background="#00ff00"
  34.         android:text="绿色"
  35.         android:textColor="#000000"
  36.         android:textSize="17sp" />
  38.     <TextView
  39.         android:layout_width="205dp"
  40.         android:layout_height="60dp"
  41.         android:gravity="center"
  42.         android:background="#660066"
  43.         android:text="深紫色"
  44.         android:textColor="#000000"
  45.         android:textSize="17sp" />
  47. </GridLayout>

2393b89f0203a275ead5586f8b4948bd.png

布局：

  1. <!-- 根布局为两行两列的网格布局，其中列数由columnCount指定，行数由rowCount指定 -->
  2. <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:columnCount="2"
  6.     android:rowCount="2">
  8.     <TextView
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="wrap_content"
  11.         android:gravity="center"
  12.         android:background="#ffcccc"
  13.         android:text="浅红色"
  14.         android:layout_margin="20dp"
  15.         android:textColor="#000000"
  16.         android:textSize="17sp" />
  18.     <TextView
  19.         android:layout_width="80dp"
  20.         android:layout_height="40dp"
  21.         android:gravity="center"
  22.         android:layout_gravity="center"
  23.         android:background="#ffaa00"
  24.         android:text="橙色"
  25.         android:textColor="#000000"
  26.         android:textSize="17sp" />
  28.     <TextView
  29.         android:layout_width="205dp"
  30.         android:layout_height="60dp"
  31.         android:gravity="center"
  32.         android:background="#00ff00"
  33.         android:text="绿色"
  34.         android:textColor="#000000"
  35.         android:textSize="17sp" />
  37.     <TextView
  38.         android:layout_width="205dp"
  39.         android:layout_height="60dp"
  40.         android:gravity="center"
  41.         android:background="#660066"
  42.         android:text="深紫色"
  43.         android:textColor="#000000"
  44.         android:textSize="17sp" />
  46. </GridLayout>

c14552df6e7610e5dc4bfdc970f2ada8.png

======================================================================================================

20a3d2732ab30c6973146135354504db.png

滚动视图有两种：

(1) ScrollView，它是垂直方向的滚动视图；垂直方向滚动时，layout_width属性值设置为match_parent，layout_height属性值设置为wrap_content。

(2) HorizontalScrollView，它是水平方向的滚动视图；水平方向滚动时，layout_width属性值设置为wrap_content，layout_height属性值设置为match_parent。

布局：

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width="match_parent"
  3.     android:layout_height="match_parent"
  4.     android:orientation="vertical">
  6.     <!-- HorizontalScrollView是水平方向的滚动视图，当前高度为200dp -->
  7.     <HorizontalScrollView
  8.         android:layout_width="wrap_content"
  9.         android:layout_height="200dp">
  11.         <!-- 水平方向的线性布局，两个子视图的颜色分别为青色和黄色 -->
  12.         <LinearLayout
  13.             android:layout_width="wrap_content"
  14.             android:layout_height="match_parent"
  15.             android:orientation="horizontal">
  17.             <View
  18.                 android:layout_width="300dp"
  19.                 android:layout_height="match_parent"
  20.                 android:background="#aaffff" />
  22.             <View
  23.                 android:layout_width="300dp"
  24.                 android:layout_height="match_parent"
  25.                 android:background="#ffff00" />
  26.         </LinearLayout>
  27.     </HorizontalScrollView>
  29.     <!-- ScrollView是垂直方向的滚动视图，当前高度为自适应 -->
  30.     <ScrollView
  31.         android:layout_width="match_parent"
  32.         android:layout_height="wrap_content">
  34.         <!-- 垂直方向的线性布局，两个子视图的颜色分别为绿色和橙色 -->
  35.         <LinearLayout
  36.             android:layout_width="match_parent"
  37.             android:layout_height="wrap_content"
  38.             android:orientation="vertical">
  40.             <View
  41.                 android:layout_width="match_parent"
  42.                 android:layout_height="400dp"
  43.                 android:background="#00ff00" />
  45.             <View
  46.                 android:layout_width="match_parent"
  47.                 android:layout_height="400dp"
  48.                 android:background="#ffffaa" />
  49.         </LinearLayout>
  50.     </ScrollView>
  51. </LinearLayout>

62e4caf9ca5505ce9b5e7cbb98b0dc9b.png

6db764b2d29d3797294b84881122d7e4.png

972b7a105cb29ccac26557a48a92480c.png

04b15b61614961be207ab88e87c2cb83.png

243ee342b055c6986b0708aa2bb9a976.png

发表评论

表情：
评论列表 （有 0 条评论，109人围观）

还没有评论，来说两句吧...

相关阅读