【Kotlin 연수 1일째】 레이아웃 부품과 뷰

레이아웃 부품 및 뷰



레이아웃 파트(뷰 그룹)


Android SDK 로 준비된 화면 부품의 配置 를 정의.

주요 레이아웃 부품



참고 1: 레이아웃 부품
참고 2: RelativeLayout 및 ConstraintLayout


태그
내용

<LinearLayout>x/y 방향
<TableLayout>표 형식
<FrameLayout>z 방향
<RelativeLayout>循環制約 를 허용하지 않는 상대 배치
<ConstraintLayout>循環制約 를 허용하는 상대적 배치


보기(위젯)


Android SDK 에서 준비한 画面部品 .

주요 보기




태그
내용

<TextView>라벨
<EditText>텍스트 필드
<Button>버튼
<RadioButton>라디오 버튼※ <RadioGroup> 으로 그룹화
<CheckBox>체크박스
<Spinner>풀다운 목록
<ListView>리스트
<SeekBar>슬라이더
<RatingBar>「☆」의 레이트
<Switch>스위치


레이아웃 파트/뷰 설명



activity_main.xml
<LinearLayout>    <!-- ビューをレイアウトのタグで囲む -->
    <TextView/>    <!-- ビューは原則属性のみのタグ -->
</LinearLayout>

속성



레이아웃 파트/뷰 공통 속성




속성
내용

android:id뷰의 ID アクティビティ 로 뷰를 취급할 경우에 사용
android:layout_width android:layout_height/高さ dp/sp 단위로 조정 가능 wrap_content/match_parent 지정 가능 ※모든 뷰에 기재

android:layout_margin android:paddingmargin 는 보기 外側 의 여백 padding 는 보기 内側 의 여백
android:text문자열 属性値


기본 설명



activity_main.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">

    <TextView
        android:id="@+id/tvLabelInput"  <!-- @+id/... で記述 -->
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="5dp"
        android:text="@string/tv_msg  <!-- strings.xmlの文字列と紐づける場合は"@string/..." で記述 -->
    />
</LinearLayout>

strings.xml
<resources>
    <string name="app_name">UIComponents</string>
    <string name="tv_msg">input your name.</string>
</resources>

dp (Density-Independent Pixel; dip) 및 sp (Scale-Independent Pixel)


dp密度非依存ピクセル 라고 하며, 画面密度 의 다른 단말에서도 외형이 동일하게 되도록, OS 가 계산을 실시하는 표시 사이즈 단위.spスケール非依存ピクセル 라고 하며 画面密度 의 차이뿐만 아니라 사용자 설정의 文字サイズビュー 이나 レイアウト部品 의 사이즈 설정에는 dp ,文字列의 크기 설정에는 sp를 사용한다.

wrap_content 및 match_parent


wrap_content는 뷰를 표시하는 데 필요한 크기로 자동 조정합니다.match_parent는 부모 뷰의 크기에 맞게 자동 확장을 수행합니다.

레이아웃 파트별 속성



LinearLayout의 속성




속성
내용

android:orientation배치 방향 horizontalx方向 , vertical


LinearLayout 중첩에 의한 종횡 배치



activity_main.xml
<LinearLayout
    android:orientation="vartical">

    <LinearLayout
        android:orientation="horizontal">
        ...
    </LinearLayout>
</LinearLayout>

뷰 특정 속성



EditText (텍스트 필드)의 속성




속성
내용

y方向키보드 android:inputType


inputType의 속성치





내용

属性値기본
text수치
number전화번호
phone이메일 주소
textEmailAddress여러 줄
textMultiLine비밀번호
textPasswordURI


EditText 작성



activity_main.xml
<EditText
    android:inputType="text"
/>

Spinner(풀다운 목록), ListView(목록) 속성




속성
내용

textUriandroid:entries 의 속성치


Spinner 묘사



strings.xml
<string-array name="sp_currylist">
    <item>item 1</item>
    <item>item 2</item>
    ...
</string-array>

activity_main.xml
<Spinner
    android:entries="@array/sp_currylist"
/>

ListView(목록)의 속성




속성
내용

リストデータ화면 여백에 대한 비율( android:layout_weight 의 값으로 표현) 0-1 로 확장하는 경우는 x方向

android:layout_weight 작성



activity_main.xml
<ListView
    android:layout_height="0dp"
    android:layout_weight="1"
/>

디자인 편집기 화면




왼쪽은 layout_width , 오른쪽은 y方向 .layout_height 에서는 실제의 앱 화면을 확인할 수 있다.0dp 에서는, 뷰의 デザインビュー 이나 ブループリントビュー 를 확인할 수 있다.

좋은 웹페이지 즐겨찾기