소개

「 Android 앱 개발 교과서 」

를 한번에 드러냈기 때문에, 이번은 보기라고 녀석을 화상을 사용해 설명해 보겠습니다.

배경

Sier로 작업 변경하고 3개월. 연수를 마치고 현장 배속이 되어 한 달. 향후 사용해 가는 Android 앱의 공부를 하고 있으므로, 아웃풋으로 적어 가려고 생각합니다.
아마추어입니다.

개발 환경

androidstudio 3.6.2
openjdk 버전 "11.0.6"

무엇이든 견본

이런 느낌의 화면을 만듭니다.


보기라고 하는 것은, 화면 부품입니다. 위젯이라고도 한다. 상기 화면이라면, 「이름을 입력해 주세요」도 뷰, 남자인가 여자인가 선택하는 버튼(라디오 버튼)도 뷰, 음료의 리스트도 뷰입니다.

이것을 코드로 하면 이런 느낌.

res/values/string.xml

<resources>
    <string name="app_name">画面部品サンプル</string>
    <string name="tv_msg">お名前を入力してください。</string>
    <string name="bt_save">保存</string>
    <string name="cb_drink">ドリンク</string>
    <string name="cb_food">フード</string>
    <string name="rb_male">男</string>
    <string name="rb_female">女</string>
    <string-array name="dlinkllist">
        <item>コーラ</item>
        <item>ウーロン茶</item>
        <item>ココア</item>
        <item>野菜ジュース</item>
    </string-array>
</resources>

각 뷰에 표시하고 싶은 문장을 입력해 두는 곳입니다. 이 name="○○"의 ○○을 아래의 text 속성에 샘플과 같이 기입하면 기입한 뷰내의 텍스트로서 사용할 수 있습니다.

res/layout/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"
    android:background="#A1A9BA"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvLabelInput"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="5dp"
        android:background="#ffffff"
        android:text="@string/tv_msg"
        android:textSize="25sp"/>

    <EditText
        android:id="@+id/etInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="25dp"
        android:layout_marginTop="5dp"
        android:background="#ffffff"
        android:inputType="text"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#df7401"
        android:orientation="horizontal">

        <CheckBox
            android:id="@+id/cbDrink"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="25dp"
            android:background="#ffffff"
            android:text="@string/cb_drink"/>

        <CheckBox
            android:id="@+id/cbFood"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:text="@string/cb_food"/>
    </LinearLayout>

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:background="#df7401"
        android:orientation="horizontal"
        android:paddingBottom="10dp"
        android:paddingTop="10dp">

        <RadioButton
            android:id="@+id/rbMale"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="25dp"
            android:layout_marginRight="25dp"
            android:background="#ffffff"
            android:text="@string/rb_male"/>

        <RadioButton
            android:id="@+id/rbFemale"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:text="@string/rb_female"/>
    </RadioGroup>

    <Button
        android:id="@+id/btSave"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/bt_save"/>

    <ListView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#ffffff"
        android:entries="@array/dlinkllist"/>
</LinearLayout>

string.xml의 ○○ 부분을 각 뷰의 text 요소에 씁니다. 그러면 string.xml
그 외, layout_width나 layout_marginBottom등에 관해서는, 뷰의 배치나 형태를 결정해 줍니다.

이미지로 직관적으로 이해해 본다.

쓰는 것입니다만 이런 느낌. RadioGroup은 자식 요소에 RadioButton을 설명합니다.
LinearLayout을 부모 요소로 설정하면 자식 요소를 세로 또는 가로로 배치할지 여부를 결정합니다. (oriental="vertical"부분)
그 밖에도 역할은 있습니다만 이 샘플에서는 이 이해로 충분할까라고.

끝에

꽤, 깔끔하지만 뷰에 대해 나름대로 정리해 보았습니다. 좀처럼 생각했듯이 정리하지 않거나 합니다만, 계속해 나가려고 합니다.

다음 번에는 이벤트와 리스너에 대해 요약합니다.