Skip to content

Resource Convention

Jump to bottom
doyeon edited this page Jan 25, 2022 · 1 revision

참고 : PRNDcompany의 android style guide, TeamCARDNA의 android coding convention

1. 기본

1.1. 안드로이드 스튜디오

안드로이드 스튜디오의 Optimize imports 기능과 Reformat Code 기능을 이용한다.

  • Optimize imports (Ctrl+Alt+O) : 사용하지 않는 Class를 import하고 있는 경우 제거해준다.
  • Reformat Code (Ctrl+Alt+L) : 코드의 Kotlin Style Guide를 적용하여 Code를 Reformat한다.

2. Resource

2.1 ID

  • <WHAT>_<WHERE>_<DESCRIPTION>
  • View의 대문자를 축약하여 Prefix로 사용한다.
  • 아래 이름규칙을 적용한다.

  1. Android의 View는 CamelCase의 대문자를 축약한 형태로 정한다. : TextView -> tv_

  2. 만약 View의 이름이 Space, Switch와 같이 1개의 대문자만 존재한다면 모두 소문자인 아이디로 정한다. : Switch -> switch_

  3. CustomView는 전체View의 이름을 snake case이름으로 정한다. : MyCustomView -> my_custom_view

  4. 아래표에 해당 View의 Prefix가 정의되어 있지 않다면 팀에서 상의해서 이름을 정한 뒤 추가한다.

WHAT

View Prefix
TextView tv_
ImageView iv_
CheckBox cb_
RecyclerView rv_
EditText et_
ProgressBar pb_
FrameLayout fl_
NestedScrollView nsv_
Space space_
AbcDeFgh adf_
MyCustomView my_custom_view

예시

@+id/tv_main_title : main 화면의 title TextView
@+id/et_signup_password : signup 화면의 password EditText
@+id/btn_signin_check : signin 화면의 check Button

2.2 Layout

  • <WHAT>_<WHERE>

WHAT

Prefix 설명
activity_ Activity에서 쓰이는 layout
fragment_ Fragment에서 쓰이는 layout
dialog_ Dialog에서 쓰이는 layout
view_ CustomView에서 쓰이는 layout
item_ RecyclerView, GridView, ListView등에서 ViewHolder에 쓰이는 layout
layout_ <include/>로 재사용되는 공통의 layout

예시

`activity_main`: MainActivity의 layout
`fragment_request`: RequestFragment의 layout
`dialog_contact`: 문의안내 Dialog의 layout
`view_comment`: 커스텀으로 만든 CommentView의 layout
`item_my_info`: 내 정보에서 사용되는 각각의 item의 layout

2.3 Drawable

  • <WHAT>(_<WHERE>)_<DESCRIPTION>(_<SIZE>)
  • 이미지가 여러군데에서 활용될 경우, <WHERE>는 생략 가능하다.
  • 이미지의 크기가 1개밖에 없는 경우, <SIZE>는 생략 가능하다.

What

Prefix 설명
btn_ 버튼으로 쓰이는 이미지
ic_ 버튼이 아닌 화면에 보여지는 이미지
bg_ 버튼이 아닌 화면에 보여지는 이미지
img_ 실제사진이거나 아이콘형태가 아닌 일러스트형태의 이미지
div_ divider로 활용되는 이미지

Selector

  • 배경이나 버튼에서 View의 상태에 따라서 drawable이 변해야 하는 경우에 대한 이름은 아래와 같다.
상태 Suffix
Normal _normal
Pressed _pressed
Focused _focused
Disabled _disabled
Selected _selected

Background

  • 배경색이 pressed상태에 따라서 white -> sky_blue로 변하는 경우는 bg_white_to_sky_blue.xml로 한다.
  • 배경이 white색의 24dp로 테두리를 그리는 경우는 bg_white_radius_24dp.xml로 한다.
  • 배경이 투명하며 배경의 선만을 sky_blue색의 8dp로 테두리를 그리는 경우는 bg_stroke_sky_blue_radius_8dp.xml로 한다.

예시

`btn_call_normal.png`: 전화걸기 버튼 이미지
`btn_call_pressed.png`: 전화걸기 버튼 눌렸을때의 이미지
`btn_call.xml`: 전화걸기 버튼 이미지의 selector xml
`ic_error.png`: 에러가 발생했을 때 표시되는 이미지
`img_splash_chart.png`: 스플래시 화면에서 보여지는 차트 이미지

2.4 Dimension

  • <WHERE>_<DESCRIPTION>_<WHAT>
  • 여러 군데에서 재사용되는 개념이라면 변수로 정의해서 @dimen/xxx와 같이 사용
  • 그렇지 않다면 명시적으로 16dp와 같이 작성

Margin/Padding

  • 대부분의 margin/padding은 아래 정의된 space_xxx로만 사용되도록 한다.
<dimen name="space_x_small">8dp</dimen>  
<dimen name="space_small">12dp</dimen>  
<dimen name="space_median">16dp</dimen>  
<dimen name="space_s_large">18dp</dimen>  
<dimen name="space_large">20dp</dimen>  
<dimen name="space_x_large">24dp</dimen>
  • 그외에 특정 화면에서 위의 값을 따르지 않는경우, <WHERE>_<DESCRIPTION>_<WHAT>의 규칙으로 만든다.
<dimen name="register_car_item_car_model_start_padding">40dp</dimen>  
<dimen name="register_car_item_grade_start_padding">56dp</dimen>  
<dimen name="register_car_item_car_detail_start_padding">72dp</dimen>
  • 2번이상 쓰이는경우는 dimen에 정의해주는 것을 강제하고 1번만 쓰이는경우에는 xml코드에 넣어도 괜찮은것으로 한다.

Height/Size

  • 높이만 지정할때는 height, 1:1 비율로 같은 값이 들어갈때는 size로 한다.
<dimen name="toolbar_height">56dp</dimen>
<dimen name="register_input_view_default_height">280dp</dimen>  
<dimen name="register_input_view_collapse_height">200dp</dimen>
<dimen name="dealer_profile_image_size">48dp</dimen>

2.5 String

  • <WHERE/WHAT>_<DESCRIPTION>

예시

<!--Toolbar Title-->
<string name="title_search">검색</string>
<string name="title_settings">환경설정</string>

<!--Dialog Message-->
<string name="msg_login">로그인하시겠습니까?</string>
<string name="msg_login_failed">로그인에 실패했습니다.</string>
<string name="msg_password_error">비밀번호가 올바르지 않습니다.</string>

문단

  • 문단형태의 긴 문자열로 개행(\n)이 필요한 경우, \n을 다음줄의 앞에 쓴다.
 <string name="sample">문단 첫번째줄
        \n문단 두번째줄
        \n문단 세번째줄</string>

2.6 Theme/Style

  • Theme는 theme.xml, Style은 style.xml에 추가한다.
  • 1번만 쓰이는 경우에는 style을 만들지 않는다. (단, 앞으로 재사용될 가능성이 높은 경우에는 가능)
  • 모든 style은 parent를 갖는다.

Naming

  • style의 이름은 parent의 이름패턴과 맞춘다
<style name=”Widget.HeyDealer.Button” parent=”@style/Widget.AppCompat.Button”>
...
</style>
  • parent에서 일부 내용만 수정하고자 하는경우, parent이름 뒤에 달라진 내용의 내용을 추가해준다
<style name="Theme.HeyDealer.Transparent" parent="Theme.HeyDealer">
...
</style>

2.7 Attribute

  • Attribute이름은 camelCase로 한다.
<attr name="numStars" format="integer" />
  • 기존에 정의되어있는 android:xxx와 같은 동작을 유도하는 경우, 이 tag를 재사용한다.
<declare-styleable name="SpannedGridLayoutManager">  
 <attr name="android:orientation" />  
...
</declare-styleable>

기타

  • android:xxxLeft/android:xxxRight 대신 android:xxxStart/android:xxxEnd로 사용한다.(기타 Left/Right로 사용하는 부분 모두)

⚙Setting

📚Rule

Clone this wiki locally