황진호

황진호

공부한걸 요약해서 기록해놓는 블로그

[Doit! 안드로이드 앱 프로그래밍] Layout

2 분 소요


참고서적: Doit 안드로이드 앱 프로그래밍


지난번 공부에서는 LinearLayout에 대해서 공부했었다. 이번포스팅에서는 그외의 다른 Layout들에 대해서 복습하겠다.

Layout에는 대표적으로 5개의 종류가있다.


  1. ConstraintLayout
  2. LinearLayout
  3. RelativeLayout
  4. TableLayout
  5. FrameLayout

책에서 LinearLayout 다음으로는 RelativeLayout을 소개한다.

RelativeLayout은 위치를 다른 view 나 부모컨테이너에 대해 상대적으로 view의 위치를 결정시킨다.

부모컨테이너에 대한 상대적인 위치와 다른view 로의 상대적인 위치를 결정시키는 속성에는 서로 차이가있다.

부모컨테이너에 대한 상대적 위치를 결정시키는 속성은 Layout_align 뒤에 parent 나 center 에대해 위치를 결정시킨다.

예를들면 Layout_alignParentTop 을 하게되면 , 부모컨테이너의 상단부에 위치시키게된다.

다른view에 대한 상대적 위치를 결정시킬때는, Layout_ 이후 위치를 명시해준다.

예를들면, Layout_blow 속성값에 다른view의 id값을 명시해주면, 그 view의 아래쪽에 view를 위치시키게된다.

RelativeLayout

위의 예제는 버튼1,2,3 을 생성한뒤에, 버튼2를 width와 height를 각각 match_parent로 한다.

그리고 버튼2의 위치를 버튼1의 아래에, 버튼3의 위에 위치시키도록 한다.

상대적위치를 결정시키기 위해 부모컨테이너는 relativelayout으로 바꾸고, 다른 view에 의해 위치를 결정시키기 때문에 layout_blow와 layout_above 속성에 각각 버튼1과3의 id값을 속성값에 넣어준다.

다음은, TableLayout 이다.

TableLayout은 표나 엑셀시트처럼 격자형태로 구성하는 형태이다. 그렇기에 행과 열의 형태를 띈다.

TableLayout 안에는 TableRow라는 태그들이 들어가있는데, 이는 한 행을 의미한다.

그리고 각 행의 column은 TableRow 태그안에 들어가는 view 가 된다.

TableLayout

위의 예제에서는 LinearLayout 내에 TableLayout을 만들면, 그안에 TableRow들이 생긴다. 그중 두개만 남긴뒤, 각TableRow안에 버튼3개를 넣는다.

여기서 중요한 속성이 나오는데, 부모컨테이너에 대해 여유공간을 할당하여 각 row의 위치를 재지정시켜주거나, columns의 위치를 재지정 시켜주는 속성이 있다.

row의 위치를 재지정시켜주는 속성은 Stretch columns와 shrink columns 이다. 먼저, Stretch columns 는 부모컨테이너의 폭에 맞게 TableRow태그들 안에 있는 view들의 폭을 강제로 확장시킨다.

이와반대로 shrink columns는 부모컨테이너의 폭에 맞게 TableRow 태그들 속의 view들의 폭을 강제로 축소시킨다.

이속성은 TableLayout 태그내에 명시하며, 값은 인덱스갯수를 준다. 예를들어, "0" 을 명시하게되면, 첫번째 인덱스에 해당하는 View가 나머지 여유공간을 모두 차지하여 가로방향을 꽉 채워준다.

또는 "0,1" 을 명시하게되면, 첫번째와 두번째 인덱스에 해당하는 View가 나머지 여유공간을 모두 가져 가는 형태이다.

columns 의 위치를 재지정시켜주는 속성은 layout_columns 와 layout_span 이다. 각 row의 view들은 각각 자동으로 index번호를 순서대로 0,1,2 ... 에 해당하는 값을 지정받는데, layout_column 속성은 순서를 설정할수있다. 예를들어, layout_column에 2를주게되면, 3번째 위치에 view가 가게되며 그다음 view들의 위치에도 영향을 주게된다.

layout_span은 여러개의 column에 걸쳐서 몇개를 차지하게 할것인가를 결정하는 속성이다. 예를들어, layout_span에 2를 주게되면, 2개의 column만큼을 view가 차지하게 된다.

다음은, FrameLayout 이다. FrameLayout은 스택과 같은 구조로 아래부터 위로 쌓아가는 형태로, visibility 속성이 있다.

visibility 속성은 쌓여있는 각 view들이 보일것인가(visible), 보이지않을것인가 (invisible) 또는 없애다 (gone) 이있다.

invisible와 gone의 차이점은, invisible은 존재하지만 보이지않는 속성이고 gone은 완전히 존재하지않아서 다음view가 그위치를 채우는 형태입니다.

FrameLayout

위의 예제에서는 button의 클릭에따라 imageView가 전환되는 예제입니다. 이를위해 FrameLayout내에 imageView 두개를 넣어 각 속성을 invisible와 visable로 구성하여 mainactivity.java에서 버튼의 onclick 메소드가 호출되엇을때, 두개의 imageview의 visibility 속성을 바꿔주게 됩니다.

마지막으로 ScrollView 입니다.

ScrollView는 추가된 뷰의 영역이 한눈에 보이지 않을때 스크롤을 사용하여 전체를 보기위한 view 입니다.

ScrollView는 default가 수직방향 이다. 만약 수평방향을 원한다면, HorizontalScrollView를 사용하면 된다.

ScrollView

위의 예제에서는 수평방향 HorizontalScrollView 내에 ScrollView를 구성하고, 그안에 imageView를 넣어 버튼의 onclick 메소드에 의해 imageview 의 사진이 바뀌거나,전환되는 예제이다. button1을 눌럿을때는 사진이 바뀌게되고, button2를 눌렀을때는 FrameLayout에 의해 사진이 전환되게 된다.

이예제는 xml이아닌 activity.java 에 명시하여 event에의해 사진이 전환되거나 바뀌게 만들었는데, 중요한부분은 res/drawable 에 추가된 그림을 가져오는 부분이다.

res/drawable 폴더에 접근하기 위해서는 getDrawable() 메소드를 이용한다. 그런데, getDrawable 메소드는 Resources 객체에 정의되어 있으며, Bitmap Drawable 객체에 의해 만들어지는 메소드다.

따라서, Resources res 라는 객체를 할당하여 res객체에 getResource() 메소드로 resource를 가져오고, res객체에 있는 getDrawable() 메소드로 res/drawable에 접근하여 bitmapdrawable 객체에 할당하면 원하는 그림파일을 가져올수있다.

그후 Bitmap.getIntrinsic width와 height 값을 가져와 할당시켜주면 끝이다.

모든 내용은 깃허브주소 에 있다.

태그:

카테고리:

업데이트:

공유하기

Twitter Facebook LinkedIn

댓글남기기

참고

[Kotlin] Annotation 생성 및 활용 방법

6 분 소요

보통 어떤 기능을 만들기 위해 클래스나 인터페이스를 생성하고, 프로퍼티와 함수를 구현하고 이용합니다. 이렇게 생성된 클래스의 프로퍼티나 함수를 이용하여 캡슐화된 특정 기능을 호출 및 참조할 수 있습니다.

[Kotlin] Coroutine - 예외처리

17 분 소요

코루틴을 생성하기 위해서는 간단하게 Coroutine Builder 함수인 launch() 와 async() 를 이용하여 새로운 코루틴을 생성할 수 있습니다. 코루틴 빌더는 CoroutineScope 의 확장함수로써 기본적으로 상위 CoroutineScope 의 CoroutineC...

[Kotlin] 동시성 문제와 해결방법

10 분 소요

소프트웨어를 개발하는 데 있어서, 성능을 높이기 위해 가장 흔하게 사용할 수 있는 방법은 병렬로 실행하는 것 입니다. 병렬 실행은 하드웨어의 특성을 이용하여 성능을 높이는 가장 좋은 방법이지만, 병렬로 여러 프로세스나 스레드에서 같은 데이터를 접근하여 읽고 쓰는 과정이 수행될 때,...

[Compose] Compose Compiler

17 분 소요

최근들어 Compose 를 UI toolkit 으로 많이 사용하고 있습니다. 저 역시 마찬가지로 기존의 xml 기반의 뷰 작업들을 모두 Compose 로 migration 한 뒤로, 새로운 기능을 개발할 때 Compose 로 개발하고 있습니다. Compose 를 사용하고는 있지만...