Wednesday 27 August 2014

Toast và khái niệm Custom View Basic trong Android

Ở bài viết hôm trước mình có giới thiệu cho các bạn các mà chúng ta hiển thị dữ liệu bằng Toast. Có thể nói Toast là một trong những tiện ích trong Android được sử dụng phổ biến khi chúng ta muốn thông báo một thông tin nhắn tới người dùng, ví dụ như bạn sửa xóa dữ liệu thành công, thông báo việc mất kết nối mạng...

Với một Toast thông thường nó sẽ có dạng một khối chữ nhật tối màu và text bên trong nó

Đơn giản chỉ vậy thôi.
Cấu trúc của việc tọa một Toast trong Android cũng cực kỳ đơn giản.

Toast.makeText(context, text, duration).show();

Để taọ một Toast như trên ta cú pháp như sau


Toast.makeText(MainActivity.this, "Toast Notification",
Toast.LENGTH_SHORT).show();

Rất đơn giản phải không nào. Giờ mình sẽ giải thích các tham số có trong đoạn code trên
Đầu tiên là đối tượng Context ở đây là this vì Context trong Android là một interface global như ở những bài trước mình cũng đã giới thiệu Context, tiếp đến là thông điệp bạn muốn hiển thị kiểu String, tiếp tới là thời gian mà Toast show lên cho chúng ta thấy, ở đây mình đặt là Toast.LENGTH_SHORT ngoài ra còn có thể đặt là Toast.LENGTH_LONG và cuối cùng chúng ta sẽ gọi hàm show để hiện thị Toast lên.

Nếu các bạn truyền tham số thứ 2 là một Number thì bạn cần phải ép kiểu nó về kiểu String đơn giản nhất là hãy nối nó với một String rỗng như 15 + "";. OK rất đơn giản phải không nào.

Tiếp theo mình sẽ giới thiệu với các bạn khái niệm về tùy biến View trong Android. Ở đây mình sẽ tùy biến Toast để các bạn dễ hiểu hơn. Tùy biến giao diện là cách bạn không dùng view mặc định của Android mà bạn sẽ biến nó thành giao diện khác mặc dù chức năng vẫn như vậy, ví dụ Android chỉ hộ trợ ListView chứa các thành phần cơ bản là Text nhưng trong một số yêu cầu chúng ta cần phải tùy biến nó có cả Image, TextView, Button vvv. Thì chúng ta cần tùy biến ListView, ở trong những bài sau khi lượng kiến thức các bạn nắm được khá rồi mình sẽ hướng dẫn các bạn làm điều này, nó cũng không quá khó để làm, nhưng cũng có nhiều yếu tố bất ngờ khi mà bạn làm với nó...

Tiếp tục mình sẽ sẽ hướng dẫn các bạn tùy biến Toast. Để tùy biến Toast các bạn hãy mở Project của bài lần trước là ChangeActivityAndGetInfor và chúng ta sẽ thao tác trên đó.
Để các bạn tiện theo dõi hướng dẫn ở dưới mình sẽ show trước cấu trúc thư mục và những gì cần chú ý cho các bạn thấy trước

Đầu tiên các bạn hãy thêm một button trong file main_activty.xml với nội dung như sau

<Button
        android:id="@+id/btnShowToast"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btnChangeActivity"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="27dp"
        android:text="Show Toast" />


Tiếp tới ở trong thư mục res của Project các bạn hãy tọa một thư mục có tên là drawable nơi chúng ta sẽ chứa các drawable riêng của chúng ta tạo ra. Tiếp đó các bạn hãy tạo tiếp một file xml trong thư mục đó có tên là toast_bg.xml với nội dung như sau

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="#3498db" />

    <corners android:radius="50dp" />

</shape>

Nói thêm khi các bạn tạo file xml trong thư mục nào(nhấn vào thư mục đó và phải chuột chọn new->xml file) thì trình Ecllipse sẽ tự động đưa cho chúng ta những view tương ứng giả sử khi tạo một file xml trong thư mục drawable.


Nhìn vào đoạn code trên, chúng ta sẽ tạo ra một drawable là một hình chữ nhật với thuộc tính là android:shape="rectagnle". Để tạo màu nền cho hình chữ nhật chúng ta cần sử dụng thuộc tính là solid, để bo tròn các góc của một hình chữ nhật chúng ta cần sử thuộc tính là corners  với giá trị android:radius. Bạn có thể bo gốc trên bên trái, hoặc dưới bên phải vvv. Nhấn ctrl + space bạn sẽ thấy rõ hơn. Nếu bạn nào đã từng học css thì ở đây việc bo tròn các góc cũng như set color cũng tương tự.

Tiếp tục trong thư mục layout chúng ta tạo một layout file.xml có tên là toast_layout_demo.xml có nội dung như sau

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/txtToast"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/toast_bg"
        android:paddingBottom="15dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="15dp"
        android:text="Toast demo"
        android:textColor="#FFFFFF" />

</LinearLayout>

Bên trong chúng ta sẽ đặt một TextView bên trong với những thuộc tính như trên, các bạn chú ý dòng
android:background="@drawable/toast_bg"
Đây chính là việc chúng ta sẽ set background cho TextView là hình chữ nhật chúng ta vừa tạo ra. Sau khi thao tác xong hãy chuyển sang tab Graphical Layout bạn sẽ thấy chúng ta sẽ được giao diện như sau:


OK tiếp tới hãy quay trở về với file MainActivity.java chúng ta sẽ thêm một hàm tạo tùy biến toast và hiển thị nó khi nhấn vào button Show Toast

public class MainActivity extends Activity {

private final int REQUEST_CODE = 1;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button btnChangeActivity = (Button) findViewById(R.id.btnChangeActivity);
btnChangeActivity.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Intent intent = new Intent(MainActivity.this,
InformationActivity.class);
startActivityForResult(intent, REQUEST_CODE);
}
});

Button btnShowToast = (Button) findViewById(R.id.btnShowToast);
btnShowToast.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
createCustomToast();
/*Toast.makeText(MainActivity.this, "Toast Notification",
Toast.LENGTH_SHORT).show();*/

}
});

}

private void createCustomToast() {
Toast toast = new Toast(getApplicationContext());
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = inflater.inflate(R.layout.toast_layout_demo, null);
/*View view = this.getLayoutInflater().inflate(R.layout.toast_layout_demo,
null);*/
TextView txtToast = (TextView) view.findViewById(R.id.txtToast);
txtToast.setText("Toast Notification");
toast.setView(view);
//toast.setGravity(Gravity.NO_GRAVITY, 0, 0);// vi tri trung tam
toast.setDuration(600);
toast.show();
}

Các bạn hãy để ý vào hàm createCustomToast chúng ta sẽ tạo một new instance của Toast và tiếp tới get Layout chúng ta vừa tạo ra là toast_layout_demo.xml. Để get layout các bạn cần sử dụng đối tượng là LayoutInflater có rất nhiều cách đề get layout, ở đây cách phổ biến nhất để chúng ta sử dụng như ở trên ngoài ra các bạn có thể sử dụng ngay phương thức getLayoutInflater trong trường hợp bạn đang ở trong một Activity hoặc một Fragment(getActivity().getLayoutInflater()) nhưng bản chất của nó là Context.getLayoutInflater().inflater(....). Khi tìm hiểu và làm việc nhiều hơn bạn sẽ thấy điều này.

Sau khi get được layout chúng ta vừa tạo chúng ta cần truy xuất tới TextView trong layout đơn giản các bạn sử dụng phương thức  TextView txtToast = (TextView) view.findViewById(R.id.txtToast); như mọi lần chúng ta thường làm. Để sử dụng view cho Toast các bạn cần sử dụng phương thức setView. Tiếp tới set thời gian Toast hiển thị ở đây là mili giây với độ dài là 600ms và cuối cùng là hiển thị Toast bình thường.

Khi chạy chương trình chúng ta được và click vào button Show Toast


Ngoài vị trí mặt định các bạn có thể set Toast hiển thị ở vị trí trung tâm của màn hình bằng cách set Gravity nó còn có rất nhiều vị trí khác hãy Ctrl + space và bạn sẽ thấy.
bỏ commnet dòng
toast.setGravity(Gravity.NO_GRAVITY, 0, 0);// vi tri trung tam
Khi chạy chương trình chúng ta được

Vậy là bài giới thiệu về Toast cơ bản cũng như tùy biến giao diện với Toast tới đây là kết thúc, hy vọng các bạn hiểu phần nào về công việc tùy biến giao diện, một trong những việc hay làm trong quá trình phát triển ứng dụng Android. Hãy chia sẻ bài viết nếu bạn thấy có ích cho người khác, nếu có thắc mắc, góp ý gì hãy comment phía dưới nhé :) mình sẽ giải đáp nếu có thể :).


No comments :

Post a Comment