Android开发之应用界面布局Layout

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

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

通过这篇文章可以学到:

·使用FrameLayout布局

·使用RelativeLayout布局

·结合LinearLayout和RelativeLayout进行布局

·使用TableLayout布局

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

Android开发 桌面布局编辑 安卓开发页面布局_android

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

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

我们今天就贴一张图吧:

Android开发 桌面布局编辑 安卓开发页面布局_java_02

代码也简单

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布局,也就是相对布局,这种布局方式我想 很多人都喜欢吧,先看图:

Android开发 桌面布局编辑 安卓开发页面布局_java_03

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

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文件中关联一下就好了。

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

Android开发 桌面布局编辑 安卓开发页面布局_Android开发 桌面布局编辑_04

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,也就是表格布局,这种布局会把包含的元素以行和列的形式进行排列,表格的列数为每一行的最大列数,当然表格里的单元格也可以为空。

我们看一下图:

Android开发 桌面布局编辑 安卓开发页面布局_Android开发 桌面布局编辑_05

我们的表格有两行两列,来看下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中关联下就可以了。

 

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