[Android/Flutter 교육] 19일차

첫 번째 과제 제출 결과가 나왔다.
막 엄청 어려운 과제는 아니었지만 어느정도 도전적인 과제였다.
강사님이 제출한 답안과는 조금 달라보이지만 결국 본인 스타일이니까

TextFields

TextInputLayout에는 TextInputEditText가 기본으로 같이 붙어온다.

TextInputLayout

1. 주요 속성

• hint : 입력 안내 문구를 표시한다.
  material3 문서에는 코드상으로 TextInputLayout에 hint 속성이 붙어있는것으로 되어있는데
  실제 안드로이드 스튜디오에서는 TextInputEditText에 hint속성이 붙어있다.
  별도로 에러가 발생하지는 않지만 지금은 TextInputLayout에 hint속성을 붙여주는 것으로 수정한다.
• endIconMode : 우측에 표시되는 아이콘을 설정한다.

• startIconDrawable : 좌측에 표시되는 아이콘을 설정한다.

TextInputEditText

1. 주요 속성 (EditText에 있는 것은 모두 설정가능하다)

• inputType :

실제 로그인창에서는 잘 안 두고 회원가입이나 정보수정 창에서 주로 셋팅함

• text : EditText 를 통해 보여줄 문자열
• inputType : EditText로 부터 입력받을 문자열의 속성을 설정한다. 키보드에도 영향을 미친다
• imeOptions : 키보드의 리턴 버튼의 모양을 설정한다.
  설정하지 않을 경우 제일 마지막에 있는 EditText는 키보드를 내리는 키로 설정되고 그 외에는 다음 입력 요소로 포커스 이동하는 키로 설정된다.

2. 주요 프로퍼티

• text : 입력한 문자열을 가지고 온다.

3. 주요 메서드

• setText : 문자열을 설정한다.

4. 주요 리스너

• TextWatcher : 키보드 입력을 실시간으로 감지한다.

error 설정

• TextInputEditText에 error 설정

class MainActivity : AppCompatActivity() {

    lateinit var activityMainBinding: ActivityMainBinding

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

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

        activityMainBinding.apply {
            // error 설정
            textField.error = "입력 오류가 발생하였습니다"
        }
    }
}

• textInputLayout에 error 설정

class MainActivity : AppCompatActivity() {

    lateinit var activityMainBinding: ActivityMainBinding

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

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

        activityMainBinding.apply {
            // error 설정
            // textField.error = "입력 오류가 발생하였습니다"
            textInputLayout.isErrorEnabled = true
            textInputLayout.error = "입력 오류가 발생하였습니다"
        }
    }
}

ScrollView

좌우 스크롤은 잘 안하는 편이라 common에 ScrollView만 있고 HorizontalScrollView는 없음

1. 주요 리스너

• OnScrollChangeListener : 스크롤 상태가 변경될 때

2. 주요 프로퍼티

• scrollX : 현재의 x 좌표
• scrollY : 현재의 y 좌표

class MainActivity : AppCompatActivity() {
    lateinit var activityMainBinding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        activityMainBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(activityMainBinding.root)

        activityMainBinding.apply {
            // ScrollView의 Scroll 이벤트
            // 두 번째 : 스크롤 된 X 좌표
            // 세 번째 : 스크롤 된 Y 좌표
            // 네 번째 : 스크롤 되기 전 X 좌표
            // 다섯 번째 : 스크롤 되기 전 Y 좌표
            scroll1.setOnScrollChangeListener { v, scrollX, scrollY, oldScrollX, oldScrollY -> 
                textView.text = "X : ${oldScrollY} -> ${scrollY}"
            }
            // HorizontalScrollView의 Scroll 이벤트
            scroll2.setOnScrollChangeListener { v, scrollX, scrollY, oldScrollX, oldScrollY ->
                textView2.text = "X : ${oldScrollX} -> ${scrollX}"
            }

            button.setOnClickListener {
                // 현재의 좌표를 가져온다.
                 textView.text = "현재의 X 좌표 : ${scroll2.scrollX}"
                 textView2.text = "현재의 Y 좌표 : ${scroll1.scrollY}"
            }
        }
    }
}

3. 주요 메서드

• scrollTo : 지정된 위치로 이동시킨다.
• scrollBy : 지정한 만큼 이동시킨다.
• smoothScrollTo : 지정된 위치로 이동시킨다.(애니메이션)
• smoothScrollBy : 지정한 만큼 이동신킨다.(애니메이션)

class MainActivity : AppCompatActivity() {
    lateinit var activityMainBinding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        activityMainBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(activityMainBinding.root)

        activityMainBinding.apply {
            ...

            button2.setOnClickListener {
                // 지정된 위치로 이동한다.
                scroll1.scrollTo(0,300)
                scroll2.scrollTo(300,0)
                // 지정한 만큼 이동한다.
                scroll1.scrollBy(0,100)
                scroll2.scrollBy(100,0)
                // 지정된 위치로 이동한다. (애니메이션)
                scroll1.smoothScrollTo(0,300)
                scroll2.smoothScrollTo(300,0)
                // 지정한 만큼 이동한다. (애니메이션)
                scroll1.smoothScrollBy(0,100)
                scroll2.smoothScrollBy(100,0)
            }
        }
    }
}

ImageView

• 기존 안드로이드에서 이미지를 넣은 폴더는 drawable 폴더이다
  안드로이드 버전이 변경되면서 mipmap이라는 폴더를 제공하는데 이 폴더의 이미지는 비트맵이 아닌 벡터 방식으로 이미지를 그리게 된다.(확대 축소 목적)

dpi(dot per inch), ppi(pixel per inch)

-> 물리적인 면적단위(inch)에 dot나 pixel이 얼마나 들어갈 수 있는가?
4ppi는 1인치에 44개(16개)의 pixel이 있음
8ppi는 1인치에 88개(64개)의 pixel이 있음
-> 똑같은 단위 면적에 pixel이 많아지면 하나의 pixel의 크기가 작아지며 보다 선명한 글씨 및 이미지를 보여줄 수 있다.

• 기기별로 액정 사양이 다르기때문에 이미지별로 ppi를 나눠 보관해줘야 함
  

비트맵 : 속도가 빠름, 크기 변경 시 깨짐
벡터 : 속도가 느림(구현을 위한 이미지 데이터가 있음), 크기 변경 시 깨지지 않음(절대적 좌표가 아닌 상대적 좌표를 사용하기 때문)

기기 설정에 영향을 받는 이미지는 홈화면아이콘이므로 벡터이미지로 단계별로 준비하여 mipmap폴더에 넣어준다.
그 외의 앱 내 이미지는 주로 비트맵으로 준비하여 drawable 폴더에 넣어주기

1. 주요 속성

• srcCompat : 보여줄 이미지를 지정한다.

2. 주요 메서드

• setImageResouce : drawable 폴더나 mipmap 폴더에 있는 이미지를 지정하여 이미지를 표시한다.
• setImageBitmap : Bitmap 객체를 지정하여 이미지를 표시한다.
• setImageDrawable : Drawable 객체를 지정하여 이미지를 표시한다.

Radio

RadioGroup

1. 주요 속성

• checkedButton : 그룹 내에서 선택되어 있을 라디오 버튼의 아이디를 지정한다.
  

2. 주요 리스너

• setOnCheckedChangeListener : 그룹 내의 라디오 버튼 체크 상태가 변경될 때

3. 주요 프로퍼티

• checkedRadioButtonId : 그룹 내에서 선택되어 있는 라디오 버튼의 아이디

RadioButton

1. 주요 프로퍼티

• isChecked : 체크 상태를 설정하거나 체크 상태를 가져올 때

Checkbox

1. 주요 속성

• checked : true로 설정하면 체크 되어 있는 상태가 되고 false를 설정하거나 삭제하면 체크되어 있지 않는 상태가 된다.
• checkedState : Material3에 추가된 속성. 체크 상태를 3단계로 나눠서 설정할 수 있다.
  checked : 체크된 상태
  unchecked : 체크 안된 상태
  indeterminate : -로 표시되며 체크 박스들 중 선택 안된 게 있을 경우 표시하는 용도로 사용한다.(사용자에 의해서는 indeterminate상태를 설정할 수 없다)
  

2. 주요 프로퍼티

• isChecked : 체크 여부를 설정한다 true/false
• checkedState : MaterialCheckBox의 것이며 3가지 값 중 하나를 설정하여 체크 상태를 설정한다.
  checked : 체크된 상태
  unchecked : 체크 안된 상태
  indeterminate : -로 표시되며 체크 박스들 중 선택 안된 게 있을 경우 표시하는 용도로 사용한다.

3. 주요 리스너

• setOnCheckedChangeListener : 체크 여부가 변경되었을 때
• addOnCheckedStateChangedListener : 체크 상태가 변경되었을때(MaterialCheckBox의 것)

Switch(MaterialSwitch)

switch생성 시 MaterialSwitch로 변경해주면 된다.

1. 주요 속성

• checked : true면 on, false면 off
• text : 스위치에 표시될 문자열을 설정한다.

2. 주요 프로퍼티

• isChecked : on/off 상태값. true면 on, false면 off

3. 주요 메서드

• toggle :

4. 주요 리스너

• setOnCheckedChangeListener

※ 출처 : 멋쟁이사자 앱스쿨 2기, 소프트캠퍼스