Kotlinアプリ開発 Vol.2-1 Material Designの基本を学ぶ

Material Design

おしゃれなアプリを作りたい

Vol.1で作ったアプリは審査中です。

5/1に知識ゼロからスタートして3週間。とりあえず一段落しました。

作ったアプリはこんな感じ。アプリっぽくはなりましたが洗練されていない感じが否めません。

Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experienc...

チュートリアルをやりながらデザインを学んでいきたいと思います。

サンプルファイルをBuildする

ダウンロードしたzipファイルにはkotlinとJavaが両方入っているみたいです。今回はKotlinだけフォルダを移しました。

Android studioから既存ファイルを開きます。

projectのbuild.gradleを変更する

サンプルなのにいきなり動きません。1行目からエラーが出ています。

昔、作ったアプリと見比べると、appのbuild.gradle(上)に書かれているような内容がprojectのbuild.gradle(下)に書かれている模様。大胆に昔作ったprojectから全部コピーして書き換えてみます。

// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    ext.kotlin_version = "1.4.32"
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:4.2.1'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        jcenter()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

versionが古いみたいなので1番上を押して最新をインポートします。

2つWarningが出ましたが実行はできました。

2つのWarningを解決する

pluginの’kotlin-android-extensions’が時代遅れのようです。このチュートリアル2年くらい更新されてないのかな・・・

appのbuild.gradle上でpluginを消して代わりに以下を追加します。

android {

    buildFeatures {
        viewBinding = true
    }

}

AndroidXというのが使えないみたいなのでenableします。

1つinformationが残っています。

JCenterのサービスが変わったとのこと。Warningではないので一旦放置します。

JCenter service update  |  Android Developers
Migrating Android dependencies from JCenter

依存関係を変更する

全部Versionが古いです。

ハイライトされているやつは古いです。カーソルを合わせると最新に変えるか問われるので全部新しくしてみます。

アプリを実行する

バチバチにエラーでました。

どうもMaterialCardViewが軒並みダメみたいです。

Still using android.support? It's time to consider migrating AndroidX! - Programmer Sought
Still using android.support? It's time to consider migrating AndroidX!, Programmer Sought, the best programmer technical posts sharing site.

未だにandroid.support使ってんの? 時代はAndroidXだぜ!って記事を見つけたので、怪しいところを書き換えてみます。

shr_product_card.xml内の android.support.design.card.MaterialCardView (support libraryの書き方)を com.google.android.material.card.MaterialCardView (AndroidXの書き方)に変えます。

無事動きました。

Text fieldを挿入する

とりあえず言われたとおりにコピペでできました。地味にアイコン変えています。

学んだこと

  • 入力欄のテキスト用/パスワード用がある
  • android:hint=”@string/xxx”とすることで未入力時のコメントを表示
  • android:inputType=”textPassword”とすることでテキストが非表示になる

いつか使えそうですね。

ボタンを追加する

これも言われたとおりにコピペです。

style=”@style/Widget.MaterialComponents.Button.TextButton” とすることでフチなしのボタンにできる。

この画面よくみるインターフェースですが、NEXTボタンを強調して、次のアクションを直感的に分からせるという意味でよくできていますね。なにかで学びましたが、よいアプリというのは”ユーザーに考えさせない”のだそうです。

パスワードを確認してフラグメントを移動する

パスワード判定のprivate funを設定します。

private fun isPasswordValid(text: Editable?): Boolean {
   return text != null && text.length >= 8
}

テキストがないときと文字数が8文字未満のときはダメってことですね。

       view.next_button.setOnClickListener({
           if (!isPasswordValid(password_edit_text.text!!)) {
               password_text_input.error = getString(R.string.shr_error_password)
           } else {
               // Clear the error.
               password_text_input.error = null
           }
       })

サイトに書いてある上記のコードではエラーが出ました。

        val button1 = view.findViewById<Button>(R.id.next_button)
        button1.setOnClickListener({
            val password = view.findViewById<TextInputEditText>(R.id.password_edit_text)
            if (!isPasswordValid(password.text!!)) {
                password.error = getString(R.string.shr_error_password)
            } else {
                // Clear the error.
                password.error = null
                // Navigate to the next Fragment.
                (activity as NavigationHost).navigateTo(ProductGridFragment(), false)
            }
        })

IDを取り出すとOKになりました。passwordを入力しているのは<TextInputEditText>でした。

成功すると画面が遷移してYou did it!と表示されます。

現時点判定しているのはPasswordが8文字以上であることのみ。Usernameが空欄でも遷移するし、Passwordがあっているかは見ていない。

とりあえず次の章に進みます。このチュートリアルは完全に無知だと厳しい気がする・・・

まとめ

MDC-101 Android:マテリアルコンポーネントの基本をやりました。
support libraryがAndroidXに代わっていることを学びました。
Hintの出し方やPassword用に文字が見えなくなるFieldの存在を知りました。

コメント

タイトルとURLをコピーしました