[Android/Flutter 교육] 17일차

공통 속성

id : View를 지칭하기 위해서 사용하는 이름한 화면에서 같은 id가 있으면 안된다.
layout_width : 가로 길이. (wrap_content or match_parent or dp 단위의 크기)
layout_height : 세로 길이 (wrap_content or match_parent or dp 단위의 크기)
wrap_content : 자기 자신을 완벽하게 보여줄 수 있는 최소의 크기. 공간이 부족할 경우 화면에서 짤린다.
match_parent : 부모의 크기에 꽉 채워준다. 공간이 부족할 경우 계속 축소된다.
padding : 내부의 여백
layout_margin : 외부의 여백
layout_gravity : layout 내에서 자신의 정렬 위치

Linear Layout

1. LinearLayout의 주요 속성

   • orientation : 뷰가 배치되는 방향을 설정
   • vertical : 세로 방향
   • horizontal(생략) : 가로 방향

2. LinearLayout에 배치되는 View의 주요 속성

   • layout_weight : 배치는 뷰가 차지할 공간 비율

Frame Layout

• 내부에 배치된 View들이 같은 자리에 계속 배치되는 layout이다.
• 화면을 구성하기 보단 탭 등과 같은 기능을 만들 때 사용하는 경우가 많다.(지금은 탭 기능이 기본적으로 제공되고 있어 잘 사용 안함)
• Linear와 함께 안드로이드OS 초기부터 제공된 레이아웃
• 좌측 상단을 기준으로 마진으로 위치 이동
• 주요 속성은 없다.
• layout_margin속성이나 layout_gravity 속성을 이용해 배치되는 위치를 결정하여 사용한다.
• layout_gravity : layout내에서 자신의 정렬 위치

레이아웃 상에 버튼이 2개가 배치되어있지만 겹쳐있어 한 개만 있는 것 처럼 보인다.
layout_margin 속성을 설정하여 위치를 변경할 수 있다.

layout_gravity로 위치를 잡고 layout_margin으로 여백을 주어 좌측 하단에 띄워줄 수도 있다.

Constraint Layout

추후 게시판 미니프로젝트할때 많이 쓸 예정
Constraint 이전에는 RelativeLayout(Legacy임)을 많이 사용했었음
View의 부모 또는 다른 View들과의 관계를 나타내는 제약 조건을 설정하여 View를 원하는 곳에 배치함
ConstraintLayout에 배치되는 View의 주요 속성

• 부모 혹은 다른 뷰와의 관계를 설정한 제약 조건 속성들

버튼을 하나 생성하여 화면 가운데에 배치해도

실제로 실행을 해보면 왼쪽상단에 배치된 것처럼 보여짐

실제로 위치를 잡고자 한다면 요소 선택할때 보여지는 동그라미 부분을 원하는 위치대로 드래그해주면 된다.

절대적 길이와 상대적 길이를 아래와 같이 직접 설정 가능하다.

제약 조건은 선으로 표시된다.
직선 : 절대적 길이, 물리적인 액정 사이즈에 관계없이 고정된 길이
지그재그선 : 상대적 길이, 물리적인 액정 사이즈에 따라 변화되는 길이

뷰를 가운데에 배치하고 싶다면 절대적 길이보다는 상대적 길이로 셋팅
절대적 길이로 가운데를 배치하게 될경우 스마트폰 사이즈에따라 가운데가 아니게될 수도 있다.

뷰와 뷰와의 관계를 설정해주면

뷰를 옮길때 같이 위치가 변경된다

요소의 가로길이를 빈칸을 꽉 채우고 싶을때

layout_width를 0dp(match constraint)로 설정해주면

빈칸 없이 가로길이가 꽉 채워짐

버튼 두개를 동일한 가로 비율로 설정하고 싶을 경우

각 버튼을 왼쪽 오른쪽으로 제한을 걸어준 후에

왼쪽 버튼의 오른쪽 제약을 오른쪽 버튼에 걸어주고

오른쪽 버튼도 왼쪽 제약을 추가해주면 자동으로 왼쪽 버튼에 제약이 걸어진다

layout_width값을 두 버튼 모두 0으로 설정해주면

동일한 비율로 버튼 길이가 셋팅이 된다.

안드로이드 테마

A ~ G : 테마 x
H ~ I : Holo 테마
...
Material 테마 등장
Material 2
Material 3(현재) https://m3.material.io/

Widget

• 안드로이드의 View 중 기능을 갖고 사용자와 상호작용을 하는 것들을 Widget이라고 부른다.
• Widget은 Layout 위에 배치되어 화면에 나타나고 코드를 통해 Widget 통제하여 사용자와 소통하는 수단이 된다.

TextView

텍스트뷰의 주요 속성

• text : TextView를 통해 보여줄 문자열을 설정한다.
• lines : 표시하고자 하는 문자열 수. 생략하면 무제한으로 설정됨. 매우 긴 문자열을 설정하였을 경우 lines에 설정되어 있는 줄 수 만큼만 보이고 나머지는 짤린다.
• textAppearance : 표시되는 문자열에 관련된 다양한 속성들을 미리 설정해놓은 것
• fontFamily : 폰트
• typeface : 글자 하나가 보여지는 형식
• textColor : 표시되는 문자열 색상. Resuorces와 Custom으로 설정할 수 있다.
• textSize : 표시되는 문자열 크기.
• lineSpacingExtra : 줄 간격
• textStyle : 볼드, 이탤릭, 대문자
• textAlignment : 문자열 정렬

Button

주요 속성

• text : 버튼에 표시될 문자열을 설정한다.

주요 프로퍼티

• text : 버튼에 표시될 문자열을 설정한다.

주요 리스너

• OnClickListener : 버튼을 눌렀을 때

package kr.co.lion.android08_button

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.view.View.OnClickListener
import kr.co.lion.android08_button.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    
    lateinit var activityMainBinding: ActivityMainBinding
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        activityMainBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(activityMainBinding.root)
        
        activityMainBinding.apply { 
            
            // 버튼
            button.apply {
                // 버튼에 표시될 문자열
                text = "새로운 문자열"
                // 리스너 객체를 생성한다.
                val buttonClickListener = ButtonClickListener()
                // 버튼을 눌렀을 때 동작할 리스너를 설정한다.
                setOnClickListener(buttonClickListener)
            }

            button2.apply {
                // 보통 다수의 뷰가 하나의 리스너를 사용하는 경우는 별로 없다.
                // 작성한 리스너가 하나의 뷰에 대한 리스너라면 익명중첩클래스를 사용하기도 한다.
                setOnClickListener(object : OnClickListener{
                    override fun onClick(p0: View?) {
                        textView.apply {
                            text = "두 번째 버튼을 눌렀습니다."
                        }
                    }

                })
            }

            button3.apply {
                // 코틀린으로 작업하는 경우
                // 구현해야할 메서드가 하나밖에 없는 리스너에 대해서는
                // 고차함수도 제공하고 있다. (자바에는 없다)
                setOnClickListener {
                    textView.apply {
                        text = "세 번째 버튼을 눌렀습니다."
                    }
                }
            }
        }
    }

    // 버튼을 눌렀을 때 동작할 리스너
    inner class ButtonClickListener : OnClickListener{

        // 버튼을 눌렀을 때 호출되는 메서드
        override fun onClick(p0: View?) {
            activityMainBinding.apply {
                textView.apply {
                    text = "첫 번째 버튼을 눌렀습니다."
                }
            }
        }

    }
}

EditText

주요 속성

• text : EditText에 표시할 문자열을 설정한다.
• hint : 입력된 값이 없을 경우 표시할 안내 문구를 설정한다.
• inputType : EditText로 부터 입력받을 문자열의 속성을 설정한다. 키보드에도 영향을 미친다
  inputType에 따라 입력할 수 있는 값이 제한되는데 설치한 키보드 또는 OS버전에 따라 제한없이 입력이 가능한 경우도 있다.
• imeOptions : 나타나는 키보드의 리턴키(Enter) 모양을 설정한다.
  
  
  따로 설정하지 않고 기본값인 경우에는 여러개의 입력칸 입력시 다음 입력칸으로 넘어가는 기능이 있으며, 마지막 입력을 마친 후에는 키보드를 내려주는 효과가 있다.

주요 프로퍼티

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

주요 메서드

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

주요 리스너

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

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