Android Cơ Bản - Ứng Dụng Quản Lý Sinh Viên P2

Ở phần trước bạn đã tìm hiểu sơ lược về Android rồi. Các bước chuẩn bị, phân tích yêu cầu đã làm rồi và bạn đã biết ứng dụng mình chuẩn bị viết gồm những chức năng gì, để làm gì rồi. Bài hôm nay mình sẽ hướng tới thiết kế giao diện cho ứng dụng, hiển thị những thành phần giao diện(Phần hôm nay chưa xử lý nền bên dưới gì hết).
1. Tạo Project
Nếu ai chưa biết tạo Project thì xem lại bài này
Mình tạo Project
- Tên: QuanLySinhVien.
- package: tutsmodel.info.quanlysinhvien
- target: 19
Sau khi tạo xong đợi một lúc để nó laod những bộ thư viện lên. Để thiết kế được giao diện thì bạn mở file res/layout/activity_main.xml. File xml nằm trong thư mục layout là dùng để kết nối những view được định nghĩa sẵn với file Java. Thực chất khi chạy một ứng dụng android thì File Java chạy và load thành phần trong file xml lên màn hình.

Bạn để ý vị trí số 1:
Hiển thị các View được sdk định nghĩa sẵn. Giờ mình chỉ việc sử dụng bằng cách chọn 1 Button kéo vào vị trí 2 là tạo được một Button.
Giờ mình giải thích một số thành phần phổ biến được hiển thị ở vị trí 1 nha:
Trong thanh này các thành phần được phân ra từng nhóm rõ ràng như:
Form widgets: các thành thao tác với form
- Button: là một cái nút khi click vào sẽ thực hiện một công việc được định nghĩa sẵn cho button đó
- Textview: như một cái nhãn (Giống như label trong Java) dung để hiển thị dạng chuôi lên màn hình.
- Thành phần lực chọn như Spinner, Radio button, chẹckbox.
TextField là một cái ô để nhập ký tự, chuỗi, trong đó có nhiều định dạng cho ta lựa chọn như nhập Email, Number, Text, password...
Layout: chứa các định dạng layout như
- LinearLayout: đây là dạng layout được sử dụng phổ biến nhất, cho phép sắp xếp các thành phần theo chiều dọc hoặc chiều ngang.
- Tablelayout: Cho phép sắp xếm các thành phần theo cột và dòng.
- Gridlayout: Layout dùng để hiển thị các thành phần theo dạng lưới, như table nhưng thành phần không nhất thiết được sắp xếp theo dòng và cột.
- RelativeLayout: Vị trí của một thành phần phụ thuộc vào những thành phần xung quanh. Ví dụ khi kéo thả một Button vào trong đó thì nó sẽ ghi nhận khoảng cách từ Button đến mép trái, mép phải.. của ứng dụng, Kéo thả tiếp một Button khác thì button sau này sẽ ghi nhận vị trí là khoảng cách đến Button 1, đến mép trái, mép phải...
Composite: Chứa hỗn tạp nhiều thành phần, trong nhóm này mình chỉ để ý đến
- ListView: Hiển thị danh sách theo dạng từng dòng, mỗi dòng là một nội dung hiển thị (Một đối tượng)
- GridView: hiển thị danh sách theo dạng lưới, mỗi dòng (hàng) có nhiều nội dung (Nhiều đối tượng) khác nhau.
Images & Media
- ImageView: Hiển thị hình ảnh từ thẻ nhớ hoặc từ thử mục res/drawable
Đó là những cái sử dụng thường xuyên nhất trong thiết kế giao diện.

SDK phân từng từng nhóm như thế là muốn cho chúng biết mỗi thành phần trong nhóm có cách sử dụng, tương tác gần giống nhau. Thuộc tính của chúng cũng gần giống nhau. Cho nên khi bạn biết sử dụng 1 thành phần trong nhóm thì có thể ứng dụng cách đó cho những thành phần khác trong nhóm đó. (Có khác vài chỗ nhưng không đáng kể)

Giới thiệu sơ sơ thế là đủ sử dụng rồi. Giờ mình bắt đầu vào thực hành rồi. Mình bắt đầu cho "Ứng dụng Quản lý sinh viên" từ thành phần listView. Những thành phần kia tìm hiểu phần phía sau.
Đầu tiên chọn nhóm Composite giữ vào thành phần listView kéo vào vị trí số 2. Vì ListView chưa có nội dung hiển thị nên bạn sẽ không thấy được. Muốn biết đã có listView chưa bạn nhìn vào

Nếu hiển thị như thế là có rồi. Chưa thì kéo thả lại.
Bạn muốn xem code nó tạo ra như thế nào thì ở vị trí thứ 3 hình 1 chọn tag activity_main.xml\ là sẽ thấy.
Hiện tại là listview chưa có nội dung nên khi chạy trên máy ảo bạn cũng chẳng thấy gì. Thế nên bước tiếp theo mình sẽ đổ dữ liệu lên listview. Bạn mở file Main.java (MainActivity.java) nằm ở đường dẫn src/tutsmodel.info.quanlysinhvien có nội dung mặc định như sau (Có thế thấy một số thành phần như OptionMenu...tùy theo lúc đầu bạn chọn lay out nào. Mình chọn Empty layout)

package tutsmodel.info.quanlysinhvien;

import android.app.Activity;
import android.os.Bundle;

public class Main extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
 }
}

trong đó bạn thấy có hàm onCreate. Hàm này sẽ là hàm chạy đầu tiên của úng dụng. Trong hàm này bạn thấy có phương thức setContentView(R.layout.activity_main); chính là phương thức để chọn giao diện của file xml nào để load lên màn hình.
Giới thiệu thế thôi. Giờ bắt đầu load dữ liệu lên listview nè.
Đầu tiên bạn tạo một cái mảng Array.

String name[] = {"Java","Android","PhoneGap","Node Js","TutsModel"};

đặt trong hàm onCreate sau phương thức setContentView
Vì trên File Xml có nhiều thành phần nên trước khi thao tác với thành phần nào thì bắt buộc phải xác định thành phần đó trên giao diện bằng phương thức findViewById(id) trước.

ListView list = (ListView) findViewById(R.id.listView1);

Với listView1 là id của list View.
bạn muốn biết thì chuyển qua tab code của file xml nhìn thấy dòng android:id="@+id/listView1" thì listView1 chính là id của ListView. Id này được quản lý bởi file gen/tutsmodel.info.quanlysinhvien/R.java

Thêm dòng lệnh sau. Dưới hoặc trên dòng lệnh tạo array nhưng bắt buộc phải nằm sau phương thức setContentView vì cứ tưởng tượng như thế này. Muốn biết được cái tủ lạnh nằm ở vị trí nào trong nhà thì mình phải vào trong nhà trước mới xác định được. Cái này cũng thế. Muốn xác định được thành phần giao diện thì phải load cái file layout xml chứa thành phần đó trước đã.
Tạo Adapter và kết nối Adapter với listView

// tao adapter
 ArrayAdapter< string > adapter = 
    new ArrayAdapter< string >(this, android.R.layout.simple_list_item_1,name);
 // dat adapter cho list
 list.setAdapter(adapter);

trong đó android.R.layout.simple_list_item_1 là một dạng layout mà SDK cung cấp.
Adapter như một công cụ chuyển đổi kiểu dữ liệu để sử dụng cho phù hợp.
this context (vung mình đang thao tác). Mình đang thao tác ở file Main.java chính là đang thao tác trên nó nên đưa vào this là nó hiểu
name chính là mảng name mình tạo ở trên. Thế là xong phần đưa dữ liệu lệnh listView. Giờ bạn nhìn lại code đầy đủ

package tutsmodel.info.quanlysinhvien;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class Main extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  // tao mang du lieu de hien thi len listview
  String name[] = {"Java","Android","PhoneGap","Node Js","TutsModel"};
  // xac dinh control tren giao dien
  ListView list = (ListView) findViewById(R.id.listView1);
  // tao adapter ket noi array voi listview
  ArrayAdapter< string > adapter = 
    new ArrayAdapter< string >(this, android.R.layout.simple_list_item_1,name);
  // dat adapter cho list
  list.setAdapter(adapter);
 }
}

Cuối cùng Chạy thử và kết quả

Bài này tìm hiểu đến đây thôi. Bài sau chúng ta tiếp tục tìm hiểu về giao diện
Source code: Download