하고 싶은 일

소설 검색 화면의 디자인

필요조건

소설 검색 화면의 설치

소설 검색 화면

TextInputLayout / TextInputEditText

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/text_input_search"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:helperText="空白で区切って複数のキーワードを指定できます"
    app:helperTextEnabled="true"
    android:hint="検索ワード"
    app:hintEnabled="true">
    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/editText_search"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>

CardView

    <androidx.cardview.widget.CardView>
        <androidx.constraintlayout.widget.ConstraintLayout
         android:id="@+id/layout_search">
            <TextView android:text="検索ワードを指定する" /> <!-- タイトル -->
            <net.cachapa.expandablelayout.ExpandableLayout
             android:id="@+id/expandable_layout_search_subtitle"
             app:el_expanded="true"> <!-- サブタイトル 領域: デフォルト表示あり -->
                <TextView android:id="@+id/expand_search_subtitle"/> <!-- サブタイトル -->
            </net.cachapa.expandablelayout.ExpandableLayout>
            <ImageView app:srcCompat="@drawable/expand_arrow"/> <!-- 伸び縮みアイコン -->
            <net.cachapa.expandablelayout.ExpandableLayout
             android:id="@+id/expandable_layout_contents"
             app:el_expanded="false"> <!-- コンテンツ領域: デフォルト表示なし -->
                 <!-- 表示対象コンテンツをここに設定 -->
            </net.cachapa.expandablelayout.ExpandableLayout>
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>

    @BindView(R.id.expandable_layout_search_subtitle) ExpandableLayout layoutSearchSubtitle;
    @BindView(R.id.expandable_layout_contents) ExpandableLayout layoutSearchContents;

    @OnClick(R.id.layout_expand_search)
    void onClickSearchArea(View view) {
        layoutSearchSubtitle.toggle(true);
        layoutSearchContents.toggle(true);
    }

만들어진 물건

키워드 선택 대화 상자

Chip

<com.google.android.material.chip.Chip
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world"/>

FlexboxLayout

dependencies {
    implementation 'com.google.android:flexbox:1.1.0'
}

만들어진 물건

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexWrap="wrap"
    app:justifyContent="space_around">
    <com.google.android.material.chip.Chip
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/check_keyword_gag"
    android:text="ギャグ" />
    <!-- 以下チップが並列で並ぶ -->
</com.google.android.flexbox.FlexboxLayout>

총결산