30. 【Android/Kotlin】ProgressBar

はじめに
ProgressBarとは
ProgressBarを追加
アプリ起動
終わりに

はじめに

DreamHanksのMOONです。

前回はToolBarにメニューを追加することについて説明しました。

29. 【Android/Kotlin】ToolBarのメニュー

今回は「ProgressBar」というViewについて説明していきます。

ProgressBarとは

作業の進行状況をbar形式で表したViewです。

ProgressBarを追加

・レイアウトのxmlファイルを作成

activity_progressbar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".ProgressBarActivity"
    android:gravity="center">

    <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="200dp"
        android:layout_height="30dp"
        android:id="@+id/progressbar"
        android:progress="0" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="クリックの準備完了"
        android:id="@+id/click_tv"
        android:layout_marginTop="50dp" />

    <Button
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="click"
        android:id="@+id/click_btn"/>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 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"

android:orientation="vertical"

tools:context=".ProgressBarActivity"

android:gravity="center">

<ProgressBar

style="?android:attr/progressBarStyleHorizontal"

android:layout_width="200dp"

android:layout_height="30dp"

android:id="@+id/progressbar"

android:progress="0" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="クリックの準備完了"

android:id="@+id/click_tv"

android:layout_marginTop="50dp" />

<Button

android:layout_width="100dp"

android:layout_height="50dp"

android:text="click"

android:id="@+id/click_btn"/>

</LinearLayout>

・Activityを作成

ProgressBarActivity.kt

package com.example.practiceapplication

import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.ProgressBar
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity


class ProgressBarActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_progressbar)

        var click_btn = findViewById<Button>(R.id.click_btn)
        var progressbar = findViewById<ProgressBar>(R.id.progressbar)
        var click_tv = findViewById<TextView>(R.id.click_tv)

        //クリックボタンのクリックイベントを設定
        click_btn.setOnClickListener {
            var nowValue: Int = progressbar.getProgress()   //現在のプログラスバーのパーセント
            val maxValue: Int = progressbar.getMax()        ////最大のプログラスバーのパーセント
            var str: CharSequence = ""
            if (maxValue == nowValue) {
                nowValue = 0
            } else {
                progressbar.setVisibility(View.VISIBLE)
                nowValue += 5
            }
            str = if (nowValue == 0) {
                progressbar.setVisibility(View.GONE)
                "完了!"
            } else {
                "クリックしてください。[$nowValue%]"
            }
            progressbar.setProgress(nowValue)
            click_tv.setText(str)
        }

    }

}

package com.example.practiceapplication

import android.os.Bundle

import android.view.View

import android.widget.Button

import android.widget.ProgressBar

import android.widget.TextView

import androidx.appcompat.app.AppCompatActivity

class ProgressBarActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_progressbar)

var click_btn = findViewById<Button>(R.id.click_btn)

var progressbar = findViewById<ProgressBar>(R.id.progressbar)

var click_tv = findViewById<TextView>(R.id.click_tv)

//クリックボタンのクリックイベントを設定

click_btn.setOnClickListener {

var nowValue: Int = progressbar.getProgress() //現在のプログラスバーのパーセント

val maxValue: Int = progressbar.getMax() ////最大のプログラスバーのパーセント

var str: CharSequence = ""

if (maxValue == nowValue) {

nowValue = 0

} else {

progressbar.setVisibility(View.VISIBLE)

nowValue += 5

}

str = if (nowValue == 0) {

progressbar.setVisibility(View.GONE)

"完了!"

} else {

"クリックしてください。[$nowValue%]"

}

progressbar.setProgress(nowValue)

click_tv.setText(str)

}

①ボタンのクリックイベントを設定

②クリックした場合にBarの値に5を加える

③Barの値が100になた場合Barを見えないようにする

アプリ起動

・初期の画面

・ボタンを1回クリックした場合

・ボタンを12回までクリックした場合

・100%までクリックした場合

終わりに

今回は「ProgressBar」というViewについて説明しました。

次回はアンドロイドのAnimationについて説明していきます。

31. 【Android/Kotlin】Animation