openplanning

Hướng dẫn và ví dụ Android ImageButton

  1. Android ImageButton
  2. ImageButton Styles
  3. ImageButton Event

1. Android ImageButton

Trong Android, ImageButton là một điều khiển giao diện người dùng (User interface control), nó hiển thị như một button với hình ảnh, và cho phép người dùng nhấp (click) vào để thực hiện một hành động.
ImageButton là một lớp con của ImageView, vì vậy bạn có thể sét đặt Icon cho nó thông qua thuộc tính app:srcCompat. Chú ý, khác với Button, bạn không thể hiển thị một văn bản trên ImageButton.
<ImageButton
    android:id="@+id/imageButton"
    app:srcCompat="@drawable/icon_feel_good"
    ... />
Có một vài loại button khác mà bạn có thể tham khảo thêm trong các bài viết dưới đây:
Với mã Java, có một vài phương thức giúp bạn sét đặt Icon cho ImageButton, tất cả các phương thức này đều được thừa kế từ ImageView.
  • setImageBitmap(Bitmap bitmap)
  • setImageDrawable(Drawable drawable)
  • setImageIcon(Icon icon)
  • setImageResource(int resId)
  • setImageURI(Uri uri)

2. ImageButton Styles

Thuộc tính style là một tùy chọn của ImageButton, nó cho phép bạn sét đặt kiểu dáng cho ImageButton. Có một vài kiểu dáng sẵn có trong thư viện của Android mà bạn có thể sẵn sàng sử dụng.
<ImageButton
    android:id="@+id/imageButton"
    style="@android:style/Widget.Holo.ImageButton"
    app:srcCompat="@drawable/icon_feel_good"
    ... />
  • style="@style/Widget.AppCompat.ImageButton"
  • style="@android:style/Widget.Holo.ImageButton"
  • style="@android:style/Widget.ImageButton"
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView11"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Widget.AppCompat.ImageButton (Default)"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageButton
        android:id="@+id/imageButton11"
        style="@style/Widget.AppCompat.ImageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView11"
        app:srcCompat="@drawable/icon_feel_good" />

    <TextView
        android:id="@+id/textView12"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Widget.Holo.ImageButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageButton11" />

    <ImageButton
        android:id="@+id/imageButton12"
        style="@android:style/Widget.Holo.ImageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView12"
        app:srcCompat="@drawable/icon_feel_good" />

    <TextView
        android:id="@+id/textView13"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Widget.ImageButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageButton12" />

    <ImageButton
        android:id="@+id/imageButton13"
        style="@android:style/Widget.ImageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView13"
        app:srcCompat="@drawable/icon_feel_good" />

</androidx.constraintlayout.widget.ConstraintLayout>

3. ImageButton Event

Về cơ bản ImageButtonButton đều có các sự kiện giống nhau, bạn có thể tham khảo bài viết về Button để tìm hiểu về các sự kiện này.
Các sự kiện của ImageButton, Button:
  • button.setOnTouchListener(View.OnTouchListener)
  • button.setOnClickListener(View.OnClickListener)
  • button.setOnLongClickListener(View.OnLongClickListener)
  • button.setOnContextClickListener(View.OnContextClickListener);
  • ...

Các hướng dẫn lập trình Android

Show More