AndroidアプリでSeekbarの値に応じて円の半径を変えたいが値が引き渡せない問題について

前提・実現したいこと

AndroidアプリでSeekbarの値に応じて円の半径を変えようとしています。

Seekbarの実装で参考にしているのは、以下のサイトです。
[Android & Kotlin] ボリューム入力ができるSeekBar

発生している問題・エラーメッセージ

Seekbarの表示と円の描画はそれぞれできているのですが、Seekbarの値に応じて円の半径を変える実装ができずに困っています。

現在のコードだとエラーは出ずにビルドやエミュレータで実行できますが、半径を変化させたい円も、初期値のまま変化しません。
黄色の円の半径を、seekbarの値に応じて変化させるには現在のコードをどのように修正すれば良いでしょうか。

該当のソースコード

MainActivity.kt

kotlin
1import android.graphics.Bitmap
2import android.graphics.Canvas
3import android.graphics.Color
4import android.graphics.Paint
5import android.graphics.drawable.BitmapDrawable
6import android.os.Bundle
7import android.widget.SeekBar
8import androidx.appcompat.app.AppCompatActivity
9import kotlinx.android.synthetic.main.activity_main.*
10import java.util.*
11
12class MainActivity : AppCompatActivity() {
13
14    override fun onCreate(savedInstanceState: Bundle?) {
15        super.onCreate(savedInstanceState)
16        setContentView(R.layout.activity_main)
17
18        //seekbar
19        seekbar.setProgress(0)
20        seekbar.setMax(100)
21
22        //円の半径初期値
23        var num: Int = 100
24
25        seekbar.setOnSeekBarChangeListener(
26            object : SeekBar.OnSeekBarChangeListener {
27
28                override fun onProgressChanged(
29                    seekBar: SeekBar, progress: Int, fromUser: Boolean
30                ) {
31                    //ここでseekbarの数字を代入したい
32                    num = progress
33
34                    val str = String.format(Locale.US, "%d %%", progress)
35                    percent.text = str //percentage which user setted
36                }
37
38
39                override fun onStartTrackingTouch(seekBar: SeekBar) {
40                    // called when a knob is touched
41                }
42
43                override fun onStopTrackingTouch(seekBar: SeekBar) {
44                    // called when a knob is released
45                }
46
47            })
48
49        //円の描画
50        val bitmap: Bitmap = Bitmap.createBitmap(300, 300, Bitmap.Config.ARGB_8888)
51        val canvas: Canvas = Canvas(bitmap)
52
53        var paint1 = Paint()
54        paint1.setColor(Color.parseColor("#F5FF5F"))
55        paint1.setAntiAlias(true)
56        paint1.setDither(true)
57
58        //変化しない円
59        var paint2 = Paint()
60        paint2.setColor(Color.parseColor("#c6142d"))
61        paint2.setAntiAlias(true)
62        paint2.setDither(true)
63
64
65        //半径が変化する円
66        var center_x = (150).toFloat()
67        var center_y = (150).toFloat()
68        var radius = (num).toFloat()
69
70
71        canvas.drawCircle(center_x, center_y, (120).toFloat(), paint2)
72        canvas.drawCircle(center_x, center_y, radius, paint1)
73
74        // set bitmap as background to ImageView
75        imageV.background = BitmapDrawable(getResources(), bitmap)
76
77    }
78}
79

activity_main.xml

xml
1<?xml version="1.0" encoding="utf-8"?>
2<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:tools="http://schemas.android.com/tools"
4    xmlns:app="http://schemas.android.com/apk/res-auto"
5    android:layout_width="match_parent"
6    android:layout_height="match_parent"
7    android:background="#F7F3F5"
8    android:orientation="vertical"
9    android:gravity="center"
10    tools:context=".MainActivity">
11
12
13    <ImageView
14        android:id="@+id/imageV"
15        android:layout_width="350dp"
16        android:layout_height="350dp"/>
17
18    <TextView
19        android:id="@+id/percent"
20        android:padding="10dp"
21        android:layout_width="match_parent"
22        android:layout_height="wrap_content"
23        android:layout_margin="10dp"
24        android:gravity="center"
25        android:textColor="#000"
26        android:textSize="20sp" />
27
28    <SeekBar
29        android:id="@+id/seekbar"
30        android:layout_width="match_parent"
31        android:layout_height="60dp"
32        android:layout_margin="10dp"
33        android:background="#ccc"
34        android:gravity="center"
35        android:padding="20dp" />
36
37
38
39</LinearLayout>

試したこと

                    val str = String.format(Locale.US, "%d %%", progress)
                    percent.text = str //percentage which user setted

として、seekbarの値は数値として、progressでInt型で取得できていることはわかっています。

補足情報（FW/ツールのバージョンなど）

Android Studio 3.6.1

行動規範の内容に同意します

回答2件

ベストアンサー

一番安直な方法はこうなると思います。

Kotline
1import android.graphics.Bitmap
2import android.graphics.Canvas
3import android.graphics.Color
4import android.graphics.Paint
5import android.graphics.drawable.BitmapDrawable
6import android.os.Bundle
7import android.widget.SeekBar
8import androidx.appcompat.app.AppCompatActivity
9import kotlinx.android.synthetic.main.activity_main.*
10import java.util.*
11
12class MainActivity : AppCompatActivity() {
13
14    override fun onCreate(savedInstanceState: Bundle?) {
15        super.onCreate(savedInstanceState)
16        setContentView(R.layout.activity_main)
17
18        //seekbar
19        seekbar.setProgress(0)
20        seekbar.setMax(100)
21
22        //円の半径初期値
23        // 半径を仮引数として渡すのでコメントアウトしてしまいましょう。
24        // var num: Int = 100
25
26        seekbar.setOnSeekBarChangeListener(
27            object : SeekBar.OnSeekBarChangeListener {
28
29                override fun onProgressChanged(
30                    seekBar: SeekBar, progress: Int, fromUser: Boolean
31                ) {
32                    //ここでseekbarの数字を代入したい
33                    // ここでnumはもう要らないかな～
34                    // num = progress
35
36                    val str = String.format(Locale.US, "%d %%", progress)
37                    percent.text = str //percentage which user setted
38                    
39                    // 円の描画関数を呼ぶ。
40　　　　　　　　　　　// progressをFloatにキャストして仮引数として渡す。
41                    refreshCircle(progress.toFloat()) 
42
43                }
44
45
46                override fun onStartTrackingTouch(seekBar: SeekBar) {
47                    // called when a knob is touched
48                }
49
50                override fun onStopTrackingTouch(seekBar: SeekBar) {
51                    // called when a knob is released
52                }
53
54            })
55
56        // 半径初期値を渡す。
57        refreshCircle(100f)
58        
59    }
60
61    // 円の描画を関数にまとめる。
62    // 半径を仮引数として渡す。
63    private fun refreshCircle(radius: Float) {
64//円の描画
65        val bitmap: Bitmap = Bitmap.createBitmap(300, 300, Bitmap.Config.ARGB_8888)
66        val canvas: Canvas = Canvas(bitmap)
67
68        var paint1 = Paint()
69        paint1.setColor(Color.parseColor("#F5FF5F"))
70        paint1.setAntiAlias(true)
71        paint1.setDither(true)
72
73        //変化しない円
74        var paint2 = Paint()
75        paint2.setColor(Color.parseColor("#c6142d"))
76        paint2.setAntiAlias(true)
77        paint2.setDither(true)
78
79
80        //半径が変化する円
81        var center_x = (150).toFloat()
82        var center_y = (150).toFloat()
83        
84        // radiusは仮引数として渡されているのでコメントアウト
85        // var radius = (num).toFloat()
86
87
88        canvas.drawCircle(center_x, center_y, (120).toFloat(), paint2)
89        canvas.drawCircle(center_x, center_y, radius, paint1)
90
91        // set bitmap as background to ImageView
92        imageV.background = BitmapDrawable(getResources(), bitmap)
93    }
94}
95
96

投稿2020/03/23 06:19

編集2020/03/23 06:46

quadii.shii

総合スコア257

退会済みユーザー

2020/03/23 06:38

ご回答いただきましてありがとうございます。上記のコードでも、`var radius = (num).toFloat()`で「Unresolved reference: num」と出てしまうのですが、どのように紐づけたら良いのでしょうか。

quadii.shii

2020/03/23 06:41

動作確認していませんでしたが、numはonCreateのローカル変数でしたね。グローバル変数にするか、refreshCircleの仮引数にするかで解決します。回答にも追記しますが、よければ一回ご自分でも試してみてください。

行動規範の内容に同意します

必要なことは, シークバーを移動させたら円を再描画することです.

もしかしたら勘違いされているのかもしれませんが, シークバーの移動によって onProgressChanged が実行されても, コード上で並んでいる //円の描画 以降が実行されるわけではありません.

#追加
円を描画する専用 View を作成して, 半径を指定したら再描画するようにするテもあります.

CircleView.kt

kotlin
1package com.teratail.q248833
2
3import android.content.Context
4import android.graphics.Canvas
5import android.graphics.Color
6import android.graphics.Paint
7import android.graphics.Paint.ANTI_ALIAS_FLAG
8import android.graphics.Paint.DITHER_FLAG
9import android.util.AttributeSet
10import android.util.Log
11import androidx.appcompat.widget.AppCompatImageView
12
13public class CircleView : AppCompatImageView {
14  lateinit var variableCirclePaint: Paint
15  lateinit var fixedCirclePaint: Paint
16  var radius = 100
17    get() = field
18    set(value) {
19      if(field != value) {
20        field = value
21        invalidate()
22      }
23    }
24
25  constructor(context: Context?) : super(context) { init() }
26  constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) { init() }
27  constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) { init() }
28  fun init() {
29    variableCirclePaint = Paint(ANTI_ALIAS_FLAG or DITHER_FLAG)
30    variableCirclePaint.setColor(Color.parseColor("#F5FF5F"))
31
32    fixedCirclePaint = Paint(ANTI_ALIAS_FLAG or DITHER_FLAG)
33    fixedCirclePaint.setColor(Color.parseColor("#c6142d"))
34  }
35
36  override fun onDraw(canvas: Canvas?) {
37    super.onDraw(canvas)
38    if(canvas != null) {
39      val center_x = canvas.width / 2f
40      val center_y = canvas.height / 2f
41      //変化しない円
42      canvas.drawCircle(center_x, center_y, 120.0f, fixedCirclePaint)
43      //半径が変化する円
44      canvas.drawCircle(center_x, center_y, radius.toFloat(), variableCirclePaint)
45    }
46  }
47}

MainActivity.kt

kotlin
1package com.teratail.q248833
2
3import android.os.Bundle
4import android.widget.SeekBar
5import androidx.appcompat.app.AppCompatActivity
6import kotlinx.android.synthetic.main.activity_main.*
7import java.util.*
8
9class MainActivity : AppCompatActivity() {
10  override fun onCreate(savedInstanceState: Bundle?) {
11    super.onCreate(savedInstanceState)
12    setContentView(R.layout.activity_main)
13
14    //円の半径初期値
15    circle.radius = 100 //[px]
16
17    //seekbar
18    seekbar.min = 0 //[%]
19    seekbar.max = 100 //[%]
20    seekbar.setOnSeekBarChangeListener(
21      object : SeekBar.OnSeekBarChangeListener {
22        override fun onProgressChanged(seekBar: SeekBar, progress: Int, fromUser: Boolean) {
23          //ここでseekbarの数字を代入したい
24          circle.radius = progress
25
26          val str = String.format(Locale.US, "%d %%", progress)
27          percent.text = str //percentage which user setted
28        }
29        override fun onStartTrackingTouch(seekBar: SeekBar) {}
30        override fun onStopTrackingTouch(seekBar: SeekBar) {}
31      })
32    seekbar.progress = circle.radius
33  }
34}

activity_main.xml

xml
1<?xml version="1.0" encoding="utf-8"?>
2<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:app="http://schemas.android.com/apk/res-auto"
4    xmlns:tools="http://schemas.android.com/tools"
5    android:layout_width="match_parent"
6    android:layout_height="match_parent"
7    tools:context=".MainActivity">
8
9    <com.teratail.q248833.CircleView
10        android:id="@+id/circle"
11        android:layout_width="300px"
12        android:layout_height="300px"
13        app:layout_constraintBottom_toTopOf="@id/percent"
14        app:layout_constraintLeft_toLeftOf="parent"
15        app:layout_constraintRight_toRightOf="parent"
16        app:layout_constraintTop_toTopOf="parent" />
17
18    <TextView
19        android:id="@+id/percent"
20        android:padding="10dp"
21        android:layout_width="match_parent"
22        android:layout_height="wrap_content"
23        android:layout_margin="10dp"
24        android:gravity="center"
25        android:textColor="#000"
26        android:textSize="20sp"
27        app:layout_constraintBottom_toTopOf="@id/seekbar"
28        app:layout_constraintLeft_toLeftOf="parent"
29        app:layout_constraintRight_toRightOf="parent"
30        app:layout_constraintTop_toBottomOf="@id/circle"/>
31
32    <SeekBar
33        android:id="@+id/seekbar"
34        android:layout_width="match_parent"
35        android:layout_height="60dp"
36        android:layout_margin="10dp"
37        android:background="#ccc"
38        android:gravity="center"
39        android:padding="20dp"
40        app:layout_constraintBottom_toBottomOf="parent"
41        app:layout_constraintLeft_toLeftOf="parent"
42        app:layout_constraintRight_toRightOf="parent"
43        app:layout_constraintTop_toBottomOf="@id/percent"/>
44</androidx.constraintlayout.widget.ConstraintLayout>