Android::Layout

1) Layout(레이아웃) 이란

레이아웃은 앱에서 사용자 인터페이스를 위한 구조 ( 예: Activity)를 정의한다.

레이아웃의 모든 요소는 View와 ViewGroup 객체의 계층을 사용하여 빌드된다.

 

View는 (일반적으로) 사용자가 보고 상호작용할 수 있는 것을 그린다. 일반적으로 View 객체는 '위젯'이라고 하고, 여러 하위 클래스 중 하나가 될 수 있다. 예시로 Button, Textview가 있다. 

ViewGroup은 View와 다른 ViewGroup객체의 레이아웃 구조를 정의하는 투명 컨테이너이다. Viewgroup객체는 대게 '레이아웃'이라고 부르고, 다양한 레이아웃 구조를 제공하는 여러 유형 중 하나일 수 있다. 예시로 LinearLayout, ConstraintLayout이 있다.

---

2) Layout 클래스 사용하기

layout클래스를 사용하는 방법은 리소스 xml 파일에 추가하는 것과, java 소스에서 layout의 인스턴스를 생성하는 것 이 두 가지가 존재한다. 하지만 Layout 인스턴스를 생성하는 방법은 거의 사용되지 않고 거의 모든 경우에 리소스 XML파일에 Layout클래스를 추가하는 방법이 사용된다. 

( 구글의 안드로이드 개발 가이드라인에 따르면 xml로 선언하는 것이 ui의 구조를 시각화하기가 쉽고, 문제 발생 시 디버깅하기도 쉽기 때문)

---

3) Android Layout 공통사항

↓ 아래 링크는 이해도 잘되고 자세하다. 참고!

https://recipes4dev.tistory.com/87?category=658689

안드로이드 레이아웃 공통사항. (Android Layout Common)

참고 :  https://recipes4dev.tistory.com/66

---

 

Layouts - ConstraintLayout, Guideline,LinearLayout(horizontal), LinearLayout(vertical), FrameLayout, TableLayout, TableRow, space

Legacy - GridLayout, ListView, TabHost, RelativeLayout, GridView

 

⊙ LinearLayout

https://developer.android.com/reference/android/widget/LinearLayout

: view들을 수평적으로나 수직적으로 정렬하는 레이아웃

android:orientation - 자식 view들이 row(열)의 형태로 놓일 것인지, column(행)의 형태로 놓일 것인지. row의 형태로 세팅하고 싶으면 "horizontal" 을, column의 형태로 세팅하고 싶으면 "vertical"을 사용.

android:gravity - content 내에서 객체가 자신의 경계 내에서 x및 y축어디에 위치하는지. 

https://developer.android.com/guide/topics/ui/layout/linear.html

android:layout_weight- 독립적으로 자식 view에 적용할 수 있는데, 이 속성은 중요정도를 할당하고, 큰 weight값은 나머지 남은 공간으로 확장되어 채울 수 있다.

 

⊙ RelativeLayout

https://developer.android.com/guide/topics/ui/layout/relative

: 자식 view를 relative(상대적인) position에 보이는 view group이다. 각각 view의 position은 다른 view에 상재거으로 정의된다. 매우 강력한 유저 인터페이스 디자인에 매우 유용하다. 그 이유는 중첩된 viewgroup을 제거하고 레이아웃 계층구조를 flat하게 유지할 수 있어서 성능이 향상되기 때문이다.

// 자식View위젯들이 서로 간의 상대적 배치 관계에 따라 화면에 표시될 위치가 결정되도록 만들어주는 Layout 클래스. 예를 들자면 A를 화면에 표시하고 B는 A의 오른쪽에 표시, 또는 C를 첫번째 자식으로 두고 D가 C아래에 위치하도록 배치 등. 상대적인 위치를 지정할때 그 대상이 반드시 RealativeLayout에 포함된 View 위젯이어야만 하는 것은 아니다. 

 

⊙ FrameLayout

: 주로 하나의 자식 View 위젯만 표시할 때 사용하는 layout 클래스. 하지만 오직 하나의 자식 view 위젯만 가질 수 있다는 의미는 아니다. FrameLayout에 여러 View 위젯을 자식으로 추가하면 겹쳐진 형태로 표시되고, 가장 최근에 추가된 View 위젯이 가장 상위에 표시된다. 이러한 특징을 이요해 가장 상위의 View 위젯만 표시하고 나머지는 보이지 않게 만듦으로써 하나의 자식 View만 표시되도록 만드는 것이다.

FrameLayout이 많이 사용되는 예 중 한 가지는 Fragment를 사용하는 경우이다. 특히 여러 Fragment를 동일한 위치 내에서 교체하여 표시하고자 할 때, Fragment의 컨테이너 역할로써 FrameLayout을 주로 사용한다.

 

⊙ TableLayout

: 자식 View 위젯들을 테이블(행과 열로 구성) 로 나누어 표시하는 layout 클래스

 

⊙ ListView와 GridView

: 이름에서 오해할 수 Layout이 아닌 것으로 오해할 수 있지만 엄연히 viewGroup으로 부터 상속받은 Layout클래스의 한 종류. 동일한 자식 View위젯을 내용만 달리하여 반복적으로 표시해야 하는 경우 ListView와 GridView가 매우 유용하게 사용될 수 있다.

 

---

Text - TextView,EditText

⊙TextView

https://developer.android.com/reference/android/widget/TextView

: 안드로이드 UI를 구성함에 있어 화면에 텍스트를 표시하는 기능을 담당. 텍스트와 연관된 기능을 포함하는 Button, EditText의 부모 클래스

⊙EditText

: User가 편집할 수 있는 텍스트

---

Button - Button, imageButton, ChipGroup, Chip, CheckBox, RadioGroup, RadioButton, ToggleButton, Switch

⊙imageButton

: 이미지를 사용자가 누르면 클릭되는 버튼으로 보여준다. 

⊙ChipGroup

: 다수의 chip을 hold한다. 디폴트로 chip들은 다수의 라인으로 컴퓨터 화면에서 텍스트가 차지하는 공간을 조정한다.

이런게 chip!

⊙Checkbox

:체크박스는 사용자로 하여금 하나 또는 여러개의 옵션을 선택할 수 있게 한다.

전형적으로는 수직리스트 형태

⊙RadioGroup

: 이 클래스는 다수의 radio button 세트에 대한 다중 제외 범위를 만드는 데 사용된다.

https://yoo-hyeok.tistory.com/5

 

⊙RadioButton

: 주로 여러종류의 선택 항목에서 한가지만 선택하는 형태의 버튼. Radio Button은 주로 RadioGroup내에 존재한다. 라이오 그룹 내의 라디오 버튼이 존재하여야 리스트 중 한가지를 선택할 수 있다. 

 

⊙ToggleButton

: 두가지 states중 setting을 변경하는데 사용된다.  예를 들면 on, off

⊙Switch

: 다른 형태의 toggle button (= slider 형태)

---

Widgets - View, ImageView, WebView, VideoView, CalendarView, SeekBar, SearchView, TextureView, Horizontal Divider, Vertical Divider

 

⊙View

⊙ImageView

: ImageView를 사용하면 화면에 이미지 파일을 출력한다. 

drawable 리소스 이미지 등록 >> ImageView로 이미지 보여주기 >> ImageView 속성 추가 >>자바 소스에서 이미지 변경

 

⊙WebView

: 웹뷰는 안드로이드 프레임에 내장된 웹 브라우저 컴포넌트로 뷰 형태로 앱에 임베딩이 가능하다. 웹 뷰에 사용되는 브라우져 컴포넌트는 우리가 일반적으로 생각하는 웹브라우져 수준으로 생각하면 곤란하다. 일반적인 웹 브라우져를 안드로이드 OS에 맞게 일부 기능들을 제외하고 작게 만든 웹브라우져라고 생각하면 되고 그렇기 때문에 HTML5 호환성등 기능의 제약을 많이 가지고 있다. (← 출처: https://bcho.tistory.com/1051 [조대협의 블로그] ) 

: WebView 오브젝트를 사용하면 활동 레이아웃의 일부로 웹 콘텐츠를 표시할 수 있지만, 완전히 개발된 브라우저의 일부 기능은 부족하다. WebView는 UI에 대한 제어력 향상과 앱용으로 특별히 설계된 환경에 웹 페이지를 내장할 수 있는 고급 구성 옵션이 필요할 때 유용하다. 

 

⊙VideoView

https://academy.realm.io/kr/posts/android-videoview/

: 비디오 파일을 보여준다. VideoView란 다양한 자원에서 영상을 불러올 수 있는 동영상 재생 전담 위젯이다. MediaController라는 UI를 제공하고 scaling 과 tinting등 다양한 디스플레이 기능을 제공하고 있어 간편하게 사용할 수 있습니다.

 

⊙CalendarView

https://dpdpwl.tistory.com/3

: 이 클래스는 캘린더 위젯이다. 캘린더를 보여주고 날짜를 선택할 수 있다. 이 달력에서 지원되는 날짜 범위는 구성할 수 있다.

 

⊙SeekBar

https://postiveemblem.tistory.com/166

: 엄지손가락으로 drag하는 것을 추가한 progressbar 확장버전이다. 

: 슬라이더 형태의 게이지 바를 말한다. UI상에서 사용자가 슬라이더를 움직이면 그 progress 값을 가져와 활용할 수 있다. 음량이나 밝기 외에도 다양한 곳에 사용된다.

주로사용속성 (max = seekbar의 최대값 , thumb =seekbar의 커서 이미지)

 

⊙SearchView

https://developer.android.com/reference/android/widget/SearchView

https://salix97.tistory.com/231

: SearchView는 액션바에 검색메뉴를 만들거나, submit버튼 없이 사용자가 엔터를 눌렀을 때 바로 검색이 되게 하고 싶은 경우에 사용할 수 있다.

 

⊙TextureView

https://developer.android.com/reference/android/view/TextureView

https://aroundck.tistory.com/2075

https://m.blog.naver.com/PostView.nhn?blogId=gomdev&logNo=220389147746&proxyReferer=https:%2F%2Fwww.google.com%2F

:TextureView는 비디오나 opengl 장면같은 콘텐츠 스트림을 표시하는데 사용될 수 있다. 콘텐츠 스트림은 remote프로세스 에서 올 수도 있다. 텍스처뷰는 하드웨어 가속 창에서만 사용할 수 있다. 소프트웨어로 렌더링할 때 텍스처뷰는 아무것도 그릴 수 없다.

surfaceview와 달리 텍스처뷰는 별도의 창을 만들지 않고 일반 뷰로 동작한다. 이러한 주요 차이점은 텍스처뷰를 이동, 변환, 애니메이션 등을 가능하게 한다. 

 

: textureview란 view객체들 중 가장 복잡하며, View와 surfaceTexture를 결합한 것이다. 

https://ggeutzzang.tistory.com/12

 

⊙Horizontal Divider,Vertical Divider

: DividerItemDecoration은 RecycleView이다. LinearLayoutManager의 항목 사이에 구분자로 사용할 수 있는 항목이다. 

horizontal(수형)방향과, vertical(수직) 방향 모두를 지원한다. 

---

Containers - Spinner, RecycleView, ScrollView, HorizontalScrollView, ViewPager, CardView, AppBarLayout, BottomAppBar, NavigationView, BottomNavigation, Toolbar, Tablayout, TabItem, ViewStub

⊙Spinner 

https://developer.android.com/guide/topics/ui/controls/spinner

https://m.blog.naver.com/PostView.nhn?blogId=kimsh2244&logNo=221071051884&proxyReferer=https:%2F%2Fwww.google.com%2F

: 스피너는 세트에서 하나의 값을 빠르게 선택할 수 있는 방법을 제공한다. 디폴트로 현재 선택되어있는 값을 보여준다. 스피너를 누르면 드롭다운 메뉴를 보여준다. 메뉴는 선택가능한 다른 값들이다. 

⊙RecycleView

https://developer.android.com/jetpack/androidx/releases/recyclerview

https://recipes4dev.tistory.com/154

: 많은 수의 데이터 집합을 제한된 영역 내에서 유연하게 표시할 수 있도록 만들어주는 위젯이다. 

: 사용자가 관리하는 많은 수의 데이터 집합을 개별 아이템 단위로 구성하여 화면에 출력하는 뷰그룹이며, 한 화면에 표시되기 힘든 많은 수의 데이터를 스크롤 가능한 리스트로 표시해주는 위젯이다. (리스트 뷰와 사용방식 유사 , 리스트뷰에 유연함과 성능을 더한 것이라고 볼 수 있다.)

 

⊙ScrollView

https://developer.android.com/reference/android/widget/ScrollView

https://yollo.tistory.com/6

: 수직(위아래)로 스크롤하는기능

스크롤 뷰에는 하나의 child만 둘 수 있다. 

 

⊙HorizontalScrollView

: 수평으로 스크롤 하는 기능

 

⊙ViewPager

https://recipes4dev.tistory.com/148

: 스와이프를 통해 컨텐츠 전환을 할 수 있도록 만들어주는 요소

데이터를 페이지 단위로 표시하고, flip을 통해 페이지를 전환할 수 있도록 만들어주는 컨테이너. 

자체적으로 화면을 그리는 기능을 기지지는 않고, 여러 종류의 뷰 위젯을 사용하여 각 뷰페이저의 페이지를 구성한다. 뷰페이저가 뷰그룹으로부터 상속된 것을 보면, 컨테이너 역할을 수행한다는 것을 유추 가능!

 

⊙CardView

https://thepassion.tistory.com/319

https://developer.android.com/jetpack/androidx/releases/cardview

:  아래 그림 처럼 곡선테두리와 그림자를 표시할 수 있는 형태의 레이아웃이다. 

⊙AppBarLayout

https://developer.android.com/reference/com/google/android/material/appbar/AppBarLayout

https://readystory.tistory.com/127

: material designs app bar concept의 특징을 수행하는 수직 LinearLayout. 

: 안드로이드는 원래 ActionBar가 기본적으로 제공되고 있었지만, 액션바는 안드로이드 API 버전마다 다른 기능과 다른 동작을 제공해 개발자가 사용자에게 일관된 UX를 제공하는데 불편함이 있었다.  이에 대한 해결책으로 구글은 material design 패키지에 있는 AppBarLayout과 ToolBar을 제시한다.

Appbarlayout은 vertical LinearLayout을 상속한 레이아웃으로, 특히나 스크롤 제스처에 대해 몇 가지 동작을 적용할 수 있다. 

 

⊙BottomAppBar

https://developer.android.com/reference/com/google/android/material/bottomappbar/BottomAppBar

https://namget.tistory.com/entry/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-bottom-app-bar-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

: 한손으로 사용이 용이하게끔 네비게이션 메뉴와 다양한 옵션들을 하단으로 내린 스타일을 말한다.

⊙NavigationView

https://developer.android.com/reference/com/google/android/material/navigation/NavigationView

https://ljs93kr.tistory.com/3

:어플리케이션의 표준 네비게이션 메뉴를 보여준다.  보통 NavigationView는 DrawerLayout 안에 위치하게된다.

 

⊙BottomNavigation

https://developer.android.com/reference/com/google/android/material/bottomnavigation/BottomNavigationView

: bottom의 네비게이션 바를 나타낸다. bottom 네비게이션 바는 사용자로 하여금 탐색및 뷰를 바꾸는 것을 용이하게 한다. 응용프로그램에 3-5가지의 top-level destinations 이 있을때 사용한다.

 

⊙Toolbar

https://developer.android.com/reference/android/widget/Toolbar

https://recipes4dev.tistory.com/149

: 앱에서 가장 중요한 액션 또는 가장 자주 사용되는 액션들을 제공하는 AppBar을 만들때 사용한다. 

⊙Tablayout

https://developer.android.com/reference/com/google/android/material/tabs/TabLayout

https://recipes4dev.tistory.com/147

:조금 간편하게 Tab의 기능을 구현한다.

탭을 표시할 수 있는 수평 레이아웃을 제공한다. 

 

⊙ViewStub

https://developer.android.com/reference/android/view/ViewStub

https://www.charlezz.com/?p=19977

https://sites.google.com/site/endihom/home/programming-language/android/article/layout-tricks-stubs

: ViewStub이란 사이즈가 없는 보이지 않는 뷰(=제로 크기 뷰)로 런타임에서 늦은 전개(lazy-inflate)를 원할 때 사용할 수 있다. 

 

---

Google- AdView, MapView

⊙AdView

https://developers.google.com/admob/android/banner?hl=ko

: 배너 광고를 게재하려 할때, 광고를 게재할 Activity 또는 Fragment 레이아웃에 AdView를 넣는다.

필수 속성으로는- ads:adSize ,  ads:adUnitId가 있다.

 

⊙MapView

: fragment에서 구글 맵을 사용할 때