Kotlinアプリ開発 Vol.2-3 メニューを作る/モーションを追加する

Material Design

デザインを変える

参考にしているのは以下です。

MDC-104 Android: Material Advanced Components (Kotlin)
Improve your design and learn to use our advanced component backdrop menu in Kotlin.

色を変える

知ってる内容なのでさらっといきます。

styles.xmlの”tools”のところがエラー出ています。

<resources xmlns:android="http://schemas.android.com/tools">

これを以下に変えました。

<resources xmlns:tools="http://schemas.android.com/apk/res-auto">

おしゃれな配色になりました。

テキストフィールドのスタイルを変更する

コピペでいけました。全然身についてないですが、先に進みます。

背景メニューを追加する

LinearLayoutを入れるのは以下の間です。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ProductGridFragment">

    <LinearLayout
        style="@style/Widget.Shrine.Backdrop"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        android:paddingTop="100dp"
        android:paddingBottom="100dp">
        <include layout="@layout/shr_backdrop" />
    </LinearLayout>

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

layout上で右クリックしてNew>Layout Resource Fileの順に選びます。

そのまま言われる通りに作って、完成です。

ずらしたViewを作成する

ProductGridFragment.ktは以下です。

        // Set up the RecyclerView
        var set_recycler = view.findViewById<RecyclerView>(R.id.recycler_view)
        set_recycler.setHasFixedSize(true)
        val gridLayoutManager = GridLayoutManager(context, 2, RecyclerView.HORIZONTAL, false)
        gridLayoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
            override fun getSpanSize(position: Int): Int {
                return if (position % 3 == 2) 2 else 1
            }
        }
        set_recycler.layoutManager = gridLayoutManager
        val adapter = StaggeredProductCardRecyclerViewAdapter(
            ProductEntry.initProductEntryList(resources))
        set_recycler.adapter = adapter
        val largePadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing_large)
        val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small)
        set_recycler.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

largeだけエラー出ています。

dimens.xmlとのアンマッチのようです。ProductGridFragment.ktでlargeを消すか、dimensでlargeを追加します。

レイヤーの形状を変更する

毎度のことですが、findViewByIdにします。

        // Set cut corner background for API 23+
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            var set_grid = view.findViewById<NestedScrollView>(R.id.product_grid)
            set_grid.background = context?.getDrawable(R.drawable.shr_product_grid_background_shape)
        }
        return view;

なんかずれている気もしますが、できました。

モーションを追加する

ProdcutGridFragment.ktに以下を追加します。

        // Set up the toolbar.
        var findbar = view.findViewById<Toolbar>(R.id.app_bar)
        var set_grid = view.findViewById<NestedScrollView>(R.id.product_grid)
        (activity as AppCompatActivity).setSupportActionBar(findbar)
        findbar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, set_grid))

まとめ

テキストフィールドのデザインの変え方を学んだ
メニューの作り方を学んだ
モーションの付け方を学んだ

正直使えるレベルには理解していないので実際に使って学んでいこうと思います。

コメント

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