布局,这个在服务端变成是没有的,也是服务端的人学习client的一道坎吧。

曾经用cocos2d-x写小游戏的时候就是这个非常难懂,或者能用,可是理解不多的话,非常难写出好的布局,难以适合商业化的应用。

游戏的布局有点像用photoshop画画的感觉。现有一个场景的概念,就像一个画布,然后上面分一层一层。能够单独某一层进行操作。显示的时候,能够觉得画面是从下往上一层一层堆上去。层里面有非常多精灵,精灵就是我们看到的那些会动的人物,建筑,怪什么的。这大概是cocos2d的设计思想吧。

我一直认为,学编程,一定要想理解人家的设计思想,理解了,跟着思想走。一路顺畅。

不能理解。就是一个大迷宫,这里一扇门,那边一扇门,好像哪里都能去。都能通向成功,可是有些路径看似能实现,实际上事半功倍。相同,我们做功能,做应用,也是一样,先想好思路,然后才干动手去做。也许这就是大学的时候学的概要设计吧,一直这么做,可能当年学的理论还是有点用的。

临时先这么想。先在去看看别人的博客吧。最后,可能在后面几个文章里面。再回过头来总结对比一下。

布局是什么?

布局是Android程序中基础的容器,能够把各种控件放进去,自己主动按特定的方式拍板。

布局方式有哪些?

LinearLayout, RleativeLayout, TableLayout, FrameLayout 等,可以通过XML方式类声明。或者编码的方式。通过XML声明的方式可以更好地让代码和视图分离,改动后不须要编译,更easy支持不同屏幕大小。

讲到这里,大家应该明确,布局单独存在的时候是看不到的,须要通过其它组件来表现。既然是入门,一上来就跟我说这些抽象的东西,是在难以费解。

RleativeLayout:

先来几个能看到的,我想想。button、文字、输入框。应该是比較简单,能看得到的。我们先来看看能看见的东西吧。

先看看布局文件,文件放在哪里了?来看看project结构说明

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

布局文件在res/layout/文件夹以下,activity_hello_world.xml.这里顺便说明一下。文件名称必须用小写。不同单词用‘_’分开。

打开文件,点击图中的Graphical Layout能够看到一个可视化的布局界面,能够选择不同组件,然后拖拽摆放。

我们能够看到已经有一个字符串在上面了“Hello world!”。

如今加多一些文字,button,输入框看看吧。

这样应该能显示出布局的作用。

拖拽的时候,会出现各种对齐其它组件的提示。我随便摆。然后就非常乱了。

随便拉了一些button和文字。拉过去就会显示出来,本来想拉个输入框的。可是好像报错。可能有些操作不正确。只是今天的主题的布局,所以先不研究文本、button这些控件的细节。执行程序后界面跟上图一样,就不上图了。

上图的文本。button乱糟糟的,是我任意拉的,好像放在哪里就哪里了。

我们先看看布局文件的xml代码怎样。为什么会是这种。

<!--相对布局方式,能够指定子元素相对于父元素或者其它子元素的位置。

这个是比較经常使用的布局之中的一个。

xmlns:android xml的命名空间。通过这里告诉Eclipse相关的属性
android:layout_width 当前这个布局的宽度,android:layout_height 当前这个布局的高度,都是match_parent。即是填充父元素。这个布局已经是最外层了。所以填充了整个手机屏幕。
tools:context 关联指定的activity,普通情况下一个布局文件能够在多个地方被用到。这么写是声明特定的上下文。假设指定了主题还能够进行渲染。
-->
<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"
tools:context="${relativePackage}.${activityClass}" >
<!-- 文本, "wrap_content"自适应大小,强制显示文本的所有内容。这里宽高都是了。
android:text文本内容,这里填了@string,指示内容在res/values/strings.xml内,名称为hello_wrold的属性。 android:id定义这个TestView的id。 会在R.java内生成相应的id。写java代码的时候,能够通过R.id.textView2来获取这个文本
-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" android:id="@+id/textView2"/>
<!-- 这是手动拉进来的TextView,跟上面的差点儿相同。还多了一些属性。 layout_alignParentLeft相对于父控件是否左对齐。
layout_below设置了为某个控件的以下。这里填了在textView2以下。
android:text这里直接填了文本的内容,能够通过id,配在strings.xml中-->
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/textView2"
android:text="TextView" /> <Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/textView1"
android:layout_marginTop="16dp"
android:text="Button" /> <Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/button1"
android:layout_marginLeft="27dp"
android:layout_toRightOf="@+id/button1"
android:text="Button" /> <Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/button2"
android:layout_alignBottom="@+id/button2"
android:layout_toRightOf="@+id/button2"
android:text="Button" /> <TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@+id/button2"
android:layout_below="@+id/button1"
android:layout_marginRight="32dp"
android:layout_marginTop="23dp"
android:text="Medium Text"
android:textAppearance="? android:attr/textAppearanceMedium" /> <TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/button3"
android:layout_below="@+id/textView3"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" /> </RelativeLayout>

通过这个xml文件,我们能够看到layout组件跟TextView、Button,有非常多相似的地方。

他们有非常多共同的属性。这些属性是有默认值的,非常多是能够不配置的。并且非常多,建议用到了再去百度。

总结一下,如今接触到的属性主要有显示的文字内容,摆放位置。以及id。

如今有了初步的印象,能够看看其它的布局了方式了(差点忘了今天是说布局的。呃。。。

LinearLayout:

直接把RleativeLayout改了。layout_alignParentLeft这些明显是相对位置的属性,所有提警告说不合法了。把那些明显是相对布局的东西删除掉后。

<LinearLayout 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:orientation="vertical">
<!--android:orientation为方向属性。vertical为垂直排列。所以layout组件会把全部的子元素,都竖直排列出来。 -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" android:id="@+id/textView2"/> <TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text1" /> <Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text2" /> <Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text3" /> <Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text4" /> <TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text5" /> <TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text6" /> </LinearLayout>

能够看到,非常整齐了,竖着拍成一排了。

TableLayout:

感觉上这个布局就跟HTML的table一样,把全部的组件弄成一个一个的表格。

它的元素分成一行一行的,TableRow。再以下才是详细的一个个元素。子元素的宽度是不可控的,高度能够依据自身变化。

<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="wrap_content"
android:orientation="vertical"> <!--用TableRow来分成一行一行的。-->
<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" > <Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1" /> <Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2" /> <Button
android:id="@+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button3" /> </TableRow> <TableRow
android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" > <TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" /> <TextView
android:id="@+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" /> <TextView
android:id="@+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" /> </TableRow> <TableRow
android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" > <TextView
android:id="@+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" /> <TextView
android:id="@+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" /> <Button
android:id="@+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" /> </TableRow> <TableRow
android:id="@+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow> </TableLayout>

FrameLayout:

所有的子元素将会固定在屏幕的左上角;不能为FrameLayout中的一个子元素指定一个位置。但能够通过子控件自身控制其位置。

后一个子元素将会直接在前一个子元素之上进行覆盖填充。把它们部份或所有挡住(除非后一个子元素是透明的)。

此布局通经常使用于游戏或者处理一些画廊程序。

从下图能够看出。三个button都被叠加在一起了。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"> <Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1" /> <Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2" /> <Button
android:id="@+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button3" /> </FrameLayout>

布局临时就讲到这里,由于是入门。准确来说是让我自己入门。不是必需深究,最重要是了解layout是什么,有个大致了解,会用,这才是学习的第一步。建议大家把代码拷贝到自己的Eclipse上面看看。可以理解更深入。

Android新手入门2016(7)--布局的更多相关文章

  1. Android新手入门2016(14)--FragmentTabHost实现选项卡和菜单

    本文来自肥宝传说之路,引用必须注明出处! 这章憋了好久.本来想写选项卡的,学到TabHost,TabWidget的,把代码拿过来准备研究的时候,发现竟然在4.0.3版本号被废弃了. 百度一下,发如今后 ...

  2. Android新手入门2016(10)--GridView

    本文来自肥宝传说之路.引用必须注明出处! GridView跟ListView一样是多控件布局.实现九宫图是最方便的. 还是先看看图,没图说个鸡鸡是不是 如上图.是一种应用方式.在每一个格子里面.放入应 ...

  3. Android新手入门2016(8)--ListView之ArrayAdapter

    本文来自肥宝传说之路,引用必须注明出处! ListView是Android中经常使用的控件. 什么是列表视图,让我们先看看图: watermark/2/text/aHR0cDovL2Jsb2cuY3N ...

  4. Android新手入门

    本博客出自公众号安卓应用频道:http://mp.weixin.qq.com/s?__biz=MzA3MDMyMjkzNg==&mid=2652261947&idx=1&sn= ...

  5. Android从入门到进阶——布局

    一.组件 1.UI组件 (Android.view.View的子类或者间接子类) 2.容器组件(Android.view.ViewGroup子类或者间接子类) 二.UI组件:TextView,Spin ...

  6. eclipse再见,android studio 新手入门教程(一)基本设置

    写在前面: 作为一个刚半只脚踏入android开发的新手,在使用eclipse开发了两个自我感觉不甚成熟的商城类app之后,遇到了一些问题,总结为如下: 代码复用性.findviewById,oncl ...

  7. Android实现入门界面布局

    Android实现入门界面布局 开发工具:Andorid Studio 1.3 运行环境:Android 4.4 KitKat 代码实现 首先是常量的定义,安卓中固定字符串应该定义在常量中. stri ...

  8. 《IM开发新手入门一篇就够:从零开发移动端IM》

        登录 立即注册 TCP/IP详解 资讯 动态 社区 技术精选 首页   即时通讯网›专项技术区›IM开发新手入门一篇就够:从零开发移动端IM   帖子 打赏 分享 发表评论162     想开 ...

  9. [译]:Xamarin.Android开发入门——Hello,Android Multiscreen深入理解

    原文链接:Hello, Android Multiscreen_DeepDive. 译文链接:Xamarin.Android开发入门--Hello,Android Multiscreen深入理解. 本 ...

随机推荐

  1. docker apache安装

    文章来源: 1.添加镜像 # docker pull httpd2. 2.创建httpd文件 # mkdir /data/httpd2. 3.启动apache # docker run -it -p ...

  2. [Redis]ResponseError: Client sent AUTH, but no password is set

    由于在代码中给redis添加了密码,如下 redis_store = redis.Redis(host='localhost', port=6379, db=4, password='root') 然 ...

  3. Wp检查手机网络状态

    /// <summary> /// 检查网络状态 /// </summary> private void CheckNetworkState() { if (DeviceNet ...

  4. RN import ** from ** 用法

    1.import React, { Component } from 'react': 导入‘react’文件里export的一个默认的组件,将其命名为React以及Component这个非默认组件 ...

  5. C. RMQ with Shifts

    C. RMQ with Shifts Time Limit: 1000ms Case Time Limit: 1000ms Memory Limit: 131072KB   64-bit intege ...

  6. Neural Networks and Deep Learning

    Neural Networks and Deep Learning This is the first course of the deep learning specialization at Co ...

  7. 九度oj 题目1153:括号匹配问题

    题目描述: 在某个字符串(长度不超过100)中有左括号.右括号和大小写字母:规定(与常见的算数式子一样)任何一个左括号都从内到外与在它右边且距离最近的右括号匹配.写一个程序,找到无法匹配的左括号和右括 ...

  8. 九度oj 题目1025:最大报销额

    题目描述:     现有一笔经费可以报销一定额度的发票.允许报销的发票类型包括买图书(A类).文具(B类).差旅(C类),要求每张发票的总额不得超过1000元,每张发票上,单项物品的价值不得超过600 ...

  9. javascript数组学习1

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. mac上安装ruby

    (转:http://www.cnblogs.com/daguo/p/4097263.html) 以下代码区域,带有 $ 打头的表示需要在控制台(终端)下面执行(不包括 $ 符号) 步骤0 - 安装系统 ...