[Android] Palette

Lee Gayoung·2022년 9월 28일
0

UMC 3기

목록 보기
4/10

💡 팔레트는 안드로이드 스튜디오에서 드래그를 통해 바로 사용할 수 있는 요소들의 모임이다.

✔️ Text

1. TextView (텍스트뷰)

문자열을 표시하는 요소이며, 일반적으로 많이 사용된다. 문자열의 크기는 주로 sp 단위를 이용해 조절한다.
이 단위를 이용하면 사용자 기기의 글꼴에 대해 유연하게 대응할 수 있다. 또한 문자열의 높이(height)를 wrap_content로 설정하면 다양한 기기의 시스템 폰트 크기에 대응할 수 있다.

2. EditText

문자열을 입력할 수 있는 요소이다. 이때 inputType을 반드시 지정해야 한다. inputType은 화면에 나타나는 키보드 자판의 유형, 입력 가능한 문자, 입력된 문자가 보이는 형식으로 구성되어 있다.

ex) text(문자), textPersonName(문자와 숫자), textPassword, numberPassword, textEmailAddress, ... 

3. AutoCompleteTextView (오토 컴플리트 텍스트뷰)

EditText를 상속한 TextView이며, 텍스트를 입력할 때 자동완성 기능을 제공한다.

4. MultiAutoCompleteTextView (멀티 오토 컴플리트 텍스트뷰)

텍스트를 입력할 때 자동완성 기능을 제공하며, 여러 줄에 걸쳐 텍스트를 입력할 수 있다.

5. CheckedTextView (체크드 텍스트뷰)

TextView를 상속한 요소이다. 요소에 체크 박스, 혹은 라디오 버튼을 넣어서 선택이 가능하도록 설정할 수 있다.

6. TextInputLayout (텍스트 인풋 레이아웃)

TextInputEditText, EditText를 자식으로 감싸는 레이아웃이며, 사용자가 텍스트를 입력할 때 유동적인 라벨을 보여준다.

✔️ Button

1. Button

탭하거나 클릭해서 특정 행동을 취할 수 있도록 하는 요소입니다. 가장 흔하게 사용되는 위젯 중 하나이다. View.OnClickListener를 설정해서 특정 동작을 수행할 수 있도록 설정할 수 있습니다. TextView를 상속받은 위젯이기 때문에 버튼에 문자열을 표시할 수 있다.

2. ImageButton

ImageView를 상속받았으며, 문자열 대신 이미지를 표시할 수 있는 버튼이다. Button과 마찬가지로 View.OnClickListener를 설정하면 클릭되었을 때 특정 동작을 수행할 수 있다. 이미지를 설정하기 위해선 background와 src를 사용할 수 있다. 두 가지 방법에는 차이점이 존재하기 때문에 유의해야 한다.

  • background
    설정하려는 이미지가 ImageView 사이즈에 맞춰진다. 즉, 문자 뜻 그대로 배경으로 설정된다.

  • src
    이미지가 마치 ImageButton 위에 올려놓아지는 것과 비슷하다.

3. Chip 및 ChipGroup

Chip은 어떤 동작이나 속성 등을 나타내는 요소이다. 사용자로 하여금 정보를 입력하거나 선택사항을 선택하고, 내용을 필터링하거나 어떤 행동을 취하도록 도와준다. 여러 개의 Chip은 ChipGroup으로 관리할 수 있다. ChipGroup을 이용해 자식 Chip을 나란히 정렬할 수 있으며, 마치 RadioGroup처럼 같은 그룹 내에서 한 번에 하나의 Chip만 선택될 수 있도록 설정할 수 있다. 또한 Chip만 여러 개를 사용하다가 화면 범위를 벗어나면 아래로 내려가지 않고 계속해서 옆으로 생성되는데, ChipGroup을 사용하면 자식 Chip들은 화면 범위를 벗어나기 전에 다음 줄에 생성된다.

4. CheckBox

선택 여부를 나타낼 수 있는 버튼이며, 선택 여부를 나타내는 네모 버튼 옆에 문자열을 표시할 수 있다. 선택한 상태에서 한 번 더 클릭하면 선택이 해제되며, 일반적으로 다양한 선택지 옵션을 선택해야 할 때 사용된다.

5. RadioButton 및 RadioGroup

선택 여부에 따라 두 상태로 표시되는 버튼입니다. CheckBox와는 다르게 선택된 상태에서 한 번 더 클릭했다고 해서 uncheck 되지 않는다. RadioGroup을 통해 관리하며, 이 그룹 내에서 한 RadioButton이 선택되면 다른 버튼은 모두 uncheck된다. 다양한 옵션 중 하나만 선택해야 할 때 사용됩니다.

6. ToggleButton

두 가지의 상태 사이에서 설정을 변경할 때 사용되는 버튼이다. 버튼을 클릭하면 텍스트와 버튼 하단 색상이 변경되며, 이를 통해 현재 상태를 알 수 있다. 기본적으로 on/off로 문자열이 설정되어있다.

7. Switch

Toggle Button처럼 두 상태 중 하나를 지정할 수 있는 요소이다. ToggleButton과 마찬가지로 클릭하면 상태가 변하며 사용자는 'thumb'이라는 요소를 앞뒤로 드래그함으로써 상태를 변경할 수도 있다.

8. FloatingActionButton

앱 UI의 기본 작업을 유발하는 원형 버튼이다. 특히 화면에서 주요하고 흔하게 사용되는 동작을 수행하는 기능을 담고 있다. 일반적으로 화면 우측 하단에 원형의 형태로 존재한다.

✔️ Widgets (위젯)

1. View (뷰)

다른 위젯들의 기본 클래스이다. 커스텀하여 자유롭게 사용할 수 있다.

2. ImageView (이미지 뷰)

화면에 이미지를 표시할 때 사용되는 요소이다. src 혹은 background로 이미지를 설정할 수 있다.

3. WebView (웹 뷰)

웹페이지를 활동 레이아웃의 일부로 표시한다. 특수한 웹브라우저의 기능은 사용할 수 없으며, 웹페이지를 나타내는 것에 불과하다. WebView를 사용하기 위해선 액티비티에서 이 요소를 참조한 후, loadUrl을 통해 웹페이지를 로드해야 한다. 웹페이지를 표시하기 위해서는 인터넷에 액세스 할 수 있어야 하며, manifest 파일에서 INTERNET 권한을 요청해야 한다.

4. VideoView (비디오 뷰)

비디오 파일을 표시하는 요소이다. VideoView 자체는 재생 상태, 재생 위치, 자막 등을 제공하지 않는다. 따라서 액티비티에서 이 요소들을 저장하고 복구시켜야 한다. 비디오는 인터넷을 통해 검색해서 Uri 주소로 설정할 수 있으며, 혹은 SD카드에 있는 비디오를 화면에 표시할 수도 있다.

5. CalendarView (캘린더 뷰)

화면에 달력을 표시하는 요소이다. 화면 표시 상태와 상호작용 과정은 OS 버전과 테마에 따라 상이하다. 일반적으로는 사용자가 원하는 날짜로 이동하기 위해서 스크롤이 필요하고, 날짜를 선택할 때는 탭을 이용할 수 있다.

6. ProgressBar

동작이 얼마나 오래 걸릴지 모를 때 사용된다. 기본 적용은 얼마나 진행되었는지의 구체적인 값을 나타내지 않고, 원으로 돌아가는 애니메이션이 표시된다(indeterminate).

7. SeekBar

ProgressBar를 상속한 요소로써 determinate ProgressBar처럼 수평의 바가 있다. 사용자는 thumb을 선택한 후 드래그해서 현재 상태를 조절할 수 있다. drawable을 통해 모양을 커스텀할 수 있다.

8. RatingBar

SeekBar와 ProgressBar를 상속한 것이며 별의 개수로 상태를 표시한다. 사용자는 드래그하거나 터치함으로써 별의 개수를 설정할 수 있다. 별의 개수는 요소의 너비가 wrap_content로 설정되었을 때 전부 표시되며, 만일 그 이외의 값이 설정된다면 어떻게 표시될지 예측할 수 없다.

9. SearchView

ActionBar에 검색 메뉴를 만들거나, submit 버튼 없이 엔터를 눌렀을 때 바로 검색이 되도록 만들고자 할 때 사용되는 요소이다. 추천 검색어를 리스트 형식으로 표시할 수 있으며, 추천 검색어를 선택하면 검색할 수 있다.

10. TextureView

비디오나 OpenGL 장면과 같은 콘텐츠 스트림을 표시할 때 사용하는 요소이다. SurfaceView와 비슷한 역할을 하며 알파 및 회전 처리가 뛰어나지만, 다른 동영상을 합성하는 경우 성능이 다소 떨어진다. 만일 TextureView 위에 다른 뷰가 배치되면 콘텐츠 업데이트로 인해 다른 뷰 요소가 다시 그려질 수 있기 때문이다.

11. SurfaceView

빠른 그래픽 그리기를 지원하는 뷰이다. 화면을 그리는 동작을 위한 독립적인 스레드를 만들어 실행시키며, 따라서 앱의 자원 사용 상태에 상관없이 실시간으로 뷰를 그릴 수 있다.

12. Divider

요소들을 구분하기 위한 선을 그려주는 요소이다. Divider '요소'보다는 기능에 초점을 맞춰서 이름지어진 'View'이다.

✔️ Containers

1. Spinner

여러개의 값 중 1개를 선택하기 위해 사용하는 안드로이드에서 제공해주는 기본 위젯이다.

2. RecyclerView

스크롤이 가능한 컨테이너에 여러 개의 뷰를 담아서 보여주는 뷰 그룹이다. ListView가 더 진보하고 유연해진 버전이다.

3. ScrollView

수직(위아래)로 스크롤하는 기능이며 하나의 위젯만 적용 가능하다.

4. HorizontalScrollView

수평(좌우)으로 스크롤하는 기능이다.

5. NestedScrollView

한 화면에 여러개의 스크롤이 필요할 때 사용한다.

6. ViewPager2

RecyclerView를 기반으로 한다. ViewPager에서는 좌우 스크롤링만 가능하고 ViewPager2는 상하 스크롤링 기능을 추가하였다. 목록 리스트를 보여주기 위해서 사용된다.

7. CardView

CardView는 FrameLayout 클래스를 확장한 것이며 둥근 모서리, 배경과 그림자가 추가된 FrameLayout이다.

8. AppBarLayout

LinearLayout 머티리얼 디자인 앱 바 개념의 많은 기능이다. 즉, 스크롤링 제스처를 구현 하는 카테고리이다.

9. BottomAppBar

.NET Framework를 "cradles" 시키는 모양의 배경을 지원하는 툴바의 확장이다. (아래쪽의 앱 바)

10. NavigatationView

애플리케이션의 표준 탐색 메뉴이다. 메뉴 내용은 메뉴 리소스 파일로 채울 수 있다.

11. BottomNavigationView

NavigatationView가 하단 위치한 것이다.

12. Toolbar

응용 프로그램 콘텐츠 내에서 사용하기위한 표준 도구 모음이다.

13. TabLayout

탭을 표시하기위한 가로 레이아웃을 제공한다.

14. TabItem

TabLayout 레이아웃 내에서 탭 항목을 선언 할 수있는 특수한 '보기'이다. TabLayout에 추가되지 않으며 탭 항목의 텍스트, 아이콘 및 사용자 정의 레이아웃을 설정할 수 있다.

15. ViewStub

런타임에서 레이아웃 리소스를 느리게 확장하는 데 사용할 수 있는 크기가 0 인 보이지 않는 보기이다.

16. <include>

레이아웃에 재사용 가능한 구성요소를 추가한다.

17. <fragment>

FramentActivity 내의 어떤 동작 또는 사용자 인터페이스의 일부이며 액티비티의 모듈식 섹션이다. 여러 개의 프래그먼트를 하나의 액티비티에 결합하여 창이 여러 개인 UI를 빌드할 수 있으며, 하나의 프래그먼트를 여러 액티비티에서 재사용할 수 있다. 자체적인 수명 주기를 가지고, 자체 입력 이벤트를 수신하고, 액티비티 실행 중에 추가 및 삭제가 가능하다. 다른 액티비티에 재사용할 수 있는 '하위 액티비티'와 같은 개념이다.

18. NavHostFragment

자체 포함 된 navigation이 발생할 수 있도록 레이아웃 내에 영역을 제공한다.

19. <view>

다른 View들을 포함하고 있거나 포함할 수 있는 View를 말한다. 일반적으로 ViewGroup을 상속하면서 Layout이 아닌 클래스를 지칭한다.

20. <requestFocus>

해당 뷰의 focus이다.

✔️ Google

1. AdView

View배너 광고를 표시하는 API이다.

2. MapView

Google지도 서비스에서 얻은 데이터와 함께지도를 표시하는 API이다.

🌱 참고 자료

  1. https://kmight0518.tistory.com/category/Android/Palette - 다수의 게시글 참고
  2. 안드로이드-스튜디오-팔레트-정리

0개의 댓글