Android LinearLayout

업데이트: 2023년 02월 17일

카테고리: Android

태그: Data Binding, Data Class, EditText, Google Develop, KeyBoard, LinearLayout, ScrollView, style, visibility

무엇을 배우는가

View와 ViewGroup이 어떻게 동작하는지
ScrollView을 사용해서 스크롤 가능한 콘텐츠 만들기
View을 어떻게 바꾸는지

1. TextView

Resource로 만들어 관리

xml파일에 code탭에서는 해당 리소스 왼쪽 💡버튼의 Extract Resource를 통해서 만들 수 있다.
또는 design탭에 해당 속성 오른쪽에 |을 클릭해 나온창 왼쪽 상단에 +으로 리소스를 만들 수 있다.

style 지정

해당 요소가 가지고 있는 CSS를 스타일로 저장한다.
Design탭에 Component Tree에 있는 요소를 우클릭해 Refator > Extract Style을 클릭한다.
그럼 하나의 창이 뜨게되고 원하는 스타일 속성만 체크하여 이름을 지정해 저장하면 코드가 깔끔해져 있다.

해당 스타일은 res/values/style.xml에 들어있다.

2. ImageView

ImageView에는 이미지를 보여줄 수 있는 요소이다.
PNG, JPG, GIF, WebP file인 Bitmap을 보여주거나 Drawable의 리소스를 보여줄 수 있다.

이미지를 추가하게 되면 ⚠️가 뜨는데 그 이유는 이미지 설명, contentDescription이 존재하지 않기 때문이다.

3. ScrollView

내부에 배치된 계층 구조를 스크롤할 수 있도록 하는 ViewGroup이다.
ScrollView는 하나의 View 또는 ViewGroup만 넣을 수 있다.
하위 보기는 일반적으로 LinearLayout을 사용한다.

4. EditText

Design탭에 Plain Text를 넣거나 <EditText/>를 작성한다.

inputType 유저가 입력할 수 있는 타입을 제한한다.
password로 지정하면 입력된 값이 안보이게 처리되고 phone으로 지정하면 전화패드의 숫자가 보이게 된다.

5. TextView Visible

TextView에 visibility옵션은 앱을 사용하는 동안 보이거나 숨기거나 할 수 있다.

visible: 보이게 한다.
Invisible: 안보이게 한다. 하지만 레이아웃에 공간은 차지한다.
gone: 보이지도 않으며 레이아웃을 차지하지도 않는다.

6. 클릭시 닉네임 변경

private fun addNickName(view: View) {
    val editText = findViewById<EditText>(R.id.nickname_edit)
    val nicknameTextView = findViewById<TextView>(R.id.nickname_text)

    nicknameTextView.text = editText.text

    editText.visibility = View.GONE
    nicknameTextView.visibility = View.VISIBLE
}

editText에 있는 값을 가져와 textView에 넣어준다.
이후 editText는 안보이게 textView는 보이게 바꾼다.

7. 입력완료 후 키보드 숨기기

val inputMethodMananger = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
inputMethodMananger.hideSoftInputFromWindow(view.windowToken, 0)

keyboard는 ‘Soft KeyBorad’ 와 ‘Hardware KeyBoard’로 구분한다.
Soft Keyboard는 화면에 나오는 가상의 키보드로 InputMethodManager로 제어가 가능하다.
hideSoftInputFromWindow를 통해서 가상 키보드를 숨길 수 있고
showSoftInput으로 특정한 요소 클릭 시 키보드를 나오게 할 수 있다.

8. Data Binding

DataBinding 초기설정
- build.gradle(Module:app)에 buildFeatures { dataBinding true }을 설정한다.

activity.xml에 최외각에 layout으로 감싸준다.

 <layout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto">
   <LinearLayout>...</LinearLayout>
 </layout>

MainActivity상단에 private lateinit var binding: ActivityMainBinding을 입력한다.
binding = DataBindingUtil.setContentView(this, R.layout.activity_main)을 setContentView 대신 작성한다.
findViewById 대신 binding을 활용하여 사용할 수 있다.

private fun addNickName(view: View) {
  binding.nicknameText.text = binding.nicknameEdit.text

  binding.nicknameEdit.visibility = View.GONE
  binding.nicknameText.visibility = View.VISIBLE
  binding.doneButton.visibility = view.visibility

//  binding.apply {
//  nicknameText.text = nicknameEdit.text.toString()
//  nicknameEdit.visibility = View.GONE
//  doneButton.visibility = View.GONE
//  nicknameText.visibility = View.VISIBLE
//  }
}

binding.id로도 사용할 수 있고 여러개를 사용할 때는 binding.apply를 이용해 여러개의 요소에 적용할 수 있다.

장점

findViewById()의 비효율성을 개선해 앱의 성능이 향상된다.
코드가 간결해져 가독성이 좋아지고, 유지보수가 쉬워진다.
binding된 변수들을 자동으로 업데이트 해준다.
complie시 실행되기 때문에 error를 쉽게 알 수 있다.
MVVM 아키텍쳐의 viewModel과 사용하기 좋다.

data Class 연결

<layout>
  <data>
    <variable
      name="myName"
      type="ko.cheonsohee.layoutapp.MyName" />
  </data>
<LinearLayout>

variable안에는 name과 type이 존재하는데
name은 해당 데이터를 부를 변수 이름이고
type은 해당 데이터의 타입으로 Boolean, String, Float도 가능하지만 유저가 설정한 data Class로도 설정이 가능하다.
이때는 해당 클래스가 작성된 경로를 넣어주면 된다.

이렇게 작성후 xml 파일에서 @={변수이름}의 형식으로 사용할 수 있다.

myName?.nickname = nicknameEdit.text.toString()
invalidateAll()

변경된 후에는 적용시켜주기 위해 invalidateAll()을 사용해야된다.

이런식으로 사용하면 해당 요소의 값을 직접바꾸는게 아니라 연결된 데이터의 값을 바꾸기 때문에 여러개가 연결되있는 경우 편리하게 바꿀 수 있다.

천소희