뷰의 레이아웃
레이아웃은 다음과 같이 앱에서 사용자 인터페이스의 구조를 정의합니다.
-
Activity를 시작할 수 있습니다. 이
빌드되는 것은
View
및
ViewGroup
객체입니다. View
는 일반적으로 사용자가 볼 수 있는 것을 그립니다.
있습니다. ViewGroup
는 보이지 않는 컨테이너로, 컨테이너는
View
및 기타 ViewGroup
의 레이아웃 구조
객체의 현재 상태를 나타냅니다.
![](https://developer.android.com/static/images/viewgroup_2x.png?hl=ko)
View
객체는 종종 위젯이라고 하며 다음 중 하나일 수 있습니다.
많은 서브클래스(예:
Button
또는
TextView
입니다. 이
ViewGroup
객체는 일반적으로 레이아웃이라고 하며 다음 중 하나일 수 있습니다.
예: 다양한 레이아웃 구조를 제공하는
LinearLayout
또는
ConstraintLayout
입니다.
레이아웃을 선언하는 방법은 두 가지입니다.
- UI 요소를 XML로 선언합니다. Android는 간단한 XML을 제공합니다.
View
클래스 및 서브클래스에 해당하는 어휘 할 수 있습니다. 또한 Android 스튜디오의 Layout Editor: XML 빌드 드래그 앤 드롭 인터페이스를 사용하여 레이아웃을 제공할 수도 있습니다. - 런타임에 레이아웃 요소를 인스턴스화합니다. 앱에서 만들 수 있는
View
및ViewGroup
객체를 사용하고 이러한 객체를 조작합니다. 속성을 프로그래매틱 방식으로 사용할 수 있습니다.
XML에서 UI를 선언하면 동작을 제어하는 코드가 생성됩니다. 또한 XML 파일을 사용하면 다양한 화면 크기와 방향에 대해 다른 레이아웃을 제공할 수 있습니다. 이것은 자세한 내용은 다양한 화면 지원 크기를 참조하세요.
Android 프레임워크는 다음 중 하나 또는 둘 다 사용할 수 있는 유연성을 제공합니다. 이러한 메서드를 사용하여 앱의 UI를 빌드할 수 있습니다. 예를 들어 앱의 기본 레이아웃을 만든 다음 런타임에 레이아웃을 수정할 수 있습니다.
<ph type="x-smartling-placeholder">XML 쓰기
Android의 XML 어휘를 사용하면 UI 레이아웃과 HTML에서 웹페이지를 만드는 것과 동일한 방식으로 화면에 있는 요소를 표시할 수 있습니다. 일련의 중첩된 요소가 있습니다.
각 레이아웃 파일은 정확히 하나의 루트 요소를 포함해야 하며, 이 요소는
View
또는 ViewGroup
객체 루트를 정의한 후
추가 레이아웃 객체나 위젯을 하위 요소로 추가하여
레이아웃을 정의하는 View
계층 구조를 점진적으로 빌드합니다. 대상
다음은 세로 LinearLayout
를 사용하여
TextView
와 Button
를 보유합니다.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a TextView" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a Button" /> </LinearLayout>
레이아웃을 XML로 선언한 후
Android 프로젝트의 res/layout/
에 있는 .xml
확장 프로그램
그러면 제대로 컴파일됩니다
레이아웃 XML 파일의 구문에 대한 자세한 내용은 다음을 참조하세요. 레이아웃 리소스.
XML 리소스 로드
앱을 컴파일하는 경우, 각 XML 레이아웃 파일이 View
리소스 안에 컴파일됩니다. 앱의
Activity.onCreate()
콜백 구현을 제공합니다. 이렇게 하려면
setContentView()
,
다음과 같은 형식으로 레이아웃 리소스에 참조를 전달합니다.
R.layout.layout_file_name
입니다. 예를 들어 XML이
main_layout.xml
로 저장되어 있다면 다음 코드를 위해 로드합니다.
Activity
:
Kotlin
fun onCreate(savedInstanceState: Bundle) { super.onCreate(savedInstanceState) setContentView(R.layout.main_layout) }
자바
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main_layout); }
Android 프레임워크는 다음에서 onCreate()
콜백 메서드를 호출합니다.
Activity
가 시작될 때 Activity
자세한 내용은
자세한 내용은
소개
활동을 참조하세요.
속성
모든 View
및 ViewGroup
객체는 자체
다양한 XML 속성이 있습니다. 일부 속성은 View
와 관련이 있습니다.
객체를 지정합니다. 예를 들어 TextView
는 textSize
를 지원합니다.
속성의 값을 제공합니다. 하지만 이러한 속성은 View
로도 상속됩니다.
객체를 정의합니다. 일부는 View
모두에 공통적으로 적용됩니다.
객체에 대한 기본 객체가 포함됩니다. 이는 다음과 같이 루트 View
클래스에서 상속되기 때문입니다.
id
속성 다른 속성은 레이아웃으로 간주됨
매개변수(특정 레이아웃 방향을 설명하는 속성)
해당 객체의 상위 요소에 정의된 대로 View
객체의 하위 클래스
ViewGroup
객체.
ID
모든 View
객체는
트리 내에서 View
를 고유하게 식별합니다. 앱이
컴파일된 경우 이 ID는 정수로 참조되지만 일반적으로 ID는
id
속성의 문자열로 레이아웃 XML 파일에 포함됩니다. 이것은
모든 View
객체에 공통으로 적용되는 XML 속성이며
View
클래스. 매우 자주 사용합니다. 구문 내부의 ID에 대한 구문은
XML 태그는 다음과 같습니다.
android:id="@+id/my_button"
문자열 시작 부분에 있는 at 기호 (@)는
XML 파서는 ID 문자열의 나머지를 파싱 및 확장하고 이를
생성할 수 있습니다 더하기 기호 (+)는 새 리소스 이름임을 의미합니다.
를 생성하여 R.java
의 리소스에 추가해야 합니다.
파일에서 참조됩니다.
Android 프레임워크는 다른 여러 ID 리소스를 제공합니다. 인코더-디코더 아키텍처를
Android 리소스 ID이므로 더하기 기호는 필요하지 않지만
android
패키지 네임스페이스를 다음과 같이 정리합니다.
android:id="@android:id/empty"
android
패키지 네임스페이스는 다음을 참조하고 있음을 나타냅니다.
로컬 클래스 대신 android.R
리소스 클래스의 ID
리소스 클래스를 통해 학습합니다
뷰를 만들고 앱에서 이를 참조하려면 패턴은 다음과 같습니다.
- 레이아웃 파일에서 뷰를 정의하고
다음 예를 참고하세요.
<Button android:id="@+id/my_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/my_button_text"/>
- 뷰 객체의 인스턴스를 만들어 레이아웃에서 캡처합니다.
일반적으로
onCreate()
메서드를 사용할 수 있습니다.Kotlin
val myButton: Button = findViewById(R.id.my_button)
자바
Button myButton = (Button) findViewById(R.id.my_button);
뷰 객체의 ID를 정의하는 것은
RelativeLayout
상대 레이아웃에서 동위 뷰는 다른 뷰와 관련된 레이아웃을 정의할 수 있음
동위 뷰와 같으며, 이는 고유 ID로 참조됩니다.
ID는 트리 전체에서 고유할 필요는 없지만 다음과 같아야 합니다. 검색한 부분 내에서 고유해야 합니다. 종종 전체 가능한 경우 고유하게 만드는 것이 좋습니다.
레이아웃 매개변수
layout_something
이라는 XML 레이아웃 속성은
다음에 적합한 View
의 레이아웃 매개변수를
상주하는 ViewGroup
입니다.
모든 ViewGroup
클래스는 중첩 클래스를 구현합니다.
ViewGroup.LayoutParams
입니다.
이 서브클래스에는 각 객체의 크기와 위치를 정의하는 속성 유형이 포함되어 있습니다.
하위 뷰를 뷰 그룹에 적절하게 할당합니다. 그림 2와 같이 상위 요소는
뷰 그룹은 하위 뷰를 포함한 각 하위 뷰의 레이아웃 매개변수를 정의함
뷰 그룹
![](https://developer.android.com/static/images/layoutparams.png?hl=ko)
모든 LayoutParams
서브클래스에는 설정을 위한 자체 문법이 있습니다.
값으로 사용됩니다. 각 하위 요소는 다음과 같은 LayoutParams
를 정의해야 합니다.
서로 다른 포드를 정의할 수도 있지만
자체 하위 요소의 경우 LayoutParams
모든 뷰 그룹에는 layout_width
를 사용하여 너비와 높이가 포함됩니다.
및 layout_height
를 정의하고 각 뷰는 이들을 정의해야 합니다. 여러 항목
LayoutParams
에는 선택적으로 여백과 테두리가 포함됩니다.
너비와 높이는 정확한 치수로 지정할 수 있지만 자주 하는 것이 좋습니다. 이런 상수 중 하나를 사용하여 너비 또는 높이:
wrap_content
: 뷰에 자동으로 크기를 조절하도록 지시합니다. 필요한 크기일 수 있습니다.match_parent
: 뷰에 상위 요소만큼 커지도록 지시합니다. 뷰 그룹이 허용합니다.
일반적으로 다음과 같이 레이아웃의 너비와 높이를 지정하지 않는 것이 좋습니다.
절대적인 단위를 사용하지 않습니다. 더 나은 접근 방식은 상대적 측정값을 사용하는 것입니다.
밀도 독립형 픽셀 단위 (dp), wrap_content
또는
match_parent
: 앱이 여러 플랫폼에서 올바르게 표시되는 데
다양한 기기 화면 크기를 지원합니다. 허용되는 측정 유형은
레이아웃 리소스.
레이아웃 위치
뷰에는 직사각형 도형이 있습니다. 한 쌍으로 표현된 위치가 있고 왼쪽 및 상단 좌표, 두 차원으로, 지정할 수 있습니다. 위치와 치수의 단위는 픽셀입니다.
메서드를 호출하여 뷰의 위치를 가져올 수 있습니다.
getLeft()
및
getTop()
입니다.
전자는 선을 나타내는 직사각형의 왼쪽 (x) 좌표를 반환합니다.
볼 수 있습니다. 후자는 직사각형의 상단 (y) 좌표를 반환합니다.
뷰를 나타냅니다. 이러한 메서드는
kube-APIserver입니다 예를 들어 getLeft()
가 20을 반환하면
20픽셀 오른쪽에 있는 뷰는 왼쪽에 있는
있습니다.
또한 불필요한 계산을 피할 수 있는 편리한 메서드가 있습니다.
즉,
getRight()
및
getBottom()
입니다.
이 메서드는
뷰를 나타내는 직사각형입니다. 예를 들어 getRight()
를 호출하는 것은 다음과 같습니다.
이는 getLeft() + getWidth()
의 계산과 유사합니다.
크기, 패딩, 여백
뷰의 크기는 너비와 높이로 표현됩니다. 하나의 뷰에 두 쌍이 있는 지정할 수 있습니다.
첫 번째 쌍을 측정된 너비라고 하며
측정된 높이입니다. 이러한 치수는 뷰의 크기를 정의합니다.
를 포함해야 합니다. 다음을 호출하여 측정된 크기를 가져올 수 있습니다.
getMeasuredWidth()
및
getMeasuredHeight()
입니다.
두 번째 쌍은 너비 및 높이라고 하며,
그림 너비 및 그리기 높이 이러한 측정기준은
그리기 시간 및 레이아웃 후 화면에 표시되는 뷰의 실제 크기입니다. 이러한
값은 측정된 너비 및 높이와 다를 수 있지만 반드시 되는 것은 아닙니다. 나
를 호출하여 너비와 높이를 가져올 수 있습니다.
getWidth()
및
getHeight()
입니다.
뷰의 치수를 측정하기 위해 뷰는 자신의 패딩을 감안합니다. 패딩
뷰의 왼쪽, 상단, 오른쪽 및 하단 부분에 대해 픽셀로 표시됩니다.
패딩을 사용하여 뷰의 콘텐츠를 특정 수만큼 오프셋할 수 있습니다.
픽셀 예를 들어 왼쪽 패딩이 2이면 뷰의 콘텐츠를 2픽셀 푸시합니다.
드래그 앤 드롭하면 됩니다. 패딩을 설정할 수 있습니다.
setPadding(int, int, int, int)
메서드를 호출하고 다음을 호출하여 쿼리합니다.
getPaddingLeft()
,
getPaddingTop()
,
getPaddingRight()
,
및
getPaddingBottom()
입니다.
뷰는 패딩을 정의할 수 있지만 여백은 지원하지 않습니다. 하지만
뷰 그룹은 여백을 지원합니다. 자세한 내용은
ViewGroup
및
ViewGroup.MarginLayoutParams
를 참조하세요.
측정기준에 대한 자세한 내용은 다음을 참고하세요. 크기.
프로그래밍 방식으로 여백 및 패딩을 설정하는 것 외에 다음과 같이 설정할 수도 있습니다. 를 XML 레이아웃에 넣어야 합니다.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:padding="8dp" android:text="Hello, I am a TextView" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:paddingBottom="4dp" android:paddingEnd="8dp" android:paddingStart="8dp" android:paddingTop="4dp" android:text="Hello, I am a Button" /> </LinearLayout>
앞의 예는 여백과 패딩이 적용되는 것을 보여줍니다. 이
TextView
에 전체적으로 균일한 여백과 패딩이 적용됩니다.
Button
은(는) 다양한 애플리케이션에 독립적으로 적용할 수 있는 방법을 보여줍니다.
합니다.
일반 레이아웃
ViewGroup
클래스의 각 서브클래스는 다음과 같은 고유한 방법을 제공합니다.
그 안에 중첩된 뷰를 표시합니다. 가장 유연한 레이아웃 유형 중 하나는
레이아웃 계층 구조를 얕게 유지하는 데 가장 적합한 도구를 제공하는 것이
ConstraintLayout
다음은 Android에 내장된 몇 가지 일반적인 레이아웃 유형입니다. 있습니다.
<ph type="x-smartling-placeholder">동적 목록 만들기
레이아웃의 콘텐츠가 동적이거나 미리 정의되지 않은 경우
사용
RecyclerView
또는
서브클래스로
AdapterView
입니다.
RecyclerView
는 메모리를 사용하므로 일반적으로 더 나은 옵션입니다.
AdapterView
보다 더 효율적입니다.
RecyclerView
및
AdapterView
에는 다음이 포함됩니다.
RecyclerView
은(는) 더 많은 가능성을 제공하고
kubectl 명령어
맞춤
레이아웃 관리자가 필요합니다.
데이터로 어댑터 뷰 채우기
맞춤 인벤토리 라벨을 사용하여
AdapterView
ListView
등
또는
GridView
에 의해
AdapterView
인스턴스를
Adapter
,
이 메서드는 외부 소스에서 데이터를 가져와 View
를 만듭니다.
데이터 세트는 각 데이터 항목을 나타냅니다.
Android는 유용한 Adapter
의 여러 서브클래스를 제공합니다.
다양한 종류의 데이터를 검색하고
AdapterView
입니다. 가장 보편적인 어댑터 두 가지를 예로 들면 다음과 같습니다.
ArrayAdapter
- 데이터 소스가 배열인 경우에 이 어댑터를 사용합니다. 기본적으로
ArrayAdapter
는 다음을 호출하여 각 배열 항목의 뷰를 만듭니다.toString()
TextView
에 콘텐츠를 배치하는 것입니다.예를 들어, 문자열의 배열이
ListView
, 새ArrayAdapter
초기화 생성자를 사용하여 각 문자열과 문자열 배열의 레이아웃을 지정합니다.Kotlin
val adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, myStringArray)
자바
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, myStringArray);
이 생성자의 인수는 다음과 같습니다.
- 내 앱
Context
- 각 문자열의
TextView
가 포함된 레이아웃은 배열 - 문자열 배열
그런 다음
setAdapter()
ListView
:Kotlin
val listView: ListView = findViewById(R.id.listview) listView.adapter = adapter
자바
ListView listView = (ListView) findViewById(R.id.listview); listView.setAdapter(adapter);
각 항목의 모양을 맞춤설정하려면
toString()
메서드를 사용해야 합니다. 또는 각 항목에 대한 뷰를TextView
: 예를 들어ImageView
각 배열 항목 -ArrayAdapter
클래스를 확장하고 재정의하다getView()
를 호출하여 각 항목에 원하는 뷰 유형을 반환합니다. - 내 앱
SimpleCursorAdapter
- 이 어댑터는
Cursor
입니다.SimpleCursorAdapter
사용 시 사용할 레이아웃 지정Cursor
의 각 행과 원하는 레이아웃의 뷰에 삽입하려는Cursor
입니다. 예를 들어 사용자의 이름과 전화번호 목록을 만들고자 하는 경우Cursor
를 반환하는 쿼리를 실행할 수 있습니다. 각 사람에 대한 행과 이름과 숫자에 대한 열이 포함됩니다. 나 생성된 데이터 세트의 레이아웃에서 각 결과에 대해 원하는Cursor
및 정수 각 열이 있어야 하는 해당 뷰를 지정하는 배열 배치:Kotlin
val fromColumns = arrayOf(ContactsContract.Data.DISPLAY_NAME, ContactsContract.CommonDataKinds.Phone.NUMBER) val toViews = intArrayOf(R.id.display_name, R.id.phone_number)
자바
String[] fromColumns = {ContactsContract.Data.DISPLAY_NAME, ContactsContract.CommonDataKinds.Phone.NUMBER}; int[] toViews = {R.id.display_name, R.id.phone_number};
SimpleCursorAdapter
를 인스턴스화할 때 레이아웃으로 표시되며,Cursor
결과 및 다음 두 배열이 포함됩니다.Kotlin
val adapter = SimpleCursorAdapter(this, R.layout.person_name_and_number, cursor, fromColumns, toViews, 0) val listView = getListView() listView.adapter = adapter
자바
SimpleCursorAdapter adapter = new SimpleCursorAdapter(this, R.layout.person_name_and_number, cursor, fromColumns, toViews, 0); ListView listView = getListView(); listView.setAdapter(adapter);
그런 다음
SimpleCursorAdapter
는 각 행의 뷰를 만듭니다. 제공된 레이아웃을 사용하는Cursor
fromColumns
항목을 해당하는toViews
에 추가 합니다.
앱의 수명이 진행되는 동안
어댑터에서 읽을 수 있는 경우
notifyDataSetChanged()
연결된 뷰에 데이터가 변경되었으며 새로고침된다고 알립니다.
있습니다.
클릭 이벤트 처리
AdapterView
의 각 항목에서 클릭 이벤트에 응답할 수 있습니다.
이를 구현함으로써
AdapterView.OnItemClickListener
인터페이스에 추가되었습니다. 예를 들면 다음과 같습니다.
Kotlin
listView.onItemClickListener = AdapterView.OnItemClickListener { parent, view, position, id -> // Do something in response to the click. }
Java
// Create a message handling object as an anonymous class. private OnItemClickListener messageClickedHandler = new OnItemClickListener() { public void onItemClick(AdapterView parent, View v, int position, long id) { // Do something in response to the click. } }; listView.setOnItemClickListener(messageClickedHandler);
추가 리소스
다음에서 레이아웃이 사용되는 방법을 확인하세요. 해바라기 데모 앱을 참고하세요.