Android开发第二次课 布局方式

简介: Android开发第二次课 布局方式

线性布局

线性布局:

  • 控件从左到右排列:水平方式
  • 控件从上到下排列:垂直方式
    标签:LinearLayout
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</LinearLayout>

xmlns:android:声明一个命名空间前缀,叫作android,http://schemas.android.com/apk/res/android,

是网址格式,才可以使用android前缀。

orientation="vertical" 是垂直排列

总体代码实现:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <!--    线性布局;Ctrl+Alt+L键:格式化代码;-->
    <!--
        1.行 用户名: 输入框
        2.行 密码:输入框
        3.登录 取消
    -->
    <!-- 1.第一行线性布局:水平方式
            match_parent 表示使空间填充布局单元内的尽可能多的空间,
            wrap_content:表示使视图扩展以现实全部内容;
            layout_width:布局宽;
            layout_height:height:布局高度;
            txt:文本内容
            textSize:文本大小
            layout_weight:字体粗细
            paddingLeft:左填充
            paddingTop:上填充;
       -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:paddingLeft="15dp"
            android:paddingTop="15dp"
            android:text="用户"
            android:textSize="20dp" />
        <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="3" />
    </LinearLayout>
    <!--    第二行,线性布局,水平方式-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:paddingLeft="10dp"
            android:paddingTop="10dp"
            android:text="密码"
            android:textSize="20dp" />
        <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="3" />
    </LinearLayout>
    <!--    第三行,线性布局,水平方式-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="登录"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="取消"/>
    </LinearLayout>
</LinearLayout>

除了LinearLayout线性布局之外,里面,讲了三个控件;

1.TextView:显示文本提示信息;

2.EditText:输入框;

3.Button:按钮

2.表格布局

office:excel工具。

表格布局是按照行和列来组织子视图的布局,包含一系列的TableRow对象,用于定义行。

TableLayout–>TableRow

可以包含0个以上的单元格,每个单元格可以设置一个View视图。

stretchColumns="*":从0开始的索引项,可以拉伸,*号大题拉伸的所有列。
shrinkColumns="*":收缩从0开始的索引项。

下面是9个图标下载热门的案例

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:shrinkColumns="*"
    android:stretchColumns="*">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="热门下载"
        android:textColor="@color/aqua"
        android:textSize="20dp" />
    <!--    表格里面包含:TableRow-->
    <TableRow android:layout_weight="1">
        <!--        放置图片,ImageView;src:表示图标路径;scaleType:自动适应大小-->
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@mipmap/iod"
            android:scaleType="fitXY"/>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@mipmap/afari"
            android:scaleType="fitXY"/>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@mipmap/iod"
            android:scaleType="fitXY"/>
    </TableRow>
    <TableRow android:layout_weight="1">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@mipmap/iiontacts"
            android:scaleType="fitXY"/>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@mipmap/phone"
            android:scaleType="fitXY"/>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@mipmap/twitter"
            android:scaleType="fitXY"/>
    </TableRow>
    <TableRow android:layout_weight="1">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@mipmap/stocks"
            android:scaleType="fitXY"/>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@mipmap/hjamera"
            android:scaleType="fitXY"/>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@mipmap/wwwwww"
            android:scaleType="fitXY"/>
    </TableRow>
</TableLayout>

颜色

<color name="colorPrimary">#3F51B5</color><!--首要颜色-->
   <color name="colorPrimaryDark">#303F9F</color><!--首要颜色暗色-->
   <color name="colorAccent">#FF4081</color><!--色彩强调-->
   <color name="black">#000000</color><!--黑色 -->
   <color name="white">#FFFFFF</color><!--白色-->
   <color name="snow">#fffafa</color><!--雪白色 -->
   <color name="floralwhite">#fffaf0</color><!--花白色 -->
   <color name="blanchedalmond">#ffebcd</color><!--杏白色 -->
   <color name="ghostwhite">#f8f8ff</color><!--幽灵白 -->
   <color name="whitesmoke">#f5f5f5</color><!--烟白色 -->
   <color name="antiquewhite">#faebd7</color><!--古董白 -->
   <color name="navajowhite">#ffdead</color><!--纳瓦白 -->
   <color name="grey">#808080</color><!--灰色 -->
   <color name="gainsboro">#dcdcdc</color><!--淡灰色 -->
   <color name="lightgrey">#d3d3d3</color><!--亮灰色 -->
   <color name="darkgrey">#a9a9a9</color><!--暗灰色 -->
   <color name="dimgrey">#696969</color><!--暗灰色 -->
   <color name="slategrey">#708090</color><!--灰石色 -->
   <color name="lightslategrey">#778899</color><!--亮蓝灰 -->
   <color name="darkslategrey">#2f4f4f</color><!--暗瓦灰色 -->
   <color name="silver">#c0c0c0</color><!--银色 -->
   <color name="red">#ff0000</color><!--红色 -->
   <color name="darkred">#8b0000</color><!--暗红色 -->
   <color name="crimson">#dc143c</color><!--暗深红色 -->
   <color name="darkmagenta">#8b008b</color><!--暗洋红 -->
   <color name="fuchsia">#ff00ff</color><!--紫红色 -->
   <color name="tomato">#ff6347</color><!--西红柿色 -->
   <color name="lightcoral">#f08080</color><!--亮珊瑚色 -->
   <color name="darksalmon">#e9967a</color><!--暗肉色 -->
   <color name="peachpuff">#ffdab9</color><!--桃色 -->
   <color name="plum">#dda0dd</color><!--洋李色 -->
   <color name="pink">#ffc0cb</color><!--粉红色 -->
   <color name="lightpink">#ffb6c1</color><!--亮粉红色 -->
   <color name="deeppink">#ff1493</color><!--深粉红色 -->
   <color name="hotpink">#ff69b4</color><!--热粉红色 -->
   <color name="lavenderblush">#fff0f5</color><!--淡紫红 -->
   <color name="indianred">#cd5c5c</color><!--印第安红 -->
   <color name="rosybrown">#bc8f8f</color><!--褐玫瑰红 -->
   <color name="firebrick">#b22222</color><!--红砖色 -->
   <color name="maroon">#800000</color><!--粟色 -->
   <color name="honeydew">#f0fff0</color><!--蜜色 -->
   <color name="orangered">#ff4500</color><!--红橙色 -->
   <color name="orange">#ffa500</color><!--橙色 -->
   <color name="limegreen">#32cd32</color><!--橙绿色 -->
   <color name="lime">#00ff00</color><!--酸橙色 -->
   <color name="yellow">#ffff00</color><!--黄色 -->
   <color name="wheat">#f5deb3</color><!--浅黄色 -->
   <color name="khaki">#f0e68c</color><!--黄褐色 -->
   <color name="burlywood">#deb887</color><!--实木色 -->
   <color name="bisque">#ffe4c4</color><!--桔黄色 -->
   <color name="lightyellow">#ffffe0</color><!--亮黄色 -->
   <color name="darkgoldenrod">#b8860b</color><!--暗金黄色 -->
   <color name="darkorange">#ff8c00</color><!--暗桔黄色 -->
   <color name="lightgoldenrodyellow">#fafad2</color><!--亮金黄色 -->
   <color name="lemonchiffon">#fffacd</color><!--柠檬绸色 -->
   <color name="cornsilk">#fff8dc</color><!--米绸色 -->
   <color name="seaShell">#fff5ee</color><!--海贝色 -->
   <color name="papayawhip">#ffefd5</color><!--番木色 -->
   <color name="mistyrose">#ffe4e1</color><!--浅玫瑰色 -->
   <color name="moccasin">#ffe4b5</color><!--鹿皮色 -->
   <color name="ivory">#fffff0</color><!--象牙色 -->
   <color name="gold">#ffd700</color><!--金色 -->
   <color name="goldenrod">#daa520</color><!--金麒麟色 -->
   <color name="lightsalmon">#ffa07a</color><!--亮肉色 -->
   <color name="coral">#ff7f50</color><!--珊瑚色 -->
   <color name="mintcream">#f5fffa</color><!--薄荷色 -->
   <color name="beige">#f5f5dc</color><!--米色 -->
   <color name="sandybrown">#f4a460</color><!--沙褐色 -->
   <color name="oldlace">#fdf5e6</color><!--老花色 -->
   <color name="linen">#faf0e6</color><!--亚麻色 -->
   <color name="salmon">#fa8072</color><!--鲜肉色 -->
   <color name="thistle">#d8bfd8</color><!--蓟色 -->
   <color name="tan">#d2b48c</color><!--茶色 -->
   <color name="chocolate">#d2691e</color><!--巧可力色 -->
   <color name="peru">#cd853f</color><!--秘鲁色 -->
   <color name="darkkhaki">#bdb76b</color><!--暗黄褐色 -->
   <color name="palegoldenrod">#eee8aa</color><!--苍麒麟色 -->
   <color name="brown">#a52a2a</color><!--褐色 -->
   <color name="saddlebrown">#8b4513</color><!--重褐色 -->
   <color name="sienna">#a0522d</color><!--赭色 -->
   <color name="olive">#808000</color><!--橄榄色 -->
   <color name="chartreuse">#7fff00</color><!--黄绿色 -->
   <color name="greenyellow">#adff2f</color><!--黄绿色 -->
   <color name="green">#008000</color><!--绿色 -->
   <color name="darkgreen">#006400</color><!--暗绿色 -->
   <color name="darkolivegreen">#556b2f</color><!--暗橄榄绿 -->
   <color name="olivedrab">#6b8e23</color><!--深绿褐色 -->
   <color name="lawngreen">#7cfc00</color><!--草绿色 -->
   <color name="forestgreen">#228b22</color><!--森林绿 -->
   <color name="aquamarine">#7fffd4</color><!--碧绿色 -->
   <color name="paleturquoise">#afeeee</color><!--苍宝石绿 -->
   <color name="palegreen">#98fb98</color><!--苍绿色 -->
   <color name="mediumturquoise">#48d1cc</color><!--中绿宝石 -->
   <color name="mediumaquamarine">#66cdaa</color><!--中绿色 -->
   <color name="aqua">#00ffff</color><!--浅绿色 -->
   <color name="springgreen">#00ff7f</color><!--春绿色 -->
   <color name="mediumspringgreen">#00fa9a</color><!--中春绿色 -->
   <color name="darkturquoise">#00ced1</color><!--暗宝石绿 -->
   <color name="seagreen">#2e8b57</color><!--海绿色 -->
   <color name="lightgreen">#90ee90</color><!--亮绿色 -->
   <color name="darkseagreen">#8fbc8f</color><!--暗海兰色 -->
   <color name="turquoise">#40e0d0</color><!--青绿色 -->
   <color name="cyan">#00ffff</color><!--青色 -->
   <color name="darkcyan">#008b8b</color><!--暗青色 -->
   <color name="lightcyan">#e0ffff</color><!--亮青色 -->
   <color name="teal">#008080</color><!--水鸭色 -->
   <color name="indigo">#4b0082</color><!--靛青色 -->
   <color name="blue">#0000ff</color><!--蓝色 -->
   <color name="darkblue">#00008b</color><!--暗蓝色 -->
   <color name="mediumblue">#0000cd</color><!--中兰色 -->
   <color name="midnightblue">#191970</color><!--中灰兰色 -->
   <color name="navy">#000080</color><!--海军色 -->
   <color name="royalblue">#4169e1</color><!--皇家蓝 -->
   <color name="azure">#f0ffff</color><!--天蓝色 -->
   <color name="skyblue">#87ceeb</color><!--天蓝色 -->
   <color name="deepskyblue">#00bfff</color><!--深天蓝色 -->
   <color name="lightskyblue">#87cefa</color><!--亮天蓝色 -->
   <color name="lightseagreen">#20b2aa</color><!--亮海蓝色 -->
   <color name="lightblue">#add8e6</color><!--亮蓝色 -->
   <color name="powderblue">#b0e0e6</color><!--粉蓝色 -->
   <color name="aliceblue">#f0f8ff</color><!--艾利斯兰 -->
   <color name="mediumslateblue">#7b68ee</color><!--中暗蓝色 -->
   <color name="slateblue">#6a5acd</color><!--石蓝色 -->
   <color name="darkslateblue">#483d8b</color><!--暗灰蓝色 -->
   <color name="mediumseagreen">#3cb371</color><!--中海蓝 -->
   <color name="steelblue">#4682b4</color><!--钢兰色 -->
   <color name="lightsteelblue">#b0c4de</color><!--亮钢兰色 -->
   <color name="cornflowerblue">#6495ed</color><!--菊兰色 -->
   <color name="dodgerblue">#1e90ff</color><!--闪兰色 -->
   <color name="cadetblue">#5f9ea0</color><!--军兰色 -->
   <color name="blueviolet">#8a2be2</color><!--紫罗兰蓝色 -->
   <color name="purple">#800080</color><!--紫色 -->
   <color name="lavender">#e6e6fa</color><!--淡紫色 -->
   <color name="orchid">#da70d6</color><!--淡紫色 -->
   <color name="mediumpurple">#9370db</color><!--中紫色 -->
   <color name="darkorchid">#9932cc</color><!--暗紫色 -->
   <color name="violet">#ee82ee</color><!--紫罗兰色 -->
   <color name="mediumvioletred">#c71585</color><!--中紫罗兰色 -->
   <color name="palevioletred">#db7093</color><!--苍紫罗兰色 -->
   <color name="darkviolet">#9400d3</color><!--暗紫罗兰色 -->
   <color name="mediumorchid">#ba55d3</color><!--中粉紫色 -->

3.相对布局

控件的位置是相对于其他控件或者父容器而言。在进行设计的时候,需要按照控件之间的依赖关系进行排列。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--    增加几个按钮;
        layout_centerInParent:如果为true,则表示该空间位于父控件的中央位置;
        layout_centerHorizontal:如果为true,则表示该空间位于负控件的居中位置;
        layout_centerVertical:如果为true,则表示该控件置于父空间的垂直居中位置;
        layout_above:将该控件位于给定控件的上方。
        layout_below:将该控件位于给定控件的下方。
        layout_toLeftOf:将该控件的右边缘与给定Id的控件左边缘对齐;
        layout_toRightOf:将该控件的左边缘与给定Id的控件右边缘对齐;
        -->
        <Button
            android:id="@+id/bt_center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="中间" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/bt_up"
            android:layout_above="@id/bt_center"
            android:layout_centerHorizontal="true"
            android:text="向上"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/bt_down"
            android:layout_below="@id/bt_center"
            android:layout_centerHorizontal="true"
            android:text="向下"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/bt_left"
            android:layout_toLeftOf="@id/bt_center"
            android:layout_centerVertical="true"
            android:text="居左"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/bt_Right"
            android:layout_toRightOf="@id/bt_center"
            android:layout_centerVertical="true"
            android:text="居右"/>
    </RelativeLayout>

4.帧布局

帧布局是布局中最简单的一个布局,整个界面被当做一块空白备用区域,所有的子元素都不能指定位置进行放置,全部放置于这块儿区域的左上角,并且后面的子元素直接覆盖前面的子元素,将前面的子子元素部分或者全部覆盖。

整个屏幕作为了一块区域,在这块区域添加多个子控件。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--    帧布局
        layout_gravity:center;居中
        -->
        <TextView
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:background="@color/purple"
            android:layout_gravity="center"/>
        <TextView
            android:layout_width="250dp"
            android:layout_height="250dp"
            android:background="@color/brown"
            android:layout_gravity="center"/>
        <TextView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@color/blue"
            android:layout_gravity="center"/>
        <TextView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:background="@color/gold"
            android:layout_gravity="center"/>
    </FrameLayout>

5.绝对布局

绝对布局是所有控件的排列由开发人员通过控件的坐标来指定,容器不再负责管理子控件的位置。

AbsoluteLayout:子控件的位置和布局都需要通过坐标来指定,所以,在设计布局时候,需要开发人员提供子元素精确的横坐标和纵坐标。

绝对布局由坐标控制,缺乏灵活性,维护起来不容易。

layout_x: x坐标;

layout_y:y坐标;

手机上的坐标原点同pc端一样,都是在屏幕的左上角。

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <!--绝对布局-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="我是绝对布局"/>
        <Button
            android:layout_width="200px"
            android:layout_height="wrap_content"
            android:layout_x="300px"
            android:layout_y="300px"
            android:text="开始游戏"/>
    </AbsoluteLayout>


目录
相关文章
|
5天前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上,安卓和iOS两大阵营各据一方。随着技术的演进,跨平台开发框架成为开发者的新宠,旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战,并分享实用的开发技巧,帮助开发者在安卓和iOS的世界中游刃有余。
|
11天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
1月前
|
ARouter Android开发
Android不同module布局文件重名被覆盖
Android不同module布局文件重名被覆盖
|
12天前
|
Android开发 Swift iOS开发
探索安卓与iOS开发的差异和挑战
【10月更文挑战第37天】在移动应用开发的广阔舞台上,安卓和iOS这两大操作系统扮演着主角。它们各自拥有独特的特性、优势以及面临的开发挑战。本文将深入探讨这两个平台在开发过程中的主要差异,从编程语言到用户界面设计,再到市场分布的不同影响,旨在为开发者提供一个全面的视角,帮助他们更好地理解并应对在不同平台上进行应用开发时可能遇到的难题和机遇。
|
14天前
|
XML 存储 Java
探索安卓开发之旅:从新手到专家
【10月更文挑战第35天】在数字化时代,安卓应用的开发成为了一个热门话题。本文旨在通过浅显易懂的语言,带领初学者了解安卓开发的基础知识,同时为有一定经验的开发者提供进阶技巧。我们将一起探讨如何从零开始构建第一个安卓应用,并逐步深入到性能优化和高级功能的实现。无论你是编程新手还是希望提升技能的开发者,这篇文章都将为你提供有价值的指导和灵感。
|
12天前
|
存储 API 开发工具
探索安卓开发:从基础到进阶
【10月更文挑战第37天】在这篇文章中,我们将一起探索安卓开发的奥秘。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的信息和建议。我们将从安卓开发的基础开始,逐步深入到更复杂的主题,如自定义组件、性能优化等。最后,我们将通过一个代码示例来展示如何实现一个简单的安卓应用。让我们一起开始吧!
|
13天前
|
存储 XML JSON
探索安卓开发:从新手到专家的旅程
【10月更文挑战第36天】在这篇文章中,我们将一起踏上一段激动人心的旅程,从零基础开始,逐步深入安卓开发的奥秘。无论你是编程新手,还是希望扩展技能的老手,这里都有适合你的知识宝藏等待发掘。通过实际的代码示例和深入浅出的解释,我们将解锁安卓开发的关键技能,让你能够构建自己的应用程序,甚至贡献于开源社区。准备好了吗?让我们开始吧!
24 2
|
14天前
|
Android开发
布谷语音软件开发:android端语音软件搭建开发教程
语音软件搭建android端语音软件开发教程!
|
22天前
|
编解码 Java Android开发
通义灵码:在安卓开发中提升工作效率的真实应用案例
本文介绍了通义灵码在安卓开发中的应用。作为一名97年的聋人开发者,我在2024年Google Gemma竞赛中获得了冠军,拿下了很多项目竞赛奖励,通义灵码成为我的得力助手。文章详细展示了如何安装通义灵码插件,并通过多个实例说明其在适配国际语言、多种分辨率、业务逻辑开发和编程语言转换等方面的应用,显著提高了开发效率和准确性。
|
21天前
|
Android开发 开发者 UED
安卓开发中自定义View的实现与性能优化
【10月更文挑战第28天】在安卓开发领域,自定义View是提升应用界面独特性和用户体验的重要手段。本文将深入探讨如何高效地创建和管理自定义View,以及如何通过代码和性能调优来确保流畅的交互体验。我们将一起学习自定义View的生命周期、绘图基础和事件处理,进而探索内存和布局优化技巧,最终实现既美观又高效的安卓界面。
30 5