a-3-1-1(2).Buttonのレイアウトとイベント登録

a-3-1-1(2).Buttonのレイアウトとイベント登録

目標設定

一覧に戻る

課題

1. Buttonの背景色を指定したRGBでXMLから指定することができるか。
2. Buttonの枠線を指定したRGBと太さでXMLから指定することができるか。
3. Buttonを制約配置(ConstraintLayout)で指定することができるか。
4. Buttonを列配置(LinearLayout)で指定することができるか。
5. Buttonの押下時のイベントを登録できるか。
6. Buttonの活性、非活性時のレイアウトをXMLから指定できるか。

Github

テスト実装

ButtonTestActivity.kt

package com.example.androidtest

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.example.androidtest.databinding.ActivityButtonTestBinding

class ButtonTestActivity : AppCompatActivity() {
    lateinit var binding: ActivityButtonTestBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityButtonTestBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)

        // 5. Buttonの押下時のイベントを登録できるか。
        // ・可能でした。
        binding.okButtonSwitchButton.setOnClickListener {
            binding.okButton.isEnabled = !binding.okButton.isEnabled
        }

        binding.okButtonEnableButton.setOnClickListener {
            binding.okButton.isEnabled = true
        }

        binding.okButtonDisableButton.setOnClickListener {
            binding.okButton.isEnabled = false
        }
    }
}

activity_button_test.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <Button
        android:id="@+id/ok_button"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/style1_button_background"
        app:backgroundTint="@null"
        android:text="OK"
        android:padding="0dp"
        android:textSize="20sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginStart="23dp"
        android:layout_marginTop="23dp"
        tools:ignore="HardcodedText" />

    <!--
    3. Buttonを制約配置(ConstraintLayout)で指定することができるか。
    ・可能でした。
    -->

    <Button
        android:id="@+id/ok_button_switch_button"
        android:layout_width="100dp"
        android:layout_height="48dp"
        android:background="@drawable/style1_button_background"
        app:backgroundTint="@null"
        android:text="切り替え"
        android:padding="0dp"
        android:textSize="13sp"
        app:layout_constraintLeft_toRightOf="@id/ok_button"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginStart="4dp"
        android:layout_marginTop="23dp"
        tools:ignore="HardcodedText" />

    <!--
    4. Buttonを列配置(LinearLayout)で指定することができるか。
    ・可能でした。
    -->

    <LinearLayout
        android:id="@+id/linear_layout1"
        android:layout_width="100dp"
        android:layout_height="48dp"
        android:orientation="horizontal"
        app:layout_constraintLeft_toRightOf="@id/ok_button"
        app:layout_constraintTop_toBottomOf="@id/ok_button_switch_button"
        android:layout_marginStart="4dp"
        android:layout_marginTop="4dp">
        <Button
            android:id="@+id/ok_button_enable_button"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:background="@drawable/style1_radius24_button_background"
            app:backgroundTint="@null"
            android:text="活性"
            android:padding="0dp"
            android:textSize="11sp"
            tools:ignore="HardcodedText" />

        <Space
            android:layout_width="4dp"
            android:layout_height="match_parent" />

        <Button
            android:id="@+id/ok_button_disable_button"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:background="@drawable/style1_radius24_button_background"
            app:backgroundTint="@null"
            android:text="非活性"
            android:padding="0dp"
            android:textSize="11sp"
            tools:ignore="HardcodedText" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

style1_button_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--
    6. Buttonの活性、非活性時のレイアウトをXMLから指定できるか。
    ・可能でした。
    -->
    <item android:state_enabled="true" android:state_pressed="false">
        <shape>
            <!--
            1. Buttonの背景色を指定したRGBでXMLから指定することができるか。
            ・可能でした。
            -->
            <solid android:color="#ff5f77" />
            <!--
            2. Buttonの枠線を指定したRGBと太さでXMLから指定することができるか。
            ・可能でした。
            -->
            <stroke android:width="4dp" android:color="#ff193c" />
            <corners android:bottomLeftRadius="8dp"
                android:bottomRightRadius="8dp"
                android:topLeftRadius="8dp"
                android:topRightRadius="8dp"/>
        </shape>
    </item>

    <item android:state_enabled="true" android:state_pressed="true">
        <shape>
            <solid android:color="#5f8dff"/>
            <stroke android:width="4dp" android:color="#195bff" />
            <corners android:bottomLeftRadius="8dp"
                android:bottomRightRadius="8dp"
                android:topLeftRadius="8dp"
                android:topRightRadius="8dp"/>
        </shape>
    </item>

    <item android:state_enabled="false">
        <shape>
            <solid android:color="#696969"/>
            <corners android:bottomLeftRadius="8dp"
                android:bottomRightRadius="8dp"
                android:topLeftRadius="8dp"
                android:topRightRadius="8dp"/>
        </shape>
    </item>
</selector>

style1_radius24_button_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:state_pressed="false">
        <shape>
            <solid android:color="#ff5f77" />
            <stroke android:width="4dp" android:color="#ff193c" />
            <corners android:bottomLeftRadius="24dp"
                android:bottomRightRadius="24dp"
                android:topLeftRadius="24dp"
                android:topRightRadius="24dp"/>
        </shape>
    </item>

    <item android:state_enabled="true" android:state_pressed="true">
        <shape>
            <solid android:color="#5f8dff"/>
            <stroke android:width="4dp" android:color="#195bff" />
            <corners android:bottomLeftRadius="24dp"
                android:bottomRightRadius="24dp"
                android:topLeftRadius="24dp"
                android:topRightRadius="24dp"/>
        </shape>
    </item>

    <item android:state_enabled="false">
        <shape>
            <solid android:color="#696969"/>
            <corners android:bottomLeftRadius="24dp"
                android:bottomRightRadius="24dp"
                android:topLeftRadius="24dp"
                android:topRightRadius="24dp"/>
        </shape>
    </item>
</selector>