【Android】垂直シークバー（SeekBar）を実装する方法をサンプルコード付きで解説

Androidで垂直シークバー（SeekBar）を実装する方法

このチュートリアルでは、Androidアプリで垂直方向に動作するシークバー（SeekBar）を実装する方法を、サンプルコード付きで段階的に解説します。標準のSeekBarは横向きにしか表示できないため、rotation属性で270度回転させるのがポイントです。

ステップ1：Android Studioで新規プロジェクトを作成する

Android Studioを起動し、メニューから「File」→「New Project」を選択します。必要事項をすべて入力して、新しいプロジェクトを作成しましょう。

ステップ2：activity_main.xml にレイアウトを記述する

res/layout/activity_main.xml に以下のコードを追加します。SeekBarタグに android:rotation="270" を指定することで、シークバーが垂直方向に表示されます。あわせて、現在の値を画面上部に表示するためのTextViewも配置しています。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:rotation="270"/>

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text=""
        android:textSize="16sp" />

</RelativeLayout>

ステップ3：MainActivity.java にロジックを記述する

src/MainActivity.java に以下のコードを追加します。OnSeekBarChangeListenerを実装することで、つまみをドラッグして値が変化するたびに、その値がTextViewへリアルタイムに反映されます。

※新しいAndroid Studioで作成したプロジェクトでは、import文が androidx.appcompat.app.AppCompatActivity になっている点に注意してください。

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    SeekBar seekBar;
    TextView textView;
    int min = 0, max = 100, current = 50;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        textView = findViewById(R.id.textView);
        seekBar = findViewById(R.id.seekBar);
        seekBar.setMax(max - min);
        seekBar.setProgress(current - min);
        textView.setText("" + current);

        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                current = progress + min;
                textView.setText("" + current);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) { }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) { }
        });
    }
}

ステップ4：AndroidManifest.xml を確認する

androidManifest.xml は以下のようになります。特別なパーミッションは不要ですが、MainActivityがランチャーアクティビティとして正しく登録されていることを確認しておきましょう。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

アプリを実行して動作を確認しよう

それでは、アプリを実行してみましょう。ここでは、実機のAndroidスマートフォンがパソコンに接続されているものとして説明を進めます。Android Studioからアプリを起動するには、プロジェクト内のアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックしてください。デバイス選択画面で自分のモバイル端末を選ぶと、端末に以下のような画面が表示されます。

まとめ

標準のSeekBarには縦向きモードが用意されていないため、android:rotation="270" を指定して回転させるのが最も簡単な実装方法です。min・max・current の各変数を組み合わせることで、任意の範囲の値を柔軟に扱うことができます。より高度な見た目や操作感が必要な場合は、カスタムViewとして独自に描画する方法も検討してみてください。