[Android/Flutter 교육] 18일차

MSU·2024년 1월 19일

Android-Flutter

목록 보기
18/85
post-thumbnail

editText가 관리하는 문자열은 String이 아니라 Editable이다 String일 경우 값을 입력할때마다 String객체가 매번 생성되기 때문에 이를 해결하기 위해 Editable을 따로 만들었으며 이를 사용하기 위해서는 toString으로 변환해주면 된다.

로그캣

  • 로그캣 : 안드로이드 애플리케이션 개발 시 콘솔 출력용으로 사용하는 도구
    안드로이드 스튜디오에 있는 LogCat 창을 통해 확인할 수 있다.
  • 총 6가지 있으며 어떤 걸 쓰더라도 주어진 메세지를 출력하는 것은 동일하다.
  • 메서드에 따라서 출력되는 색상이 달라진다.
  • 용도에 맞게 사용하는 것을 권장한다.
  • 첫 번째 매개 변수 : 필터 문자열
  • 두 번째 매개 변수 : 출력하고 싶은 문자열

debug

  • d : debug, 주로 개발자가 출력하고 싶은 메시지를 출력하는데 사용한다.
    다른 메서드에 해당하지 않는 것들을 출력할 때 사용한다.
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        Log.d("test1234","debug")
    }
}

로그캣 창의 필터에 필터 문자열로 넣었던 test1234를 입력하면 메시지를 확인할 수 있다.

error

  • e : error, 오류에 관련된 메시지를 출력하는데 사용한다.
    애플리케이션에서 오류가 발생하면 오류 메시지는 그냥 출력된다.
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        Log.e("test1234","error")
    }
}

information

  • i : information, 정보성 메시지를 출력하는데 사용한다.
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        Log.i("test1234", "information")
    }
}

verbose

  • v : verbose, 상세한 설명 메시지를 출력하는데 사용한다.
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        Log.v("test1234", "verbose")
    }
}

warning

  • w : warning, 경고성 메시지를 출력하는데 사용한다.
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        Log.w("test1234", "verbose")
    }
}

wtf

  • wtf : What a Terriable Failure, 절대로 일어나서는 안되는 일이 벌어졌을때의 메시지를 출력하는데 사용한다.
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        Log.wtf("test1234", "verbose")
    }
}

Material3

  • Material : 구글에서 만들어 배포하고 있는 UI 라이브러리
    android, flutter, figma 등등에서 사용할 수 있도록 배포하고 있다.
  • https://m3.material.io
  • 현재는 3 버전이다.
  • 최신 버전은 다음 페이지에서 확인한다.
    https://github.com/material-components/material-components-android/releases
  • 안드로이드에 이미 있어서 지원을 안하는 컴포넌트가 있거나 아예 지원할 생각이 없는 경우도 있다.
  • 컴포넌트별로 status를 참고하여 사용가능한지 불가능한지 확인해야 한다.

Material Button

xml파일에서 일반 버튼을 매터리얼 버튼으로 변경한다.

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />
    <com.google.android.material.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />
  • 그냥 Button을 사용하면 android.widget.Button 클래스이고
  • Material Button 을 사용하면 com.google.android.material.button.MaterialButton 클래스이다

  • Material 3 라이브러리를 적용해주면 그냥 Button을 사용해도 Material Button처럼 사용할 수 있다.

  • 이는 MaterialButton과 Button이 크게 다르지 않고 다양한 테마를 제공하는 형태로 되어 있기 때문이다.

  • 아이콘은 https://fonts.google.com/icons 여기서 무료로 사용 가능
    내려받은 아이콘은 res > drawble 폴더에 넣어줘야함(이름에 언더바 제외한 특수기호 없어야 함)

  • 토글 버튼은 ToggleGroup안에 배치

<com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/toggleGroup1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/toggleButton1"
            style="@style/Widget.Material3.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="toggle1" />

        <Button
            android:id="@+id/toggleButton2"
            style="@style/Widget.Material3.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="toggle2" />

        <Button
            android:id="@+id/toggleButton3"
            style="@style/Widget.Material3.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="toggle3" />
    </com.google.android.material.button.MaterialButtonToggleGroup>
class MainActivity : AppCompatActivity() {

    lateinit var activityMainBinding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        activityMainBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(activityMainBinding.root)

        activityMainBinding.apply {
            // MaterialButtonToggleGroup 의 버튼을 선택해준다.
            toggleGroup1.check(R.id.toggleButton1)
            toggleGroup1.check(R.id.toggleButton3)
        }
    }
}

  • 토글 버튼 단수,복수 선택 여부는 singleSelection 속성에서 true,false로 설정할 수 있다.

    선택 해제 가능 여부도 selectionRequired에서 선택 가능하다(체크를 해제해서 아예 선택 안한것처럼 하거나 또는 강제로 선택하게) 대신 singleSelection=true 인 경우에만 설정 가능
class MainActivity : AppCompatActivity() {

    lateinit var activityMainBinding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        activityMainBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(activityMainBinding.root)

        activityMainBinding.apply {
            // SingleSelection에 true가 설정되어 있는 그룹에 버튼을 선택해준다.
            toggleGroup2.check(R.id.toggleButton4)
            toggleGroup2.check(R.id.toggleButton5)
        }
    }
}

  • 선택 취소는 uncheck로 가능
class MainActivity : AppCompatActivity() {

    lateinit var activityMainBinding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        activityMainBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(activityMainBinding.root)

        activityMainBinding.apply {
            // MaterialButtonToggleGroup 의 버튼을 선택해준다.
            toggleGroup1.check(R.id.toggleButton1)
            toggleGroup1.check(R.id.toggleButton3)
            
            // 선택 취소
            toggleGroup1.check(R.id.toggleButton2)
            toggleGroup1.uncheck(R.id.toggleButton2)
        }
    }
}

  • 버튼 체크 상태 감지
class MainActivity : AppCompatActivity() {

    lateinit var activityMainBinding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        activityMainBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(activityMainBinding.root)

        activityMainBinding.apply {
            // 그룹 내부의 버튼의 체크 상태가 변경되었을 때
            // 두 번째 : 체크 상태가 변경된 버튼의 id
            // 세 번째 : 체크되었는지 여부(true/false)
            toggleGroup1.addOnButtonCheckedListener { group, checkedId, isChecked ->
                // 버튼의 id로 분기한다.
                when(checkedId){
                    R.id.toggleButton1 -> {
                        if(isChecked){
                            textView.text = "토글 버튼1이 체크되었습니다."
                        }else{
                            textView.text = "토글 버튼1이 체크 해제 되었습니다."
                        }
                    }
                    R.id.toggleButton2 -> {
                        if(isChecked){
                            textView.text = "토글 버튼2이 체크되었습니다."
                        }else{
                            textView.text = "토글 버튼2이 체크 해제 되었습니다."
                        }
                    }
                    R.id.toggleButton3 -> {
                        if(isChecked){
                            textView.text = "토글 버튼3이 체크되었습니다."
                        }else{
                            textView.text = "토글 버튼3이 체크 해제 되었습니다."
                        }
                    }
                }
            }
            
            // SingleSelection
            toggleGroup2.addOnButtonCheckedListener { group, checkedId, isChecked ->
                // 버튼의 id로 분기한다.
                when(checkedId){
                    R.id.toggleButton4 -> {
                        if(isChecked){
                            textView.text = "토글 버튼4이 체크되었습니다."
                        }
                    }
                    R.id.toggleButton5 -> {
                        if(isChecked){
                            textView.text = "토글 버튼5이 체크되었습니다."
                        }
                    }
                    R.id.toggleButton6 -> {
                        if(isChecked){
                            textView.text = "토글 버튼6이 체크되었습니다."
                        }
                    }
                }
            }
            
            buttonResult.setOnClickListener {
                textView.text = ""

                // toggle1에서 체크되어 있는 버튼들의 아이디를 모두 가져온다.
                // SingleSelection이 아니기 때문에 0 개 이상이 선택되어 있을 수도 있다.
                toggleGroup1.checkedButtonIds.forEach {
                    when(it){
                        R.id.toggleButton1 -> textView.append("토글1이 체크되어 있습니다.\n")
                        R.id.toggleButton2 -> textView.append("토글2가 체크되어 있습니다.\n")
                        R.id.toggleButton3 -> textView.append("토글3이 체크되어 있습니다.\n")
                    }
                }

                // toggle2에서 체크되어 있는 버튼의 아이디를 가져온다.
                // SingleSelection이기 때문에 1개만 가져온다.
                when(toggleGroup2.checkedButtonId){
                    R.id.toggleButton4 -> textView.append("토글4가 체크되어 있습니다.\n")
                    R.id.toggleButton5 -> textView.append("토글5가 체크되어 있습니다.\n")
                    R.id.toggleButton6 -> textView.append("토글6이 체크되어 있습니다.\n")
                }
            }
            
        }
    }
}



※ 출처 : 멋쟁이사자 앱스쿨 2기, 소프트캠퍼스 
profile
안드로이드공부

0개의 댓글