Android開発 for Kotlin 自分向けのメモ帳 静的な部分

自分向けのメモ。たぶん新入生教育にも開発仲間にも役に立ちそう。(あくまで自分向けのsummaryだが)

動的な部分
sen-comp.hatenablog.com

string.xml

文字リソースをここに置く。
単体やリスト形式などできる。

<string name="tv_menu_unit">円</string>
<string-array name="ar1">
    <item>ar1_1</item>
    <item>ar1_2</item>
</string-array>

サイズの単位

• dp := 画面密度に依存しない、密度非依存ピクセル。View, ViewGroup向け
• sp := スケール非依存ピクセル。画面密度や表示する文字のサイズに従い、OSがサイズを計算してくれる。文字のサイズ向け。

Toast

デバッグ用メッセージをアプリの画面に出力してくれる機能。手軽なので字の大きさとかフォントとかいじるのはあきらめよう。たぶん。

Toast.makeText(コンテキスト, "出す文字列", Toast.LENGTH_LONG).show()
//こう使う
Toast.makeText(applicationContext, "出す文字列", Toast.LENGTH_LONG).show()

Linear Layout

中身のViewやLayoutを縦or横に垂直or水平に置くLayout

android:orientation

Linear Layoutの向きを指定する。"vertical"(縦向き) or "horizontal"(横向き)のみ。

Constrain Layout

View同士について、「View Xの右端から30dp」、「View Yの右端あから50dp」のようにViewの位置を指定するレイアウト。
視覚的に指定するので、基本的にXMLで書くよりDesign modeの方が設定しやすい。

Constraint Layout自体は通常のSDKとは別のライブラリであるため、タグの書き方が少し違う。

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--中身-->
</androidx.constraintlayout.widget.ConstraintLayout>

残りは本を参照(本の方が分かりやすいので)

ViewGroup

ボタンとかの部品。
みんな持ってるであろう属性たち。
動的な部分はListenerに記述する。

共通してるプロパティ

android:id

部品のID。なくてもいいけど動的にするなら必要。Rクラスに勝手に連動してくれる。

android:id="@+id/tvLabelInput"

のように書かないといけない。@+id/は大体補完してくれるけど。

android:text

表示する文字列。ソースファイルの分割という考えから基本的にその場では書かず、string.xmlに定める。

android:text="@string/tv_msg"

例によって大体補完してくれる。

android:layout_(width/height)

wrap_content := コンテンツのサイズぶんだけにする。
match_parent := 親Viewのサイズに合わせる。
そのほかにも実数値にすることも可能。

android:layout_margin/android:padding

これが一番わかりやすい。

Button

android:onClick

わざわざListener用意しなくても、以下のような関数を用意してこのようにxmlで記せばよい。

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ボタン"
        android:onClick="onClickFunction"
        />

fun onClickFunction(view: View){
    //TODO something
}

ボタンの数だけ関数が必要だけど、ボタンが数個しかない場合や臨時につける場合とかだと便利な書き方。
多くのボタンをつける場合は素直にOnClickListenerでやろう。(動的のページ解説参照)

android:enable

ボタンが押せるかどうかを最初から設定できる。デフォルトではもちろん押せるので最初から押せないようにしたい場合で重宝する。

android:enabled="false"

falseなら押せない、trueなら押せる　デフォルトではtrue=押せる。
以下のKotlinコードで変更できる。

val btPlay = findViewById<Button>(R.id.btPlay)
btPlay.isEnabled = true

ListView

リストのView。一覧形式だがシンプルな1列に文字でも、自分でカスタマイズすることもできる。
レイアウトXMLで、ListViewを一番外のViewにしてもいい。

基本的に静的なコードは以下のようにする。

<ListView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:entires="@array/lv_menu"
    />

android:entires

内容は基本的にstring.xmlから参照するため、このような書き方をしよう！

RadioGroup

ラジオボタンを自然数個まとめたView。

ScrollView

IOSアプリと違って、Androidアプリでは長文で枠の外にあふれるようなものではデフォルトではスクロールができない。それをするためには、ScroolViewに入れる必要がある。

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--ここに囲みたいのを入れる-->
</ScrollView>

マテリアルデザイン

マテリアルデザインに基づいたAndroidアプリの基本

GoogleがGoolge I/O Conferenceで発表した画面デザインの考え方。

• 2次元の画面に影をつけることであたかも3次元になるようなデザインをする。
• 画面の部品に動きをつける
• 1画面で4色まで使い、それぞれの色に意味を持たせる。

Androidアプリではデフォルトですでに配色に使われている(「マテリアルテーマ」という配色のセット)。具体的には、以下のようにstyle.xmlで指定されている。

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

この < style name="AppTheme"...のタグがアプリのテーマになる。(nameにAppThemeをつけると、アプリのテーマとして使われる。もっと具体的に言うとAndroidManifest.xmlでandroid:theme属性で指定されてるstyleになる)
このStyleタグの中にアプリの色彩デザインを記述すればいいが、基本的にはAndroid SDKが用意してくれてるテンプレートから、必要な部分だけ書き換えるという形式をとる。そのベースのテンプレートを指定するのに、parent属性を用いる。
大本のテンプレートとしてAndroid SDKに用意されているマテリアルテーマは以下の3種類。(API Level 21以降)

• Theme. Material : 暗い色のテーマ
• Theme. Material.Light : 明るい色のテーマ
• Theme. Material.Light.DarkActionBar : 明るい色で、アクションバーだけ暗色のテーマ

マテリアルデザインの4色

マテリアルデザインによるAndroidアプリの彩色では、4色使うことになる。

配色名	内容	使われているところ
colorPrimary	メインとなる色	アクションバーの色
colorPrimaryDark	colorPrimaryと同系で一段と濃い色	アクションバーのさらに上のバーの色
colorAccent	アクセントカラー (colorPrimaryに対して目立つ色)	EditTextのアンダーバーの色
windowBackgorund	背景色	ViewやLayoutの背景色

下図のメインカラー=colorPrimary、サブカラー=colorPrimaryDarkである。

(出典: マテリアルデザインでの「色」の使い方とガイドラインの要点)

以下のサイトが詳しい。
saruwakakun.com

ツールバー

これ。

サンプルコードは以下の通り

<Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    android:elevation="10dp"
/>

?attr/はテーマに含まれてる属性を指定している。今回の場合はテーマに指定されている

android:evalution

影のつけ具合を設定する。

android:elevation="10dp"

下図の上が5dp, 下が20dp
一般的には4dpであることがおすすめされている。

連動させるには

具体的には次のような挙動をするツールバーをつくりたい。
-> ->
下にずらせばツールバーがいい感じに隠れるようにしたい。
これは、android10では、

• androidx.coordinatorlayout.widget.CoordinatorLayout
• com.google.android.material.appbar.AppBarLayout
• Toolbar
• androidx.core.widget.NestedScrollView

を使用することで実現できる。(他のバージョンのAndroidだったらタグが一部違うはず)

androidx.coordinatorlayout.widget.CoordinatorLayout

親子関係にない部品を連動させるのに使われるLayout。

com.google.android.material.appbar.AppBarLayout

これ自体は縦向きのLinear Layout。連動するのに使っているもの。これがないとCoorinatorLayoutの下でもこのようになる。

<com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/appbar"
        android:elevation="10dp">

        <Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:id="@+id/toolbar"
            app:layout_scrollFlags="scroll|enterAlways"
            android:background="@color/colorPrimary"/>

    </com.google.android.material.appbar.AppBarLayout>

app:layout_scrollFlagsをこのLayoutないの部品にセットすると、スクロールが連動する。つけないと連動せずに、真上のような画像になる。
この属性を記述するには、まず"scroll|"を記述し、その後に次の者のいずれかをつける。使える属性は以下の通り。

• enterAlways　上にスクロールするとAppBarLayoutがすぐに消えて、下にスクロールするとすぐに現れる。
• enterAlwaysCollapsed　上にスクロールするとAppBarLayoutがすぐに消えるが、下にスクロールは上端まで行って初めてAppBarLayoutが出てくる。
• exitUntilCollaspsed　スクロールによるAppBarLayoutの見え隠れはenterAlwaysCollaspsedと同じぐらいだが、AppBarLayoutの一部が画面に残る。

なお、app属性を指定するには、一番外のLayoutに

xmlns:app="http://schemas.android.com/apk/res-auto"

androidx.core.widget.NestedScrollView

ScroolViewの代わり。ScrollViewはCoorinatorLayoutとリンクできないので、スクロールできないためこれを使うことになる。
しかし、それだけでは動かず、

app:layout_behavior="@string/appbar_scrolling_view_behavior"

<androidx.core.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

全体的に流れは以下の通り。

<CoordinatorLayout>
    <AppBarLayout>
        <Toolbar />
    </AppBarLayout>
<!--以上がツールバー-->
    <NestedScroolView>
        <TextView />
    </NestedScroolView>
<!--スクロールビュー-->
</CoordinatorLayout>

アクションバーの高さの連続的変化

-> ->

CollapsingToolbarLayout

(これはenterAlwaysCollapsedかexitUntilCollapsedモードの場合である)
この中に囲まれたToolBarの長さをスクロールに連動して変更できるレイアウト部品。

app:layout_collapseMode="pin"

を書くと、そこまでしか下がらないという状態になる。

この場合、各種の色の動的設定は以下のようにできる。

//XMLで囲んでるtoolbarとは別に設定する。
val toolbarlayout = findViewById<CollapsingToolbarLayout>(R.id.toolbarLayout)
//タイトル設定
toolbarlayout.title = getString(R.string.toolbar_title)
//一番上にあるとき(縮んでない時)の色設定
toolbarlayout.setExpandedTitleColor(Color.WHITE)
//縮んでるときの色設定
toolbarlayout.setCollapsedTitleTextColor(Color.LTGRAY)

FloatingActionButton (FAB)

次の画像の右上のようなボタン(もちろん位置は変えられる)　下に行くとボタンが消える。
->

これはFloatingActionButton(FAB)と言い、Coordinate Layoutに入ってる好きな部品の上におけるボタンである。なお、普通のボタンと同じようにOnClick属性や、リスナーの設定もできる。

追加するには、CoorinatorLayoutの中の一番最後に以下のように追加する。

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/fabEmail"
    android:layout_margin="20dp"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|end"
    app:srcCompat="@android:drawable/ic_dialog_email"/>
<!--
android:layout_anchorは、CoorinatorLayoutに含まれるどの部品の上に置くのかを指定する
android:layout_anchorGravityはその部品の上の何処に置くのかを指定
-->

ちなみに今まで書いたものはAndroid StudioでScrollActivityというテンプレートになっている。

参考文献

野崎英一. やさしいKotlin入門. カットシステム. 2018/5/10

齋藤新三(著). 山本祥寛(監修). 基礎＆応用力をしっかり育成！Androidアプリ開発の教科書 Kotlin対応 なんちゃって開発者にならないための実践ハンズオン Kindle版. 翔泳社. 2019/7/10