简单的Android(安卓)XML布局使用
16lz
2021-01-26
Android XML布局
前言
今天我们来简单介绍一下Android的XML布局以及三种常见的XML布局
目录
1.XML布局的优点
在XML文件中设计UI可以更好地将应用的外观与控制应用行为的代码隔离，每次修改或调整界面布局只需要修改XML文件的代码而不是修改源码和重新编译。
2.XML布局基础介绍
2.1 调用XML布局
在编译XML布局文件时，都需要通过main函数中的 onCreate 来调用，通常使用如下方式来进行调用。
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_linear_layout); }其中setContentView里的内容‘R’为就是系统给声明的静态变量，所有的子类都是通过‘R’来调用。而‘R’的路径则是 Android 工程路径下的 app -> src -> main -> res 下。
R.layout指res文件夹下一个名为layout的文件夹，而R.layout.activity_linear_layout之后的部分则是layout文件夹下自己定义的.xml文件。
2.2 XML布局的常见属性
| 属性 | 描述 |
|---|---|
| ID | 控件名字，是当前控件的唯一标识，常用字符串表示 |
| background | 调整当前界面背景 |
| gravity | 调整所有控件所在的整体位置 |
| layout_width | 当前界面整体宽度，常用wrap_content和match_parent |
| layout_height | 当前界面整体高度，常用wrap_content和match_parent |
| padding | 调整屏幕边距，可以整体调整或者单项调整 |
| text | 控件显示文本，可调用values文件夹中的strings.xml来显示文本内容 |
| textColor | 显示文本颜色，可调用values文件夹中的color.xml来定义 |
| textSize | 显示文本字体大小，单位常用dp和px |
| textStyle | 显示文本字体风格，可选的有斜体和粗体 |
3.常见的三种简单XML布局
3.1 LinearLayout
这一种使用单个水平行或垂直行来组织子项的布局，是风格最简单的布局。
"horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/textView" android:layout_alignParentLeft="false" android:layout_alignParentStart="true" android:weightSum="1" android:id="@+id/linearLayout" android:layout_alignParentTop="false" android:layout_alignWithParentIfMissing="false" android:layout_alignParentRight="false" android:layout_alignParentBottom="false" android:background="#000000"> "wrap_content" android:layout_height="match_parent" android:textAppearance="?android:attr/textAppearanceSmall" android:text="One,One" android:id="@+id/textView2" android:textSize="16dp" android:gravity="center_horizontal" android:layout_weight="0.19" android:textColor="#ffffff" /> "wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="One,Two" android:id="@+id/textView3" android:textSize="16dp" android:layout_weight="0.34" android:gravity="center_horizontal" android:textColor="#ffffff" /> "wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="One,Three" android:id="@+id/textView4" android:layout_weight="0.27" android:textSize="16dp" android:gravity="center_horizontal" android:textColor="#ffffff" /> "wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="One,Four" android:id="@+id/textView5" android:textSize="16dp" android:gravity="center_horizontal" android:textColor="#ffffff" /> "horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_below="@+id/linearLayout" android:weightSum="1" android:id="@+id/linearLayout2" android:background="#000000"> "wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="Two,One" android:id="@+id/textView6" android:textSize="16dp" android:layout_weight="0.13" android:gravity="center_horizontal" android:textColor="#ffffff" /> "wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="Two,Two" android:id="@+id/textView7" android:textSize="16dp" android:layout_weight="0.41" android:gravity="center_horizontal" android:textColor="#ffffff" /> "wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="Two,Three" android:id="@+id/textView8" android:textSize="16dp" android:layout_weight="0.25" android:gravity="center_horizontal" android:textColor="#ffffff" /> "wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="Two,Four" android:id="@+id/textView9" android:textSize="16dp" android:gravity="center_horizontal" android:textColor="#ffffff" /> "horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/linearLayout2" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:weightSum="1" android:id="@+id/linearLayout3" android:background="#000000"> "wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="Three,One" android:id="@+id/textView10" android:textSize="16dp" android:gravity="center_horizontal" android:textColor="#ffffff" /> "wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="Three,Two" android:id="@+id/textView11" android:textSize="16dp" android:layout_weight="0.38" android:gravity="center_horizontal" android:textColor="#ffffff" /> "wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="Three,Three" android:id="@+id/textView12" android:textSize="16dp" android:gravity="center_horizontal" android:layout_weight="0.26" android:textColor="#ffffff" /> "wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="Three,Four" android:id="@+id/textView13" android:textSize="16dp" android:gravity="center_horizontal" android:textColor="#ffffff" /> "horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/linearLayout3" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:weightSum="1" android:background="#000000"> "wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="Four,One" android:id="@+id/textView14" android:gravity="center_horizontal" android:textSize="16dp" android:layout_weight="0.14" android:textColor="#ffffff" /> "wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="Four,Two" android:id="@+id/textView15" android:gravity="center_horizontal" android:textSize="16dp" android:layout_weight="0.37" android:textColor="#ffffff" /> "wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="Four,Three" android:id="@+id/textView16" android:gravity="center_horizontal" android:textSize="16dp" android:layout_weight="0.20" android:textColor="#ffffff" /> "wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="Four,Four" android:id="@+id/textView17" android:gravity="center_horizontal" android:textSize="16dp" android:layout_weight="0.15" android:textColor="#ffffff" /> 代码结果截图
3.2 RelativeLayout
相对布局让您能够指定子对象彼此之间的相对位置（子对象 A 在子对象 B 左侧）或子对象与父对象的相对位置（与父对象顶部对齐），自由度是最大的一种布局。
<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:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.example.relativelayout.MainActivity" android:background="#090505"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Red" android:id="@+id/textView" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:padding="3dp" android:background="#ff0000" android:textSize="25dp" android:gravity="center_horizontal" android:layout_toLeftOf="@+id/textView4" android:layout_toStartOf="@+id/textView4" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Orange" android:id="@+id/textView2" android:padding="3dp" android:background="#ff7700" android:textSize="25dp" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:gravity="center_horizontal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Yellow" android:id="@+id/textView3" android:layout_alignParentTop="true" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" android:padding="3dp" android:background="#ffd500" android:textSize="25dp" android:gravity="center_horizontal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Green" android:id="@+id/textView4" android:layout_marginTop="50dp" android:padding="3dp" android:background="#1eff00" android:textSize="25dp" android:gravity="center_horizontal" android:layout_below="@+id/textView" android:layout_toLeftOf="@+id/textView2" android:layout_toStartOf="@+id/textView2" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Blue" android:id="@+id/textView5" android:layout_alignTop="@+id/textView4" android:layout_centerHorizontal="true" android:padding="3dp" android:background="#001eff" android:textSize="25dp" android:gravity="center_horizontal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Indigo" android:id="@+id/textView6" android:padding="3dp" android:background="#9000ff" android:textSize="25dp" android:gravity="center_horizontal" android:layout_alignTop="@+id/textView5" android:layout_toRightOf="@+id/textView2" android:layout_toEndOf="@+id/textView2" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Violet" android:id="@+id/textView7" android:layout_below="@+id/textView5" android:layout_marginTop="48dp" android:padding="3dp" android:background="#ff00b7" android:textSize="25dp" android:gravity="center_horizontal" android:layout_toLeftOf="@+id/textView3" android:layout_alignLeft="@+id/textView4" android:layout_alignStart="@+id/textView4" />RelativeLayout>代码结果截图
3.3 TableLayout
显示滚动的单列列表，在手机的设置里基本就是使用这种布局。
<TableLayout 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:stretchColumns="1" tools:context="com.example.tablelayout.MainActivity" android:background="#080404"> <TableRow android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:text="Open..." android:layout_column="1" android:padding="3dp" android:textSize="20dp" android:textColor="#fefefe" /> <TextView android:text="Ctrl-O" android:layout_column="2" android:padding="3dp" android:textSize="20dp" android:gravity="right" android:textColor="#ffffff" /> TableRow> <TableRow android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:text="Save..." android:layout_column="1" android:padding="3dp" android:textSize="20dp" android:textColor="#ffffff" /> <TextView android:text="Ctrl-S" android:layout_column="2" android:padding="3dp" android:textSize="20dp" android:gravity="right" android:textColor="#ffffff" /> TableRow> <TableRow android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:text="Save As..." android:layout_column="1" android:padding="3dp" android:textSize="20dp" android:textColor="#ffffff" /> <TextView android:text="Ctrl-Shift-S" android:padding="3dp" android:textSize="20dp" android:gravity="right" android:textColor="#ffffff" /> TableRow> <View android:layout_height="3dp" android:background="#ffffff" /> <TableRow android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:text="X" android:padding="3dp" android:textSize="20dp" android:textColor="#ffffff" /> <TextView android:text="Import..." android:layout_column="1" android:padding="3dp" android:textSize="20dp" android:textColor="#ffffff" /> TableRow> <TableRow android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:text="X" android:padding="3dp" android:textSize="20dp" android:textColor="#ffffff" /> <TextView android:text="Export" android:layout_column="1" android:padding="3dp" android:textSize="20dp" android:textColor="#ffffff" /> <TextView android:text="Ctrl-E" android:padding="3dp" android:textSize="20dp" android:gravity="right" android:textColor="#ffffff" /> TableRow> <View android:layout_height="3dp" android:background="#ffffff" /> <TableRow android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:text="Exit" android:layout_column="1" android:padding="3dp" android:textSize="20dp" android:textColor="#ffffff" /> TableRow>TableLayout>代码结果截图
4.总结
XML布局是一种非常简单实用的布局，在一些简单的应用开发中合理的使用XML布局可以更快的完成布局的实现。
作者：黄毅
原文链接：点击这里
更多相关文章
- Android的view重绘
- 38、Android编写应用-使用布局编辑器Layout Editor构建界面
- Android总结之链式调用(方法链)
- 【Android四大组件之Service】（二）Android中Service的使用详解和注
- 带你了解Android常见的内存缓存算法
- android实现3D效果翻页
- Android(安卓)ListView使用详解
- Android(安卓)APP存活检测方式
- Android(安卓)仿微信点赞和评论弹出框