kotlin: おしゃれなメニューボタンを作成する[Android]

プログラミング
スポンサーリンク




こんにちは、Eviです。

kotlinで、ちょっとおしゃれなメニューボタンのサンプルを作成しました。

親メニューボタンを押したら、周りに小メニューボタンが表示されます。

ボタンの大きさや見た目を変更したり、表示のアクションをちゃんと設定すればよりおしゃれになると思います。

スポンサーリンク

サンプルコード

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/constraintlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"/>

MainActivity.kt

package com.example.social_lexicon

import android.graphics.Color
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.LinearLayout
import androidx.constraintlayout.widget.ConstraintLayout
import androidx.constraintlayout.widget.ConstraintSet
import com.google.android.material.floatingactionbutton.FloatingActionButton

class MainActivity : AppCompatActivity() {
    // -----------------------------------------------
    // 内部変数を生成
    // -----------------------------------------------
    private var menu_flg : Boolean = false

    override fun onCreate(savedInstanceState: Bundle?) {
        // -----------------------------------------------
        // 呪文
        // -----------------------------------------------
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // -----------------------------------------------
        // 親要素を取得
        // -----------------------------------------------
        val constraintLayout = findViewById<ConstraintLayout>(R.id.constraintlayout)

        // -----------------------------------------------
        // 子要素を生成
        // -----------------------------------------------
        // メニュー一覧表示ボタン
        val btn_menu_list = FloatingActionButton(this).apply {
            // idを設定
            id = View.generateViewId()

            // 背景色を設定
            setBackgroundColor(Color.MAGENTA)
        }

        // 検索履歴ボタン
        val btn_search_history = FloatingActionButton(this).apply {
            // idを設定
            id = View.generateViewId()

            // 背景色を設定
            setBackgroundColor(Color.MAGENTA)
        }

        // お気に入りボタン
        val btn_favorite = FloatingActionButton(this).apply {
            // idを設定
            id = View.generateViewId()

            // 背景色を設定
            setBackgroundColor(Color.MAGENTA)
        }

        // おすすめボタン
        val btn_recommended = FloatingActionButton(this).apply {
            // idを設定
            id = View.generateViewId()

            // 背景色を設定
            setBackgroundColor(Color.MAGENTA)
        }

        // メニュー一覧表示ボタンのレイアウトを生成
        val parentLayoutParams = LinearLayout.LayoutParams(
            LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)

        // メニュー一覧表示タンにレイアウトをセット
        btn_menu_list.layoutParams = parentLayoutParams

        // ビューにボタンをセット
        constraintLayout.addView(btn_menu_list)

        // ConstraintSetを生成してConstraintLayoutから制約を複製する
        val constraintSet = ConstraintSet()
        constraintSet.clone(constraintLayout)

        // メニュー一覧表示ボタンの制約を設定
        constraintSet.connect(btn_menu_list.id, ConstraintSet.RIGHT, ConstraintSet.PARENT_ID, ConstraintSet.RIGHT, 50)
        constraintSet.connect(btn_menu_list.id, ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM, 50)

        // 親ボタンの制約をConstraintLayoutに反映させる
        constraintSet.applyTo(constraintLayout)

        // ボタンにイベントを追加
        btn_menu_list.setOnClickListener{
            if (!menu_flg) {
                // ConstraintLayoutを取得
                val constraintLayout2 = findViewById<ConstraintLayout>(R.id.constraintlayout)

                // 子ボタンのレイアウトを生成
                val childLayoutParams = LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)

                // 子ボタンにレイアウトをセット
                btn_search_history.layoutParams = childLayoutParams
                btn_favorite.layoutParams = childLayoutParams
                btn_recommended.layoutParams = childLayoutParams

                // ビューにボタンをセット
                constraintLayout2.addView(btn_search_history)
                constraintLayout2.addView(btn_favorite)
                constraintLayout2.addView(btn_recommended)

                // ConstraintSetを生成してConstraintLayoutから制約を複製する
                val constraintSet2 = ConstraintSet()
                constraintSet2.clone(constraintLayout2)

                // ConstraintSetを生成してConstraintLayoutから制約を複製する
                // 子ボタンの制約を設定
                constraintSet2.connect(btn_search_history.id, ConstraintSet.RIGHT, ConstraintSet.PARENT_ID, ConstraintSet.RIGHT, 30)
                constraintSet2.connect(btn_search_history.id, ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM, 300)
                constraintSet2.connect(btn_favorite.id, ConstraintSet.RIGHT, ConstraintSet.PARENT_ID, ConstraintSet.RIGHT, 230)
                constraintSet2.connect(btn_favorite.id, ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM, 230)
                constraintSet2.connect(btn_recommended.id, ConstraintSet.RIGHT, ConstraintSet.PARENT_ID, ConstraintSet.RIGHT, 300)
                constraintSet2.connect(btn_recommended.id, ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM, 30)

                // 親ボタンの制約をConstraintLayoutに反映させる
                constraintSet2.applyTo(constraintLayout2)

                menu_flg = true
            } else {
                val constraintLayout2 = findViewById<ConstraintLayout>(R.id.constraintlayout)
                constraintLayout2.removeView(btn_search_history)
                constraintLayout2.removeView(btn_favorite)
                constraintLayout2.removeView(btn_recommended)

                menu_flg = false
            }
        }

    }
}

おすすめの書籍

Androidアプリ開発の教科書

コメント

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