Android之路之四（布局Layout）

最新推荐文章于 2024-08-27 16:29:55 发布

s874154731

最新推荐文章于 2024-08-27 16:29:55 发布

阅读量1.2k

点赞数

分类专栏： Android 文章标签： android layout button encoding html 扩展

本文链接：https://blog.csdn.net/s874154731/article/details/7051377

版权

Android 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Android学习进入第三天，通过今天学习，我了解到，Android中的布局方式有：LinearLayout（线性布局）、RelativeLayout（相对布局）、TableLayout（表格布局）、FrameLayout（帧布局），当然还有线性布局与相对布局嵌套的布局方式。下面，就来结合一些案例来了解一下Android的布局方式。

线性布局：LinearLayout

线性布局就是，在<LinearLayout>标签下的所有子元素，根据orientation属性的值来按行或者按列逐个显示。其orientation的值有：vertical（按行显示）、horizontal（按列显示）。

例，linear_layout.xml布局文件，这个布局文件，采用了线性布局按行显示嵌套线性布局按列显示的布局模式，内容如下：

<?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" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/user_name" />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/password" />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="220dp"
            android:text="@string/enter_text" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/cencel_text" />
    </LinearLayout>
</LinearLayout>

以上代码实现的布局如图所示：

这个线性布局文件中，定义了六个元素组件，显示为三行，且每行两列。其整体布局采用了orientation=”vertical”的按行显示，嵌套了orientation=” horizontal”按列显示的线性布局。

其中，在定义组件视图尺寸的时候用到的【warp_content】：设置一个视图的尺寸为wrap_content，将强制性地使视图扩展以显示全部内容。

【match_parent】：设置一个视图的尺寸为match_parent，将强制性地使视图扩展填充其上一级组件的剩余尺寸。

相对布局：RelativeLayout

相对布局的元素组件是按照相互之间的相对位置来确定的，需要为各个组件定义上一id，根据id来进行组件之间的相对位置。

例，relative_layout.xml布局文件如下：

<?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" >
    <Button 
        android:id="@+id/one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/enter_text"/>
    <Button 
        android:id="@+id/three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/enter_text"
        android:layout_below="@id/one"
        android:layout_toRightOf="@id/one"/>
    <Button 
        android:id="@+id/two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/enter_text"
        android:layout_toRightOf="@id/three"/>
    <Button 
        android:id="@+id/four"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/enter_text"
        android:layout_below="@id/three"/>
    <Button 
        android:id="@+id/five"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/enter_text"
        android:layout_below="@id/three"
        android:layout_toRightOf="@id/three"/>
</RelativeLayout>

以上代码实现的布局如图所示：

这个表格布局文件，定义了五个按钮元素组件，其中，以左上角id为one的按钮组件为基准，再根据每个组件的id，进行了相对的布局。代码举例说明：

android:layout_toRightOf="@id/one":是将该元素组件放在id为one的元素组件的右侧。

android:layout_below="@id/one":是将该元素组件放在id为one的元素组件的下侧。

表格布局：TableLayout

表格布局，与HTML中的表格实现方式极为相似。其中<TableLayout>相当于HTML中的<Table>标签，说明采用的是表格布局。<TableRow>相当于HTML中的<tr>标签，定义一个行。<TextView>相当于HTML中的<td>标签，定义一个列。

例，table_layout.xml布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="0,1,2,3"  >
    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/name"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/sex"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/age"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/call"/>
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/name_liming"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/sex_liming"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/age_liming"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/call_liming"/>
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/name_wangli"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/sex_wangli"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/age_wangli"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/call_wangli"/>
    </TableRow>
</TableLayout>

以上代码实现的布局如图所示：

这个表格布局文件中定义了一十二个元素组件。分三行四列显示。代码举例说明：

android:stretchColumns="0,1,2,3"：是设置TableLayout所有行的第一、二、三、四列为扩展列，也即是说，每行都有4列的话，那将均等分空间。

帧布局：FrameLayout

帧布局中的每一个组件都代表一个画面，默认以屏幕左上角为（0，0）坐标，按组件定义的先后顺序依次逐屏显示，后面出现的会覆盖前面的画面。可以实现动画效果。

例，frame_layout.xml文件如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/frame" >
</FrameLayout>

对应的activity.java文件如下：

package cn.class3g.activity;
import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.FrameLayout;
public class LayoutHomeWorkActivity extends Activity {
	private boolean flag = true;
	FrameLayout frame = null;
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		this.setContentView(R.layout.frame_layout);
		findViews();
		final MyHandler myHandler = new MyHandler();
		myHandler.sleep(10);
		frame.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				flag = !flag;
				myHandler.sleep(10);
			}
		});
	}
	private void findViews() {
		frame = (FrameLayout) this.findViewById(R.id.frame);
	}
	class MyHandler extends Handler {
		int i = 0;
		@Override
		public void handleMessage(Message msg) {
			i++;
			show(i % 7);
			sleep(80);
		}
		public void sleep(long delayMillis) {
			if (flag) {
				this.sendMessageDelayed(obtainMessage(10), delayMillis);
			}
		}
	}
	private void show(int j) {
		Drawable pic[] = new Drawable[7];
		pic[0] = this.getResources().getDrawable(R.drawable.s1);
		pic[1] = this.getResources().getDrawable(R.drawable.s2);
		pic[2] = this.getResources().getDrawable(R.drawable.s3);
		pic[3] = this.getResources().getDrawable(R.drawable.s4);
		pic[4] = this.getResources().getDrawable(R.drawable.s5);
		pic[5] = this.getResources().getDrawable(R.drawable.s6);
		pic[6] = this.getResources().getDrawable(R.drawable.s7);
		frame.setForeground(pic[j]);
	}

以上代码实现的效果为：

七种颜色逐次闪现。

注意：在创建布局文件的时候，其名称中不得含有大写英文字母。否则，程序将报错。

s874154731

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android之路之四（布局Layout）

Android学习进入第三天，通过今天学习，我了解到，Android中的布局方式有：LinearLayout（线性布局）、RelativeLayout（相对布局）、TableLayout（表格布局）、FrameLayout（帧布局），当然还有线性布局与相对布局嵌套的布局方式。下面，就来结合一些案例来了解一下Android的布局方式。线性布局：LinearLayout线性布局就是，在标
复制链接

扫一扫

专栏目录