kotlinにおける同じレイアウトを繰り返す方法

kotlinで画像と音声を用いたアニメーション作成アプリを作ろうとしています。

イメージとしてはプレゼンテーションの簡易版で、画像を挿入し、音声を入れ、4つを組み合わせ動画にしたいと考えています。

現状画像挿入と音声はネットにあったものを参考に一つのアプリとして作りました。

しかし、これらを4つ並べる方法がわかりません。

スクロールが必要なので、scrollviewを使おうとしましたが、同じidになってしまいここから進めずにいます。

また、recycler viewで繰り返す方法も調べてみましたがネットには同じものを繰り返すものが見つからず、こちらも進められずにいます。

どのようなレイアウトで作成していくのが良いのか、お力添えよろしくお願いいたします。

絵コンテを雑ながら追加してみました。

イメージ説明

<?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"
    tools:context=".SecondActivity">

 <LinearLayout
        android:id="@+id/linearLayout3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <Button
            android:id="@+id/record"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:layout_marginRight="50dp"
            android:text="録音"
            android:textSize="20sp" />

        <Button
            android:id="@+id/stop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:layout_marginRight="50dp"
            android:text="停止"
            android:textSize="20sp" />

        <Button
            android:id="@+id/playback"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:layout_marginRight="50dp"
            android:text="再生"
            android:textSize="20sp" />
    </LinearLayout>

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toTopOf="@+id/linearLayout3"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/linearLayout2"
            tools:srcCompat="@tools:sample/avatars" />

    <Button
        android:id="@+id/picturebutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="画像を挿入する"
        app:layout_constraintBottom_toTopOf="@+id/linearLayout3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout2" />

</androidx.constraintlayout.widget.ConstraintLayout>


private const val LOG_TAG = "AudioRecordTest"
private const val REQUEST_RECORD_AUDIO_PERMISSION = 200

class SecondActivity : AppCompatActivity() {
    private var recorder: MediaRecorder? = null
    private var fileName: String = ""

    private var player: MediaPlayer? = null


    private var permissionToRecordAccepted = false
    private var permissions: Array<String> = arrayOf(Manifest.permission.RECORD_AUDIO)

    override fun onRequestPermissionsResult(
        requestCode: Int,
        permissions: Array<String>,
        grantResults: IntArray
    ) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults)
        permissionToRecordAccepted = if (requestCode == REQUEST_RECORD_AUDIO_PERMISSION) {
            grantResults[0] == PackageManager.PERMISSION_GRANTED
        } else {
            false
        }
        if (!permissionToRecordAccepted) finish()
    }

    private fun onRecord(start: Boolean) = if (start) {
        startRecording()
    } else {
        stopRecording()
    }

    private fun onPlay(start: Boolean) = if (start) {
        startPlaying()
    } else {
        stopPlaying()
    }

    private fun startPlaying() {
        player = MediaPlayer().apply {
            try {
                setDataSource(fileName)
                prepare()
                start()
            } catch (e: IOException) {
                Log.e(LOG_TAG, "prepare() failed")
            }
        }
    }

    private fun stopPlaying() {
        player?.release()
        player = null
    }





    private fun startRecording() {
        recorder = MediaRecorder().apply {
            setAudioSource(MediaRecorder.AudioSource.MIC)
            setOutputFormat(MediaRecorder.OutputFormat.THREE_GPP)
            setOutputFile(fileName)
            setAudioEncoder(MediaRecorder.AudioEncoder.AMR_NB)

            try {
                prepare()
            } catch (e: IOException) {
                Log.e(LOG_TAG, "prepare() failed")
            }

            start()
        }
    }

    private fun stopRecording() {
        recorder?.apply {
            stop()
            release()
        }
        recorder = null
    }




    override fun onCreate(savedInstanceState: Bundle?) {

        fileName = "${externalCacheDir?.absolutePath}/audiorecordtest.3gp"
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_second2)

        var pictureButton : Button = findViewById(R.id.picturebutton)

        pictureButton.setOnClickListener {
            val intent = Intent(Intent.ACTION_OPEN_DOCUMENT).apply {
                addCategory(Intent.CATEGORY_OPENABLE)
                type = "image/*"
            }
            startActivityForResult(intent, READ_REQUEST_CODE)
        }

        ActivityCompat.requestPermissions(this, permissions, REQUEST_RECORD_AUDIO_PERMISSION)

        val record = findViewById<Button>(R.id.record) //録音オブジェクト取得
        val stop = findViewById<Button>(R.id.stop) //録音停止オブジェクト取得
        val playback = findViewById<Button>(R.id.playback) //再生オブジェクト取得

        val listener = RecordButton() //レコードボタンリスナのインスタンス生成

        record.setOnClickListener(listener) //レコードボタンリスナの設定
        stop.setOnClickListener(listener)
        playback.setOnClickListener(listener)

        val btnFinish: Button = findViewById(R.id.btnFinish)

        btnFinish.setOnClickListener {
            finish()
        }
    }

    companion object{
        private const val READ_REQUEST_CODE: Int = 42
    }

    //クリックイベントの設定
    private inner class RecordButton : View.OnClickListener {
        override fun onClick(v: View?) {
            Log.i(LOG_TAG, "クリック成功")
            Log.i(LOG_TAG, fileName)

            if(v != null){
                when(v.id){
                    //録音開始ボタン
                    R.id.record -> {
                        onRecord(true)
                        Log.i(LOG_TAG, "録音開始")
                    }
                    //録音停止ボタン
                    R.id.stop -> {
                        onRecord(false)
                        Log.i(LOG_TAG, "録音終了")
                    }

                    R.id.playback -> {
                        onPlay(true)
                        Log.i(LOG_TAG, "再生中")
                    }
                }
            }
        }
    }

    override fun onActivityResult(requestCode: Int, resultCode: Int, resultData: Intent?) {
        super.onActivityResult(requestCode, resultCode, resultData)

        if (resultCode != RESULT_OK) {
            return
        }
        when (requestCode){
            READ_REQUEST_CODE -> {
                try {
                    resultData?.data?.also { uri ->
                        val inputStream = contentResolver?.openInputStream(uri)
                        val image = BitmapFactory.decodeStream(inputStream)
                        val imageView = findViewById<ImageView>(R.id.imageView)
                        imageView.setImageBitmap(image)
                    }
                }catch (e: Exception){
                    Toast.makeText(this, "エラーが発生しました", Toast.LENGTH_LONG).show()
                }
            }
        }
    }
}

jimbe

2023/01/25 10:36 編集

>recycler viewで繰り返す方法も調べてみましたがネットには同じものを繰り返すものが見つからずいえ、逆に、同じものを繰り返すのが RecyclerView の基本ですが…。どのような構造にしたいのか、出来ているコード/xml、画面イメージ(絵)に書き込んで頂く(絵コンテ)とか、実際の4つのレイアウトとか、極力具体的なモノをご提示願えますか。

kotkuin

2023/01/25 12:44

ご回答ありがとうございます。すみません、RecyclerViewを最近知ったもので、使い方などがいまいち当方理解できていません。もう少し勉強してみます。雑ながら絵コンテを書いてみました。すべてボタンのみで構成されています。機能としては、アプリのユーザーが好きな画像をいれること、音声の録音のみです。ここまでは一応機能しています。（4つではなく1つのみですが）このような感じです。もしよろしければご回答お願いいたします。

jimbe

2023/01/25 14:10

>機能としては、アプリのユーザーが好きな画像をいれること、音声の録音のみです。ここまでは一応機能しています。（4つではなく1つのみですが）追加ですみません。機能しているコードがありましたら、実際の処理部分(ボタン押下時の処理など)は不要(省略)でレイアウトやアクティビティのコードも頂けると、それに合わせた形が出来ると思いますが、如何でしょう。

kotkuin

2023/01/25 14:25

ありがとうございます。コードを追記しました。いろいろ試行錯誤してみましたが、現状ここで止まっています。アクティビティのほうはネットにあったものと、YouTubeのものを真似たものです。録音、再生はkotlinのMediarecorderとMediaPlayerを使っています。 https://qiita.com/orca_div_/items/c06501850c79c01988e5 このサイトを参考にしました。画像を貼る機能はこちらのYouTubeを参考にしました。 https://youtu.be/2lLqFffaWLQ 初心者すぎるコードをですが、よろしくお願いいたします。

回答1件

ベストアンサー

とりあえず RecyclerView を用いるレイアウトとコンストラクタ、inner クラスとして RecycleView 用の Adapter を定義してみました。
kotlin は慣れないもので、書いてみただけで動かしていません。(AndroidStudio上ではコンパイルエラーは無いようです)
現在固定になっている録音データのファイル名をどうするのか、ファイル名や画像URIをアダプタへ設定するルートをどうするかが問題です。

アクティビティのレイアウト

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=".SecondActivity">
8
9  <TextView
10      android:id="@+id/header"
11      android:layout_width="0dp"
12      android:layout_height="wrap_content"
13      android:text="Header"
14      android:textSize="30dp"
15      app:layout_constraintEnd_toEndOf="parent"
16      app:layout_constraintStart_toStartOf="parent"
17      app:layout_constraintTop_toTopOf="parent" />
18
19  <androidx.recyclerview.widget.RecyclerView
20      android:id="@+id/recyclerView"
21      android:layout_width="0dp"
22      android:layout_height="0dp"
23      app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
24      app:layout_constraintBottom_toBottomOf="parent"
25      app:layout_constraintEnd_toEndOf="parent"
26      app:layout_constraintStart_toStartOf="parent"
27      app:layout_constraintTop_toBottomOf="@id/header" />
28</androidx.constraintlayout.widget.ConstraintLayout>

res/layout/recyclerview_row.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="wrap_content">
7
8  <ImageView
9      android:id="@+id/imageView"
10      android:layout_width="wrap_content"
11      android:layout_height="wrap_content"
12      app:layout_constraintBottom_toTopOf="@id/barrier"
13      app:layout_constraintEnd_toEndOf="parent"
14      app:layout_constraintStart_toStartOf="parent"
15      app:layout_constraintTop_toTopOf="parent"
16      tools:srcCompat="@tools:sample/avatars" />
17
18  <Button
19      android:id="@+id/picturebutton"
20      android:layout_width="wrap_content"
21      android:layout_height="wrap_content"
22      android:text="画像を挿入する"
23      app:layout_constraintBottom_toTopOf="@id/barrier"
24      app:layout_constraintEnd_toEndOf="parent"
25      app:layout_constraintStart_toStartOf="parent"
26      app:layout_constraintTop_toTopOf="parent" />
27
28  <androidx.constraintlayout.widget.Barrier
29      android:id="@+id/barrier"
30      android:layout_width="0dp"
31      android:layout_height="0dp"
32      app:barrierDirection="bottom"
33      app:constraint_referenced_ids="imageView, picturebutton" />
34
35  <Button
36      android:id="@+id/record"
37      android:layout_width="wrap_content"
38      android:layout_height="wrap_content"
39      android:text="録音"
40      android:textSize="20sp"
41      app:layout_constraintEnd_toStartOf="@id/stop"
42      app:layout_constraintStart_toStartOf="parent"
43      app:layout_constraintTop_toBottomOf="@+id/barrier" />
44
45  <Button
46      android:id="@+id/stop"
47      android:layout_width="wrap_content"
48      android:layout_height="wrap_content"
49      android:text="停止"
50      android:textSize="20sp"
51      app:layout_constraintEnd_toStartOf="@id/playback"
52      app:layout_constraintStart_toEndOf="@id/record"
53      app:layout_constraintTop_toBottomOf="@+id/barrier" />
54
55  <Button
56      android:id="@+id/playback"
57      android:layout_width="wrap_content"
58      android:layout_height="wrap_content"
59      android:text="再生"
60      android:textSize="20sp"
61      app:layout_constraintEnd_toEndOf="parent"
62      app:layout_constraintStart_toEndOf="@id/stop"
63      app:layout_constraintTop_toBottomOf="@+id/barrier" />
64</androidx.constraintlayout.widget.ConstraintLayout>

kotlin
1  override fun onCreate(savedInstanceState: Bundle?) {
2    fileName = "${externalCacheDir?.absolutePath}/audiorecordtest.3gp"
3    super.onCreate(savedInstanceState)
4    setContentView(R.layout.activity_second2)
5
6    ActivityCompat.requestPermissions(this, permissions, REQUEST_RECORD_AUDIO_PERMISSION)
7
8    //val btnFinish: Button = findViewById(R.id.btnFinish)
9    //btnFinish.setOnClickListener {
10    //  finish()
11    //}
12
13    adapter = Adapter()
14    val recyclerView: RecyclerView = findViewById(R.id.recyclerView)
15    recyclerView.adapter = adapter
16  }
17
18  private lateinit var adapter: Adapter
19
20  private inner class Adapter : RecyclerView.Adapter<Adapter.ViewHolder>() {
21    inner class ViewHolder(itemView : View) : RecyclerView.ViewHolder(itemView) {
22      val imageView: ImageView = itemView.findViewById(R.id.imageView)
23      val playback: Button = itemView.findViewById(R.id.playback)
24      init {
25        val picture: Button = itemView.findViewById(R.id.picturebutton)
26        picture.setOnClickListener { v ->
27          val intent = Intent(Intent.ACTION_OPEN_DOCUMENT).apply {
28            addCategory(Intent.CATEGORY_OPENABLE)
29            type = "image/*"
30          }
31          startActivityForResult(intent, READ_REQUEST_CODE)
32        }
33        val record: Button = itemView.findViewById(R.id.record)
34        record.setOnClickListener { v ->
35          onRecord(true)
36          Log.i(LOG_TAG, "録音開始")
37        }
38        val stop: Button = itemView.findViewById(R.id.stop)
39        stop.setOnClickListener { v ->
40          onRecord(false)
41          Log.i(LOG_TAG, "録音終了")
42        }
43        playback.setOnClickListener { v ->
44          onPlay(true)
45          Log.i(LOG_TAG, "再生中")
46        }
47      }
48    }
49    private inner class Data(var uri: Uri? = null, var bitmap: Bitmap? = null, var filename: String? = null)
50
51    private val datas = arrayOf(Data(), Data(), Data(), Data());
52
53    fun setBitmapUri(position: Int, uri: Uri?) {
54      datas[position].bitmap = uri?.let { BitmapFactory.decodeStream(contentResolver?.openInputStream(it)) }
55      datas[position].uri = uri
56      notifyItemChanged(position)
57    }
58
59    fun setAudioFilename(position: Int, filename: String?) {
60      datas[position].filename = filename
61      notifyItemChanged(position)
62    }
63    fun getAudioFilename(index: Int) : String? = datas[index].filename
64
65    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) =
66      ViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.recyclerview_row, parent, false))
67
68    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
69      holder.imageView.setImageBitmap(datas[position].bitmap)
70      holder.playback.isEnabled = datas[position].filename != null
71    }
72
73    override fun getItemCount() =
74      datas.size
75  }

投稿2023/01/25 18:22

編集2023/01/26 08:37

jimbe

総合スコア11080

回答へのコメント

kotkuin

2023/01/26 08:20

ありがとうございます。一度試してみます。

jimbe

2023/01/26 08:35 編集

画像のほうは呼び出しを startActivityForResult(intent, READ_REQUEST_CODE + adapterPosition) として、 onActivityResult の受け取りで requestCode が READ_REQUEST_CODE ～ READ_REQUEST_CODE +3 の範囲内だったら val position = requestCode - READ_REQUEST_CODE adapter.setBitmapUri(position, uri) する感じで行けるか…と思っていますが^^; ・・・あれ？ adapter プロパティに設定しないですかね。直します。

kotkuin

2023/01/31 01:35

先日書いていただいたコードでデザインのほうはエラーなくできました。ありがとうございます。 jimbeさんがおっしゃる通り、ファイルをどうするか一度考えてみます。