Android: Tạo nút chuyển đổi có hình ảnh và không có văn bản

Question

là có thể tạo nút chuyển đổi trong Android có hình ảnh nhưng không có văn bản? Lý tưởng nhất là nó sẽ trông như thế này:

Ive nhìn thấy bài viết tương tự mà câu trả lời là để thay đổi nền nhưng tôi muốn duy trì bố cục Holo Light và chỉ trao đổi các văn bản với một hình ảnh.

tôi cần để có thể programaticallly thay đổi nguồn hình ảnh,

Bất kỳ ý tưởng làm thế nào tôi có thể làm điều này?

Nếu không thể thực hiện được điều này, có cách nào tôi có thể bật và tắt nút bình thường không?

Answer 1

1. Tôi có thể thay thế văn bản chuyển đổi với một hình ảnh

   Không, chúng ta không thể, mặc dù chúng có thể ẩn các văn bản bằng cách overiding phong cách mặc định của nút bật tắt, nhưng vẫn còn đó sẽ không cung cấp cho chúng tôi nút chuyển đổi bạn muốn vì chúng tôi không thể thay thế văn bản bằng hình ảnh.

2. Làm thế nào tôi có thể làm cho một nút bật tắt bình thường

   Tạo một file ic_toggle trong thư mục res/drawable bạn

   <selector xmlns:android="http://schemas.android.com/apk/res/android"> 
   
       <item android:state_checked="false" 
         android:drawable="@drawable/ic_slide_switch_off" /> 
   
       <item android:state_checked="true" 
         android:drawable="@drawable/ic_slide_switch_on" /> 
   
   </selector> 
   

   Đây @drawable/ic_slide_switch_on & @drawable/ic_slide_switch_off là những hình ảnh bạn tạo ra.

   Sau đó, tạo một tập tin trong cùng một thư mục, đặt tên cho nó ic_toggle_bg

   <?xml version="1.0" encoding="utf-8"?> 
   <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
   
       <item android:id="@+android:id/background" 
         android:drawable="@android:color/transparent" /> 
   
       <item android:id="@+android:id/toggle" 
         android:drawable="@drawable/ic_toggle" /> 
   
   </layer-list> 
   

   Bây giờ thêm vào chủ đề tùy chỉnh của bạn, (nếu bạn không có một tạo ra một tập tin trong thư mục styles.xml res/values/ của bạn)

   <style name="Widget.Button.Toggle" parent="android:Widget"> 
       <item name="android:background">@drawable/ic_toggle_bg</item> 
       <item name="android:disabledAlpha">?android:attr/disabledAlpha</item> 
   </style> 
   
   <style name="toggleButton" parent="@android:Theme.Black"> 
       <item name="android:buttonStyleToggle">@style/Widget.Button.Toggle</item> 
       <item name="android:textOn"></item> 
       <item name="android:textOff"></item> 
   </style> 
   

   Điều này tạo ra nút bật tùy chỉnh cho bạn.

3. Làm thế nào để sử dụng nó

   Sử dụng phong cách tùy chỉnh và nền theo quan điểm của bạn.

   <ToggleButton 
        android:id="@+id/toggleButton" 
        android:layout_width="wrap_content" 
        android:layout_height="match_parent" 
        android:layout_gravity="right" 
        style="@style/toggleButton" 
        android:background="@drawable/ic_toggle_bg"/> 
   

Answer 2

ToggleButton thừa hưởng từ TextView, do đó bạn có thể thiết lập drawables được trưng bày tại 4 biên giới của văn bản.Bạn có thể sử dụng để hiển thị các biểu tượng mà bạn muốn trên đầu trang của văn bản và ẩn các văn bản thực tế

<ToggleButton 
    android:id="@+id/toggleButton1" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:drawableTop="@android:drawable/ic_menu_info_details" 
    android:gravity="center" 
    android:textOff="" 
    android:textOn="" 
    android:textSize="0dp" /> 

Kết quả so với bình thường ToggleButton trông giống như

Tùy chọn giây là sử dụng một số ImageSpan để thực sự thay thế văn bản bằng hình ảnh. Có vẻ tốt hơn một chút vì biểu tượng ở đúng vị trí nhưng không thể thực hiện trực tiếp với bố cục xml.

Bạn tạo một đồng bằng ToggleButton

<ToggleButton 
    android:id="@+id/toggleButton3" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:checked="false" /> 

Sau đó thiết lập các "văn bản" programmatially

ToggleButton button = (ToggleButton) findViewById(R.id.toggleButton3); 
ImageSpan imageSpan = new ImageSpan(this, android.R.drawable.ic_menu_info_details); 
SpannableString content = new SpannableString("X"); 
content.setSpan(imageSpan, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); 
button.setText(content); 
button.setTextOn(content); 
button.setTextOff(content); 

Kết quả đây ở giữa - biểu tượng được đặt thấp hơn một chút vì nó mất vị trí của văn bản .

Answer 3

tạo toggle_selector.xml trong res/drawable

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:drawable="@drawable/toggle_on" android:state_checked="true"/> 
    <item android:drawable="@drawable/toggle_off" android:state_checked="false"/> 
</selector> 

áp dụng bộ chọn nút Toggle bạn

<ToggleButton 
      android:id="@+id/chkState" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/toggle_selector" 
      android:textOff="" 
      android:textOn=""/> 

Lưu ý: để loại bỏ các văn bản tôi sử dụng sau trong mã trên

textOff="" 
textOn="" 

Answer 4

Tôi biết đây là một chút muộn, tuy nhiên cho bất cứ ai quan tâm, tôi đã tạo ra một thành phần tùy chỉnh mà về cơ bản là một nút hình ảnh chuyển đổi, đối tượng vẽ có thể có trạng thái cũng như nền

https://gist.github.com/akshaydashrath/9662072