맞춤 뷰 구성요소 만들기

Compose 방식 사용해 보기
Jetpack Compose는 Android에 권장되는 UI 도구 키트입니다. Compose에서 레이아웃을 사용하는 방법을 알아보세요.
<ph type="x-smartling-placeholder"></ph> Compose의 맞춤 레이아웃 → 를 통해 개인정보처리방침을 정의할 수 있습니다.

Android는 UI를 빌드하기 위한 정교하고 강력한 구성요소화된 모델을 제공하며, 기본 레이아웃 클래스는 View 및 ViewGroup입니다. 플랫폼에는 미리 빌드된 다양한 View 및 ViewGroup 서브클래스(위젯 및 UI를 구성하는 데 사용할 수 있습니다.

사용 가능한 위젯으로는 Button, TextView, EditText, ListView, CheckBox, RadioButton, Gallery, Spinner가 있으며 좀 더 특수한 목적에 맞는 AutoCompleteTextView, ImageSwitcher 및 TextSwitcher가 있습니다.

사용 가능한 레이아웃 중에는 LinearLayout, FrameLayout, RelativeLayout, 기타 등등 더 많은 예는 다음을 참고하세요. 일반 레이아웃.

미리 빌드된 위젯이나 레이아웃이 필요에 맞지 않으면 나만의 위젯이나 레이아웃을 만들 수 있습니다. View 서브클래스. 기존 위젯을 약간만 조정해야 하거나 위젯 또는 레이아웃을 서브클래스로 분류하고 해당 메서드를 재정의할 수 있습니다.

자체 View 서브클래스를 만들면 앱의 모양을 정밀하게 제어할 수 있습니다. 함수입니다. 맞춤 뷰를 통해 사용할 수 있는 컨트롤에 대한 아이디어를 얻으려면 활용 가능한 기능의 예는 다음과 같습니다.

  • 완전히 맞춤 렌더링된 View 유형을 만들 수 있습니다(예: '볼륨'). 제어" 2D 그래픽을 사용하여 렌더링된 노브로, 아날로그 전자 컨트롤과 유사합니다.
  • View 구성요소 그룹을 하나의 새로운 단일 구성요소로 결합할 수 있습니다. 콤보 상자 (팝업 목록과 자유 입력 텍스트 입력란의 조합) 등을 만들고, 이중 창 선택기 컨트롤 (왼쪽과 오른쪽 창에 각각에 재할당할 수 있는 목록이 있음) 지정할 수 있습니다.
  • EditText 구성요소가 화면에서 렌더링되는 방식을 재정의할 수 있습니다. 이 <ph type="x-smartling-placeholder"></ph> NotePad 샘플 앱은 이 효과를 사용하여 줄이 있는 메모장 페이지를 만듭니다.
  • 키 누름과 같은 다른 이벤트를 캡처하고 맞춤 방식으로 처리할 수 있습니다. 생각해야 합니다.

다음 섹션에서는 맞춤 뷰를 만들어 애플리케이션에서 사용하는 방법을 설명합니다. 대상 자세히 알아보려면 View 클래스.

기본 접근 방식

다음은 자체 View을(를) 만들기 위해 알아야 할 사항을 개략적으로 보여줍니다. 구성요소:

  1. 자체 클래스로 기존 View 클래스 또는 서브클래스를 확장합니다.
  2. 슈퍼클래스에서 일부 메서드를 재정의합니다. 재정의할 슈퍼클래스 메서드는 on. 예를 들면 다음과 같습니다. onDraw(), onMeasure(), 및 onKeyDown()입니다. 이는 다음의 on 이벤트와 유사합니다. Activity 또는 ListActivity 재정의하는 것이 좋습니다.
  3. 새 확장 클래스를 사용합니다. 완료되면 다음 대신 새 확장 클래스를 사용할 수 있습니다. 확인할 수 있습니다.
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

완전히 맞춤설정된 구성요소

원하는 대로 완전히 맞춤설정된 그래픽 구성요소를 만들 수 있습니다. 있습니다. 오래된 아날로그 게이지 같은 그래픽 VU 미터나 노래 따라 부르기 텍스트 뷰를 원할 수도 있습니다. 노래방 기계에 맞춰 노래하면서 공이 튀어 오르는 가사를 따라 움직이는 게임이죠. 추천 사항 내장 구성 요소가 할 수 없는 일들을 만듭니다.

다행히 원하는 대로 모양과 동작이 있는 구성요소를 만들 수 있으며, 여기에는 상상력, 화면 크기 및 사용 가능한 처리 능력에 의해 결정됩니다. 데스크톱보다 전력이 훨씬 적은 시스템에서 실행되어야 할 수도 있습니다. 애플리케이션을 지원합니다

완전히 맞춤설정된 구성요소를 만들려면 다음을 고려하세요.

  • 확장할 수 있는 가장 일반적인 뷰는 View이므로 일반적으로 확장하여 시작합니다. 새 슈퍼 구성요소를 생성합니다.
  • XML에서 속성과 매개변수를 가져올 수 있는 생성자를 제공할 수 있으며 VU 미터의 색상 및 범위와 같은 자체적인 속성과 매개변수를 바늘의 너비와 감쇠와 같은 개념입니다.
  • 자체 이벤트 리스너, 속성 접근자, 수정자뿐 아니라 좀 더 정교한 동작을 구현할 수 있습니다.
  • 거의 확실하게 onMeasure()를 재정의하려고 하며 구성요소에 무언가를 표시하려면 onDraw()를 재정의합니다. 둘 다 기본 onDraw()는 아무것도 하지 않으며 기본값은 onMeasure()는 항상 크기를 100x100으로 설정하지만 이는 바람직하지 않을 수 있습니다.
  • 필요에 따라 다른 on 메서드를 재정의할 수도 있습니다.

onDraw() 및 onMeasure() 확장

onDraw() 메서드는 Canvas에 대해 2D 그래픽, 기타 표준 또는 맞춤 구성요소, 스타일이 지정된 텍스트 또는 생각할 수 있는 것이죠.

<ph type="x-smartling-placeholder">

onMeasure()는 좀 더 복잡합니다. onMeasure()은(는) 매우 중요한 요소입니다. 렌더링 계약을 체결할 수 있습니다. onMeasure()은(는) 다음과 같아야 합니다. 포함된 부품의 측정값을 효율적이고 정확하게 보고하도록 재정의됩니다. 이것은 는 상위 요소의 제한 요구사항에 의해 약간 더 복잡해지고, onMeasure() 메서드: 그리고 setMeasuredDimension() 메서드를 호출한 후 측정된 너비와 높이를 포함합니다. 계산됩니다. 재정의된 onMeasure() 메서드에서 이 메서드를 호출하지 않으면 측정 시간에 예외가 발생합니다.

개략적으로 onMeasure() 구현은 다음과 같습니다.

  • 재정의된 onMeasure() 메서드가 너비와 높이로 호출됩니다. 너비 및 높이 제한에 대한 요구사항으로 취급되는 사양입니다. 매우 유용한 기능입니다. widthMeasureSpec 및 heightMeasureSpec 매개변수는 둘 다 차원을 나타내는 정수 코드입니다. 포드의 종류에 대한 전체 참조는 이러한 사양에서 요구할 수 있는 제한사항은 아래 참조 문서에서 View.onMeasure(int, int) 이 참조 문서에서는 전체 측정 작업에 대해서도 설명합니다.
  • 구성요소의 onMeasure() 메서드는 측정 너비와 높이를 계산합니다. 세 가지 유형이 있습니다. 통과된 사양을 벗어나지 않도록 노력해야 함 허용될 수는 있지만 이 경우 부모는 다음을 포함하여 할 일을 선택할 수 있습니다. 자르거나 스크롤하거나 예외를 발생시키거나 onMeasure()에 다시 시도하도록 요청하는 경우 측정 사양이 다를 수 있습니다
  • 너비와 높이를 계산할 때는 setMeasuredDimension(int width, int height) 메서드를 측정할 수 있습니다 그렇지 않으면 예외가 발생합니다.

다음은 프레임워크가 뷰에서 호출하는 다른 표준 메서드를 요약한 것입니다.

카테고리 메서드 설명
생성 생성자 코드에서 뷰를 만들 때 호출되는 생성자 양식이 있습니다. 레이아웃 파일에서 뷰가 확장될 때 호출되는 양식이 있습니다. 두 번째 양식은 레이아웃 파일에 정의된 속성을 파싱하고 적용합니다.
onFinishInflate() 뷰와 뷰의 모든 하위 요소가 XML에서 확장되었을 때 호출됩니다.
레이아웃 onMeasure(int, int) 이 뷰 및 모든 하위의 크기 요구사항을 결정하기 위해 호출됩니다.
onLayout(boolean, int, int, int, int) 뷰가 모든 하위 요소에 크기와 위치를 할당해야 할 때 호출됩니다.
onSizeChanged(int, int, int, int) 이 뷰의 크기가 변경될 때 호출됩니다.
그리기 onDraw(Canvas) 뷰가 콘텐츠를 렌더링해야 할 때 호출됩니다.
이벤트 처리 onKeyDown(int, KeyEvent) 키 다운 이벤트가 발생할 때 호출됩니다.
onKeyUp(int, KeyEvent) 주요 업 이벤트가 발생할 때 호출됩니다.
onTrackballEvent(MotionEvent) 트랙볼 모션 이벤트가 발생할 때 호출됩니다.
onTouchEvent(MotionEvent) 터치스크린 모션 이벤트가 발생할 때 호출됩니다.
포커스 onFocusChanged(boolean, int, Rect) 뷰가 포커스를 얻거나 잃을 때 호출됩니다.
onWindowFocusChanged(boolean) 뷰가 포함된 창이 포커스를 얻거나 잃을 때 호출됩니다.
연결 onAttachedToWindow() 뷰가 창에 연결될 때 호출됩니다.
onDetachedFromWindow() 뷰가 창에서 분리될 때 호출됩니다.
onWindowVisibilityChanged(int) 뷰가 포함된 창의 가시성이 변경될 때 호출됩니다.

복합 컨트롤

완전히 맞춤설정된 구성요소를 생성하지 않고 기존 컨트롤 그룹으로 구성된 재사용 가능한 구성요소를 함께 만든 다음 구성 요소 (또는 복합 대조군)가 가장 적합할 수 있습니다. 요약하자면, 이 작업은 하나의 항목으로 취급할 수 있는 항목의 논리적 그룹으로 세분화할 수 있습니다. 예를 들어 콤보 상자는 한 줄 EditText 필드의 조합일 수 있습니다. 팝업 목록이 첨부된 인접한 버튼이 있습니다. 사용자가 버튼을 탭하고 다음에서 항목을 선택하는 경우 EditText 필드를 채우지만 무언가를 입력할 수도 있습니다. 원하는 경우 EditText에 직접 추가할 수 있습니다.

Android에서는 Spinner와 AutoCompleteTextView입니다. 그럼에도 불구하고, 콤보 상자에 대한 이러한 개념이 좋은 예입니다.

복합 구성요소를 만들려면 다음 단계를 따르세요.

  • Activity와 마찬가지로 선언적 (XML 기반) 접근 방식을 사용합니다. 포함된 구성요소를 만들거나 코드에서 프로그래매틱 방식으로 중첩하세요. 이 일반적인 시작점은 일종의 Layout이므로 Layout 콤보 상자의 경우 LinearLayout를 다음과 함께 사용할 수 있습니다. 가로 방향입니다. 다른 레이아웃을 내부에 중첩할 수 있으므로 복합 구성요소는 임의의 복잡도와 구조화가 있기 때문입니다
  • 새 클래스의 생성자에서 슈퍼클래스가 예상하는 매개변수를 가져와서 전달합니다. 슈퍼클래스 생성자에 먼저 전달합니다. 그런 다음 확인할 수 있습니다. 여기에서 EditText 필드를 만들고 팝업 목록입니다. XML에 고유한 속성과 매개변수를 도입할 수 있습니다. 생성자가 가져와서 사용할 수 있습니다.
  • 선택적으로 포함된 뷰가 생성할 수 있는 이벤트에 대한 리스너를 만듭니다. 예시로는 목록 항목 클릭 리스너에 대한 리스너 메서드를 호출하여 목록을 선택한 경우 EditText입니다.
  • 원하는 경우 접근자와 수정자를 사용하여 자체 속성을 만듭니다. 예를 들어 EditText 값은 처음에 구성요소에서 설정되고 다음 시점에 콘텐츠 쿼리 확인할 수 있습니다
  • 필요한 경우 onDraw() 및 onMeasure()를 재정의합니다. 이는 보통 Layout를 확장합니다. 레이아웃에 잘 작동하는 기본 동작이 있기 때문입니다.
  • 원하는 경우 다른 on 메서드(예: onKeyDown())를 재정의하여 특정 기본값을 반환합니다.

Layout를 맞춤 컨트롤의 기반으로 사용하면 다음과 같은 장점이 있습니다. 여기에는 다음이 포함됩니다.

  • 활동 화면과 마찬가지로 선언적 XML 파일을 사용하여 레이아웃을 지정할 수 있습니다. 또는 프로그래밍 방식으로 뷰를 만들고 코드에서 레이아웃에 중첩할 수 있습니다.
  • onDraw() 및 onMeasure() 메서드 외 대부분의 메서드 on 메서드는 적절한 동작을 가지므로 재정의할 필요가 없습니다.
  • 임의의 복잡한 복합 뷰를 신속하게 구성하여 마치 하나의 뷰처럼 구성할 수 있습니다

기존 뷰 유형 수정

원하는 것과 유사한 구성요소가 있는 경우 해당 구성요소를 확장하고 변경할 수 있습니다. 완전히 맞춤설정하면 모든 작업을 할 수 있습니다. View 계층 구조에서 더 전문화된 클래스로 시작하여 원하는 작업을 무료로 하는 동작을 얻을 수 있습니다.

예를 들어 메모장 샘플 앱은 Android 플랫폼 사용의 여러 측면을 보여줍니다. 그중에는 EditText 뷰를 사용하여 줄이 있는 메모장을 만드세요. 이것은 완벽한 예가 아니며 다를 수 있지만 원칙을 보여줍니다.

아직 NotePad 샘플을 Android 스튜디오로 가져오지 않았거나 Google 게시자 태그를 다운로드할 수 있습니다 특히 LinedEditText의 정의를 참고하세요. 를 NoteEditor.java 파일에서 참조됩니다.

다음은 이 파일에서 참고할 사항입니다.

  1. 정의

    클래스는 다음 행으로 정의됩니다.
    public static class LinedEditText extends EditText

    LinedEditText는 NoteEditor 내의 내부 클래스로 정의됩니다. 활동이 있지만 NoteEditor.LinedEditText로 액세스할 수 있도록 공개되어 있습니다. NoteEditor 클래스 외부에서 가져올 수 있습니다.

    또한 LinedEditText는 static입니다. 즉, 소위 '합성 방법' 상위 클래스의 데이터에 액세스할 수 있습니다. 다시 말해 NoteEditor와 밀접한 관련이 있는 것이 아니라 별도의 클래스로 동작합니다. 이는 내부 클래스가 외부 클래스. 생성된 클래스를 작게 유지하고 다른 애플리케이션에서 쉽게 사용할 수 있도록 합니다. 있습니다.

    LinedEditText는 맞춤설정할 뷰인 EditText를 확장합니다. 확인할 수 있습니다 완료되면 새 클래스가 일반 EditText를 대체할 수 있습니다. 합니다.

  2. 클래스 초기화

    항상 그렇듯이 슈퍼클래스가 먼저 호출됩니다. 기본 생성자는 아니지만 사용됩니다. EditText는 다음과 같은 경우 이러한 매개변수를 사용하여 생성됩니다. XML 레이아웃 파일에서 팽창됩니다. 따라서 생성자는 이를 가져와서 슈퍼클래스 생성자도 마찬가지입니다

  3. 재정의된 메서드

    이 예에서는 onDraw() 메서드만 재정의하지만 다른 구성요소도 사용할 수 있습니다.

    이 샘플의 경우 onDraw() 메서드를 재정의하면 EditText 뷰 캔버스 캔버스가 재정의된 onDraw() 메서드를 사용하여 지도 가장자리에 패딩을 추가할 수 있습니다. super.onDraw() 메서드는 메서드가 종료됩니다. 슈퍼클래스 메서드를 호출해야 합니다. 이 경우 포함할 선을 그립니다.

  4. 맞춤 구성요소

    이제 맞춤 구성요소가 준비되었습니다. 그렇다면 이 구성요소를 어떻게 사용할 수 있을까요? NotePad 예에서 맞춤 구성요소는 선언적 레이아웃에서 직접 사용되므로 note_editor.xml res/layout 폴더:

    <view xmlns:android="http://schemas.android.com/apk/res/android"
    class="com.example.android.notepad.NoteEditor$LinedEditText"
    android:id="@+id/note"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:padding="5dp"
    android:scrollbars="vertical"
    android:fadingEdge="vertical"
    android:gravity="top"
    android:textSize="22sp"
    android:capitalize="sentences"
/>

    맞춤 구성요소는 XML의 일반 뷰로 생성되고 클래스가 지정됩니다. 전체 패키지를 사용합니다. 정의한 내부 클래스는 내부를 지칭하는 표준 방법인 NoteEditor$LinedEditText 표기법 클래스에 대해 배웠습니다.

    맞춤 뷰 구성요소가 내부 클래스로 정의되지 않은 경우 뷰를 선언할 수 있습니다. 구성요소를 XML 요소 이름으로 바꾸고 class 속성을 제외합니다. 예를 들면 다음과 같습니다.

    <com.example.android.notepad.LinedEditText
  id="@+id/note"
  ... />

    LinedEditText 클래스는 이제 별도의 클래스 파일입니다. 이 클래스가 NoteEditor 클래스에 중첩되어 있으면 이 기법이 작동하지 않습니다.

    정의에 있는 다른 속성과 매개변수는 맞춤 구성요소 생성자를 호출하고 EditText 생성자로 전달되므로 EditText 뷰에 사용하는 매개변수와 동일합니다. 광고 소재의 우선 순위를 정하기 위해 맞춤설정할 수도 있습니다.

커스텀 구성요소를 생성하는 것은 필요한 만큼만 복잡합니다.

더 정교한 구성요소는 더 많은 on 메서드를 재정의하고 자체 도우미 메서드를 구현함으로써 그 속성과 동작을 실질적으로 맞춤설정할 수 있습니다. 유일한 한도는 구성요소가 해야 하는 일을 파악할 수 있습니다.