ANDROID APP的页面布局(Part I)

做一个好的APP自然是不能缺少一个好的漂亮的且合理的页面布局了,ANDORID里面支持的布局大致上有下列即种,根据界面的需要使用不同的布局可达到事半功倍的效果,这个跟做HMTL的页面的原理是一样,好的页面看起来就是舒服,而且容易维护。

1. Linear Layout(线性布局,横向或者竖向)
2. Relative Layout(相对布局)
3. Table Layout(表格布局)
4. Grid View(表格视图)
5. Tab Layout(Tab布局)
6. List View(列表视图)

这些布局都是通过XML的文件格式进行定义,当然在一些特定的需要情况也是可以使用代码去动态的生成页面,在Android Studio里面布局的XML文件放置在/res/layout文件夹里面:

image

下面我来做一个登录页面的布局,效果图如下

image

1. Linear Layout(线性布局,横向或者竖向)

线性布局是将在布局里面的所有元素按照先后顺序进行显示,可以是Horizontally横向或者Vertically竖向布局,设置的属性android:orientation

竖向布局的XML示例

<LinearLayout android:orientation="vertical"> .... </LinearLayout>

横向的布局的XML示例

<LinearLayout android:orientation="horizontal"> .... </LinearLayout>

根据以上两种线性布局方式,我们一步一步创建示例页面

1.创建示例项目File -> New -> Android Project

2.在项目视图里面的目录res/layout上面右键新建一个Android XML文件,命名为“linear_layout.xml

res/layout -> 右键 -> New -> Android XML File

3.在建好的XML文件“linear_layout.xml”里面写好如下一些代码

<?xml version="1.0" encoding="utf-8"?>
<!-- Parent linear layout with vertical orientation -->
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
   
  <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
            android:text="Email:" android:padding="5dip"/>
             
  <EditText android:layout_width="fill_parent" android:layout_height="wrap_content"
            android:layout_marginBottom="10dip"/>            
   
  <Button android:layout_width="fill_parent" android:layout_height="wrap_content"
            android:text="Login"/>
   
  <!-- Child linear layout with horizontal orientation -->
  <LinearLayout android:layout_width="fill_parent"
                      android:layout_height="wrap_content"
              android:orientation="horizontal" android:background="#2a2a2a"
              android:layout_marginTop="25dip">
                 
  <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
         android:text="Home" android:padding="15dip" android:layout_weight="1"
         android:gravity="center"/>
             
  <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
         android:text="About" android:padding="15dip" android:layout_weight="1"
         android:gravity="center"/>  
   
  </LinearLayout>
     
</LinearLayout>

 

4.要把这个布局作为App的主页面,需要到项目里面的MainActivity.java文件把这个布局作为主页面的布局,做法是把放onCreate方法里面的setContentView(R.layout.main) 改一下,把R.layout.main改为你刚刚创建的布局文件R.layout.linear_layout,代码如下

import android.app.Activity;
import android.os.Bundle;
 
public class AndroidLayoutsActivity extends Activity {
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.linear_layout);
    }
}

 

5.运行你的项目,点击运行按钮

image

在虚拟机里面运行的效果如下

image

 

2. Relative Layout(相对布局)

相对布局是在布局里面的所有元素可以设置针对其他元素的相对位置或者父元素的相对位置,比如登陆界面的登陆按钮和取消按钮,取消按钮可以设置为相对登陆按钮的右边,可以在元素上使用属性android:layout_toRightOf进行设置,可以设置为其他相对方式,可以看IDE里面的提示,如下示例代码

<Button android:id="@+id/btnLogin" ..></Button>
 
<Button android:layout_toRightOf="@id/btnLogin"
            android:layout_alignTop="@id/btnLogin" ..></Button>

image

 

1.创建示例项目File -> New -> Android Project

2.在项目视图里面的目录res/layout上面右键新建一个Android XML文件,命名为“relative_layout.xml

res/layout -> 右键 -> New -> Android XML File

3.在建好的XML文件“relative_layout.xml”里面写好如下一些代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content">
 
    <TextView android:id="@+id/label" android:layout_width="fill_parent"
              android:layout_height="wrap_content" android:text="Email" />
 
    <EditText android:id="@+id/inputEmail" android:layout_width="fill_parent"
              android:layout_height="wrap_content" android:layout_below="@id/label" />
   
    <Button android:id="@+id/btnLogin" android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:layout_below="@id/inputEmail"
            android:layout_alignParentLeft="true" android:layout_marginRight="10px"
            android:text="Login" />
 
    <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:layout_toRightOf="@id/btnLogin"
            android:layout_alignTop="@id/btnLogin"  android:text="Cancel" />
             
    <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:layout_alignParentBottom="true" android:text="Register new Account"
            android:layout_centerHorizontal="true"/>
</RelativeLayout>

 

4.如前一个线性示例一样,把MainActivity.java文件里面的布局文件改为R.layout.relative_layout

setContentView(R.layout.relative_layout);

5.在模拟器里面运行之后的效果如下

image

 

3. Table Layout(表格布局)

表格布局可以根据行和列进行布局,如下面的原型图

image

创建一个XML布局文件table_layout.xml,代码如下

<TableLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:shrinkColumns="*"  android:stretchColumns="*" android:background="#ffffff"> 
    <!-- Row 1 with single column -->
    <TableRow 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:gravity="center_horizontal">  
        <TextView 
            android:layout_width="match_parent" android:layout_height="wrap_content"
            android:textSize="18dp" android:text="Row 1"  android:layout_span="3"
            android:padding="18dip" android:background="#b0b0b0"
            android:textColor="#000"/>  
    </TableRow>  
     
    <!-- Row 2 with 3 columns -->
    <TableRow 
        android:id="@+id/tableRow1" 
        android:layout_height="wrap_content" 
        android:layout_width="match_parent">  
        <TextView 
            android:id="@+id/TextView04" android:text="Row 2 column 1"
            android:layout_weight="1" android:background="#dcdcdc"
            android:textColor="#000000"
            android:padding="20dip" android:gravity="center"/>  
        <TextView 
            android:id="@+id/TextView04" android:text="Row 2 column 2"
            android:layout_weight="1" android:background="#d3d3d3"
            android:textColor="#000000"
            android:padding="20dip" android:gravity="center"/>
        <TextView 
            android:id="@+id/TextView04" android:text="Row 2 column 3"
            android:layout_weight="1" android:background="#cac9c9"
            android:textColor="#000000"
            android:padding="20dip" android:gravity="center"/>
    </TableRow> 
     
    <!-- Row 3 with 2 columns -->
    <TableRow 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:gravity="center_horizontal">  
        <TextView 
            android:id="@+id/TextView04" android:text="Row 3 column 1"
            android:layout_weight="1" android:background="#b0b0b0"
            android:textColor="#000000"
            android:padding="20dip" android:gravity="center"/>
             
        <TextView 
            android:id="@+id/TextView04" android:text="Row 3 column 2"
            android:layout_weight="1" android:background="#a09f9f"
            android:textColor="#000000"
            android:padding="20dip" android:gravity="center"/>  
    </TableRow>  
     
</TableLayout>

 

在MainActivity.java中修改一下使用的布局文件

setContentView(R.layout.table_layout);

运行之后的真实效果如下

image

 

上面讲了线性布局,相对布局和表格布局,这三种布局是绝大部分界面都可以满足要求,后续再讲其他的视图,视图Grid View,Tab Layout , List View 这几个都需要一定的数据来协助完成,笔记视图使用来展示数据的嘛。