Android开发自学笔记(三):APP布局上

hello,大家好,本文主要介绍如何开始开发一个美观、有情调、人见人爱的Android应用程序,已知我们在市面上有不少布局极其精美,在视觉上让人爱不释手的应用程序,如果让我们着手开发,我们该如何下手?

在移动互联网公司都有这样几个部门–UX/UE及UI,UX有的也称作UE是指做用户体验的是User Experience的缩写,这些人一般都毕业于美术学院专门搞设计,我们上面说到那些精美的程序往往都是由他们的手先设计出效果图,然后交由UI,也称GUI即Graphic User Interface或者直接称作美工的人将效果图做成低保真图片交给我们屌丝码农来在开发中实现,领导审核通过后就有美工配合码农开搞了,码农和美工沟通怎么切图,美工则负责出高保真像素图片,额~~貌似扯远了,我们今天就来介绍如何将美工mm送过来的高保真应用到我们开发中,这就是今天介绍的内容,页面布局。

我们可以暂时先将Android的一个界面比作网页浏览器中的一个页面,一个应用有多个界面就类似于一个网站有多个页面,所以Android应用在没有做到前端、后端分离之前,Android的一个个界面布局都需要我们码农自己搞(以前Web开发,也是由码农单搞,但随着Web前端的单独分离,越来越多的Web服务都前后端分离了,几个码农专门负责后台,再由几个码农负责前端,这样写出的代码更专一、耦合度更低,所以才出现了今天Web前端这个新兴职业,我相信不久的将来移动应用开发也会前后端分离,这不仅是Android,也包括iOS)。

最普通也是最符合Android开发思想的页面布局方式是:在Android项目工程中定义页面布局的XML文件,即res目录下的子目录layout中定义。Android按层次定义界面元素:

View对象封装最基本的界面元素,比如按钮(Button)、输入框(TextFileds)等等;ViewGroup则为View的容器(Container),常见的有LinearLayout、RelativeLayout等,也就是说每一个View对象都必须隶属于一个ViewGroup,而ViewGroup又可以包含子ViewGroup。下图为官网截图,很好的解释了这一关系。

需要注意的是ViewGroup在布局中是不可见的,ViewGroup只是很好的定义了它包含的内容(View或者有一个ViewGroup)的布局,比如是网格布局或者线性布局。

本节内容则主要在第一篇使用的HelloWorld程序中添加一个简单的搜索页面,从而做到Android页面布局的基本入门。

我们在res/layout/下新建一个名为search.xml的文件,并点击OK:

添加ViewGroup
完了之后我们先考虑选择一个ViewGroup,这里选最简单最常用的线性布局LinearLayout:

<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="horizontal" >
</LinearLayout>

LinearLayout是一个ViewGroup,在代码中为ViewGroup的子类,它规定了它的所有页面元素要么为竖直对齐要么水平对齐。

android:orientation 属性即为对齐方向,在这里我们选择horizontal水平对齐。所有定义在这个LinearLayout中的页面元素都会按水平对齐一字排开。

android:layout_width/height 因为这个Linearlayout已经为最顶层的布局,所以我们指定layout_width和layout_height都为匹配最顶层的布局(因为不存在,我的理解为即匹配设备屏幕的尺寸),所以它的值为match_parent。

添加EditText
搜索框我们可以选择EditText这个View来实现,所以我们在LinearLayout这个节点下添加子节点EditText,内容如下:

 <EditText android:id="@+id/edit_message"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:hint="@string/edit_message" />

android:id 这个表示为这个View元素定义全局唯一id,另外我们这个属性的值比较奇怪,‘@'符号表示引用,紧随id则表示因表示引用id,如果我们在布局时想引用某个View(比如相对布局时,相对某个View的位置)时,则使用‘@'符号加上id即可,还有如果你是第一次定义id则需要加上‘+',在这里我定一个id的值为edit_message。

而同样出现的layout_width和layout_height则为指定这个View的大小尺寸,我们赋值为wrap_content,意为根据自身内容自适应,如果你像刚才定义LinearLayout时使用match_parent则这个EditText就会撑的和LinearLayout一样大。

android:hint 为提示语,这个只有在你的输入框为空的时候才会显示,我想我们都有这方面的使用经验,它的值同样出现了一个'@'并且后面是string,则表明引用的是字符串。

定义string内容

因为我们并没有定义hint string,所以预览界面提示了一个警告,所以接下来我们需要定义这个字符串,打开res/values/strings.xml,添加这个string值,如下:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string name="app_name">HelloWorld</string>
 <string name="edit_message">请输入文字</string>
 <string name="btn_message">搜索</string>
</resources>

这时候我的预览图已经变了,并警告消失:

添加Button

刚刚在定义string时,我一并定义了一个名为“搜索”的string,所以接下来我们回到之前的布局文件上,并添加一个Button的View,所以同样在LinearLayout下添加一个Button节点,内容如下:

 <Button
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="@string/btn_message" />

android:text 为这个按钮上显示的文字,这里同样引用的是一个string,效果如下:

至此,我们的页面布局就算完成了,接下来我们将其绑定到我们的HelloWorld程序中去,还打开之前的MyActivity java文件,并修改这个Activity绑定的页面为search.xml,如下:

public class MyActivity extends Activity {
 /**
 * Called when the activity is first created.
 */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.search);
 }
}

运行程序
代码修改好了,我们就来试试显示在Android真机上是什么感觉。

看起来并不是特别美观,因为我们在把EdidText和Button这两个View的大小都设定为wrap_content了即只根据View本身内容的长度去自适应,下一篇我们就来优化这个问题。

(0)

相关推荐

  • 配置iptables,把80端口转到8080的简单方法

    在Linux的下面部署了tomcat,为了安全我们使用非root用户进行启动,但是在域名绑定时无法直接访问80端口号.众所周知,在unix下,非root用户不能监听1024以上的端口号,这个tomcat服务器就没办法绑定在80端口下.所以这里需要使用linux的端口转发机制,把到80端口的服务请求都转到8080端口上. 在root账户下面运行一下命令: iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-port 80

  • 分享Android开发自学笔记之AndroidStudio常用功能

    相关下载: Android Studio v1.3 官方最新版(apk应用开发工具) http://www.jb51.net/softs/83206.html Android Studio 官方最新版下载地址(支持国内下载)http://www.jb51.net/softjc/83204.html 一.界面区介绍 1.项目组织结构区,用于浏览项目文件,默认Project以Android组织方式展示. 2.设计区,默认在打开布局文件时为设计模式,可直接拖动控件到界面上实现所见即所得,下方的Desi

  • Android开发自学笔记(五):使用代码控制界面

    酷酷的外表已经具备了,那就开始让我们真正把它的功能给实现起来吧,外强中干,花拳绣腿可不行哦,我们需要真正的本领,需要一颗自强不息的心哦,常常想想自己的梦想什么,这样才不会迷失自己,才会在茫茫的世界中找到自己前进的方向!我不会告诉你我刚看过<voice of China session 3>哦. 从上两节教程中,我们已经会搭出如下美美的布局了,欢迎翻页查阅:) Android自学开发第四篇之布局上 Android自学开发第五篇之布局下 添加第二个layout 关于layout布局我们不再赘述,这

  • Android开发自学笔记(三):APP布局上

    hello,大家好,本文主要介绍如何开始开发一个美观.有情调.人见人爱的Android应用程序,已知我们在市面上有不少布局极其精美,在视觉上让人爱不释手的应用程序,如果让我们着手开发,我们该如何下手? 在移动互联网公司都有这样几个部门–UX/UE及UI,UX有的也称作UE是指做用户体验的是User Experience的缩写,这些人一般都毕业于美术学院专门搞设计,我们上面说到那些精美的程序往往都是由他们的手先设计出效果图,然后交由UI,也称GUI即Graphic User Interface或者

  • Android开发自学笔记(一):Hello,world!

    Android当道,现在学习Android开发还晚吗?写下这个问题的时间是–2014年6月15号,我会回答:不晚,Android至少还能在活跃10年!所以答应自己从今天开始自学Android开发. 搭建Android开发环境,lorinnn使用了和大部分开发者不一样的开发环境,lorinnn使用的是Intellij+Genymotion方案,不为其他,只为速度,只为编程jeek的追求:) 在链接:Intellij IDEA + Android SDK + Genymotion Emulator打

  • Android开发自学笔记(四):APP布局下

    篇幅较长遂分成上下两篇,上一篇我们已经快要一气呵成了,但是美中不足的是,这个界面并不能讨得美工MM的欢心,美工MM曾寄希望于您,却交出这么作出这么一副死型样,我都替你汗颜. 这个图搜索按钮看起来马马虎虎,但是这个搜索框真是有失我在美工MM心中的水准啊,这是因为我们把EditText和Button都的宽度都设置成按自身内容长度自适应,所以这一篇我们就来润润色,修一修这个布局. Android在布局中引入了权重的概念,即如果给设定ViewGroup的总权重是,然后可以将权重分给它的子元素View各几

  • Android开发自学笔记(六):声明权限和Activity

    不好意思哦,上一篇Android自学开发第六篇代码控制界面挖了个坑,如果运行不起来的同学,请注意查看本篇文章. Android Project的灵魂大师AndroidManifest.xml终于要登场了,我们可以亲切的称呼它为AM文件,认识和学会配置AM文件则是是学习Android非常重要的基础知识. AM文件定义了该Android App的需要请求的权限,需要生命的组件以及按其他App交互的一些信息,我想我需要进一步详解AM文件,期待我更新吧! 好,回到这个坑中来,我们已经使用连续的一系列文章

  • Android开发自学笔记(二):工程文件剖析

    无论使用何种IDE开发Android,集成官方Android SDK并创建Android工程之后,该工程都会默认包括一整套Android项目文件,这个工程都可以直接run在你的真机或者模拟器上. 本文主要简单剖析这个默认的完整的一套项目工程的文件结构,这样我们在开发我们自己的项目的时候才能熟练做到有的放矢. AndroidManifest.xml 这个AndroidManifest.xml文件可谓是整个Android工程的灵魂架构师,它不仅定义了你的Android程序运行时所需的功能特性,同时也

  • Android开发之开发者头条APP(三)实现首页

    相关阅读: Android开发之开发者头条(一)启动页实现 Android开发之开发者头条(二)实现左滑菜单 title: 带你实现开发者头条APP(三) 首页实现 tags: 轮播广告,ViewPager切换,圆形图片 grammar_cjkRuby: true 一.前言 今天实现开发者头条APP的首页.是本系列的第三篇文章,效果图如下: 从gif动态效果图中我们可以看出,最外层有三个tab(精选,订阅,发现),在精选界面顶部有一个轮播的图片广告,广告下面是一个精选文章列表. 二.外层三个ta

  • Android开发高仿课程表的布局实例详解

    先说下这个demo,这是一个模仿课程表的布局文件,虽然我是个菜鸟,但我还是想留给学习的人一些例子,先看下效果 然后再来看一下我们学校的app 布局分析 先上一张划分好了的布局图 首先整个页面放在一个LinearLayout布局下面,分为上面和下面两个部分,下面一个是显示课程表的详细信息 1:这个没什么好讲的,就是直接一个LinearLayout布局,然后将控件一个TextView用来显示年份,一个View用来当作竖线,一个Spinner用来显示选择周数 2:这个是显示星期几的部件,是我自定义的V

  • Android 开发随手笔记之使用摄像头拍照

    在Android中,使用摄像头拍照一般有两种方法, 一种是调用系统自带的Camera,另一种是自己写一个摄像的界面. 我们要添加如下权限: <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.CAMERA"/> 1.调用系统Camera 调用系统

随机推荐