[Android Develop_002]-Android UI Layout

最新推荐文章于 2025-11-13 12:33:30 发布

原创最新推荐文章于 2025-11-13 12:33:30 发布 · 800 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android

Android Develop 专栏收录该内容

32 篇文章

订阅专栏

本文简述了Android的基本布局类型及其在登录功能中的应用，包括LinearLayout、RelativeLayout、TableLayout、FrameLayout和AbsoluteLayout。同时介绍了如何利用HTML5进行页面布局，以及与Android布局的结合使用。并通过实例展示了TableLayout的使用方法，以及如何使用WebView加载外部HTML页面，强调了HTML5在Android页面布局中的重要性。

上一篇结尾的时候说这个章节讲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;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.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;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.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);//设置支持javaScript

webView.getSettings().setSaveFormData(false);//不保存表单数据

webView.getSettings().setSavePassword(false);//不保存密码

webView.getSettings().setSupportZoom(false);//不支持页面放大功能

//addJavascriptInterface方法中要绑定的Java对象及方法要运行在另外的线程中，不能运行在构造他的线程中

webView.addJavascriptInterface(new MyJavaScript(), "itcast");