Kotlinアプリ開発 Vol.2-2 グリッドビューでカードを表示しよう

Material Design

トップアプリバーを作成する

2つ目をやっていきます。

MDC-102 Android: Material Structure and Layout (Kotlin)
Learn how to use Material for structure and layout on Android in Kotlin.

最初のコピペでこうなります。

続いてnavigationIconの設定。

app:navigationIcon="@drawable/shr_menu"

drawableで shr_menuという画像を見てみると

横断歩道みたいな画像です。

なんか見たことある感じになりました。このボタンも画像として入れているんですね。

この画像はvector assetにmenuという名前でありました。だれでも簡単に使うことができます。

アクションボタンを追加する

以下のように書いてあります。

重要: Toolbarクラスをインポートするときは、 android.widget.Toolbarではなくandroidx.appcompat.widget.Toolbarをインポートしてください。

こっちが正しいほうです。Alt+Enterで以下がImportされます。

こっちが正しくないほうです。以下がImportされます。

なんでこんなことが起きているのかよくわかりませんが、忠告の通りでいきます。

重要:必ずimport kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*.import kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*.くださいimport kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*.これは、私たちがIDとビューにアクセスできるようになりますapp_barむしろ使用するよりも、kotlinの合成プロパティを使用してfindViewById 。
コードラボ全体で、Android Studioのプロンプトが表示されたら、引き続きインポートステートメントを追加できます。

恐ろしい日本語が出てきました。英語でいきましょう。

Important: Make sure to import kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*. This will allow us to access the view with id app_bar by using kotlin’s synthetic properties, rather than by using findViewById.
Throughout the codelabs, you can continue to add import statements when prompted by Android Studio.

import kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*.を使えばfindViewByIdを使わなくてもよくて楽なんだそうです。

kotlinで【import kotlinx.android.synthetic.main.activity_main.*】が使えない|teratail
importでkotlinx.android.synthetic.main.activity_main.*を入力するとkotolinxが赤くなってエラーになってしまいます。hitTextとloseTextもエラーになります package com.example.highandlowimport

ただ、これは2019年の情報で、現在はこれは使えないみたいです。おとなしくfindViewByIdを使います。

    override fun onCreateView(
            inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        // Inflate the layout for this fragment
        val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)

        // Set up the toolbar.
        var findbar = view.findViewById<Toolbar>(R.id.app_bar)
        (activity as AppCompatActivity).setSupportActionBar(findbar)
        return view;
    }

これでtoolbarがアクションバーになりました。

検索とフィルターを追加する

唐突にshr_toolbar_menu.xmlが出てきました。

たしかに “search” と”filter”が入っています。

Menuに入っていて、Component TreeはMenuが親玉です。よく分からないですが、親玉の種類別にxmlは分かれていて、ドッキングする作業が必要なんですね。

とりあえずできました。ただ、このチュートリアル難しすぎますね。

カードを追加する

カードを追加します。

Component Treeはこんな感じ。レイアウトの作り方がなんとなくわかってきました。前作ったアプリは完全拘束で1つずつ座標を定義していたのですが普通はあり得ないですね。

ちなみにshr_product_cardはこんな感じ。

開いたあとのViewは別で作っていますね。

グリッドビューを作成する

指示されたように変更すると以下のようなしょぼい感じになりました。

ただ実行すると、以下のような感じになっていました。

おそらくですが、以下の3つを組み合わせているようです。

  • shr_product_grid_fragment.xmlには通常のスクロールview
  • recyclerviewadopterなのでくるくる回転して見せる機能
  • Itemの文字に対してProductviewをセットする

この部分もfindViewByIdが必要なので、正しく動くコードを載せておきます。

        // Set up the RecyclerView
        var set_recycler = view.findViewById<RecyclerView>(R.id.recycler_view)
        set_recycler.setHasFixedSize(true)
        set_recycler.layoutManager = GridLayoutManager(context, 2, RecyclerView.VERTICAL, false)
        val adapter = ProductCardRecyclerViewAdapter(
            ProductEntry.initProductEntryList(resources))
        set_recycler.adapter = adapter
        val largePadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing)
        val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small)
        set_recycler.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

カードに情報を追加する

言われたとおりにコピペすると…

ちょっと準備しすぎじゃないですかね…

productlistはこのファイルに入っていました。画像はネット上にあって普通に検索すると出てきます。

https://storage.googleapis.com/material-vignettes.appspot.com/image/1-0.jpg

なんとなくアプリの仕組みは分かってきました。ただ、コードは謎すぎます。

まとめ

MDC-102 Android:材料の構造とレイアウト(Kotlin)をやりました。
アクションバーの設定方法を学んだ。
グリッドビューの作り方をざっくり学んだ
データを引用してカードに表示する方法をざっくり学んだ。

このチュートリアルは中級者がStepupに使うようなものでしたね。

コメント

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