[모든 팔레트 정복] 3. Widgets(위젯) part 1

안녕하세요? 닉네임간편입니다.

이번 시간에는 안드로이드 스튜디오의 팔레트(Palette) 중 Widgets(위젯)에 대해서 알아보겠습니다.

설명하기에 앞서, 굉장히 많은 요소가 있는 걸 볼 수 있습니다. 그렇기에 파트를 두 개로 나누어서 설명드리겠습니다.

1. View(뷰)

다른 위젯들의 기본 클래스입니다. 이를 커스텀해서 자유롭게 사용할 수 있습니다.

2. ImageView(이미지 뷰)

화면에 이미지를 표시할 때 사용되는 요소입니다.

src 혹은 background로 이미지를 설정할 수 있습니다. 두 설정 방식엔 차이가 있습니다. 이는 앞서 ImageButton에 대해서 설명할 때 말씀드렸으므로, 해당 게시글을 참조하시면 될 것 같습니다.

3. WebView(웹뷰)

웹페이지를 활동 레이아웃의 일부로 표시할 수 있게 해 줍니다. 물론 특수한 웹브라우저의 기능은 사용할 수 없으며, 단지 웹페이지를 표시하는 것에 불과합니다.

WebView를 사용하기 위해선 액티비티에서 이 요소를 참조한 후, loadUrl을 통해 웹페이지를 로드해야 합니다.

이때 웹페이지를 표시하기 위해선 인터넷에 액세스 할 수 있어야 하며, manifest 파일에서 INTERNET 권한을 요청해야 합니다.

4. VideoView(비디오 뷰)

비디오 파일을 표시하는 요소입니다. 이때 VideoView 자체에서는 현재 재생 상태, 재생 위치, 자막 등을 제공하지 않습니다. 따라서 액티비티에서 이 요소들을 저장하고 복구시켜야 합니다.

비디오는 인터넷을 통해 검색해서 Uri 주소로 설정할 수 있으며, 혹은 SD카드에 있는 비디오를 화면에 표시할 수도 있습니다.

아래는 인터넷을 통해 비디오를 튼 것입니다.

이때 XML 파일에서 뷰를 배치했다고 해도 비디오가 자동으로 틀어지진 않습니다. 따라서 액티비티 내에서 코드로 비디오 URI를 설정하거나 SD 카드에 접근해 비디오를 표시해야 합니다.

저는 Uri를 이용해 비디오를 트는 코드로 작성했습니다.

var video: VideoView = findViewById(R.id.video)
        video.setMediaController(MediaController(this))
        video.requestFocus()
        video.setVideoURI(Uri.parse("https://videocdn.bodybuilding.com/video/mp4/62000/62792m.mp4"))
        video.start()

5. CalendarView(캘린더뷰)

화면에 달력을 표시하는 요소입니다. 그러나 정확하게 어떻게 화면에 표시되고 상호작용할지는 OS 버전과 테마에 따라 상이합니다. 그러나 일반적으로 사용자는 원하는 날짜로 가기 위해서 스크롤하고 날짜를 선택할 때는 탭을 이용할 수 있습니다.

6. ProgressBar(프로그레스 바)

어떤 동작이 진행 중인지를 알려주는 요소입니다. determinate과 indeterminate라는 두 가지 모드가 있습니다.

1) indeterminate

어떤 동작이 얼마나 오래 걸릴지 모를 때 사용합니다. 기본적으로 이 모드가 적용되며, 얼마나 진행되었는지 구체적인 값을 표시하지 않고 단지 원으로 돌아가는 애니메이션을 보여줍니다. 예시로는 유튜브의 끝없이 돌아가는 버퍼링 원이 있습니다.

팔레트에서 선택 시 일단 ProgressBar를 선택하시면 이와 같은 뷰가 나옵니다.

2) determinate

구체적으로 특정 동작을 완료할 때까지 알 때, 어디까지 진행되었는지 구체적으로 화면에 표시할 때 사용됩니다. 예를 들어 화면에 표시되는 진행상황을 setProgress() 메서드를 통해 설정하거나 혹은 incrementProgressBy() 메서드를 호출해서 현재 진행 상태를 구체적인 값만큼 증가시킬 수 있습니다.

기본적으로 ProgressBar는 100이 최댓값이지만, max 속성을 사용해 이를 조절할 수 있습니다.

팔레트에서 ProgressBar (Horizontal)를 선택하시면 나옵니다. 이름 그대로 수평으로 진행 상태를 보여주는 것이니까요.

7. SeekBar(시크 바)

ProgressBar를 상속한 요소로써 determinate ProgressBar처럼 수평의 바가 있습니다. 사용자는 thumb을 선택한 후 드래그해서 현재 상태를 조절할 수 있습니다. 또한 ProgressBar를 상속했기 때문에 max 속성으로 최댓값을 지정할 수 있으며, setProgress() 메서드를 통해 현재 상태를 지정할 수 있습니다.

아래는 밝기를 조절하는 SeekBar 예시입니다.

보이는 것처럼 drawable을 통해 모양을 커스텀할 수 있습니다.

팔레트에서 선택할 시 일반 SeekBar를 선택하시면 위와 같은 뷰가 나옵니다.

 

또한 style을 Widget.AppCompat.SeekBar.Discrete으로 설정하면 특정 지점마다 구간이 있어서 보다 정확한 위치에 사용자가 드래그할 수 있도록 합니다. 아래 그림은 그 예시입니다.

팔레트에서 선택할 시 SeekBar (Discrete)를 선택하시면 위와 같은 요소가 나옵니다.

8. 마무리

이번 시간에는 위젯들 중 View, ImageView, WebView, VideoView, CalendarView, ProgressBar, SeekBar에 대해서 알아보았습니다.(나열하고 보니 정말 많네요!)

이 요소들은 유용하게 사용되는 요소들이기 때문에 이 글을 보시고 잘 정리되었으면 좋겠습니다.