KotlinでAndroidアプリ#24

開始動作
ボタン形状変更
ボタンアスペクト比調整

開始動作

開始動作を実現するため画面右下にSTARTボタンを設置する。このボタンをクリックするとゲームが開始され手が打てるようになる。

ゲームが開始されると画面右下のボタン文言を「RESET」、色を赤に変更する。これをクリックするとゲームが中止される。

※画面左下の部品は別途説明します。

ボタン形状変更

標準ボタンの形状はカッコいいとは言えない。さらに領域いっぱい伸長すると見るに堪えない形状になる。

ImageButtonにすれば？と思われるかもしれない。しかしImageButtonではテキスト表示できないのだ。実現するとすればテキストを画像にしなければいけない。面倒だしテキスト変更の度に画像を作成しなければいけない。ここは通常のボタンを利用したいところだ。

ボタンの形状を変更するには、属性backgroundに画像を設定する。するとボタン形状が画像の形に変わるのだ。

画像は用意されているベクター画像を利用する。画面左のエクスプローラーからres/drawableを選択、マウス右クリック->New->Vector Asetを選択。パネルが開くので「Clip Art」行の画像をクリックすると画像一覧が表示される。

変更したい形状の画像を選択し、次に色を変更する。

res/drawable配下に画像が取り込まれるが、青/赤色用の2種類用意したいので、わかりやすいように名前を変更する。名前の変更は画像を選択->Refactor->Renameとすることで実現できる。

上記操作を2回行い、同一形状の画像で青/赤色を用意する。

ボタンアスペクト比調整

作成した画像をボタンのbackground属性に設定する。ボタンの画像はアスペクト比が無視され伸長される。このため想定外の変な形状になってしまうことがある。これを防ぐためにボタン上下、左にGuidelineを作成し調整するようにした。

ボタンを選択し四辺の○をそれぞれ画面隅もしくはGuidelineにまでドラッグする。そしてGuidelineを使い調整を行う。

コードを掲載する。

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.6" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.7" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="3dp"
        android:background="#000000"
        android:textColor="#EC0A24"
        android:textSize="24sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline1" />

    <TableLayout
        android:id="@+id/table"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="3dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <ImageButton
                android:id="@+id/imageButton1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:background="#4CAF50"
                android:scaleType="fitCenter"
                app:srcCompat="@drawable/ic_baseline_close_24" />

            <ImageButton
                android:id="@+id/imageButton2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:background="#4CAF50"
                android:scaleType="fitCenter"
                app:srcCompat="@drawable/ic_baseline_panorama_fish_eye_24" />

            <ImageButton
                android:id="@+id/imageButton3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:background="#4CAF50"
                android:scaleType="fitCenter"
                app:srcCompat="@drawable/ic_baseline_close_24" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <ImageButton
                android:id="@+id/imageButton4"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:background="#4CAF50"
                android:scaleType="fitCenter"
                app:srcCompat="@drawable/ic_baseline_close_24" />

            <ImageButton
                android:id="@+id/imageButton5"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:background="#4CAF50"
                android:scaleType="fitCenter"
                app:srcCompat="@drawable/ic_baseline_check_box_outline_blank_24" />

            <ImageButton
                android:id="@+id/imageButton6"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:background="#4CAF50"
                android:scaleType="fitCenter"
                app:srcCompat="@drawable/ic_baseline_close_24" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <ImageButton
                android:id="@+id/imageButton7"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:background="#4CAF50"
                android:scaleType="fitCenter"
                app:srcCompat="@drawable/ic_baseline_close_24" />

            <ImageButton
                android:id="@+id/imageButton8"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:background="#4CAF50"
                android:scaleType="fitCenter"
                app:srcCompat="@drawable/ic_baseline_panorama_fish_eye_24" />

            <ImageButton
                android:id="@+id/imageButton9"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:background="#4CAF50"
                android:scaleType="fitCenter"
                app:srcCompat="@drawable/ic_baseline_close_24" />
        </TableRow>

    </TableLayout>

    <NumberPicker
        android:id="@+id/numberPicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2"
        app:layout_constraintVertical_bias="0.589"
        tools:ignore="MissingConstraints" />

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="3dp"
        android:background="@drawable/button_blue"
        android:text="START"
        android:textColor="#FFFFFF"
        android:textSize="24sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline8"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/guideline3"
        app:layout_constraintTop_toTopOf="@+id/guideline7"
        app:layout_constraintVertical_bias="0.166" />

    <NumberPicker
        android:id="@+id/numberPicker2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/guideline3"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@+id/textView7"
        app:layout_constraintTop_toTopOf="@+id/guideline2"
        app:layout_constraintVertical_bias="0.589"
        tools:ignore="MissingConstraints" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="並び"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/numberPicker"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:text="盤数:"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView5"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />


    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.62" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.78" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.93" />


</androidx.constraintlayout.widget.ConstraintLayout>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

<?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:layout_width="match_parent"

android:layout_height="match_parent">

<androidx.constraintlayout.widget.Guideline

android:id="@+id/guideline1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal"

app:layout_constraintGuide_percent="0.6" />

<androidx.constraintlayout.widget.Guideline

android:id="@+id/guideline2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal"

app:layout_constraintGuide_percent="0.7" />

<TextView

android:id="@+id/textView3"

android:layout_width="0dp"

android:layout_height="0dp"

android:layout_margin="3dp"

android:background="#000000"

android:textColor="#EC0A24"

android:textSize="24sp"

app:layout_constraintBottom_toTopOf="@+id/guideline2"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="@+id/guideline1" />

<TableLayout

android:id="@+id/table"

android:layout_width="0dp"

android:layout_height="0dp"

android:layout_margin="3dp"

app:layout_constraintBottom_toTopOf="@+id/guideline1"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent">

<TableRow

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight="1">

<ImageButton

android:id="@+id/imageButton1"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_margin="3dp"

android:layout_weight="1"

android:background="#4CAF50"

android:scaleType="fitCenter"

app:srcCompat="@drawable/ic_baseline_close_24" />

<ImageButton

android:id="@+id/imageButton2"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_margin="3dp"

android:layout_weight="1"

android:background="#4CAF50"

android:scaleType="fitCenter"

app:srcCompat="@drawable/ic_baseline_panorama_fish_eye_24" />

<ImageButton

android:id="@+id/imageButton3"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_margin="3dp"

android:layout_weight="1"

android:background="#4CAF50"

android:scaleType="fitCenter"

app:srcCompat="@drawable/ic_baseline_close_24" />

</TableRow>

<TableRow

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight="1">

<ImageButton

android:id="@+id/imageButton4"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_margin="3dp"

android:layout_weight="1"

android:background="#4CAF50"

android:scaleType="fitCenter"

app:srcCompat="@drawable/ic_baseline_close_24" />

<ImageButton

android:id="@+id/imageButton5"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_margin="3dp"

android:layout_weight="1"

android:background="#4CAF50"

android:scaleType="fitCenter"

app:srcCompat="@drawable/ic_baseline_check_box_outline_blank_24" />

<ImageButton

android:id="@+id/imageButton6"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_margin="3dp"

android:layout_weight="1"

android:background="#4CAF50"

android:scaleType="fitCenter"

app:srcCompat="@drawable/ic_baseline_close_24" />

</TableRow>

<TableRow

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight="1">

<ImageButton

android:id="@+id/imageButton7"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_margin="3dp"

android:layout_weight="1"

android:background="#4CAF50"

android:scaleType="fitCenter"

app:srcCompat="@drawable/ic_baseline_close_24" />

<ImageButton

android:id="@+id/imageButton8"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_margin="3dp"

android:layout_weight="1"

android:background="#4CAF50"

android:scaleType="fitCenter"

app:srcCompat="@drawable/ic_baseline_panorama_fish_eye_24" />

<ImageButton

android:id="@+id/imageButton9"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_margin="3dp"

android:layout_weight="1"

android:background="#4CAF50"

android:scaleType="fitCenter"

app:srcCompat="@drawable/ic_baseline_close_24" />

</TableRow>

</TableLayout>

<NumberPicker

android:id="@+id/numberPicker"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="16dp"

android:layout_marginLeft="16dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="@+id/guideline2"

app:layout_constraintVertical_bias="0.589"

tools:ignore="MissingConstraints" />

<Button

android:id="@+id/button"

android:layout_width="0dp"

android:layout_height="0dp"

android:layout_margin="3dp"

android:background="@drawable/button_blue"

android:text="START"

android:textColor="#FFFFFF"

android:textSize="24sp"

app:layout_constraintBottom_toTopOf="@+id/guideline8"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="@+id/guideline3"

app:layout_constraintTop_toTopOf="@+id/guideline7"

app:layout_constraintVertical_bias="0.166" />

<NumberPicker

android:id="@+id/numberPicker2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toStartOf="@+id/guideline3"

app:layout_constraintHorizontal_bias="0.0"

app:layout_constraintStart_toEndOf="@+id/textView7"

app:layout_constraintTop_toTopOf="@+id/guideline2"

app:layout_constraintVertical_bias="0.589"

tools:ignore="MissingConstraints" />

<TextView

android:id="@+id/textView5"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="並び"

android:textSize="20sp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintStart_toEndOf="@+id/numberPicker"

app:layout_constraintTop_toTopOf="@+id/guideline2" />

<TextView

android:id="@+id/textView7"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="16dp"

android:layout_marginLeft="16dp"

android:text="盤数:"

android:textSize="20sp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintStart_toEndOf="@+id/textView5"

app:layout_constraintTop_toTopOf="@+id/guideline2" />

<androidx.constraintlayout.widget.Guideline

android:id="@+id/guideline3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical"

app:layout_constraintGuide_percent="0.62" />

<androidx.constraintlayout.widget.Guideline

android:id="@+id/guideline7"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal"

app:layout_constraintGuide_percent="0.78" />

<androidx.constraintlayout.widget.Guideline

android:id="@+id/guideline8"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal"

app:layout_constraintGuide_percent="0.93" />

</androidx.constraintlayout.widget.ConstraintLayout>

前へ＜ーーー＞つづく