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