Lập Trình Android - ImageButton

ImageButton trong Android

ImageButton là cách sử dụng một hình ảnh như một nút bấm. Theo mặc định nó trông giống như một Button bình thường có background chuẩn.

Một hình ảnh của một nút được định nghĩa trong một tập tin xml bằng cách sử dụng thuộc tính src hoặc trong lớp java bằng cách sử dụng phương thức setImageResource ().

Chúng tôi cũng có thể thiết lập một hình ảnh hoặc tùy chỉnh vẽ dưới nền của nút hình ảnh.

Lớp ImageButton là lớp con của ImageView

Code Button trong XML

<ImageButton android:id="@+id/imgbtnSimple" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/home" /><!-- Set image cho ImageButton -->

Thuộc tính thường dùng của ImageButton

Bây giờ chúng xem một số thuộc tính hay sử dụng trong ImageButton trong tập tin XML

1. android:id: Là thuộc tính duy nhất của ImageButton trong project Android. Xem ví dụ sau:

<ImageButton android:id="@+id/imgbtnSimple" android:layout_width="wrap_content" android:layout_height="wrap_content"/>

2. android:src: là thuộc tính chứa tập tin hình ảnh cần hiển thị. Chúng ta cũng có thể tạo hình tại chế độ thiết kế:

<ImageButton android:id="@+id/imgbtnSimple" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/home" /><!-- Set image cho ImageButton -->

Trong Java Class:

Chúng ta cũng có thể set hình ảnh trong Java Class bằng cách sử dụng phương thức setImageResource()

/*Add in Oncreate() funtion after setContentView()*/ ImageButton imgbtnSimple= (ImageButton)findViewById(R.id.imgbtnSimple); imgbtnSimple.setImageResource(R.drawable.home); //set the image programmatically

3. android:background: Thuộc tính này xác định màu nền cho ImageButton.

<ImageButton android:id="@+id/imgbtnSimple" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/home" android:background="#000"/><!-- black background color for image button-->

Trong Java Class

Chúng ta cũng có thể set màu nền cho đối tượng ImageButton trong Java Class:

/*Add in Oncreate() funtion after setContentView()*/ ImageButton imgbtnSimple= (ImageButton) findViewById(R.id.imgbtnSimple); imgbtnSimple.setBackgroundColor(Color.BLACK); //set black background color for image button

4. android:padding: Thuộc tính này xác định khoảng cách từ đường viền của ImageButton với nội dung nó chứa: left, right, top or bottom.

• paddingRight: set khoảng cách bên phải của ImageButton .
• paddingLeft: set khoảng cách bên trái của ImageButton .
• paddingTop: set khoảng cách phía trên của ImageButton .
• paddingBottom: set khoảng cách phía bên dưới của ImageButton .
• padding: set khoảng cách tất cả 4 phía của ImageButton .

Ví dụ: chúng ta xác định padding=30dp từ mọi phía của ImageButton

<ImageButton android:id="@+id/simpleImageButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#000" android:src="@drawable/home" android:padding="30dp"/><!-- set 30dp padding from all the sides of the view-->

Ví dụ: Trong ví dụ này chúng ta sẽ làm app gồm có 2 ImageButton. Khi người sử dụng click lên ImageButton sẽ hiển thị thông báo, thông qua việc sử dụng đối tượng TOAST (đối tượng này sẽ học trong những bài sau) . Tiến hành tạo project, vào thư mục res /layout -> activity_main.xml thiết kế giao diện sau:

Bước 1: Tạo một project tên là TextView: File->New->Android Application Project điền các thông tin ->Next ->Finish

Bước 2: Download 2 hình và lưu vào thư mục trong res/drawable trong project của bạn:

Bước 3: Click chuột phải lên thư mục Drawable -> Tạo mới một tập tin resource tên là custom_image_buttton.xml sau đó thêm code sau.

Trong bước này ta dùng 2 thuộc tính solid và corner. Thuộc tính solid xác định màu của ImageButton, corner bo góc tròn cho ImageButton.

?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#900" /><!-- background color for imagebutton--> <corners android:radius="20dp" /><!-- round corners for imagebutton--> </shape>

Bước 4: Mở res -> layout -> xml (hoặc) activity_main.xml và thêm code, chúng ta sẽ tạo các 2 ImageButton sử dụng thuộc tính android:src trong Relative Layout.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="hiepsiit.com.imagebutton.MainActivity" > <ImageButton android:id="@+id/imgbtnHome" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/custom_image_button" android:src="@drawable/home" /> <ImageButton android:id="@+id/imgbtnHiepSiIt" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/imgbtnHome" android:layout_below="@+id/imgbtnHome" android:layout_marginTop="28dp" android:src="@drawable/hiepsiit" /> </RelativeLayout>

Bước 5: Mở app -> src ->MainActivity.java và thêm code. Trong code Java chúng ta set sự kiện Onclick cho 2 ImageButton.

package hiepsiit.com.imagebutton; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.View.OnClickListener; import android.widget.ImageButton; import android.widget.Toast; public class MainActivity extends Activity { ImageButton imgbtnHome, imgbtnHiepSiIt; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); imgbtnHome = (ImageButton) findViewById(R.id.imgbtnHome); imgbtnHiepSiIt= (ImageButton)findViewById(R.id.imgbtnHiepSiIt); imgbtnHome.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub Toast.makeText(getApplication(), "Bạn đang chọn nút Home", Toast.LENGTH_LONG).show(); } }); imgbtnHiepSiIt.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub Toast.makeText(getApplication(), "Bạn đang chọn nút Hiep Si IT", Toast.LENGTH_LONG).show(); } }); } }

Download ví dụ

Ứng dụng này được phát triển bởi adt bundle, android 4.2 sử dụng minimum sdk 11 and target sdk 21.

Kết quả khi chạy ứng dụng:

Click vào nút Home:

Click vào nút HiepSiIT: