ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Android 스위치 버튼(Switch Button) 예제
    Android/개념 및 예제 2019. 8. 28. 14:29




    안드로이드에서 옵션 활성화 여부를 사용자에게 결정하도록 하는데 사용하는 스위치를 추가해보았습니다. 


    깃허브에서 스위치 버튼 라이브러리를 찾아서 구현하고 나서..

    스위치가 안드로이드 기본 라이브러리가 포함되어 있는 것을 발견했네요^^;  


    최초작성 2019. 8. 28




    예제에서는 초기 상태로 버튼의 상태를 결정하지 않았습니다. 

    SharedPreferences를 사용하여 사용자가 결정한 옵션 상태를 따로 관리하면 될 듯합니다. 





    스위치 버튼의 상태에 따라 텍스트뷰에  옵션을 활성화 했는지 여부를 보여줍니다.  


     




    다음 과정으로 예제를 테스트해볼 수 있습니다. 


    1. build.gradle에 com.kyleduo.switchbutton:library를 추가합니다. 


    dependencies {
        implementation fileTree(dir: 'libs', include: ['*.jar'])
        implementation 'androidx.appcompat:appcompat:1.0.2'
        implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
        testImplementation 'junit:junit:4.12'
        androidTestImplementation 'androidx.test:runner:1.2.0'
        androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
        implementation 'com.kyleduo.switchbutton:library:2.0.0'
    }




    2. styles.xml 파일에 다음 코드를 추가합니다. 


    <resources>

        <!-- Base application theme. -->
        <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
            <!-- Customize your theme here. -->
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
        </style>

        <style name="SwitchButtonStyle">
            <item name="android:paddingLeft">10dp</item>
            <item name="android:paddingRight">10dp</item>
            <item name="android:paddingTop">4dp</item>
            <item name="android:paddingBottom">4dp</item>
        </style>

    </resources>




    3. activity_main.xml 파일에 텍스트뷰와 스위치 버튼을 추가합니다.


    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="50sp"
            android:text="Button State"
            app:layout_constraintBottom_toTopOf="@id/sb_use_listener"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <com.kyleduo.switchbutton.SwitchButton
            android:id="@+id/sb_use_listener"
            style="@style/SwitchButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/textView" />

    </androidx.constraintlayout.widget.ConstraintLayout>





    4. MainActivity.java에 다음 코드를 추가합니다. 


    import androidx.appcompat.app.AppCompatActivity;

    import android.os.Bundle;
    import android.widget.CompoundButton;
    import android.widget.TextView;

    import com.kyleduo.switchbutton.SwitchButton;


    public class MainActivity extends AppCompatActivity {

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);

            // 스위치 버튼 상태에 따라 문자열을 출력할 텍스트뷰입니다.
            final TextView optionState = (TextView)findViewById(R.id.textView);


            // 스위치 버튼입니다.
            SwitchButton switchButton = (SwitchButton) findViewById(R.id.sb_use_listener);
            switchButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

                @Override
                public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

                    // 스위치 버튼이 체크되었는지 검사하여 텍스트뷰에 각 경우에 맞게 출력합니다.
                    if (isChecked){

                        optionState.setText("옵션 활성화");

                    }else{

                        optionState.setText("옵션 비활성화");
                    }
                }
            });
        }
    }




    참고 


    https://github.com/kyleduo/SwitchButton



    포스트 작성시에는 문제 없었지만 이후 문제가 생길 수 있습니다.
    댓글로 알려주시면 빠른 시일내에 답변을 드리겠습니다.

    여러분의 응원으로 좋은 컨텐츠가 만들어집니다. 지금 본 내용이 도움이 되었다면 유튜브 구독 부탁드립니다. 감사합니다 : )

    유튜브 구독하기


    댓글 0

Designed by Tistory.