1. 뷰를 이용한 화면 구성
- 레이아웃 XML로 화면 구성하기 ( 다양한 View들을 XML의 태그로 명시해 화면을 구성한다.
- 뷰 클래스의 기본 구조
: 안드로이드에서 화면을 만들어서 표시하는 컴포넌트는 엑티비티, 이 액티비티가 실행되면서 뷰 클래스를 이용해 화면을 구성한다.
: 액티비티 화면을 구성할 때 사용하는 클래스는 모두 View의 하위 클래스
: 레이아웃 클래스에 다양한 뷰를 포함하여 화면을 구성한다.
: 레이아웃을 중첩하여 사용하기도 한다.
- ScrollView
- 영역이 너무 커서 한 화면에 다 보여주지 못 할 때 사용
- 특징 : 한 개의 View만을 가질 수 있다. (여러개의 View를 넣고 싶으면 layout 사용해야 함)
- orientation
- horizontal : 수평 스크롤뷰 (수평 사용시 horizontal을 꼭 붙여주어야 한다)
- vertical : 수직 스크롤뷰
- ImageView
- 이미지를 화면에 출력하는 뷰
- scaleType :
center 이미지뷰의 가로/세로 크기에 맞게 원본 이미지를 잘라서 사용 centerCrop ImageView 크기에 이미지를 끼워 맞춘다. (이미지가 찌그러지기도 한다) centerInside 이미지를 줄이는 비율을 가로/세로 동일하게 한다. (이미지 찌그러짐 없음) fitCenter 이미지의 비율에 맞게 줄여서 ImageView에 넣는다. fitXY ImageView 크기에 이미지를 맞춘다. (작을 경우 확대/ 클 경우 centerCrop과 동일) fitStart 이미지를 이미지 뷰의 상단에 맞춘다. (아래쪽이 빈다) fitEnd 이미지를 이미지 뷰의 하단에 맞춘다. (윗쪽이 빈다) matrix 이미지를 다양한 방법으로 조절 가능 (자세한 내용 생략) - src : 출력할 이미지 설정 [android:src="@drawable/image3"]
- TextView
- 문자열을 화면에 출력하는 뷰
- text : 문자열을 대입/ 문자열 리소스 지정
- textSize : 문자열의 크기 지정 [android:textSize="20sp"]
- textColor : 문자열의 색상 지정 [android:textColor="#000000"]
- Id 네이밍
형태 : android:id = "@+id/text1"
역할 : 레이아웃 XML에 선언한 뷰를 구별함
- margin
역할 : 뷰의 간격을 설정/ 뷰와 뷰 사이의 간격
- padding
역할 : 뷰의 간격 설정/ 뷰의 콘텐츠와 테두리 사이의 간격
1-1. 뷰 바인딩
- 뷰 바인딩 : 레이아웃 XML 파일에 선언한 뷰 객체를 코드에서 쉽게 사용하는 방법
2. 뷰를 배치하는 레이아웃
- 레이아웃 클래스 : 다른 뷰 객체를 포함하는 일종의 그릇 역할의 클래스
- ConstraintLayout
: androidx에서 제공하는 라이브러리 > 사용하기 위해서 build.gradle 파일에 선언이 필요하다.
- LinearLayout
: 뷰를 가로나 세로 방향으로 나열하는 레이아웃 클래스 / orientation 속성에 horixontal이나 vertical 값으로 방향 지정
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/home_album_pot_exp1_iv"
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@drawable/img_potcast_exp" />
<ImageView
android:id="@+id/home_btn_play5_iv"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/widget_black_play"
android:layout_gravity="right|bottom"/>
</FrameLayout>
</LinearLayout>
- GridLayout
: 행과 열로 구성된 테이블 화면을 만드는 레이아웃 클래스
: orientation 속성으로 가로나 세로 방향으로 뷰 나열/ LinearLayout과 달리 줄바꿈 자동처리
: rowCount 행의 개수 지정
: columnCount 열의 개수 지정
- FrameLayout
: 뷰를 겹쳐서 출력하는 레이아웃 클래스
LinearLayout의 예시 코드에 사용된 바와 같다.
- TableLayout
: 뷰를 격자 형태로 배치하는 레이아웃 클래스
: 여러 개의 뷰를 동일한 크기로 배치해야 할때 사용 > ViewGroup이 아닌 LinearLayout을 상속 받는다.
: TableRow의 내부에 가로 방향으로 추가하고 싶은 뷰를 추가한다. > 뷰 하나가 column 역할
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>
> 2행 3열 ( 2 row, 3 column )의 테이블이 생성된다.
- RelativeLayout
: 상대 뷰의 위치를 기준으로 정렬하는 레이아웃 클래스
: 이미 출력된 특정 뷰를 기준으로 방향을 정하여 배치하는 것
android:layout_above | 기존 뷰의 위쪽에 배치 |
android:layout_below | 기존 뷰의 아래쪽에 배치 |
android:layout_toLeftOf | 기존 뷰의 왼쪽에 배치 |
android:layout_toRightOf | 기존 뷰의 오른쪽에 배치 |
'안드로이드' 카테고리의 다른 글
[UMC] 6주차 - ListView/ RecyclerView / 데이터 렌더링 (0) | 2022.01.05 |
---|---|
[UMC] 5주차 - 액티비티 생명주기 / MediaPlayer / GSON,JSON (0) | 2022.01.05 |
[UMC] 4주차 - Thread(스레드) 개념 및 사용법 (0) | 2022.01.05 |
[UMC] 3주차 - 다양한 화면 전환 (0) | 2022.01.05 |
[UMC] 2주차 - 화면 전환 (0) | 2022.01.05 |