Programing

Android : 텍스트없이 이미지가있는 토글 버튼 만들기

lottogame 2020. 10. 31. 09:09
반응형

Android : 텍스트없이 이미지가있는 토글 버튼 만들기


Android에서 이미지는 있지만 텍스트는없는 토글 버튼을 만들 수 있습니까? 이상적으로는 다음과 같습니다.

이미지가있는 전환 버튼

답변이 배경을 변경하는 유사한 게시물을 보았지만 Holo Light 레이아웃을 유지하고 텍스트를 이미지로 바꾸고 싶습니다.

이미지 소스를 프로그래밍 방식으로 변경할 수 있어야합니다.

내가 이것을 어떻게 만들지 어떤 아이디어?

이 작업을 수행 할 수없는 경우 일반 버튼을 켜고 끌 수있는 방법이 있습니까?


  1. 토글 텍스트를 이미지로 바꿀 수 있습니까?

    아니요, 토글 버튼의 ​​기본 스타일을 덮어 써 텍스트를 숨길 수는 있지만 텍스트를 이미지로 바꿀 수 없기 때문에 원하는 토글 버튼을 제공하지 않습니다.

  2. 일반 토글 버튼을 어떻게 만들 수 있습니까?

    파일 만들기 ic_toggle을 당신의 res/drawable폴더

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

    여기 @drawable/ic_slide_switch_on& @drawable/ic_slide_switch_off당신이 만든 이미지입니다.

    그런 다음 동일한 폴더에 다른 파일을 만들고 이름을 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>
    

    이제 사용자 정의 테마에 추가하십시오 (하나가없는 경우 res/values/폴더에 styles.xml 파일을 작성하십시오 ).

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

    그러면 사용자 정의 토글 버튼이 생성됩니다.

  3. 이것을 어떻게 사용 하는가

    보기에서 사용자 정의 스타일과 배경을 사용하십시오.

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

ToggleButton에서 상속 TextView당신은 드로어 블을 설정할 수 있도록 텍스트의 4 개 국경을 표시합니다. 이를 사용하여 텍스트 위에 원하는 아이콘을 표시하고 실제 텍스트를 숨길 수 있습니다.

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

일반에 비해 결과 ToggleButton는 다음과 같습니다.

여기에 이미지 설명 입력

The seconds option is to use an ImageSpan to actually replace the text with an image. Looks slightly better since the icon is at the correct position but can't be done with layout xml directly.

You create a plain ToggleButton

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

Then set the "text" 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);

The result here in the middle - icon is placed slightly lower since it takes the place of the text.

여기에 이미지 설명 입력


create toggle_selector.xml in 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>

apply the selector to your toggle button

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

Note: for removing the text i used following in above code

textOff=""
textOn=""

I know this is a little late, however for anyone interested, I've created a custom component that is basically a toggle image button, the drawable can have states as well as the background

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

참고 URL : https://stackoverflow.com/questions/18598255/android-create-a-toggle-button-with-image-and-no-text

반응형