Home > Android > Tạo layout Header và Footer trong Android

Tạo layout Header và Footer trong Android

Bài viết này sẽ hướng dẫn cách tạo một layout đơn giản gồm 3 phần : Header, Footer và Content. Thành phần Header và Footer sẽ được định nghĩa để có thể tái sử dụng lại.

1. Tạo layout Header và Footer 

Trước tiên chúng ta tạo một layout xml gồm có 3 thành phần Header, Footer, Content như sau :

File fixed_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/container"
 android:layout_width="match_parent"
 android:layout_height="match_parent" >
<!-- Header aligned to top -->
<RelativeLayout
 android:id="@+id/header"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_alignParentTop="true"
 android:background="#005C2B"
 android:gravity="center" >
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_margin="5dp"
 android:text="Header"
 android:textColor="#FFFFFF"
 android:textSize="20sp" />
 </RelativeLayout>
<!-- Footer aligned to bottom -->
<RelativeLayout
 android:id="@+id/footer"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:background="#000000"
 android:gravity="center" >
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_margin="5dp"
 android:text="Footer"
 android:textColor="#FFFFFF"
 android:textSize="20sp" />
 </RelativeLayout>
<!-- Content below header and above footer -->
<RelativeLayout
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:layout_above="@id/footer"
 android:layout_below="@id/header"
 android:background="#E6F8E6"
 android:gravity="center" >
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Content here"
 android:textColor="#000000"
 android:textSize="20sp" />
 </RelativeLayout>
</RelativeLayout>

Giải thích : 

Trước tiên chúng ta định nghĩa một RelativeLayout chính để chứa toàn bộ, sau đó định nghĩa một bộ 3 RelativeLayout khác là Header, Footer và Content

+ RelativeLayout Header được gắn id=”@+id/header”, có attribute layout_alignParentTop = “true” để đặt nó ở top của thành phần cha

+ RelativeLayout Footer được gắn id=”@+id/footer”, có attribute layout_alignParentBottom=”true” để đặt nó ở bottom của thành phần cha

+ RelativeLayout Content được định nghĩa attribute layout_below=”@id/header” và layout_above=”@id/footer” để đặt nó nằm ở dưới thành phần header và trên thành phần footer.

Chú ý rằng chúng ta định nghĩa thành phần Content là thành phần cuối cùng của layout bởi vì nó có attribute layout_above=”@id/footer” cho nên chúng ta phải định nghĩa thành phần có id là footer trước.

Giao diện của layout này khi chạy chương trình như sau :

device-2014-01-03-231115

2. Tạo các thành phần tái sử dụng được

Trong phần trên, chúng ta viết chung các thành phần Header, Footer và Content vào cùng 1 file xml. Để tăng tính mềm dẻo và tái sử dụng cho layout, ta nên tách thành phần Header và Footer ra thành các file layout riêng để nó có thể được dùng cho nhiều activity khác nhau trong ứng dụng.

Cụ thể, ta sẽ tạo các file header.xml và footer.xml như sau :

File header.xml : 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/header"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_alignParentTop="true"
 android:background="#005C2B"
 android:gravity="center" >
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_margin="5dp"
 android:text="Header"
 android:textColor="#FFFFFF"
 android:textSize="20sp" />
</RelativeLayout>

File footer.xml : 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/footer"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:background="#000000"
 android:gravity="center" >
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_margin="5dp"
 android:text="Footer"
 android:textColor="#FFFFFF"
 android:textSize="20sp" />
</RelativeLayout>

Khi đó, ở activity nào cần sử dụng header và footer thì chỉ cần include chúng vào layout như sau :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/container"
 android:layout_width="match_parent"
 android:layout_height="match_parent" >
<!-- Header aligned to top -->
<include layout="@layout/header" />
<!-- Footer aligned to bottom -->
<include layout="@layout/footer" />
<!-- Content below header and above footer -->
<RelativeLayout
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:layout_above="@id/footer"
 android:layout_below="@id/header"
 android:background="#E6F8E6"
 android:gravity="center" >
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Content here"
 android:textColor="#000000"
 android:textSize="20sp" />
 </RelativeLayout>
</RelativeLayout>

3. Cố định Header và Footer với nội dung cuộn

Trong trường hợp phần nội dung vượt quá phạm vi Header và Footer, bạn nên tạo cho nó có thể cuộn để xem thêm bằng cách sử dụng ScrollView.

Bạn tạo file layout như sau ( file scrollable_main.xml ) :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/container"
 android:layout_width="match_parent"
 android:layout_height="match_parent" >
<!-- Header aligned to top -->
<include layout="@layout/header" />
<!-- Footer aligned to bottom -->
<include layout="@layout/footer" />
<!-- Scrollable Content below header and above footer -->
<ScrollView
 android:id="@+id/container"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:layout_above="@id/footer"
 android:layout_below="@id/header"
 android:background="#E6F8E6" >
<LinearLayout
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:gravity="center_horizontal"
 android:orientation="vertical" >
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginBottom="25dp"
 android:layout_marginTop="25dp"
 android:text="Content 1"
 android:textColor="#000000"
 android:textSize="20sp" />
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginBottom="25dp"
 android:layout_marginTop="25dp"
 android:text="Content 2"
 android:textColor="#000000"
 android:textSize="20sp" />
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginBottom="25dp"
 android:layout_marginTop="25dp"
 android:text="Content 3"
 android:textColor="#000000"
 android:textSize="20sp" />
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginBottom="25dp"
 android:layout_marginTop="25dp"
 android:text="Content 4"
 android:textColor="#000000"
 android:textSize="20sp" />
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginBottom="25dp"
 android:layout_marginTop="25dp"
 android:text="Content 5"
 android:textColor="#000000"
 android:textSize="20sp" />
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginBottom="25dp"
 android:layout_marginTop="25dp"
 android:text="Content 6"
 android:textColor="#000000"
 android:textSize="20sp" />
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginBottom="25dp"
 android:layout_marginTop="25dp"
 android:text="Content 7"
 android:textColor="#000000"
 android:textSize="20sp" />
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginBottom="25dp"
 android:layout_marginTop="25dp"
 android:text="Content 8"
 android:textColor="#000000"
 android:textSize="20sp" />
 </LinearLayout>
 </ScrollView>
</RelativeLayout>

Giao diện của layout khi chạy chương trình sẽ như sau :

scrollable_main

Ta có thể cuộn lên, cuộn xuống để xem thêm nội dung.

Để tăng khả năng tái sử dụng, ta tách phần nội dung thành 1 file content.xml riêng như sau :

<LinearLayout
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:gravity="center_horizontal"
 android:orientation="vertical" >
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginBottom="25dp"
 android:layout_marginTop="25dp"
 android:text="Content 1"
 android:textColor="#000000"
 android:textSize="20sp" />
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginBottom="25dp"
 android:layout_marginTop="25dp"
 android:text="Content 2"
 android:textColor="#000000"
 android:textSize="20sp" />
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginBottom="25dp"
 android:layout_marginTop="25dp"
 android:text="Content 3"
 android:textColor="#000000"
 android:textSize="20sp" />
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginBottom="25dp"
 android:layout_marginTop="25dp"
 android:text="Content 4"
 android:textColor="#000000"
 android:textSize="20sp" />
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginBottom="25dp"
 android:layout_marginTop="25dp"
 android:text="Content 5"
 android:textColor="#000000"
 android:textSize="20sp" />
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginBottom="25dp"
 android:layout_marginTop="25dp"
 android:text="Content 6"
 android:textColor="#000000"
 android:textSize="20sp" />
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginBottom="25dp"
 android:layout_marginTop="25dp"
 android:text="Content 7"
 android:textColor="#000000"
 android:textSize="20sp" />
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginBottom="25dp"
 android:layout_marginTop="25dp"
 android:text="Content 8"
 android:textColor="#000000"
 android:textSize="20sp" />
 </LinearLayout>

Khi đó file scrollable_main.xml còn lại như sau :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/container"
 android:layout_width="match_parent"
 android:layout_height="match_parent" >
<!-- Header aligned to top -->
<include layout="@layout/header" />
<!-- Footer aligned to bottom -->
<include layout="@layout/footer" />
<!-- Scrollable Content below header and above footer -->
<ScrollView
 android:id="@+id/container"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:layout_above="@id/footer"
 android:layout_below="@id/header"
 android:background="#E6F8E6" >
<!-- Content will go here -->

 </ScrollView>
</RelativeLayout>

Ta có thể chèn phần nội dung vào file xml bằng cách include file content.xml hoặc bằng code. Ở đây tôi giới thiệu cách chèn bằng code như sau :

Trong file code activity ScrollableActivity.java :

package quyetdv.android.qheaderfooter;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.Window;
import android.widget.ScrollView;
public class ScrollableContentActivity extends Activity {
@Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.scrollable_main);
// Inflate the content into the container
 ScrollView container = (ScrollView) findViewById(R.id.container);
 getLayoutInflater().inflate(R.layout.content, container);
}
}

Bạn có thể tải source của ví dụ trong bài viết tại đây.

Advertisements
Categories: Android
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: