Skip to content

Resource Convention

Jump to bottom
YuGyeong98 edited this page Jan 8, 2024 · 1 revision

헤이딜러 Resource Convention 참고

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_rating: 커스텀으로 만든 RatingView의 layout
  • item_my_car: 내차량 목록에서 사용되는 각각의 item의 layout
  • layout_dealer_review: 재사용되는 딜러리뷰 layout

ID

  • <WHAT>_<DESCRIPTION>
  • View의 대문자를 축약하여 <WHAT>의 Prefix로 사용한다.
  • 아래 이름규칙을 적용한다.
  1. Android의 View는 camel case의 대문자를 축약한 형태로 정한다.
    : TextView -> tv_
  2. 만약 View의 이름이 Space, Switch와 같이 1개의 대문자만 존재한다면 모두 소문자인 아이디로 정한다.
    : Switch -> switch_
  3. CustomView는 전체 View의 이름을 snake case이름으로 정한다.
    : MyCustomView -> my_custom_view
    (만약 1개의 xml에 같은 여러 CustomView가 존재한다면 <WHAT>_<DESCRIPTION>의 형태로 정한다.)

WHAT

View Prefix
TextView tv_
ImageView iv_
CheckBox cb_
RecyclerView rv_
EditText et_
ProgressBar pb_
FrameLayout fl_
NestedScrollView nsv_
Space space_
Switch switch
AbcDeFgh adf_
Abcdef abcdef_
Toolbar toolbar_
MyCustomView my_custom_view
YourView your_view

기타

  • 해당 View를 특정기능과 상관없이 VISIBLE/GONE등의 View의 용도로 사용한다면 view_xxx로 사용하는것도 허용한다.

예시

  • iv_close: 닫기 ImageView
  • tv_select: 선택 TextView
  • rv_car_list: 자동차 목록 RecyclerView
  • view_etc_model: 기타 모델 화면 LinearLayout

Drawable

  • <WHAT>_<DESCRIPTION>(_<WHERE>)(_<SIZE>)
  • 겹치는 경우 뒤에 where 추가
  • 필요한 경우 size 추가

WHAT

Prefix 설명
btn_ 버튼으로 쓰이는 이미지
ic_ 아이콘 형태의 이미지
bg_ 백그라운드 색상, radius 정하는 파일
img_ 실제사진이거나 아이콘형태가 아닌 일러스트형태의 이미지
div_ divider로 활용되는 이미지
selector_ selector로 활용되는 파일

Background

  • 배경이 white색의 24dp로 테두리를 그리는 경우는 bg_white_radius_24dp.xml로 한다.
  • 배경이 투명하며 배경의 선만을 sky_blue색의 8dp로 테두리를 그리는 경우는 bg_stroke_sky_blue_radius_8dp.xml로 한다.

예시

  • selector_call.xml: 전화걸기 이미지의 selector xml
  • ic_dealer_gift.png: 딜러가 보내준 기프티콘을 보여줄때 표시되는 이미지
  • img_splash_chart.png: 스플래시 화면에서 보여지는 차트 이미지

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>
  • 그외에 특정 화면에서 위의 값을 따르지 않는경우, 의 규칙으로 만든다. 
<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>

String

  • <WHERE>_<DESCRIPTION>
  • 특정화면에서 쓰이는 텍스트 아니라 여러군데에서 공통으로 재사용될 텍스트라면 all_<DESCRIPTION>로 이름을 짓는다.
  • where 바뀌는 부분에서 한 줄 띄우기

예시

  • permission_dialog_camera_title: 카메라권한을 요구하는 Dialog의 제목
  • permission_dialog_camera_description: 카메라권한을 요구하는 Dialog의 설명내용
  • all_yes: 네
  • all_ok_understand: 여러 Dialog에서 네, 알겠습니다로 쓰이는 공통의 텍스트

문단

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

Color

Theme/Style

  • 1번만 쓰이는 경우에는 style을 만들지 않는다. (단, 앞으로 재사용될 가능성이 높은 경우에는 가능)

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>
  • Base Style과 Theme의 경우는 앞에 Base를 붙인다.
<style name="Base.Theme" parent="..." />
<style name="Base.Theme.Transparent">...</style>
<style name="HeyDealerTheme" parent="Base.Theme">...</style>
<style name="HeyDealerTheme.Transparent" parent="Base.Theme.Transparent" />

<style name="Base.TextAppearance.HeyDealer" parent="...">...</style>
<style name="Base.TextAppearance.HeyDealer.Headline">...</style>
<style name="TextAppearance.HeyDealer.Headline1" parent="Base.TextAppearance.HeyDealer.Headline">...</style>
<style name="TextAppearance.HeyDealer.Headline2" parent="Base.TextAppearance.HeyDealer.Headline">...</style>

Attribute

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

🐾 개발소

📕 Rule

📗 Convention

📘 Daily Scrum

Week 1
Week 2
Week 3
Week 4
Week 5
Week 6

🐶 Tech Blog

공세영

김유경

민수현

안명우

Clone this wiki locally