Liên hệ
android java

ImageView và ImageButton trong Android

Sử dụng ImageView để hiện thị các hình ảnh trong lập trình Android, ImageButton nút bấm hiện thị ảnh, ảnh được thu phóng phù hợp với mục đích sử dụng, nguồn ảnh Bitmap hay Drawable

ImageView

ImageView là loại View dùng để hiện thị tài nguyên hình ảnh như các ảnh Bitmap, các ảnh Drawable. Nó cũng cung cấp các chức năng tùy biến khác nhau như đổ màu nhuộm (tint) vào ảnh, co kéo/cắt ảnh khi hiện thị trên View.

Triển khai hình XML ImageView

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher"
    />

Tài nguyên ảnh cần hiện thị gán vào thuộc tính android:src hoặc dùng phương thức phù hợp với loại ảnh hiện thị như: setImageBitmap(Bitmap bm), setImageDrawable(Drawable drawable), setImageResource(int resId), setImageURI(Uri uri)

Thay đổ tỷ lệ / căn chỉnh ảnh hiện thi trong ImageView

Thuộc tính android:scaleType dùng để thiết lập thu phóng ảnh, nhận các giá trị như: fitXY, center, fitXY ..., ví dụ như android:scaleType="center" hoặc code Java: imageView.setScaleType(ImageView.ScaleType.CENTER);

Giá trị Sử dụng
center ImageView.ScaleType.CENTER : Đặt ảnh vào giữa ImageView, không có thay đổi tỷ lệ ảnh.
centerCrop ImageView.ScaleType.CENTER_CROP: Đặt ảnh vào giữa ImageView, có thu phóng ảnh (nhưng giữ nguyên tỉ lệ cao / rộng) sao cho ảnh phủ kín hết cả ImageView (phần thừa bị cắt)
centerInside ImageView.ScaleType.CENTER_INSIDE: Đặt ảnh vào giữa ImageView, có thu phóng ảnh (nhưng giữ nguyên tỉ lệ cao / rộng) sao cho toàn bộ các phần của ảnh hiện thị trên ImageView.
fitCenter ImageView.ScaleType.FIT_CENTER: Đặt ảnh vào giữa ImageView, có thu phóng ảnh (nhưng giữ nguyên tỉ lệ cao / rộng) sao cho toàn bộ các phần của ảnh hiện thị trên ImageView.
fitEnd fitStart ImageView.ScaleType.FIT_END, ImageView.ScaleType.FIT_START: Co ảnh vừa View, vị trí ảnh ở cuối (ở đầu) ImageView
fitXY ImageView.ScaleType.FIT_XY: Co ảnh vừa khít cả chiều rộng và cao.

Ví dụ:

layout/activity_main.xml

<?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="horizontal">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="120dp"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textview"
            android:text=""
            android:gravity="center"
            android:textColor="#a72b2b"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/btn_center"
            android:text="center"
            android:textAllCaps="false"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/btn_centerCrop"
            android:text="centerCrop"
            android:textAllCaps="false"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/btn_centerInside"
            android:text="centerInside"
            android:textAllCaps="false"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/btn_fitCenter"
            android:text="fitCenter"
            android:textAllCaps="false"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/btn_fitEnd"
            android:text="fitEnd"
            android:textAllCaps="false"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/btn_fitStart"
            android:text="fitStart"
            android:textAllCaps="false"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/btn_fitXY"
            android:text="fitXY"
            android:textAllCaps="false"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>


    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:adjustViewBounds="true"
        android:background="#ec000000"
        android:scaleType="fitCenter"
        android:src="@drawable/butterfly" />

</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {
    ImageView imageView;
    TextView textView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = findViewById(R.id.image);
        textView = findViewById(R.id.textview);

        findViewById(R.id.btn_center).setOnClickListener(clickListener);
        findViewById(R.id.btn_centerCrop).setOnClickListener(clickListener);
        findViewById(R.id.btn_centerInside).setOnClickListener(clickListener);
        findViewById(R.id.btn_fitCenter).setOnClickListener(clickListener);
        findViewById(R.id.btn_fitEnd).setOnClickListener(clickListener);
        findViewById(R.id.btn_fitStart).setOnClickListener(clickListener);
        findViewById(R.id.btn_fitXY).setOnClickListener(clickListener);
    }

    View.OnClickListener clickListener = new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            ImageView.ScaleType scaletype = ImageView.ScaleType.CENTER;
            switch (view.getId())
            {
                case R.id.btn_center:
                    scaletype = ImageView.ScaleType.CENTER;
                    break;
                case R.id.btn_centerCrop:
                    scaletype = ImageView.ScaleType.CENTER_CROP;
                    break;
                case R.id.btn_centerInside:
                    scaletype = ImageView.ScaleType.CENTER_INSIDE;
                    break;
                case R.id.btn_fitCenter:
                    scaletype = ImageView.ScaleType.FIT_CENTER;
                    break;
                case R.id.btn_fitEnd:
                    scaletype = ImageView.ScaleType.FIT_END;
                    break;
                case R.id.btn_fitStart:
                    scaletype = ImageView.ScaleType.FIT_START;
                    break;
                case R.id.btn_fitXY:
                    scaletype = ImageView.ScaleType.FIT_XY;
                    break;

            }

            imageView.setScaleType(scaletype);
            textView.setText(((Button)view).getText());
        }
    };
}

Một số thiết lập với ImageView

android:adjustViewBounds nếu nhận giá trị true thì các ImageView tự động co biên vừa với ảnh. (cần có thiết lập chiều rộng hoặc cao là wrap_content)

Để gán ảnh từ tài nguyên trong ứng dụng:

imageView.setImageResource(R.drawable.image);

Để tải ảnh từ thiết bị:

//BitmapFactory.decodeFile("/sdcard/anh.png");
Bitmap bMap = BitmapFactory.decodeFile("đường_dẫn_đến_file_ảnh");
imageView.setImageBitmap(bMap);

Có thể nạp ảnh từ tài nguyên thành Bitmap rồi gán vào ImageView:

Bitmap bMap = BitmapFactory.decodeResource(getResources(), R.drawable.my_image);
imageView.setImageBitmap(bMap);

Lấy Drawable từ tài nguyên, rồi gán vào ImageView

Drawable drawable = AppCompatResources.getDrawable(this, R.id.imageresId);
imageView.setImageDrawable(drawable);

ImageButton

ImageButton kế thừa từ ImageView nó biểu diễn một nút bấm, nhưng có một chút khác với Button đã biết là nó hiện thị ảnh ở giữa nút bấm thay vì dòng chữ.

Ví dụ:

Có một background ba trạng thái: drawable/ps__button_instagram.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:dither="true">

    <item android:state_pressed="true"><shape>
            <gradient android:angle="270" android:endColor="#5f8aad"
                android:startColor="#33638b" />
            <stroke android:width="1dp" android:color="#185282" />

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

            <padding android:bottom="10dp" android:left="10dp"
                android:right="10dp" android:top="10dp" />
        </shape></item>
    <item><shape>
            <gradient android:angle="270" android:endColor="#33638b"
                android:startColor="#5f8aad" />

            <stroke android:width="1dp" android:color="#185282" />

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

            <padding android:bottom="10dp" android:left="10dp"
                android:right="10dp" android:top="10dp" />
        </shape></item>

</selector>

Có một ảnh drawable/xuanthulab.png

Tạo ra ImageButton như sau:

<ImageButton
    android:id="@+id/imagebutton"
    android:background="@drawable/ps__button_instagram"
    android:src="@drawable/xuanthulab"
    android:scaleType="fitCenter"
    android:adjustViewBounds="true"
    android:layout_width="150dp"
    android:layout_height="wrap_content" />

Vui lòng đăng ký ủng hộ kênh