Paskan Gambar di ImageButton di Android

147

Saya memiliki 6 ImageButton dalam aktivitas saya, saya mengatur gambar melalui kode saya di dalamnya (tidak menggunakan xml).

Saya ingin mereka menutupi 75% area tombol. Tetapi ketika beberapa gambar menutupi area yang lebih sedikit, beberapa terlalu besar untuk masuk ke dalam imageButton. Bagaimana mengubah ukuran dan menunjukkan secara terprogram? Di bawah ini adalah cuplikan layar

masukkan deskripsi gambar di sini di bawah ini adalah file 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="vertical"
    android:layout_marginBottom="5sp"
        android:layout_marginLeft="2sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"     >
   <LinearLayout
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">
        <ImageButton          

            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:id="@+id/button_topleft"
        android:layout_marginBottom="5sp"
        android:layout_marginLeft="2sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"
            />
        <ImageButton
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:id="@+id/button_topright"
    android:layout_marginBottom="5sp"
        android:layout_marginLeft="2sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"
            />
    </LinearLayout>
    <LinearLayout
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">

        <ImageButton
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:id="@+id/button_repeat"
    android:layout_marginBottom="5sp"
        android:layout_marginLeft="2sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"     
             />

              <ImageButton
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:id="@+id/button_next"
    android:layout_marginBottom="5sp"
        android:layout_marginLeft="2sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"     
             />

    </LinearLayout>    
   <LinearLayout
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">

        <ImageButton
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:id="@+id/button_bottomleft"
    android:layout_marginBottom="5sp"
        android:layout_marginLeft="2sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"                                 
             />
        <ImageButton
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:id="@+id/button_bottomright"
    android:layout_marginBottom="5sp"
        android:layout_marginLeft="2sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"                  
            />        
    </LinearLayout>        

</LinearLayout>

dan cuplikan myClass.java:

public void addImageButtons()
    {
        iB_topleft = (ImageButton) findViewById(R.id.button_topleft);
        iB_topright = (ImageButton) findViewById(R.id.button_topright);
        iB_bottomleft = (ImageButton) findViewById(R.id.button_bottomleft);
        iB_bottomright = (ImageButton) findViewById(R.id.button_bottomright);
        iB_next = (ImageButton) findViewById(R.id.button_next);
        iB_repeat = (ImageButton) findViewById(R.id.button_repeat);
    }

    public void setImageNextAndRepeat()
    {

    iB_topleft .setImageResource(R.drawable.aa);
        iB_topright.setImageResource(R.drawable.bb);   

    iB_bottomleft.setImageResource(R.drawable.cc);
        iB_bottomright.setImageResource(R.drawable.dd);   

        iB_next.setImageResource(R.drawable.next);
        iB_repeat.setImageResource(R.drawable.repeat);      
    }

— RDX
sumber

2

sudahkah Anda memeriksa scaling-methods yang disediakan android? developer.android.com/reference/android/widget/…

— bofredo

393

Saya ingin mereka menutupi 75% area tombol.

Gunakan android:padding="20dp"(sesuaikan bantalan sesuai kebutuhan) untuk mengontrol seberapa banyak gambar diambil pada tombol.

tetapi ketika beberapa gambar menutupi area yang lebih sedikit, beberapa terlalu besar untuk masuk ke dalam imageButton. Bagaimana mengubah ukuran dan menunjukkan secara terprogram?

Gunakan android:scaleType="fitCenter"untuk memiliki skala Android gambar, danandroid:adjustViewBounds="true" untuk menyesuaikan batas mereka karena penskalaan.

Semua atribut ini dapat diatur dalam kode masing-masing ImageButton saat runtime. Namun, lebih mudah untuk mengatur dan mempratinjau dalam xml menurut saya.

Selain itu, jangan gunakan spuntuk apa pun selain ukuran teks, itu diskalakan tergantung pada preferensi ukuran teks yang ditetapkan pengguna, sehingga spdimensi Anda akan lebih besar dari yang Anda inginkan jika pengguna memiliki pengaturan teks "besar". Gunakan dpsebagai gantinya, karena tidak diskalakan oleh preferensi ukuran teks pengguna.

Berikut cuplikan tampilan setiap tombol:

    <ImageButton
        android:id="@+id/button_topleft"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="0dp"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:padding="20dp"
        android:scaleType="fitCenter" />

Tombol Contoh

— Steven Byle
sumber

@ Seven Byle Maaf atas respons yang terlambat, tetapi bagaimana saya bisa menerapkan yang sama tetapi untuk tata letak yang relatif?

— Kita Semua Gila Di Sini

8

Bagi mereka yang mencari, ImageButtonmetode setScaleType(ImageView.ScaleType.CENTER) setAdjustViewBounds(true)melakukan ini secara terprogram.

— ps95

Terima kasih banyak :)

— Pankaj Nimgade

1

Juga lakukan android: background = "@ null" untuk mencoba latar belakang default

— C.Ikongo

31

Saya menggunakan kode berikut di xml

android:adjustViewBounds="true"
android:scaleType="centerInside"

— Pratibha Sarode
sumber

2

Saya memiliki persegi panjang yang agak "datar" dan ini bekerja dengan baik bagi saya ... satu tangkapan: pastikan Anda menggunakan "android: src" daripada "android: background." +1.

— Johnny Wu

@ Johnny Terima kasih sobat untuk tipnya!

— Bishan

8

Coba gunakan android:scaleType="fitXY"di i-Imagebutton xml

— Tukar-iOS-Android
sumber

Meskipun ini bekerja dan ditingkatkan, tetapi saya ingin itu harus mencakup 75% area untuk visibilitas yang lebih baik.

— RDX

@PowerPC mencoba menggunakan framelayout, beri heigh dan lebar hingga 75% dan ke dalam tata letak frame gunakan imagebutton Anda dan atur jenis skala yang cocok untuk xy

— Swap-IOS-Android

framelayout untuk setiap imagebutton di dalam linearlayout? bisakah Anda mengklarifikasi

— RDX

@ PowerPC Saya tidak pernah menggunakan ini tetapi tautan ini dapat membantu Anda stackoverflow.com/questions/9946580/…

— Swap-IOS-Android

1

@ SvenvenByle Saya mempertimbangkan kedua pendekatan, tetapi karena saya ingin cakupan area 75%, solusi Anda bekerja dengan baik. Terima kasih.

— RDX

7

Saya menggunakan android:scaleType="fitCenter"dengan kepuasan.

— Seraphim
sumber

3

Lihat tautan di bawah ini dan cobalah untuk menemukan apa yang Anda inginkan:

ImageView.ScaleType CENTER Pusatkan gambar dalam tampilan, tetapi tidak melakukan penskalaan.

ImageView.ScaleType CENTER_CROP Skala gambar secara seragam (pertahankan rasio aspek gambar) sehingga kedua dimensi (lebar dan tinggi) gambar akan sama atau lebih besar dari dimensi tampilan yang sesuai (minus padding).

ImageView.ScaleType CENTER_INSIDE Skala gambar secara seragam (pertahankan rasio aspek gambar) sehingga kedua dimensi (lebar dan tinggi) gambar akan sama dengan atau kurang dari dimensi tampilan yang sesuai (minus padding).

ImageView.ScaleType FIT_CENTER Skala gambar menggunakan CENTER.

ImageView.ScaleType FIT_END Skala gambar menggunakan END.

ImageView.ScaleType FIT_START Skala gambar menggunakan START.

ImageView.ScaleType FIT_XY Skala gambar menggunakan FILL.

ImageView.ScaleType MATRIX Scale menggunakan matriks gambar saat menggambar.

https://developer.android.com/reference/android/widget/ImageView.ScaleType.html

— Nhat Dinh
sumber

1

Baru-baru ini saya mengetahui secara tidak sengaja bahwa karena Anda memiliki kontrol lebih besar pada ImageView sehingga Anda dapat mengatur onclicklistener untuk gambar di sini adalah contoh tombol gambar yang dibuat secara dinamis

private int id;
private bitmap bmp;
    LinearLayout.LayoutParams familyimagelayout = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.WRAP_CONTENT );

    final ImageView familyimage = new ImageView(this);
            familyimage.setBackground(null);
            familyimage.setImageBitmap(bmp);
            familyimage.setScaleType(ImageView.ScaleType.FIT_START);
            familyimage.setAdjustViewBounds(true);
            familyimage.setId(id);
            familyimage.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //what you want to do put here
                }
            });

— David
sumber

Itu bukan ide yang buruk. Saya suka.

— Boris Karloff

0

Ini bekerja dengan baik dalam kasus saya. Pertama, Anda mengunduh gambar dan mengganti namanya menjadi iconimage, menempatkannya di folder yang dapat digambar. Anda dapat mengubah ukuran dengan mengatur android:layout_widthatau android:layout_height. Akhirnya, kita punya

 <ImageButton
        android:id="@+id/answercall"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:src="@drawable/iconimage"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:scaleType="fitCenter" />

— Jame
sumber

0

Anda dapat membuat widget ImageButton Anda seperti yang saya lakukan. Dalam kasus saya, saya membutuhkan widget dengan ukuran ikon tetap. Mari kita mulai dari atribut khusus:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ImageButtonFixedIconSize">
        <attr name="imageButton_icon" format="reference" />
        <attr name="imageButton_iconWidth" format="dimension" />
        <attr name="imageButton_iconHeight" format="dimension" />
    </declare-styleable>
</resources>

Kelas widget cukup sederhana (intinya adalah perhitungan padding dalam metode onLayout ):

class ImageButtonFixedIconSize
@JvmOverloads
constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = android.R.attr.imageButtonStyle
) : ImageButton(context, attrs, defStyleAttr) {

    private lateinit var icon: Drawable

    @Px
    private var iconWidth: Int = 0
    @Px
    private var iconHeight: Int = 0

    init {
        scaleType = ScaleType.FIT_XY
        attrs?.let { retrieveAttributes(it) }
    }

    /**
     *
     */
    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
        val width = right - left
        val height = bottom - top

        val horizontalPadding = if(width > iconWidth) (width - iconWidth) / 2 else 0
        val verticalPadding = if(height > iconHeight) (height - iconHeight) / 2 else 0

        setPadding(horizontalPadding, verticalPadding, horizontalPadding, verticalPadding)

        setImageDrawable(icon)

        super.onLayout(changed, left, top, right, bottom)
    }

    /**
     *
     */
    private fun retrieveAttributes(attrs: AttributeSet) {
        val typedArray = context.obtainStyledAttributes(attrs, R.styleable.ImageButtonFixedIconSize)

        icon = typedArray.getDrawable(R.styleable.ImageButtonFixedIconSize_imageButton_icon)!!

        iconWidth = typedArray.getDimension(R.styleable.ImageButtonFixedIconSize_imageButton_iconWidth, 0f).toInt()
        iconHeight = typedArray.getDimension(R.styleable.ImageButtonFixedIconSize_imageButton_iconHeight, 0f).toInt()

        typedArray.recycle()
    }
}

Dan akhirnya Anda harus menggunakan widget Anda seperti ini:

<com.syleiman.gingermoney.ui.common.controls.ImageButtonFixedIconSize
    android:layout_width="90dp"
    android:layout_height="63dp"

    app:imageButton_icon="@drawable/ic_backspace"
    app:imageButton_iconWidth="20dp"
    app:imageButton_iconHeight="15dp"

    android:id="@+id/backspaceButton"
    tools:ignore="ContentDescription"
    />

— Alex Shevelev
sumber