[TIL] Android 앱 개발 입문 : UI

✏231212 화요일 TIL(Today I learned) 오늘 배운 것

📖UI (UserIntefacce)

• UI 구성 기본단위 : 뷰(View) = 위젯(Widget) + 레이아웃(Layout)
• UI 설계 방법 : XML 사용
  =>XML파일을 직접 편집하거나, 안드로이드스튜디오에서 Layout Editor를 이용하여 편집 가능.

  • Layout Editor 는 WYSIWYG(what you see is what you get) 에디터로, 드래그 앤 드롭 방식으로 사용하기 편하고, XML코드로 자동 변환은 물론이고 동기화시켜주며 다양한 디바이스와 안드로이드 버전에 대해 프리뷰를 제공한다.

  • 그러나, 단순 복사 붙여넣기를 통한 편집엔든 직접 XML파일을 편집하는게 효율적일 수 있다.

    
    

📖뷰 (View)

• View 클래스 : 모든 UI 컴포넌트의 부모 클래스.
  =>뷰 클래스의 속성을 모든 UI 컴포넌트에서 공통적으로 사용할 수 있다.

• layout_width, layout_height : 모든 뷰는 가로와 세로 크기를 기본적으로 가져야 한다.

  • match_parent : 부모 UI컴포넌트의 크기에 맞춘다.
  • wrap_content : UI컴포넌트 안의 내용물 크기에 맞춘다.

  +크기 이외에도 필수는 아니지만 id, background 등의 기본적인 view 속성들이 있다.

• dpi 사용 : 다양한 디바이스 해상도 맞추기

  • 스크린의 크기와 상관 없이 절대적인 스크린의 실제 단위는 px 이다.
    =>px 단위는 다양한 해상도의 디바이스 마다 크기 차이가 확연하게 나타나게 된다.
  • 디스플레이의 해상도(밀도)와 상관 없이 다룰 수 있는 단위인 dp(독립화소, 밀도)가 유리하다.
  • 이외에 이미지 등에 대하여 디바이스마다 가지고 있는 dpi(dotsperinch) 를 기준으로 각각의 drawable폴더를 만들어 관리하는 식의 방법으로 각 dpi마다 적절하게 대응하여, 이미지가 깨지지 않도록 방지할 수도 있다.

  +dpi : LDPI(120), MDPI(160), HDPI(240), XHDPI(320), XXHDPI(480), XXXHDPI(640) 가 있으며, 안드로이드는 MDPI기준으로, 160dp에서는 1dp = 1px이다.

  
  

📖위젯(Widget)

• 위젯(Widget) : View의 서브 클래스 중 화면에 보이는 것들을 지칭한다.

[TextView] : 화면에 text를 표시하는 용도

• 상속받는 view 속성 이외에 가지는 TextView의 주요속성들

  • text : 출력할 문자열 지정
  • textSize : 폰트크기 지정
  • textStyle : normal, bold, italic 등 텍스트 스타일 지정
  • typeface : normal, snas, serif, monspace 등 폰트 지정
  • textColor : 문자열 색상 지정
  • sigleLine : true 일떄, 텍스트가 위젯의 폭보다 길어도 강제로 한 줄 출력.

[EditText] : 입력이 가능한 텍스트 창

• TextView의 서브 클래스로, 모든 속성을 상속 받는다.

• inputType: 을 입력하면 키보드 타입 및 키보드 행위를 설정할 수 있다.

  • 키보드타입 : “text”, “phone”, “textEmailAddress”, "textPassword" 등이 있다.
  • 키보드 행위 : “textCapWords”(문장 첫시작을 대문자로 변환), “textAutoCorrect”(입력된 단어와 유사한 단어 제시 및 선택시 대치), “textMultiLine”(여러줄 입력 받기 가능) 등

[Button] : 사용자가 클릭하면 이벤트가 발생하는 푸시 버튼

• TextView의 서브 클래스로, 모든 속성을 상속 받는다.

• 버튼 내에 텍스트는 물론이고, 아이콘도 표시할 수 있다.
  +ImageButton을 이용해서 이미지 자체를 버튼으로 사용할 수도 있다.

• 실무에서는 ImageView에 clickable 옵션을 true로 만들어서 사용한다.

  • normal, pressed, disable 3가지를 기본으로 준비하고 해상도처리를 위해 dpi별로도 준비해야하기 때문에 1개의 버튼에 보통 15개의 이미지가 필요하다.
  • drawable에 등록하여 사용하기 때문에 파일명 등에 대한 사용 규칙을 준수해야한다.
  • Layout리소스 XML에 연결될 수 있도록 리소스ID도 지정하고 추가해준다.
  • 코틀린에서 id를 이용해서 참조한 다음, setImageResource()함수를 호출한다.

  +ImageView영역과 이미지 크기 맞추기 : android:scaleType을 사용한다.

• 버튼 클릭 시 이벤트 처리 : onclick과, 이벤트 처리 객체를 활용해서 이벤트를 발생시킬 수 있다.

  • onClick 속성 활용 : 버튼 위젯의 onClick속성에 액티비티 클래스에 설정해놓은 메소드를 연결한다.
  • 이벤트 처리 객체 활용 : 액티비티 클래스에서 findViewById<타입>(R.id.버튼id)를 통해 직접 연결한 후, setONClickListener( )을 통해서 발생 시킬 이벤트를 등록한다.
  
  

📖레이아웃(Layout)

• 레이아웃(Layout) : ViewGroup의 파생 클래스로, 포함하고 있는 View를 정렬하는 기능이다.
• 레이아웃끼리 서로 감싸서 사용할 수 도 있다. (레이아웃 뎁스(Depth))
  =>당연하지만, 깊이가 깊을수록 성능이 다운된다.

[Constraint Layout] : 제약 조건을 사용해 화면을 구성하는 방법

• 제일 많이 사용되는 레이아웃. 레이아웃뎁스 문제 등 LinearLayout과 RelativeLayout의 단점들을 개선한 장점들을 모아 Layout Editor을 통해 사용하며 편의를 높였다.
• 위젯의 상대적인 정렬이 가능하다.
• 위젯 내에 포함되어있는 텍스트의 위치로도 정렬기준을 설정할 수 있다.

[Linear Layout] : 컨테이너에 포함 된 뷰들을 수평/수직으로 일렬 배치 하는 레이아웃

• 가장 단순하고 직관적으로 사용 빈도가 높다.
• orientation 속성 : horizontal(왼쪽에서 오른쪽 수평 배열)/vertical(위에서 아래로 수직 배열)
• 가로면 가로. 세로면 세로 로 위젯의 크기와 관계 없이 한줄로만 배열한다.
• 자식들은 중첩되지 않고 쌓이기만 한다.
• LayoutWeight 을 통해 영역 대비 비율의 개념으로 가중치를 둘 수 있다.

[Relative Layout] : 컨테이너(부모)나 서로(자식)간의 위치 관계를 지정하여 배치하는 레이아웃

• 사용 빈도가 꽤 있다.
• 만약 자식들에게 상대적인 배치 기준을 주지 않는다면, 내부에서 서로 중첩되어 표시된다.
• 자식 간의 위치 관계를 지정하는 속성
  • layout_alignTop, layout_alignBottom, layout_alignLeft, layout_alignRight, layout_Above, layout_Below, layout_toLeft, layout_toRight, layout_alignBaseline
• 부모 와의 위치 관계를 지정하는 속성
  • layout_alignParentTop, layout_alignParentBottom, layout_alignParentLeft, layout_alignParentRight, layout_centerHorizontal, layout_centerVertical

[Table Layout] : 표 형식(행과 열)으로 자식을 배치하는 레이아웃

• 계산기 키 패드 등의 특정한 때에만 사용하는 등 사용빈도가 높지 않다.
• stretchColumns 속성 : "*" (모든 열을 늘여서 배치), "1,2" (1열, 2열을 늘여서 배치)
  +참고로 0번부터 세기 때문에 0번이 왼쪽기준 첫번째 줄. 1열 = 왼쪽에서 2번째, 2열 = 왼쪽에서 3번째
• <TableRow>를 통해서 행을 추가해주며, 행에 따라 열의 개수가 정해진다.

[Frame Layout] : 컨테이너에 포함된 뷰를 전부 좌상단에 배치하는 레이아웃

• 보통 동영상 등 하나의 자식 View위젯을 표시할 때 사용하므로 사용빈도가 높지 않다.
• 여러 위젯을 자식으로 추가하면 중첩되며, 가장 최근에 추가한 것이 가장 상위에 표시된다.

📖간격 설정 (정렬) 하는 방법 (Margin, Padding, Gravity)

[Margin] : 뷰와 다른 뷰(컨테이너) 간의 간격을 설정 할 수 있다.

• layout_margin : 상하좌우로 동일한 마진 설정.
• layout_marginLeft, layout_marginRight, layout_marginTop, layout_marginBottom : 각 방향에 대한 마진 설정.

[Padding] : 뷰 영역 내에 있는 내용물의 간격을 설정 할 수 있다.

• paddig : 상하좌우로 동일한 패딩 설정.
• paddingLeft, paddingRight, paddingTop, paddingBottom : 각 방향에 대한 패딩 설정.

[Gravity] : 해당 뷰 안의 내용물에 위치에 대한 정렬 방식

[layout_gravity] : 부모 뷰 안에서 해당 뷰의 정렬 방식

📖스타일 및 테마

• 레이아웃 지정 XML과 별개의 XML리소스에 저장된다.

[스타일(Style)] : 개별 뷰나 창의 모양과 형식을 지정하는 속성 모음.

[테마(Theme)] : 전체 액티비티 또는 어플리케이션에 적용되는 스타일.

---

✏새롭게 알게된 것과 느낀점

• 오늘은 UI 전반에 대한 이론 공부를 쭉 헀는데, 우선적으로 각 단어의 정의를 명확하게 알게 된 점이 제일 좋았다. 내가 정확히 필요한 영역에 필요한 기능을 줄 수 있을 것 같다. 안드로이드는 UI 설정하는 게 반이라고 중요하다고 하셨는데, 강의에서 들은 것 처럼 자주 사용해서 손에 익을 수 있게 해야겠다.
• CSS 공부하면서 맨날 썼던 마진,패딩 그렇게 정렬 배치를 하고싶었어도 못했던 수많은 나날.. 오늘에서야 마진이랑 패딩이 정확히 뭔지 알게 되었다... 맨날 부모를 기준으로 상대적 중앙 정렬 어쩌구 하던 복잡한 이야기들도 오늘 공부하고 나니 별로 복잡하지 않은 것같다.
  확실히 Layout Editor가 상당히 직관적이기 때문에 다루기 어렵지 않은 것 같다..고 자신감이 가득 차있는 상태인데, 부디 실무에서도 스타일 설정에 큰 일이 안들었으면 하는 바람이다... ㅎ