[안드로이드스튜디오_문화][JetpackCompose]

#"JetpackCompose"란?

안드로이드 스튜디오에서 선언형 UI 작업을 가능하게 해주는 녀석.

• '선언형'이 지니는 의미 : '어떻게 무엇을 할지' => '무엇을 하는지'만 알려주면 됨.
• UI = f(state) : state랑 UI가 관련성이 생기면서, 기능에 좀 더 초점을 맞춰서 UI 작업을 진행 할 수 있어. 이때, state를 뷰의 Data 값이라고 볼 수 있는데, 왜냐하면은 뷰의 Data가 Update 될 때마다 뷰가 업데이트되고, Data가 Updata 되지 않은 부분의 뷰는 업데이트가 되지 않아. 약간 알잘딱깔센 느낌임. 이처럼 Data는 위에서 아래로 흐름. 근데 만약에 이벤트(ex:클릭리스너)가 발생한다면은 이벤트는 하위 그룹에서 상위 그룹으로 이벤트가 올라가게 되면서 UI를 바꾸어주는 거야. 아래 그림 참고해봐.
  

#"JetpackCompose 장점"

1. 코드량이 감소함.
2. 기존 View 코드와 상호작용이 가능함. 즉, legacy UI랑 Compose UI랑 함께 코드 작성이 가능하다는 거임.
3. Jetpack Libraries랑 통합이 가능함.
4. 아름다운 Material Design이 가능함.

#"JetpackCompose 단점"

1. 겁나 어색하꺼임.
2. state에 대한 관리가 엄청나게 중요함. 이 state를 가지고 놀 줄 아는 걸 잘하는 사람이 JetpackCompose를 잘 다루는 사람임. 그러니깐 생명주기에 대한 이해가 절대적으로 중요함...후..약한데..

#"JetpackCompose 실습...설레누"

"Surface 함수의 Parameter" : UI요소를 관리한다. UI요소의 content를 다루는 것은 @Composable 어노테이션을 활용한 함수에서 관리한다...하 개빡쎄네

• 오른쪽 값이 기본값임.
• modifier : UI 요소의 크기 , 위치 , 스타일을 설정하고 싶을 때 사용함.
• shpae : UI 요소의 모양을 설정하고 싶을 때 사용함.
• color : UI 요소의 배경색상을 설정하고 싶을 때 사용함.
• contentColor : UI 요소의 내용의 Text 색상을 설정하고 싶을 때 사용함.
• tonalElevation : UI 요소의 톤 높이를 설정하고 싶을 때 사용함.
• shadowElevation : UI 요소의 그림자 높이를 설정하고 싶을 때 사용함.
• border : UI 요소의 주변에 테두리를 추가하고 설정하고 싶을 때 사용함.
• content : UI 요소 내에 표시되는 내용을 추가하고 싶을 때 사용함.

  Surface(UI 요소 설정){UI 요소의 내용물 설정}

1. 기본적인 Jetpack Compose를 사용했을 때 Activity
   > JetpackCompose를 사용하기 위해서는 ComponentActivity를 상속 받아야 한다.
   > setContent{}를 활용해서 View들을 팽창시켜 준다.
   > @Composable 어노테이션은 함수가 Composable 함수임을 나타낸준다. 즉, 해당 함수가 UI를 생성하는 함수라는 것을 알려주는 거야.

2. JetpackCompose에서 Text 다루기

• 아래는 Text와 관련된 속성들을 정리해놓은 안스(안드로이드스튜디오) 파일임.
• 각각의 속성에 대한 총정리를 해놓았음...\
  > text : 표시할 텍스트 문자열
  > modifier : 텍스트 위젯의 크기
  > color : 텍스트이 색상
  > fontSize : 텍스트의 글자 크기
  > fontStyle : 텍스트가 기울어진지 아닌지
  > fontWeight : 텍스트의 글꼴 두께
  > fontFamily : 텍스트의 실제 글꼴 스타일
  > letterSpacing : 글자 간의 간격
  > textDecoration : 텍스트 장식(ex:밑줄 , 취소선 등등...)
  > textAlign : 텍스트의 가로정렬 방법(ex:TextAlign.Center , TextAlign.Right 등등..)
  > lineHeight : 줄 높이 간격
  > overflow : 텍스트가 Text UI를 벗어났을 때 처리방법(ex:TextOverflow.Clip : 자르기 , TextOverflow.Ellipsis : 생략 부호 추가)
  > softWrap : 텍스트가 화면 너비 초과하면 자동 줄바꿈 할지 말지 (기본값 : true)
  > maxLines : 내용물의 최대 줄 수
  > onTextLayout : Text 위젯의 정보를 저장하고 있다가 변화되면 콜백함수 호출해서 사용쌉가능
  > style : 특정 텍스트에만 스타일 적용가능, 저역 스타일에 영향X
• 아래 코드는 예씨 코드임.
  

3. JetpackCompose에서 Button 다루기

• fun Button(버튼을 내 입맛대로 다뤄줄 Parameter){버튼의 내용물들 작성 : 위에에부터 순서대로 버튼의 왼쪽부터 삽입된다.}
• 맨 아래는 Button과 관련된 속성들을 정리해 놓은 안스 파일임.
• 맨 아래 사진에서 Button 함수의 각각의 Parameter에 대해 총 정리를 해놓았음.
• J/C에서 Button 초기 설정 하는 방법
  > ㄱ. @Composable 어노테이션을 활용해서 ButtonNmae에 내가 이름을 지어서 넣어주고, buttonClickedListener 자리에 내가 원하는 리스너의 이름을 넣어주고, Button 함수를 가져와서 onClick에 내가 선언한 리스너 이름 넣어주는 것이 Button을 Jetpack Compose에서 사용 할 수 있는 기본설정 'ㄱ'단계
  
  > ㄴ. setContent에서 Button 함수 가져올 때 'ㄱ'을 참고해서 리스너를 정의해 주는 것이 'ㄴ'단계
  
  > onClick : 버튼이 클릭 될 때마다 실행될 리스너를 넣어주면 된다.
  > modifier : 버튼의 크기
  > enabled : 버튼이 작동할지 말지 결정(Boolean 값 넣어주기) : 버튼의 일부분만 클릭되기를 원할 때 사요한다.
  > shape : 버튼의 모양을 결정한다.(ex : CircleShape , Shape라고 치면 안스에서 밑에 짜라락 알려줌ㅋ)
  > colors : 버튼의 군데 군데 색상을 지정할 수 있다. 양식은 다음과 같다. => colors = ButtonDefaults.buttonColors(여기서 원하는 군데를 찾아서 써주고 = Color.원하는 색상) 아래 사진에 보며은 buttonColors를 안스에서 정의해놓은 게 있는데 봐보면은
  >> containerColor : 버튼의 배경 색상 지정
  >> contentColor : 버튼 내의 텍스트와 아이콘 색상 지정
  >> disabledContainerColor : 버튼이 비활성화 되었을 때의 배경 색상 지정
  >> disabledContentColor : 버튼이 비활성화 되었을 때 텍스트와 아이콘 색상 지정
  
  >elevation : 버튼의 표면 높이(그림자)를 설정한다. 사용방법은 => elevation = ButtonDefaults.buttonElevation(여기에 아래 사진 참고해서 원하는 Parameter를 넣으면 된다.)
  >> defalutElevation : default 상태일때 그림자 높이
  >> pressedElevation : 버튼이 눌렸을 때 그림자 높이
  >> focusedElevation : 버튼이 포커스된 상태일 때 그림자 높이
  >> hoveredElevation : 호버 상태일 때 버튼의 그림자 높이
  >> disabledElevation : 버튼이 비활성화된 상태일 때 표면 높이
  
  > border : 버튼 주위에 테두리를 추가 하고 싶을 때 + 테두리의 색상 등을 설정 할 수 있다. 사용법은 border = BorderStroke(두께.dp , Color.색깔)
  > contentPadding : 패딩 값 설정하고 싶을 때 사용한다. 사용법은 contentPadding = PaddingValues(숫자.dp)
  > interactionSource : 버튼이 클릭되었을 때 고급상호작용 원할때 사용 나는 그냥 리스너로 처리해야겠다. 아래는 참고할 공식문서임 > https://developer.android.com/jetpack/compose/touch-input/handling-interactions?hl=ko 하..버겁다진짜..마지막고비다..jetpackCompose..

4. Modifier : 위젯의 여러가지를 설정해주는 클래스 : chainning 방식 사용 가능
   [1]
   
   [2]
   
   [3]
   
   [4]
   
   [5]
   
   [6]
   
   [7]
   
   [8]
   
   [9]
   
   [10]
   
   [11]
   
   [12]
   
   [13]
   
   [14]
   
   [15]
   
   [16]
   
   [17]
   
   [18]
   
   [19]
   
   [20]
   

5. Box
   [1]
   
   [2]
   

6. Row
   [1]
   

7. Icon
   [1]
   
   [2]
   

8. Column
   [1]
   

9. BoxWithConstraints
   [1]
   

10. Image && NetworkImage
    [1]
    
    [2]
    

11. CheckBox
    [1]
    
    [2]
    
    [3]
    
    [4]
    

12. TextField
    [1]
    
    [2]
    
    [3]
    

13. TopAppBar
    [1]
    

14. SlotApi
    [1]
    

15. Scaffold
    [1]
    

16. card
    [1]
    
    [2]
    

17. LazyColumn
    [1]
    
    [2]
    
    [3]
    

18. ConstraintLayout 부터 하면 된다.