Các view cơ bản

Phần này mô tả một số view cơ bản nhất thường được dùng để tạo nên giao diện

đồ họa cho ứng dụng Android, xét ví dụ ta có màn hình giao diện như dưới đây, trên

giao diện này gồm có một số các thành phần view cơ bản:

TextView

Như tên gọi của nó, TextView dùng để hiển thị đoạn văn bản (dạng chữ) lên màn hình. Đây là view đơn giản nhất và dùng rất nhiều trong Android.

<TextView

android:layout_width="fill_parent" android:layout_height="wrap_content”

android:text="@string/hello" />

Ngoài một số thuộc tính chung như layout_width, layout_height, bạn có thể lựa chọn tùy chỉnh kích thước font chữ (thường tính bằng sp – scalable pixel), loại font chữ kiểu chữ(in đậm, in nghiêng), số dòng tối đa để hiển thị văn bản…

EditText

Kế thừa từ lớp TextView, cho phép người dùng sửa được nội dung chữ trong nó.

Button và ImageButton

Dùng để hiển thị nút bấm lên màn hình. Sự kiện phổ biến nhất của nút bấm là sự

kiện onClick được sinh ra khi người dùng bấm lên nút bấm này. Điểm khác nhau giữa Button và ImageButton là Button dùng chữ làm nhãn chữ, còn ImageButton dùng ảnh.

ThS. Bùi Trung Úy 78

RadioButton và RadioGroup

RadioButton có 2 trạng thái là chọn và bỏ chọn, còn RadioGroup nhóm các RadioButton lại với nhau để đảm bảo cùng một lúc chỉ có tối đa một RadioButton trong nhóm có trạng thái chọn.

CheckBox, ToggleButton

Là loại nút bấm đặc biệt, có 2 trạng thái là bật (checked) và tắt (unchecked). Cách sử dụng các loại view cơ bản này ta xem ví dụcode dưới đây.

Với ví dụ màn hình giao diện trên, sau khi thiết kế ta có mã XML như sau:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <Button android:id="@+id/btnSave" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/save" android:onClick="btnSaved_clicked"/> <Button android:id="@+id/btnOpen" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Open" /> <ImageButton android:id="@+id/btnImg1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/enter_content" /> <EditText android:id="@+id/txtName" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <CheckBox android:id="@+id/chkAutosave" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Autosave" /> <CheckBox android:id="@+id/star" style="?android:attr/starStyle" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <RadioGroup android:id="@+id/rdbGp1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <RadioButton android:id="@+id/rdb1"

ThS. Bùi Trung Úy 79 android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Option 1" /> <RadioButton android:id="@+id/rdb2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Option 2" /> </RadioGroup> <ToggleButton android:id="@+id/toggle1" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>

Chạy ứng dụng với activity có layout như trên, ta sẽ thấy các view cơ bản này

được xếp từ trên xuống dưới theo thứ tự như trên (do nằm trong LinearLayout). Thử

thực hiện các thao tác chọn trên các nút ToggleButton, CheckBox và RadioButton ta sẽ thấy trạng thái chọn của chúng thay đỗi.

Ô nhập liệu (EditText) ởtrên được thiết lập chiều cao là “wrap_content” nên chiều cao của nó sẽđược tựđộng điều chỉnh khi nội dung bên trong thay đổi.

Thành phần RadioGroup có thuộc tính orientation là horizontal, cho phép xếp các RadionButton bên trong chiều ngang.

Mỗi view trong ví dụ trên đều được đặt tên (dùng thuộc tính android:id), tên này

được sử dụng trong mã nguồn để truy cập đến view tương ứng thông qua các hàm

như:

ThS. Bùi Trung Úy 80 Sau khi xác định được view này theo id trong mã nguồn, ta có thể thêm các hàm xử lý sự kiện cho chúng. Bây giờ, ta sẽ viết code xử lý sự kiên cho ví dụ trên:

package com.example.helloandroid; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.CheckBox; import android.widget.RadioButton; import android.widget.RadioGroup; import android.widget.Toast; import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity { @Override

protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main); //---Button---

Button btnOpen = (Button) findViewById(R.id.btnOpen); btnOpen.setOnClickListener(new View.OnClickListener() { public void onClick(View v) {

Toast.makeText(getBaseContext(), " Open button clicked", Toast.LENGTH_LONG).show(); }

});

//---CheckBox---

CheckBox checkBox = (CheckBox) findViewById(R.id.chkAutosave); checkBox.setOnClickListener(new View.OnClickListener()

{

public void onClick(View v) { if (((CheckBox)v).isChecked())

Toast.makeText(getBaseContext(), "CheckBox is checked", Toast.LENGTH_LONG).show(); else

Toast.makeText(getBaseContext(), "CheckBox is unchecked", Toast.LENGTH_LONG).show(); }

});

//---RadioButton---

RadioGroup radioGroup = (RadioGroup) findViewById(R.id.rdbGp1);

radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {

public void onCheckedChanged(RadioGroup group, int checkedId) { RadioButton rb1 = (RadioButton) findViewById(R.id.rdb1); if (rb1.isChecked())

Toast.makeText(getBaseContext(), "Option 1 checked!", Toast.LENGTH_LONG).show(); else

Toast.makeText(getBaseContext(), "Option 2 checked!", Toast.LENGTH_LONG).show(); }

});

//---ToggleButton---

ThS. Bùi Trung Úy 81

toggleButton.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) { if (((ToggleButton)v).isChecked())

Toast.makeText(getBaseContext(), "Toggle button is On", Toast.LENGTH_LONG).show(); else

Toast.makeText(getBaseContext(), "Toggle button is Off", Toast.LENGTH_LONG).show(); }

}); }

public void btnSaved_clicked (View view) {

Toast.makeText(getBaseContext(), "You have clicked the Save!", Toast.LENGTH_LONG).show(); }

}

ProgressBar

ProgressBar cho phép hiển thị thanh trạng thái “chờ đợi” khi có một tác vụ gì đó đang chạy, như khi có một tác vụ tải một tập tin chạy ngầm phía dưới. Ví dụdưới đây

minh họa cách sử dụng thanh tình trạng này.

Trong layout của Activity, thêm ProgressBar như sau:

Trong mã nguồn của Activity, ta có thể lấy tham chiếu và cập nhật lại trạng thái của progressBar sau mỗi bước thực hiện:

ProgressBar progressBar = (ProgressBar) findViewById(R.id.progressbar); progressBar.setMax(200);

//---do some work in background --- // Update the progress bar

progressBar.setProgress(progressStatus);

ThS. Bùi Trung Úy 82

Mặc định ProgressBar là thanh trạng thái không xác định (không có trạng thái cụ

thể) nên ta sẽ chỉ thấy hình tròn xoay xoay.

Ta có thểthay đổi giao diện của thanh trạng thái này theo các cách khác nhau, sử

dụng thuộc tính style="@android:style/Widget.ProgressBar.Horizontal" để biến thanh trạng thái thành dạng thanh chạy ngang có hiển thị phần chạy xong và phần còn lại:

<ProgressBar android:id="@+id/progressbar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:layout_marginBottom="5dp" android:progress="30" style="@android:style/Widget.ProgressBar.Horizontal" /> Seekbar

SeekBar là một lớp mở rộng từ ProgressBar nó có thêm một cái cần gạt. Người dùng có thể chạm vào cần gạt và kéo sang trái hoặc phải để thiết lập giá trị của tiến trình (progress) hoặc sử dụng các phím mũi tên để di chuyển cần gạt. Bạn cũng có thể

chạm vào thanh bên trái hoặc bên phải cần gạt để di chuyển nó.

Seekbar được thêm vào giao diện với XML như sau:

Sự kiện thường dùng trên seekbar:

// Sự kiện khi có sựthay đỗi trên seekbar

this.seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { int progress = 0;

// Khi giá trịprogress thay đổi.

@Override

public void onProgressChanged(SeekBar seekBar, int progressValue, boolean fromUser) { progress = progressValue;

ThS. Bùi Trung Úy 83

textView.setText("Progress: " + progressValue + "/" + seekBar.getMax()); Log.i(LOGTAG, "Changing seekbar's progress");

}

// Khi người dùng bắt đầu cử chỉ kéo thanh gạt.

@Override

public void onStartTrackingTouch(SeekBar seekBar) { Log.i(LOGTAG, "Started tracking seekbar"); }

// Khi người dùng kết thúc cử chỉ kéo thanh gạt.

@Override

public void onStopTrackingTouch(SeekBar seekBar) {

textView.setText("Progress: " + progress + "/" + seekBar.getMax()); Log.i(LOGTAG, "Stopped tracking seekbar");

} });

Ví dụ: Thiết kế giao diện ứng dụng như sau:

Tổng quan về cấu trúc dự án Android

Vòng đời của Activity (Activity Lifecycle)