Android开发之应用界面布局Layout

 Android开发之应用界面布局Layout

布局，不论在哪个软件开发的过程中无疑都占有很重要的部分，可以想象一下，如过你下载了一个软件，打开一看，按钮和控件的位置布的有想吐感觉，那你还会继续使用这个软件还是换个相似的但布局不错的软件呢?我想答案很明确了吧。

既然布局这么重要，那么我们今天来谈谈Android开发中的布局，看看Android为我们提供了那些布局方式呢？

通过这篇文章可以学到：

·使用FrameLayout布局

·使用RelativeLayout布局

·结合LinearLayout和RelativeLayout进行布局

·使用TableLayout布局

我们先写一个猪界面，上面写四个按钮，如图

这个页面的代码就不用贴了吧，现在开始看布局，先来看FrameLayout布局。

相信都写过第一个Android程序吧，HelloWord，这个程序其实就是使用的FrameLayout布局，也就是说，在新建工程的时候，Android默认为我们实现的是FrameLayout布局。

我们今天就贴一张图吧：

代码也简单

XML：

  <ImageView  

    android:id="@+id/photo"

    android:src="@drawable/bg"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

  />

   JAVA:

    protected void onCreate(Bundle savedInstanceState) {

       super.onCreate(savedInstanceState);

       setTitle("FrameLayout布局");

       setContentView(R.layout.activity_frame_layout);

    }

接着是RelativeLayout布局，也就是相对布局，这种布局方式我想 很多人都喜欢吧，先看图：

我们看下代码是如何实现的：

XML:

<RelativeLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:background="#770000ff"

    android:padding="10dip"

    >

   

<TextView

    android:id="@+id/label"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="请输入用户名"

/>

<!--

    这个EditText放在id为lable的TextView的下面

 -->

<EditText

    android:id="@+id/entry"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:background="@android:drawable/editbox_background"

    android:layout_below="@id/label"

/>

<!--

    取消按钮和容器的右边对齐，并且设置左边的边距为10dip

 -->

 <Button

    android:id="@+id/cancle"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_below="@id/entry"

    android:layout_alignParentRight="true"

    android:layout_marginLeft="10dip"

    android:text="取消"

 />

 <!--

    确定按钮在取消按钮的左边，并且和取消按钮高度相同

  -->

 <Button

    android:id="@+id/ok"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_toLeftOf="@id/cancle"

    android:layout_alignTop="@id/cancle"

    android:text="确定"

 />

</RelativeLayout>

在Java文件中关联一下就好了。

我们重点看一下结合布局是在么做的，先做个简单的，如图：

JAVA代码如下：

protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setTitle("结合LinearLayout和RelativeLayout进行布局");
		//构建一个Layout
		LinearLayout layout = new LinearLayout(this);
		//设置横布局
		layout.setOrientation(LinearLayout.HORIZONTAL);
		setContentView(layout);
		//得到一个LayoutInflater对象，这个对象可以对XML文件进行解析，并生成一个View
		LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		RelativeLayout layoutLeft=(RelativeLayout) inflater.inflate(R.layout.left, null);
		RelativeLayout layoutRight=(RelativeLayout) inflater.inflate(R.layout.right, null);
		//生成一个RelativeLayout适应LayoutParams
		RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
				RelativeLayout.LayoutParams.WRAP_CONTENT);
		layout.addView(layoutLeft, 100, 100);
		layout.addView(layoutRight, 100, 100);
		setContentView(layout, params);
	}

至于right.xml和left.xml文件的内容，你可以发挥自己的想象力自己写了哦。

 

最后看下TableLayout，也就是表格布局，这种布局会把包含的元素以行和列的形式进行排列，表格的列数为每一行的最大列数，当然表格里的单元格也可以为空。

我们看一下图：

我们的表格有两行两列，来看下XML代码：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:stretchColumns="1">
	
<TableRow>
	<TextView
		android:text="用户名"
		android:textStyle="bold"
		android:gravity="right"
		android:padding="3dip"
	/> 
	
	<EditText
		android:id="@+id/username"
		android:gravity="right"
		android:padding="3dip"
	/>
</TableRow>

<TableRow>
	<TextView
		android:text="密码"
		android:textStyle="bold"
		android:gravity="right"
		android:padding="3dip"
	/> 
	
	<EditText
		android:id="@+id/password"
		android:inputType="textPassword"
		android:scrollHorizontally="true"
		android:padding="3dip"
	/>
</TableRow>
<TableRow android:gravity="right">
	<Button
		android:id="@+id/cancle"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="取消" 
	/>
	<Button
		android:id="@+id/login"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="登录" 
	/>
</TableRow>
</TableLayout>

然后在JAVA中关联下就可以了。

 

当面的布局不仅仅是这么简单，你也可以全部在代码里面写布局，也可以用画笔来在界面上画，这些以后再谈，这里仅仅是说了一下基本的布局方式，我们可以把这些灵活的应用，嵌套，不同的布局嵌套在一期会有不同的效果，大家不妨试一试，记得把你的结果拿出来分享哦！