前言:假设要开一家店,门店装修是非常重要的事情。有钱都请专门的建筑设计公司来设计装修,没钱的仅仅能自己瞎折腾。好不好看全凭自己的感觉。像Android开发。在移动端大家看到的界面视觉不咋滴,一般连打开的动力都没了。所以Android开发就有了专门的UI设计人员,既然有了UI设计图,那怎么布局就须要靠自己去选择了,五大布局中能够任意选,仅仅要能达到你的UI设计图的效果。

设计图给你了,你选哪位装修工给你装修,就看效率了;不用说。我们都选择效率高的来装修。

Android的五大布局:

1.线性布局(LinearLayout)

2.相对布局(RelativeLayout)

3.帧布局(FrameLayout)

4.表格布局(TableLayout)

5.绝对布局(AbsoluteLayout)

一、线性布局

首先直接看效果图:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWl2YW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

接着看界面布局文件里的代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#aa0000"
android:text="线性布局实战--垂直效果"
android:layout_gravity="center"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#00ff00"
android:text="线性布局实战--垂直效果"
android:gravity="center"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FFC0CB"
android:text="线性布局实战--垂直效果"
android:layout_gravity="center"
android:layout_weight="1"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#b0e0e6"
android:text="线性布局实战--垂直效果"
android:layout_gravity="center"
android:layout_weight="1"
/>
</LinearLayout> </LinearLayout>

感性分析理解下:

LinearLayout中的android:orientation是线性布局中非常重要的一个属性,通过设置两个属性值:vertical和horizontal,它能够让包括在LinearLayout中的子控件依照垂直或者水平方向来布局。

上面还实用到布局中经常使用的属性。我们也先感性的认识下:

android:layout_width -- 设置布局宽度

android:layout_height -- 设置布局高度(这两个属性。它的值能够设置有match_parent、wrap_content、fill_parent,分别代表匹配父控件高度或宽度。包裹内容的高度或宽度、充满父控件,效果图中能够看到对应效果)

android:layout_gravity -- 设置控件的位置,它的属性值有center/right/left等

android:gravity -- 设置控件中内容位置,它的属性值有center/right/left等

android:background
-- 设置背景色

android:layout_weight
-- 设置控件在LinearLayout中的所占的相对大小比例或者说权重值,这个要大家实践多个控件各种比例,才干更好理解

android:text
-- 设置控件的文本值

注:对于线性布局。当然还能够嵌套各种布局,上面就线性布局嵌套了线性布局。事实上各种布局能够互相嵌套,仅仅要没出错即可。实践出真理。

二、相对布局

效果图:

界面布局文件里的代码:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" > <TextView
android:id="@+id/first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#E9967A"
android:text="相对布局实战--控件居中" /> <TextView
android:id="@+id/second"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/first"
android:background="#FFC0CB"
android:gravity="center"
android:text="相对布局实战--内容居中" /> <RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/second" > <EditText
android:id="@+id/third"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:hint="相对布局嵌套实战" /> <Button
android:id="@+id/fouth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@id/third"
android:text="相对父控件右对齐" /> <Button
android:id="@+id/fifth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/third"
android:layout_toLeftOf="@id/fouth"
android:text="兄弟控件的左边" /> <RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/fifth" > <View
android:id="@+id/strut"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true" /> <Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignRight="@id/strut"
android:text="控件水平居中" /> <Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignLeft="@id/strut"
android:layout_alignParentRight="true"
android:text="控件水平居中" />
</RelativeLayout>
</RelativeLayout> </RelativeLayout>

感性分析理解下:

相对布局简单理解就是有个參照物让你參考,比方你相对于參照物1在左边,可是相对于參照物2却在右边。

所以你选择的參照物不同,取得的结果也就不一样。

相对布局中,有接触到新属性例如以下:

android:id -- 设置控件的id,这里设置的id,编译器会自己主动把它生成在前面介绍过的R.java中

android:layout_centerHorizontal -- 布局中控件水平居中。属性值true/false

android:layout_below -- 相对XX控件的下方。属性值需设置相对XX控件的id

android:layout_toLeftOf -- 设置XX控件的左边。属性值需设置对于XX控件的id

android:layout_alignParentRight -- 相对父控件的右边,属性值true/false

相对布局的控件属性还有非常多。可是基本上都是上面的。仅仅是相对位置不同,这个翻翻手冊就能够了解。还有从上面能够看出线性布局有时候能做的。相对布局也能做。

所以实践中,谁方便就用谁。没强求。

三.帧布局

效果图:

界面布局文件里的代码:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" > <TextView
android:layout_width="300dp"
android:layout_height="300dp"
android:background="#00BFFF"
android:gravity="right"
android:text="一层" /> <TextView
android:layout_width="260dp"
android:layout_height="260dp"
android:background="#FFC0CB"
android:gravity="right"
android:text="二层" /> <TextView
android:layout_width="220dp"
android:layout_height="220dp"
android:background="#F7EED6"
android:gravity="right"
android:text="三层" /> <Button
android:layout_width="100dp"
android:layout_height="100dp"
android:text="四层" /> </FrameLayout>

感性分析理解下:

帧布局能够简单理解成一个洋葱。一层层的堆叠,你拨开一层,就能够看见里面的一层。每一个控件在它里面都是相当于一层。

假设里面嵌套个线性布局,也相当于一层。不信大家能够实践。

帧布局非常重要的就是:它的位置都是从屏幕左上角(0。0)開始布局,然后覆盖的顺序是按你写的控件顺序,最先写的在最以下层。相当于洋葱的最里层。

四、表格布局

效果图:

界面布局文件里的代码:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:shrinkColumns="0"
android:stretchColumns="0,1,2" > <TableRow> <Button
android:layout_column="0"
android:text="第一行" /> <Button
android:layout_column="1"
android:text="第一行" />
</TableRow> <TableRow> <Button
android:layout_column="0"
android:text="第二行" /> <Button
android:layout_column="2"
android:text="第二行" />
</TableRow> <TableRow> <Button
android:layout_column="1"
android:text="第三行" />
</TableRow> <TableRow> <Button
android:layout_column="1"
android:layout_span="2"
android:text="第四行" />
</TableRow> </TableLayout>

感性分析理解下:

表格这个顾名思义,就非常easy理解。

不就是一张表格嘛。表格主要就是行和列,所以表格布局,懂得怎么设置行和列,基本搞定。

表格布局中。属性例如以下:

android:shrinkColumns -- 查shrink英文单词,是收缩的意思。所以它就是列里面内容非常多时。它就收缩,属性值设置指定列

android:stretchColumns -- 伸缩行,尽量占满界面,属性值设置指定列。比方1,2。3

android:layout_column -- 设置指定列,比方是0,还是1,还是2

android:layout_span -- 设置一个霸占总数的几列。你设置2,总数为3。就是当前列独享2列的宽度

TableRow -- 设置行

五、绝对布局

效果图:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWl2YW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

界面布局文件里的代码:

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" > <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="20dip"
android:layout_y="20dip"
android:text="帐号:" /> <EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="80dip"
android:layout_y="15dip"
android:width="210px" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="20dip"
android:layout_y="80dip"
android:text="密 码:" /> <EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="80dip"
android:layout_y="75dip"
android:password="true"
android:width="210px" /> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="130dip"
android:layout_y="135dip"
android:text="登 录" /> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="220dip"
android:layout_y="135dip"
android:text="重 置" /> </AbsoluteLayout>

感性分析理解下:

绝对布局能够这样简单理解,你拥有绝对的权利,你想在界面哪个位置放控件,就能够在哪个位置放控件。

绝对布局最重要的助手:

android:layout_x="xxdip"

android:layout_y="xxdip"

通过这两个助手。你就能够命令界面中的控件在哪个位置呆着,就在哪个位置呆着。



最终五大布局,弄完了。自己通过实践也进一步加深理解,总的说有收获!



【Android开发-5】界面装修,五大布局你选谁的更多相关文章

  1. Android开发之详解五大布局

    http://bbs.chinaunix.net/thread-3654213-1-1.html 为了适应各式各样的界面风格,Android系统提供了5种布局,这5种布局分别是: LinearLayo ...

  2. 图解android开发在界面上显示图片

    图解android开发在界面上显示图片<申明:转自百度> <原文章地址:http://jingyan.baidu.com/article/49711c6153a277fa441b7c ...

  3. Android开发:界面设计之六大layouts介绍

    1.帧布局 FrameLayout: FrameLayout是最简单的布局对象.在它里面的的所有显示对象都将固定在屏幕的左上角,不能指定位置,后一个会直接覆盖在前一个之上显示 因为上面的一段话这个是在 ...

  4. android开发------编写用户界面之相对布局

    今天要说的是RelativeLayout.RelativeLayout相对于LinearLayout的主要不同点在于它需要一个参照物. 我们先来看一下官方对这个布局的解释: RelativeLayou ...

  5. android开发------编写用户界面之线性布局(补充知识)

    在前面的文章中 http://www.cnblogs.com/ai-developers/p/android_linearlayout.html 我们看到了布局中有这样一个属性: layout_wei ...

  6. Android开发之玩转FlexboxLayout布局

    在这之前,我曾认真的研究过鸿洋大神的Android 自定义ViewGroup 实战篇 -> 实现FlowLayout,按照大神的思路写出了一个流式布局,所有的东西都是难者不会会者不难,当自己能自 ...

  7. Android开发——设置界面的创建

    前言: 最近忙着搞项目,难得有时间,便来整理搞项目中学习到的知识 使用之前,先介绍一下android这种的五种数据储存方式,分别为文件储存,SharePrefence,SQL,使用ContentPro ...

  8. android开发------编写用户界面之线性布局

    一个好的应用程序离不开人性化的用户界面.在学习其他东西之前.理应先学习编写程序的布局(外观) 今天,我们就来学习android的UI布局----LinearLayout. LinearLayout,即 ...

  9. android 开发 RecyclerView 横排列列表布局

    1.写一个一竖的自定义布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xml ...

随机推荐

  1. python第三方库安装和卸载

    库的安装与卸载 pip install requests pip uninstall requests 查看安装好的库 pip list   第三方库的各种安装方式如下: 一.包管理器 Python有 ...

  2. LeetCode OJ-- Generate Parentheses *

    https://oj.leetcode.com/problems/generate-parentheses/ 输入n产生n个( ,n个 )组成的所有合法的括号组合. 现在纸上画画,找到规律: 1.每一 ...

  3. 移动端web如何让页面强制横屏

    前段时间公司针对直播服务做了改版升级,APP客户端支持了横屏和竖屏推流/播放. 在这个背景下,虽然触屏未做改动,但本着敏而好学,不断探索的精神,针对如何让web页面强制横屏显示,做了一下试验研究. 首 ...

  4. PHP二维数组排序研究

    前几天在项目中碰到了一个问题,在做商城的时候,要对一个店铺里所有商品进行价格排序,而且每一种商品都拥有多个规格,要取到所有商品中所有规格的最低价和最高价,发现PHP有很友好的函数帮助我们进行筛选. 使 ...

  5. 慎用lodash的cloneDeep函数

    lodash的cloneDeep函数能够很方便的拷贝对象,但是一旦拷贝一些很复杂的对象就有可能报错.比如用cloneDeep克隆一个vue实例,就有可能包key.charAt is not a Fun ...

  6. 洛谷 P1478 陶陶摘苹果(升级版)【贪心/结构体排序/可用01背包待补】

    [链接]:https://www.luogu.org/problemnew/show/P1478 题目描述 又是一年秋季时,陶陶家的苹果树结了n个果子.陶陶又跑去摘苹果,这次她有一个a公分的椅子.当他 ...

  7. 【Spring源码解析】—— 简单工厂模式的BeanFactory的超简版实现

    一.什么是简单工厂模式 设计模式的核心是“分工”,通过分工将对象与职责划分的更细化,进而提升系统设计的可扩展性,使其更容易维护. 开闭原则:对扩展开放,对修改关闭:要增加一个新的处理逻辑,可以开一个新 ...

  8. cogs——1008. 贪婪大陆(清华巨佬代码)——树状数组

    1008. 贪婪大陆 ★★   输入文件:greedisland.in   输出文件:greedisland.out   简单对比时间限制:1 s   内存限制:128 MB 试题四:贪婪大陆  [题 ...

  9. Excel Sheet Column Title - LeetCode

    Given a positive integer, return its corresponding column title as appear in an Excel sheet. For exa ...

  10. Mysql的时间戳转date类型

    mysql 的 时间戳转date类型 select FROM_UNIXTIME(1491031706235/1000,'%Y-%m-%d') from dual;