[Android(安卓)Develop_002]-Android(安卓)UI Layout

上一篇结尾的时候说这个章节讲Android的布局，后来发现关于Android的四种基本布局网上有很多的资料讲解得非常详细。我这里不希望再连篇累牍地进行叙述，就像上一章节讲环境部署一样，我这里简要地提一下，重点是使用html进行Android布局，这也是为什么这些年来HTML5迅速发展的原因。HTML布局可以和四个基本布局混合使用也可以单独使用。四个基本布局分别是：

1）LinearLayout

这是非常常见的一种布局，分为横向（horizontal）和竖向（vertical）两种，这两种布局可以嵌套使用，也可以单独来使用，对于登录功能等比较简单的页面布局，采用这种布局方式都能很好地实现。上一个章节讲登录功能（LoginActivity）用的布局就是这种布局。

<span style="font-family:Microsoft YaHei;"><?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" >        <TextView         android:id="@+id/tvUserName"        android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:text="@string/txtUserName">    </TextView>    <EditText         android:id="@+id/etUserName"        android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:inputType="text"/>         <TextView         android:id="@+id/tvPassWord"        android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:text="@string/txtPassWord">    </TextView>    <EditText         android:id="@+id/etPassWord"        android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:inputType="textPassword"/>        <LinearLayout    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="horizontal">            <Button             android:id="@+id/btnReset"          android:layout_width="0dip"          android:layout_height="wrap_content"          android:text="@string/btnReset"          android:layout_weight="1"/>                <Button             android:id="@+id/btnLogin"          android:layout_width="0dip"          android:layout_height="wrap_content"          android:text="@string/btnLogin"          android:layout_weight="1"/>            </LinearLayout>    </LinearLayout></span>

2）RelativeLayout

这种布局模式是相对父级的位置来指定的，比较好理解。通过指定元素的底部，顶部，左边，右边等属性来确定元素的位置。这种布局通过ID来识别左侧，右侧等属性，所以，需要指定元素的ID属性。

<span style="font-family:Microsoft YaHei;"><?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >        <TextView         android:id="@+id/text_01"         android:layout_width="50dp"         android:layout_height="50dp"         android:background="#ffffff00"         android:gravity="center"         android:layout_alignParentBottom="true"         android:text="1"/>    <TextView         android:id="@+id/text_02"         android:layout_width="50dp"         android:layout_height="50dp"         android:background="#ff654321"         android:gravity="center"         android:layout_above="@id/text_01"         android:layout_centerHorizontal="true"         android:text="2"/>          <TextView          android:id="@+id/text_03"          android:layout_width="50dp"          android:layout_height="50dp"          android:background="#fffedcba"          android:gravity="center"          android:layout_toLeftOf="@id/text_02"          android:layout_above="@id/text_01"          android:text="3"/></RelativeLayout></span>

这种布局常用的一些属性如下：

android:layout_toLeftOf —— 该组件位于引用组件的左方
android:layout_toRightOf —— 该组件位于引用组件的右方
android:layout_above —— 该组件位于引用组件的上方
android:layout_below —— 该组件位于引用组件的下方
android:layout_alignParentLeft —— 该组件是否对齐父组件的左端
android:layout_alignParentRight —— 该组件是否齐其父组件的右端
android:layout_alignParentTop —— 该组件是否对齐父组件的顶部
android:layout_alignParentBottom —— 该组件是否对齐父组件的底部
android:layout_centerInParent —— 该组件是否相对于父组件居中
android:layout_centerHorizontal —— 该组件是否横向居中
android:layout_centerVertical —— 该组件是否垂直居中

3）TableLayout

TableLayout顾名思义，此布局为表格布局，适用于N行N列的布局格式。一个TableLayout由许多TableRow组成，一个TableRow就代表TableLayout中的一行。TableRow是LinearLayout的子类，它的android:orientation属性值恒为horizontal，并且它的android:layout_width和android:layout_height属性值恒为MATCH_PARENT和WRAP_CONTENT。所以它的子元素都是横向排列，并且宽高一致的。这样的设计使得每个TableRow里的子元素都相当于表格中的单元格一样。在TableRow中，单元格可以为空，但是不能跨列。

<span style="font-family:Microsoft YaHei;">TableLayout<?xml version="1.0" encoding="utf-8"?><TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"><TableRow android:layout_width="fill_parent" android:layout_height="wrap_content"><TextView  android:background="#ffffffff" android:gravity="center" android:padding="10dp" android:text="1"/><TextView android:background="#ff654321" android:gravity="center" android:padding="10dp" android:text="2"/><TextView  android:background="#fffedcba" android:gravity="center" android:padding="10dp" android:text="3"/></TableRow><TableRow android:layout_width="fill_parent" android:layout_height="wrap_content"><TextView  android:background="#ff654321" android:gravity="center" android:padding="10dp" android:text="2"/><TextView android:background="#fffedcba" android:gravity="center" android:padding="10dp" android:text="3"/>        </TableRow><TableRow android:layout_width="fill_parent" android:layout_height="wrap_content"><TextView android:background="#fffedcba" android:gravity="center" android:padding="10dp" android:text="3"/><TextView  android:background="#ff654321" android:gravity="center" android:padding="10dp" android:text="2"/><TextView  android:background="#ffffffff" android:gravity="center" android:padding="10dp" android:text="1"/>        </TableRow></TableLayout></span>

4）FrameLayout

FrameLayout是覆盖模式的布局，每一个frame覆盖在前一个Frame之上。如果两个Frame大小一致，在UI上是看不见第一个frame的。

5）AbsoluteLayout

绝对位置类似于html的绝对位置布局，局限性在于难以适应不同尺寸的设备。

6）HTML

Html，css 、javascript 在网页布局方面已经有了非常成熟的实践，所以这种布局方式使得之前我们掌握的布局技能可以再Android里面重新得到发挥。尤其是html5的一些新特性，加上最新推出的css3，android的页面效果将更加绚丽。

Html布局可以采用链接网页的形式，也可以使用内部的网页文件。下面先介绍使用外部链接的方式。

HtmlUIAtivity

package com.example.androidexample;import android.app.Activity;import android.os.Bundle;import android.webkit.WebView;public class HtmlUIActivity extends Activity {private WebView webView;@Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);super.setContentView(R.layout.activity_html);webView = (WebView) findViewById(R.id.webview); webView.loadUrl("http://www.baidu.com"); }}

我们先获取布局文件中的WebView对象，然后使用loadUrl方法链接到外部链接。布局文件很简单，只定义了一个WebView

<?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" >    <WebView          android:id="@+id/webview"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        /></LinearLayout>

在AndroidManifest.xml中注册Activity是必不可少的，需要注意的是如果需要访问外部网页，需要增加访问网页的权限。在Manifest和application之间增加

<uses-permission android:name="android.permission.INTERNET"/>

import android.app.Activity;import android.os.Bundle;import android.webkit.WebView;public class HtmlUIActivity extends Activity {private WebView webView;@Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);super.setContentView(R.layout.activity_html);webView = (WebView) findViewById(R.id.webview); //webView.loadUrl("http://www.baidu.com"); webView.loadUrl("file:///android_asset/index.html"); }}

我们使用的是webView.loadUrl("file:///android_asset/index.html")的形式，如果页面有javascript还需要开启javascript的支持。

index.html内容如下：

<html>    <head>        <title></title>    </head>    <body>    This is Html UI Activity.    <body></html>

webView.getSettings().setJavaScriptEnabled(true);//设置支持javaScriptwebView.getSettings().setSaveFormData(false);//不保存表单数据webView.getSettings().setSavePassword(false);//不保存密码webView.getSettings().setSupportZoom(false);//不支持页面放大功能//addJavascriptInterface方法中要绑定的Java对象及方法要运行在另外的线程中，不能运行在构造他的线程中webView.addJavascriptInterface(new MyJavaScript(), "itcast");

更多相关文章

随机推荐