[Android] Palette (Widgets)

View

 

View란 애플리케이션에서 눈에 가시적으로 표현되는 모든 것을 가리킵니다.

버튼, 이미지, 테이블, 레이블 등등 최고 상위 클래스는 View클래스입니다.

이 View클래스를 베이스로 두고 각각의 기능을 표현하게 되는 것입니다.

View 상속 트리

위의 그림처럼 안드로이드에서 사용하는 모든 뷰들의 상속 관계입니다.

View클래스와 ViewGroup클래스로 나눠지지만 차이점은 View계열의 클래스는

가시적으로 모양이 있는 클래스이고 ViewGroup클래스는 눈에는 보이지 않지만

뷰들을 잘 배치해주거나 그룹핑을 하는 역할을 합니다.

즉 ViewGroup는 View와 ViewGroup들을 담는 역할을 합니다.

---

ImageView

 

TextView에는 텍스트를 표시했듯 이미지는 ImageView를 사용하여 표시할 수 있습니다.

XML에 ImageView를 추가하고 화면에 표시할 이미지(Drawable) 리소스 ID를 ImageView의 src속성에

지정을 하면 됩니다.

위의 경로에 이미지를 추가할 수 있습니다.

---

WebView

 

먼저 WebView를 사용하려면 매니페스트에 인터넷 관련 권한을 열어주어야 합니다.

<uses-permission android:name="android.permission.INTERNET"/>

아래와 같이 XML에 WebView를 추가해줍니다.

<WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

아래는 간단하게 loadUrl() 메서드를 사용해서 네이버를 추가하는 코드입니다.

    val web_v = findViewById<WebView>(R.id.webview)
    web_v.loadUrl("https://naver.com")

---

VideView

 

동영상을 볼 수 있는 View입니다. 먼저 제가 하는 방법은 동영상을 리소스 폴더에 넣어 해당 영상을 작동하는

방법을 기준으로 작성하겠습니다.

res폴더에 raw폴더를 생성한 뒤 raw폴더에 지정한 동영상을 옮겨줍니다.

val v_v = findViewById<VideoView>(R.id.videoView)

        //애뮬레이터로 확인할 시 내 프로젝트내에 동영상파일이 있어야합니다.
        val VIEDO_PATH = "android.resource://" + packageName + "/" + R.raw.test
        var uri: Uri = Uri.parse(VIEDO_PATH)
        v_v.setVideoURI(uri)
        //동영상이 없을 시 에러 출력합니다.
        v_v.setMediaController(MediaController(this))

동영상과 하단 컨트롤러가 표시가 됩니다.

---

CalendarView

 

스크롤이 가능한 달력을 보여주며 날짜를 선택할 수 있습니다.

<CalendarView
        android:id="@+id/calendarView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxDate="12/31/2021"
        android:minDate="01/01/2021"
        />

maxDate와 minDate를 이용하여 최대 최소 날짜를 지정할 수 있습니다.

---

ProgressBar/ProgressBar(Horizontal)

 

프로그레스 바는 애플리케이션 안에서 특정 작업을 수행 중일 때 사용자에게 작업이 정상적으로

진행되고 있음을 시각적으로 표현할 때 사용되는 뷰입니다.

normal은 단순 로딩 중이라는 것만 가시적으로 알 수 있고

horizontal은 정확한 진행 상황을 확인할 수 있습니다.

val bt1 = findViewById<Button>(R.id.bt_1)
        val bt2 = findViewById<Button>(R.id.bt_2)
        val pro1 = findViewById<ProgressBar>(R.id.progressBar1)
        bt1.setOnClickListener {  view ->
            pro1.incrementProgressBy(5)
        }
        bt2.setOnClickListener { vire ->
            pro1.incrementProgressBy(-5)
        }

위의 코드에서 작성한 것처럼 +5라는 버튼을 누르면 horizontal의 진행상황이 5/100 만큼 늘어나고

-5 버튼을 누르면 반대로 줄어드는 것을 확인할 수 있습니다.

---

SeekBar

 

SeekBar는 슬라이더 형태의 게이지 바를 말합니다.

UI상에서 사용자가 슬라이더를 움직이면 그 progress값을 가져와 활용을 합니다.

주로 음량이나 밝기에 사용되며 외에도 다양한 곳에서 쓰입니다.

주로 사용되는 속성 세 가지를 알아보겠습니다.

onProgressChanged	시크바를 조작하고 있는 중 작동
onStartTrackingTouch	시크바를 조작하기 시작했을 때 작동
onStopTrackingTouch	시크바 조작을 마무리 했을 때 작동

SeekBar와 TextView를 이용하여 현재 progress값을 받아오는 코드를 아래와 같이 작성합니다.

seek_b.setOnSeekBarChangeListener(object :SeekBar.OnSeekBarChangeListener
        {
            override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
                text.text = "onProgressChanged : $progress"
            }

            override fun onStartTrackingTouch(seekBar: SeekBar?) {
                text.text = "onStartTrackingTouch : ${seekBar!!.progress}"
            }

            override fun onStopTrackingTouch(seekBar: SeekBar?) {
                text.text = "onStopTrackingTouch : ${seekBar!!.progress}"
            }
        })

시작 화면

SeekBar를 이동할 때

SeekBar이동이 끝났을 때

---

SeekBar(Discrete)

 

위의 SeekBar와 같지만 단계(?)가 존재하여 자석처럼 이끌립니다.

---

RatingBar

RatingBar는 SeekBar와 ProgressBar의 확장 버전으로 별 모양을 통해 평점이나

점수 또는 등급을 매길 때 사용하는 뷰 위젯입니다.

주요 속성 네 가지를 알아보겠습니다.

inIndicator	false일때 사용자가 별표를 터치 또는 드래그를 통해 변경 가능
numStarts	화면에 표시되는 별의 갯수
stepSize	평점 변경 단위
rating	최초 평점

주의사항.

 

layout_width속성 값을 wrap_content가 아닌 match_parent 같은 속성으로 지정될 경우

numStarqs속성 값과 관계없이 뷰 크기가 자동으로 조절되면서 표시되는 별의 개수도

의도치 않게 늘어나게 됩니다.

style="@style/Widget.AppCompat.RatingBar.Small"
style="@style/Widget.AppCompat.RatingBar.Indicator"
style="@style/Widget.AppCompat.RatingBar"

위 세 개의 Style로 별의 크기를 변경할 수 있습니다.

 

---

SearchView

 

SearchView는 텍스트 검색을 수행할 수 있는 입력 폼이 나타납니다. 별도의 제출 버튼이 없으며

키보드의 엔터 또는 검색 아이콘을 클릭해주어야 검색어 처리가 진행됩니다.

 

**

---

TextureView

 

**

---

SurfaceView

 

**

---

Horizontal Divider

 

UI를 짜다보면 View들 사이를 구분하기 위해서 선을 그려줘야 하는 경우가 있을 때 사용하는 palette입니다.

 

두 개의 버튼 사이에 구분선이 들어간 것을 보실 수 있습니다.

 

---

Vertical Divider

 

Horizontal Divider 와는 반대로 수직으로 구분선을 그려줍니다.

 

---