Hình ảnh là đối tượng được sử dụng rất tích cực trong các ứng dụng hiện đại. Trong phần này chúng ta sẽ sử dụng một dạng resource có tên drawable. Drawable là một khái niệm mà Android dùng để nói về các resource liên quan đến hình ảnh, bao gồm cả các ảnh bitmap như PNG/JPG, các ảnh vector, hay các ảnh được dựng bằng XML,...
Tổ chức hình ảnh trong res/
Có hai loại thư mục con của res/ được dùng để tổ chức các hình ảnh, đó là drawable-xxx/ và mipmap-xxx/ như hình dưới:
ThS. Bùi Trung Úy 84 Trong Android Studio, để tạo thư mục drawable-xxx hay mipmap-xxx thích hợp
để chứa hình ảnh, ta thực hiện như sau: click phải chuột trên thư mục „res‟ chọn
„Android Resource Directory‟, sau đó có thể chọn các tùy chọn như hình dưới đây:
Việc vì sao để các ảnh vào trong các cấu trúc thư này, nó tùy thuộc vào mật độ kích thước màn hình của điện thoại chạy ứng dụng, nhưng vì sao mà lại có tới hai loại
thư mục drawable và mipmap. Trước kia Android chỉ cung cấp cho chúng ta drawable
là thư mục duy nhất để chứa các hình ảnh bitmap. Trong các phiên bản mới Andoird cung cấp thêm cách thức chứa các hình ảnh là mipmap, và thư mục này chủ yếu chỉ
ThS. Bùi Trung Úy 85
Truy xuất đến hình ảnh
Cũng giống như các resource khác, có hai hướng để các bạn truy xuất đến một ảnh
bitmap, đó là từ bất kỳ file XML nào, hoặc là từ Java code.
Truy xuất từ XML
Từ bất kỳfile XML nào, như là các file layout hay file Manifest, bạn truy cập đến hình ảnh bằng cách gọi @drawable/<tên file> hoặc @mipmap/<tên file> tùy theo ảnh
đó được để trong drawable hay mipmap. Ví dụ: <ImageView android:layout_width="@dimen/icon_width" android:layout_height="@dimen/icon_height" android:layout_centerHorizontal="true" android:layout_marginTop="@dimen/padding_medium" android:scaleType="fitCenter" android:src="@drawable/saigon" />
Với code trên, bạn có thể thấy rằng, khi truy xuất đến ảnh bitmap, sẽ không có thông tin về định dạng ảnh, như .png hay .jpg hay .gif mà chỉ cần viết @drawable/saigon. Và như vậy thì có nghĩa là, bạn sẽ không thể để hai ảnh có cùng
tên nhưng khác định dạng vào trong cùng một project, vì khi gọi đến chúng ở file XML, hệ thống sẽ không biết bạn đang ám chỉ loại ảnh nào.
Truy xuất từ Java code
Từ Java code, để gọi đến ảnh bitmap này ta có thể sử dụng cú pháp như sau:
R.drawable.<tên file>hoặc R.mipmap.<tên file>, tùy theo ảnh đó được để trong drawable hay mipmap.
imageView.setImageResource(R.drawable.saigon);
Thực hành với drawable
Tiếp theo, chúng ta sẽ thực hiện một dự án nhỏđể tìm hiểu cách hiển thị ảnh trong Android sử dụng hai đối tượng chính là ImageView và Radio Button. Dự án sẽ có bốn RadioButton hiển thị tên của 4 thành phố, khi người dùng click chọn 1 radio, thì hình
ảnh của thành phốđó sẽ hiển thịởbên dưới.
Trước tiên ta chuẩn bị một sốảnh cho dự án này
ThS. Bùi Trung Úy 86
Thiết kế giao diện của activity cho ví dụ này theo bố cục LinearLayout gồm 1
TextView để hiển thị tiêu đềảnh, một RadioGroup gồm 4 RadioButton để hiển thị tên thành phố và một ImageView để hiển thịảnh thành phốđược chọn. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:background="#c2c2c2" > <TextView android:id="@+id/text1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Image of 4 cities in Vietnam"/> <RadioGroup android:id="@+id/rdbGp1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:orientation="horizontal" > <RadioButton android:id="@+id/rdDalat" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="onRadioClick" android:text="Dalat" /> <RadioButton android:id="@+id/rdDanang"
ThS. Bùi Trung Úy 87 android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="onRadioClick" android:text="Danang" /> <RadioButton android:id="@+id/rdHanoi" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="onRadioClick" android:text="Hanoi" /> <RadioButton android:id="@+id/rdbSaigon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="onRadioClick" android:text="Saigon" /> </RadioGroup> <ImageView android:id="@+id/imageView1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scaleType="fitCenter" /> </LinearLayout>
Mã nguồn của activity này như sau:
package com.example.helloandroid; import android.content.Context; import android.content.res.TypedArray; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.widget.Gallery; import android.widget.ImageView; import android.widget.Toast;
public class GalleryActivity extends AppCompatActivity {
private ImageView imageView1; @Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(R.layout.activity_gallery);
imageView1 = (ImageView) findViewById(R.id.imageView1); }
ThS. Bùi Trung Úy 88
public void onRadioClick(View v) {
switch ( v.getId()) { case R.id.rdDalat:
imageView1.setImageResource(R.drawable.dalat);
Toast.makeText(getBaseContext(), "City of Dalat", Toast.LENGTH_SHORT).show(); break;
case R.id.rdDanang:
imageView1.setImageResource(R.drawable.danang);
Toast.makeText(getBaseContext(), "City of Danang", Toast.LENGTH_SHORT).show(); break;
case R.id.rdHanoi:
imageView1.setImageResource(R.drawable.hanoi);
Toast.makeText(getBaseContext(), "City of Hanoi", Toast.LENGTH_SHORT).show(); break;
case R.id.rdbSaigon:
imageView1.setImageResource(R.drawable.saigon);
Toast.makeText(getBaseContext(), "City of Saigon", Toast.LENGTH_SHORT).show(); break;
} } }
Sau khi chạy ứng dụng, ta sẽ quan sát thấy 4 radio ở phía trên cùng của activity, bạn có thể click chọn thành phố muốn xem, hình ảnh thành phố được chọn sẽ được hiển thịở bên dưới.
ThS. Bùi Trung Úy 89
Ta cần giải thích thêm một chút về đoạn mã nguồn của Activity trên. Để nhận sự
kiện người dùng khi click vào radio button, bạn khai báo và viết thêm hàm onRadioClick(). Sau đó, trên cửa sổ thiết kế giao diện bạn gắn thuộc tính onClick của các RadioButton là hàm này.
Khi click chọn một radio, ta sẽ hiển thị hình ảnh của thành phốở phía dưới, để làm việc này, ta thực hiện gắn hình ảnh cho ImageView như sau:
//---display the images selected---
ThS. Bùi Trung Úy 90
Chương 4. FRAGMENT VÀ GIAO DIỆN NÂNG CAO
Trong chương này, chúng ta sẽ tìm hiểu về khái niệm phân mảnh giao diện, cách
sử dụng chúng để tạo những giao diện phức tạp và một số đối tượng điều kiển hộp
thoại và điều kiển hiển thị dạng danh sách.