Điều chỉnh hình ảnh trong ImageButton trong Android


147

Tôi có 6 ImageButton trong hoạt động của mình, tôi đặt hình ảnh thông qua mã của mình trong đó (không sử dụng xml).

Tôi muốn chúng chiếm 75% diện tích nút. Nhưng khi một số hình ảnh bao phủ ít diện tích hơn, một số hình ảnh quá lớn để phù hợp với hình ảnh. Làm thế nào để thay đổi kích thước chương trình và hiển thị chúng? Dưới đây là ảnh chụp màn hình

nhập mô tả hình ảnh ở đây bên dưới là tập tin 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>

và một đoạn của 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);      
    }

2
Bạn đã kiểm tra phương pháp chia tỷ lệ mà android cung cấp chưa? developer.android.com/reference/android/widget/ từ
bofredo

Câu trả lời:


393

Tôi muốn chúng chiếm 75% diện tích nút.

Sử dụng android:padding="20dp"(điều chỉnh phần đệm khi cần thiết) để kiểm soát mức độ hình ảnh chiếm trên nút.

nhưng khi một số hình ảnh bao phủ ít diện tích hơn, một số hình ảnh quá lớn để phù hợp với hình ảnh. Làm thế nào để thay đổi kích thước chương trình và hiển thị chúng?

Sử dụng a android:scaleType="fitCenter"để Android chia tỷ lệ hình ảnh và android:adjustViewBounds="true"để chúng điều chỉnh giới hạn của chúng do tỷ lệ.

Tất cả các thuộc tính này có thể được đặt trong mã trên mỗi ImageButtonthời gian chạy. Tuy nhiên, theo tôi thì dễ dàng hơn nhiều để đặt và xem trước trong xml.

Ngoài ra, không sử dụng spcho bất kỳ thứ gì ngoài kích thước văn bản, nó được chia tỷ lệ tùy theo sở thích kích thước văn bản mà người dùng đặt, do đó spkích thước của bạn sẽ lớn hơn dự định của bạn nếu người dùng có cài đặt văn bản "lớn". Sử dụng dpthay vào đó, vì nó không được thu nhỏ bằng cách ưu tiên kích thước văn bản của người dùng.

Đây là một đoạn của mỗi nút sẽ trông như thế nào:

    <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" />

Nút mẫu


@Steven Byle Xin lỗi vì trả lời muộn, nhưng làm thế nào tôi có thể áp dụng tương tự nhưng cho một bố cục tương đối?
Tất cả chúng ta đều điên ở đây

8
Đối với những người tìm kiếm, ImageButtonphương pháp setScaleType(ImageView.ScaleType.CENTER) setAdjustViewBounds(true)làm điều này lập trình.
ps95

Cảm ơn bạn rất nhiều :)
Pankaj Nimgade

1
Cũng làm android: background = "@ null" để thử nền mặc định
C.Ikongo

31

Tôi đang sử dụng đoạn mã sau trong xml

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

2
Tôi có một hình chữ nhật khá "phẳng" và điều này hoạt động tốt với tôi ... mặc dù vậy: hãy chắc chắn rằng bạn sử dụng "android: src" thay vì "android: background." +1.
Johnny Wu

@johnny Cảm ơn bạn cho tiền boa!
Bishan

8

Hãy thử sử dụng android:scaleType="fitXY"trong i-Imagebutton xml


mặc dù điều này đã làm việc và thu nhỏ, nhưng tôi muốn rằng nó sẽ chiếm 75% diện tích để nhìn rõ hơn.
RDX

@PowerPC thử sử dụng framelayout cho chiều cao và chiều rộng tới 75% và vào bố cục khung đó, hãy sử dụng nút hình ảnh của bạn và đặt loại tỷ lệ phù hợp với xy
Swap-IOS-Android

framelayout cho mỗi hình ảnh bên trong linearlayout? bạn có thể làm rõ không
RDX

@PowerPC Tôi không bao giờ sử dụng nhưng liên kết này có thể giúp bạn stackoverflow.com/questions/9946580/
Đổi

1
@StevenByle Tôi đã xem xét cả hai cách tiếp cận, nhưng vì tôi muốn bảo hiểm 75% diện tích, giải pháp của bạn hoạt động tốt. Cảm ơn.
RDX

7

Tôi đang sử dụng android:scaleType="fitCenter"với sự hài lòng.


3

Tham khảo liên kết dưới đây và cố gắng tìm những gì bạn thực sự muốn:

ImageView.ScaleType TRUNG TÂM Trung tâm hình ảnh trong chế độ xem, nhưng thực hiện không chia tỷ lệ.

ImageView.ScaleType CENTER_CROP Chia tỷ lệ hình ảnh đồng đều (duy trì tỷ lệ khung hình của hình ảnh) sao cho cả hai kích thước (chiều rộng và chiều cao) của hình ảnh sẽ bằng hoặc lớn hơn kích thước tương ứng của chế độ xem (trừ phần đệm).

ImageView.ScaleType CENTER_INSIDE Chia tỷ lệ hình ảnh đồng đều (duy trì tỷ lệ khung hình của hình ảnh) sao cho cả hai kích thước (chiều rộng và chiều cao) của hình ảnh sẽ bằng hoặc nhỏ hơn kích thước tương ứng của chế độ xem (trừ phần đệm).

ImageView.ScaleType FIT_CENTER Chia tỷ lệ hình ảnh bằng cách sử dụng TRUNG TÂM.

ImageView.ScaleType FIT_END Chia tỷ lệ hình ảnh bằng END.

ImageView.ScaleType FIT_START Chia tỷ lệ hình ảnh bằng START.

ImageView.ScaleType FIT_XY Chia tỷ lệ hình ảnh bằng cách sử dụng FILL.

ImageView.ScaleType MATRIX Scale sử dụng ma trận hình ảnh khi vẽ.

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


1

Gần đây tôi đã tình cờ phát hiện ra rằng vì bạn có nhiều quyền kiểm soát hơn trên ImageView mà bạn có thể đặt onclicklistener cho một hình ảnh ở đây là một mẫu của nút hình ảnh được tạo động

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
                }
            });

Đó là một ý tưởng không tồi. Tôi thích.
Boris Karloff

0

Nó hoạt động tốt trong trường hợp của tôi. Đầu tiên, bạn tải xuống một hình ảnh và đổi tên nó thành biểu tượng, định vị nó trong thư mục drawable. Bạn có thể thay đổi kích thước bằng cách cài đặt android:layout_widthhoặc android:layout_height. Cuối cùng, chúng ta có

 <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" />

0

Bạn có thể tạo tiện ích ImageButton như tôi đã làm. Trong trường hợp của tôi, tôi cần một widget có kích thước biểu tượng cố định. Hãy bắt đầu từ các thuộc tính tùy chỉnh:

<?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>

Lớp widget khá đơn giản (điểm chính là tính toán đệm trong phương thức 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()
    }
}

Và cuối cùng, bạn nên sử dụng widget của bạn như thế này:

<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"
    />
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.