Điều chỉnh kích thước của ImageButton trong Android

Question

Có cách nào để thực hiện việc này không? Tôi đã thử padding hình ảnh và thiết lập chiều rộng/chiều cao của xem, nhưng dường như không làm việc. Dưới đây là ví dụ:

<ImageButton 
    android:id="@+id/search" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:src="@drawable/search_small" 
    android:paddingTop="4sp" 
    android:paddingBottom="4sp" 
    android:paddingLeft="6sp" 
    android:paddingRight="6sp" 
    android:layout_marginRight="10sp" 
    android:layout_marginTop="6sp" 
    android:layout_marginBottom="6sp" 
    android:layout_alignParentRight="true" 
/> 

Tôi muốn nút này rộng hơn chiều cao, nhưng nó sẽ ra theo cách khác.

Answer 1

Vừa chơi vừa thử và hiểu vấn đề của bạn.

Có vẻ ImageButton là chế độ xem tổng hợp có một vài giá trị được đặt trước. Chẳng hạn như một số loại lề mà bạn không thể ghi đè bằng XML. Nếu bạn không thể thay đổi hình ảnh của mình để phù hợp với những gì bạn muốn xảy ra thì tốt hơn bạn nên tạo chế độ xem tổng hợp của riêng mình.

Dưới đây là ví dụ của tôi về một cái nhìn tổng hợp, bạn có thể làm cho mình:

<FrameLayout android:layout_width="wrap_content" 
      android:layout_height="wrap_content">   
    <Button android:id="@+id/saveSearchButton" 
      android:layout_width="50dp"   
      android:layout_height="50dp" /> 
    <ImageView android:layout_width="45dp" 
       android:layout_height="45dp" 
       android:scaleType="fitXY" 
       android:src="@drawable/ic_menu_save" 
       android:layout_gravity="center"/> 
</FrameLayout> 

<FrameLayout android:layout_width="wrap_content" 
      android:layout_height="wrap_content">   
    <Button android:id="@+id/clearSearchButton" 
      android:layout_width="50dp" 
      android:layout_height="50dp" /> 
    <ImageView android:layout_width="45dp" 
       android:layout_height="45dp" 
       android:scaleType="fitXY" 
       android:src="@drawable/ic_menu_close_clear_cancel" 
       android:layout_gravity="center"/> 
</FrameLayout>  

Và các nút gốc:

<ImageButton android:id="@+id/imageButton1" 
      android:src="@drawable/ic_menu_save"    
      android:layout_height="45dp" android:layout_width="45dp"/> 

<ImageButton android:id="@+id/imageButton2" 
      android:src="@drawable/ic_menu_close_clear_cancel" 
      android:layout_height="45dp" 
      android:layout_width="45dp"/> 

Ở đây chúng ta có thể thấy hình ảnh tùy chỉnh/nút tổng hợp tiếp theo là xây dựng trong ImageButton là một phần của SDK:

Answer 2

Bạn không nên sử dụng sp làm thứ nguyên kích thước - dp nên được sử dụng vì nó sẽ giúp quy mô xem của bạn trực tiếp với mật độ và độ phân giải màn hình khác nhau. See Here cho thứ nguyên.

padding sẽ đẩy các thành phần khác ra khỏi ranh giới chế độ xem của bạn. margin sẽ đẩy nội dung của chế độ xem của bạn vào trong từ ranh giới của bạn (tức là sẽ nén không gian có sẵn cho ảnh của bạn). Ranh giới được xác định theo chiều cao và chiều rộng. Nếu không có thêm thông tin, tôi đoán bạn đang bị bối rối bởi lợi nhuận của bạn - xóa chúng và thử nghiệm.

Cũng hữu ích cho bạn: android:scaleType="fitXY" làm cho hình ảnh kéo dài để phù hợp với cả kích thước X và Y có sẵn cho nó. Nó giúp bạn xem canvas có sẵn cho hình ảnh của bạn. Khi bạn cảm thấy khu vực đủ lớn để có hình ảnh được chia tỷ lệ chính xác, hãy thay đổi loại quy mô thành centerInside. See Here cho tất cả các loại tỷ lệ.

Answer 3

Bạn có thể giải thích câu hỏi của mình rộng rãi hơn để chúng tôi có thể hiểu rõ hơn.

Theo sự hiểu biết của tôi Bạn muốn đặt Chiều cao/Chiều rộng của ImageButton. Nhưng nó không hoạt động được không? Tôi muốn hỏi bạn rằng, nếu bạn viết bất kỳ chiều cao/chiều rộng cụ thể thì nó cũng không hoạt động?

Tôi đã sao chép mã của bạn trong các tệp của mình và tôi đã thay đổi chiều cao/chiều rộng theo cách thủ công, sau đó nó sẽ hoạt động.

Vui lòng giải thích câu hỏi của bạn.

Cảm ơn.

Answer 4

Tôi đã hoàn thành bố cục sau câu trả lời của Graeme. Bốn "imageButton" sửa chữa dưới cùng, cùng chiều rộng, kích thước hình ảnh có thể thay đổi. cảm ơn!

<LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentLeft="true" 
     android:background="@color/#000" 
     android:weightSum="100" > 

     <FrameLayout 
      android:id="@+id/flBottom1" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="25" 
      > 
      <Button 
       android:id="@+id/ibBottom1" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" 
       android:background="@drawable/detail_tab_bg_selector"/> 
      <ImageView 
       android:layout_width="32dp" 
       android:layout_height="32dp" 
       android:scaleType="fitXY" 
       android:src="@drawable/icon_home_48_48" 
       android:layout_gravity="center_horizontal" 
       android:layout_marginTop="5dp" 
       /> 
      <TextView 
       android:id="@+id/tvBottom1" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:gravity="center" 
       android:layout_gravity="center_horizontal" 
       android:layout_marginTop="35dp" 
       android:text="@string/bailty_text_home" 
       style="@style/bailtyTextBottom" 
       /> 
     </FrameLayout> 


     <FrameLayout 
      android:id="@+id/flBottom2" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="25" 
      > 
      <Button 
       android:id="@+id/ibBottom2" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" 
       android:background="@drawable/detail_tab_bg_selector"/> 
      <ImageView 
       android:layout_width="32dp" 
       android:layout_height="32dp" 
       android:scaleType="fitXY" 
       android:src="@drawable/icon_compose_48_48" 
       android:layout_gravity="center_horizontal" 
       /> 
      <TextView 
       android:id="@+id/tvBottom2" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:gravity="center" 
       android:layout_gravity="center_horizontal" 
       android:layout_marginTop="35dp" 
       android:text="@string/bailty_text_comment" 
       style="@style/bailtyTextBottom" 
       /> 
     </FrameLayout> 


     <FrameLayout 
      android:id="@+id/flBottom3" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="25" 
      > 
      <Button 
       android:id="@+id/ibBottom3" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" 
       android:background="@drawable/detail_tab_bg_selector"/> 
      <ImageView 
       android:layout_width="32dp" 
       android:layout_height="32dp" 
       android:scaleType="fitXY" 
       android:src="@drawable/icon_search_48_48" 
       android:layout_gravity="center_horizontal" 
       /> 
      <TextView 
       android:id="@+id/tvBottom3" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:gravity="center" 
       android:layout_gravity="center_horizontal" 
       android:layout_marginTop="35dp" 
       android:text="@string/bailty_text_search" 
       style="@style/bailtyTextBottom" 
       /> 
     </FrameLayout> 


     <FrameLayout 
      android:id="@+id/flBottom4" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="25" 
      > 
      <Button 
       android:id="@+id/ibBottom4" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" 
       android:background="@drawable/detail_tab_bg_selector"/> 
      <ImageView 
       android:layout_width="32dp" 
       android:layout_height="32dp" 
       android:scaleType="fitXY" 
       android:src="@drawable/icon_barcode_48_48" 
       android:layout_gravity="center_horizontal" 
       /> 
      <TextView 
       android:id="@+id/tvBottom4" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:gravity="center" 
       android:layout_gravity="center_horizontal" 
       android:layout_marginTop="35dp" 
       android:text="@string/bailty_text_scan_again" 
       style="@style/bailtyTextBottom" 
       /> 
     </FrameLayout> 
    </LinearLayout> 

Answer 5

Set android:background thay vì android:src để thiết lập hình ảnh trên nút.Điều này sẽ điều chỉnh hình ảnh theo kích thước của nút. Sau đó điều chỉnh phần đệm sau.

Answer 6

Tôi sử dụng thuộc tính minWidth và minHeight, kết hợp với loại quy mô fitXY và gói nội dung của nó để điều chỉnh hình dạng nút của tôi.

Bạn muốn làm cho nút của bạn "rộng hơn", do đó ví dụ, in ra một nút 200X100 ra khỏi một biểu tượng hình vuông, bạn có thể đặt nó ra như thế:

<ImageButton 
     android:id="@+id/fooButton" 
     android:src="@drawable/play_button" 
     android:backgroundTint="#00000000" 
     android:minWidth="200" 
     android:minHeight="100" 
     android:scaleType="fitXY" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:onClick="playStuff" 
     />