読者です 読者をやめる 読者になる 読者になる

うさがにっき

読書感想文とプログラムのこと書いてきます

Design Support LibraryのTextInputLayout,FloatingActionButtonを使ってみる

Android

概要

Design Support LibraryのTextInputLayout,FloatingActionButtonを使ってみたので、そのまとめ

詳細

TextInputLayout

TextInputLayoutはEditTextの親Viewとして使うことを前提として作られている
ラベルとなるテキストはEditTextのhintとして設定する

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:orientation="vertical" tools:context=".MainActivityFragment">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/text_input_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/edit_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="名前"/>

    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/text_input_layout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/edit_text2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="名前"/>

    </android.support.design.widget.TextInputLayout>
</LinearLayout>

上がフォーカスが当たっている状態
f:id:tiro105:20150827213152p:plain

以下のように警告メッセージを表示することも可能j

        textInputLayout.setError("error");
        textInputLayout.setErrorEnabled(true);

決定時のボタン押下時になどに設定するとよさげ

FloatingActionBarButton

何は無くともlayout

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivityFragment">
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginRight="16dp"
        android:src="@drawable/ic_launcher"
        android:layout_gravity="bottom|right"
        app:fabSize="normal"/>

</FrameLayout>

f:id:tiro105:20150827213501p:plain

Material Designのガイドラインにあるように右下でmargin16dpに設定してある
本来であるならCordinatorLayoutなるLayoutを使うべきらしい、それはまた今度まとめる

fabSizeによってボタン自体のサイズを指定できる

fabSize dp
normal 56dp
mini 40dp

FloatingActionBarButtonはImageVIewを継承したものなので画像を指定できる
表示される画像は24dp固定(normal, mini両方)
この画像はfabSizeから計算されて中央に来るように配置されているのでlayout_width, layout_heightで直接サイズを指定すると画像のサイズが合わなくなるので注意