垂直なSeekBarの作り方

上下に動くような垂直なSeekBar(シークバー)を作りたい場合は標準では用意されていないので自分でカスタマイズして作る必要があります。

おおまかな手順は次の通りです。

1. SeekBarクラスを拡張してVerticalSeekBarなどの独自クラスを作る。
2. そのシークバーをレイアウトに設置する。
3. コード内でシークバーのイベントを受けとる。

独自のシークバークラスの作成

以下のようにSeekBarクラスを拡張して、独自の垂直シークバークラスを作成しました。

package com.MyApp.myapp;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.SeekBar;

public class VerticalSeekBar extends SeekBar 
{

    public VerticalSeekBar(Context context) 
    {
        super(context);
    }

    public VerticalSeekBar(Context context, AttributeSet attrs, int defStyle) 
    {
        super(context, attrs, defStyle);
    }
    
    public VerticalSeekBar(Context context, AttributeSet attrs) 
    {
        super(context, attrs);
    }
    
    protected void onSizeChanged(int w, int h, int oldw, int oldh) 
    {
        super.onSizeChanged(h, w, oldh, oldw);
    }    
    
    @Override
    protected synchronized void onMeasure(
            int widthMeasureSpec, int heightMeasureSpec) 
    {
        super.onMeasure(heightMeasureSpec, widthMeasureSpec);
        setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());
    }

    protected void onDraw(Canvas c) 
    {
        /*シークバーを90度回転して描画する。*/
        c.rotate(90);
        c.translate(0, -getWidth());
    
        super.onDraw(c);
    }

    private OnSeekBarChangeListener onChangeListener;
    @Override
    public void setOnSeekBarChangeListener(
           OnSeekBarChangeListener onChangeListener)
    {
        this.onChangeListener = onChangeListener;
    }

    private int lastProgress = 0;
    @Override
    public boolean onTouchEvent(MotionEvent event) 
    {
        if (!isEnabled()) {
            return false;
        }

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            onChangeListener.onStartTrackingTouch(this);
            setPressed(true);
            setSelected(true);
            break;
        case MotionEvent.ACTION_MOVE:
            super.onTouchEvent(event);
            int progress = (int) (getMax() * event.getY() / getHeight());
                //シークバーの値を設定する。
        
            if(progress < 0) {progress = 0;}
            if(progress > getMax()) {progress = getMax();}
        
            setProgress(progress);

            if(progress != lastProgress) {
                lastProgress = progress;
                onChangeListener.onProgressChanged(this, progress, true);
            }

            onSizeChanged(getWidth(), getHeight() , 0, 0);
            onChangeListener.onProgressChanged(
                    this, (int) (getMax() * event.getY() / getHeight()), true);
                //シークバーを動かす
            setPressed(true);
            setSelected(true);
            break;
        case MotionEvent.ACTION_UP:
            onChangeListener.onStopTrackingTouch(this);
            setPressed(false);
            setSelected(false);
            break;
        case MotionEvent.ACTION_CANCEL:
            super.onTouchEvent(event);
            setPressed(false);
            setSelected(false);
            break;
        }
        return true;
    }
    
    public synchronized void setProgressAndThumb(int progress) 
    {
        setProgress(getMax() - (getMax()- progress));
        onSizeChanged(getWidth(), getHeight() , 0, 0);
    }
    
    public synchronized void setMaximum(int maximum) 
    {
        setMax(maximum);
    }

    public synchronized int getMaximum() 
    {
        return getMax();
    }
}

上のシークバークラスを例えばアプリ名がMyAppならそのパッケージのcom.MyApp.myappパッケージの中に作成します。

このコードの中でシークバーの向きを調節しているのが次のコードです。

    protected void onDraw(Canvas c) 
    {
        c.rotate(90);
        c.translate(0, -getWidth());
    
        super.onDraw(c);
    }

rotateメソッドにはビューの左下(?)の座標の回転角を渡して座標ごと回転させ、translateメソッドでその座標をxまたはy軸方向に座標ごと移動させています。

この値を調節すれば好きな方向にシークバーを回転させることができます。

レイアウトにシークバーを設置する

レイアウトファイルで次のように垂直シークバーを設置します。

<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" >
    
    <com.MyTimers.mytimers.VerticalSeekBar
        android:id="@+id/vertical_seek_bar" 
        android:layout_width="wrap_content" 
        android:layout_height="match_parent" />

</LinearLayout>

シークバーはパッケージ名で書かないとエラーになります。

コード内からシークバーのイベントを受けとる

カスタムしたシークバーにOnSeekBarChangeListenerを実装します。

これを書かないとNullPointerExceptionが出るようです。

リスナーの実装は例えば次のようなコードになります。

public class MainActivity extends Activity{
    
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        VerticalSeekBar verticalSeekBar 
        = (VerticalSeekBar)findViewById(R.id.vertical_seek_bar);
            //垂直シークバーをレイアウトから取得
        verticalSeekBar.setMax(100);
        verticalSeekBar.setOnSeekBarChangeListener(
        new SeekBar.OnSeekBarChangeListener() 
        {
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) 
            {
                /*シークバーが離されたときの処理*/
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) 
            {
                /*シークバーがクリックされたときの処理*/
            }
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress,
                    boolean fromUser) 
            {
                /*シークバーが動いているときの処理*/
                Log.i("MainActivity : ", "値 = " + progress);
            }
        });
    
    }

}

出来上がったシークバーは次のように上から下に進むにつれて値がでかくなるような形になります。