ProgrammingKotlin

[Android] 안드로이드 디자인 관련 이슈 정리

Android, Android Design, Android issue

UI, layout 등 안드로이드 디자인 관련 기억하고 싶은 내용을 적는 곳

목차

레이아웃 종류
디자인 용어 정리
뷰 종류
디자인 함수 정리
디자인 관련 유용한 사이트 정리
UI 코딩 시 사용하는 구성요소
xml 에서 사용하는 속성 정리
res 폴더 정리

1. 레이아웃 종류

  • Frame Layout
    • 자식 뷰들을 겹쳐서 배치한다.
    • 화면에 표시되는 View를 바꿔가면서 표현하고싶을때 사용
    • 일반적으로는 하나의 자식 뷰를 보여주기 위함이다.
  • Linear Layout
    • 선택된 방향(수직 또는 수평) 에 따라 일자로 자식 뷰들을 배치한다.
    • 각 자식 뷰는 가중치(weight value)를 설정해서
      얼마나 많은 레이아웃 공간을 차지할 것인지 정할 수 있다.
  • Table Layout
    • 자식 뷰들을 격자 형태의 행과 열로 배치한다.
    • 하나의 테이블에 있는 각 행은 TableRow 객체로 나타내며, 각 셀의 뷰 객체를 포함한다.
    • 이것보단 Grid Layout 을 사용한다.
  • Relative Layout
    • 다른 자식뷰들과 상대적으로 비교해서 배치한다.
    • 다양한 화면 크기와 방향에서 동작하는 사용자 인터페이스를 구현할 수 있다.
  • Absolute Layout
    • 자식 뷰들을 특정 XY좌표에 위치하게 배치한다.
    • 화면 크기가 달라지는것에 유연하게 대처하기 힘들기때문에 하지 않는것이 좋다
  • Grid Layout
    • 격자무늬(grid)를 구성하여 각 셀에 자식 뷰들을 배치한다.
    • 컴포넌트들의 간격은 스페이스 뷰라는 특별한 타입의 뷰를 인접 셀에 두어서 구현하거나
      마진 매개변수를 설정해서 구현할 수 있다.
    • 테이블 레이아웃의 단점을 보완한 레이아웃이다.

  • Coordinator Layout

    • 화면 위 앱 바(app bar)와 다른 자식 뷰들과 상호작용을 하기위한 레이아웃이다.
    • Frame Layout과 유사하다.
    • Behavior을 자식 뷰에 지정할 수 있다.
    • 자식 뷰들은 anchor를 가진다.
      • anchor는 일반적으로 다른 뷰를 가리키며, 뷰의 id값으로 표시된다.
      • anchor는 반드시 Coordinator layout 하위의 자손 뷰중 하나의 아이디여야 한다.
      • insetEdge를 이용해 자식 뷰들이 어떻게 배치될지 지정할 수 있다.
    • 레이아웃 구조
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <CoordinatorLayout>

          <AppBarLayout>

              <ToolBar/>

          </AppBarLayout>

          <include/>
          <NestedScroolView/>
          <FloatingActionButton/>

      </CoordinatorLayout>

  • DrawerLayout

    • 서랍처럼 등장하는 레이아웃
    • 모든 뷰보다 최상위에 있어야 함
    • 레이아웃 구조
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <DrawerLayout>

          <CoordinatorLayout>
          
              <include/>
              <SwipePlaceHolderView/>
          
          </CoordinatorLayout>

          <NavigationView/>

      </DrawerLayout>

2. 디자인 용어 정리

  • 뷰 (View)
    • 화면의 표시될 모든 클래스에 대한 모음집(패키지) 이다.
    • 사용자가 보는 화면의 모든 인터페이스의 요소들은
      View (android.view.View) 클래스의 서브 클래스다.
    • 위젯을 자식으로 둔 부모클래스이다.
  • 위젯 (Widget)
    • 화면 상 UI 요소들에 대한 모음집(패키지) 이다.
    • ImageView, TextView, Button 등의 통칭이다.
    • 이들은 View, ViewGroup의 클래스를 무조건 상속받는다.
  • 뷰 그룹(ViewGroup)
    • Widget 들을 자식으로 가진 View 이다.
    • 주로 Layout, AdapterView 등 하위 widget 들을
      그룹핑 해야하는 Widget 클래스들의 모음집(패키지)이다.
  • 앱 위젯(AppWidget)
    • 다른 App 위에 올라가는 소형 View이다.
  • 네비게이션 드로어(Navigation Drawer) / 항법 서랍장
    • 왼쪽에서 출현하는 서랍장과 같은 기능
    • 네비 바 라고도 부른다.
  • 앱 바(App bar)
    • 화면 최상단에 Bar 형식으로 들어가는 작업 표시줄
    • ActionBar 는 Activity 에 작업표시줄에 대한 개념
    • Toolbar 는 Widget 으로, Activity 의 앱 바로 설정할 수 있다.
  • 스타일(Style)
    • View 또는 창의 모양과 형식을 지정하는 속성 모음
    • height, padding, font-color, font-size, background 등의 속성 지정 가능
    • Layout 내 xml 과 별개인 xml resource 에 정의됨
  • 테마(Theme)
    • 개별 View 가 아닌 전체 Activity 또는 Application 에 적용되는 Style

3. 뷰 종류

  • Recycler View
    • ListView 의 대체로 나온 View
    • 사용자가 관리하는 많은 수의 데이터 집합(Data Set) 을 개별 Item 단위로
      구성하여 화면에 출력하는 ViewGroup 이며, 한 화면에 표시되기 힘든
      많은 수의 데이터를 Scroll 가능한 List 로 표시해주는 Widget
    • 뷰 홀더를 필수로 구현해야 한다.
  • Navigation View
    • navigation 의 내부 내용을 작성할 수 있는 View
    • 두가지의 레이아웃으로 나뉘어있다
      • headerLayout : 상단 헤더부분 레이아웃
      • menu : 하단 메뉴부분 레이아웃

4. 디자인 함수 정리

Recycler View
  • onCreateViewHolder([ViewGroup], [viewType])
    • viewType 형태의 ItemView 를 위한 ViewHolder 객체 생성
  • onBindViewHolder([ViewHolder], [position])
    • position 에 해당하는 데이터를 ViewHolder 의 ItemView 에 표시
  • getItemCount()
    • 전체 아이템 갯수 리턴
  • setLayoutManager([LayoutManager])
    • 레이아웃매니저를 지정한다.
    • new LinearLayoutManager(this) 와 같이 매개변수를 넣는다.
    • 이외에 GridLayoutManager, StaggeredGridLayoutManager 가 있다
  • setAdapter([adapter])
    • 어답터를 지정한다.
액션바
  • setSupportActionBar(Toolbar)
    • 화면 상단 액션바를 toolbar 위젯으로 사용하도록 설정가능
    • 기본 액션바를 NoActionBar로 변경해야 한다
    • 사용 예시
      1
      setSupportActionBar(toolbar)
  • ActionBarDrawerToggle(activity, drawerLayout, toolbar, openDrawerContentDescRes, closeDrawerContentDescRes)
    • 액션바에 Drawer 을 토글로 붙여 사용할 수 있도록 한다.
    • @param
      • 현재 Activity
      • Toolbar
      • drawer 레이아웃
      • 열었을때 나올 String
      • 닫았을때 나올 String
    • 사용 예시
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      val toggle = ActionBarDrawerToggle(
              this, drawerLayout, toolbar,
              R.string.navigation_drawer_open, R.string.navigation_drawer_close)

      drawerLayout.addDrawerListener(toggle)
      // drawerLayout은 drawerLayout의 id

      toggle.syncState()
      // 토글이 계속해서 동기화 될수 있도록 함

      navView.setNavigationItemSelectedListener(this)
      // navView 는 네비게이션 내 Item들을 담당하는 View id

5. 디자인 관련 유용한 사이트 정리

6. UI 코딩 시 사용하는 구성요소

  • LayoutManager (레이아웃 매니저)
    • 아이템 뷰가 나열되는 형태를 관리하기 위한 요소

  • Adapter (어댑터)

    • 사용자 Data Set 으로부터 Item View 를 만드는 역할

  • ViewHolder (뷰홀더)

    • 화면에 표시될 Item View 를 저장하는 객체
    • 어댑터 내부에서 생성됨

7. xml 에서 사용하는 속성 정리

  • android:id
  • android:layout_marginStart : 좌측에서부터 margin
  • android:layout_marginEnd : 우측에서부터 margin
  • android:layout_width
  • android:layout_height
  • android:layout_gravity : View 의 위치 (left,right,bottom,center,top)

8. res 폴더 정리

  • anim
  • drawable
  • layout
  • menu
  • mipmap
  • values
공유하기