Material Slider 試用

いつの間にやら、Material コンポーネントに Slider が追加されていた。以前は、Material デザインの公式サイトにコンセプトとしてのみ掲げられていて、実装が存在しておらず、結局 GitHub で適当なサードパーティライブラリーを探してきて利用するしかなかったが、今や Google 純正の Slider があるのなら、これを使うに越したことはないと思う。早速、使い勝手を見るために、10 分そこらでサンプルを作って試してみた。

サンプルアプリ

build.gradle (:app) には依存関係として implementation 'com.google.android.material:material:1.2.1' を記述している。

値の実体としては 0 ~ 1.0f で受け取っており、TextView にはその値をそのまま反映している。吹き出しに表示されるラベルは値をそのまま使用せず、LabelFormatter で値を変換して 0 ~ 100 のインデックスとして表示している。

MainActivity.Java

package com.scaredeer.materialslider;

import android.os.Bundle;
import android.widget.Button;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

import com.google.android.material.slider.Slider;

public class MainActivity extends AppCompatActivity {
    private TextView textView;
    private static final int MAX_INDEX = 100;

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

        textView = findViewById(R.id.textView);

        Slider slider = findViewById(R.id.slider);
        slider.addOnChangeListener((slider1, value, fromUser) -> textView.setText(String.format("%.2f", value)));
        slider.setLabelFormatter(value -> String.valueOf(Math.round(MAX_INDEX * value)));

        Button buttonCenter = findViewById(R.id.buttonCenter);
        buttonCenter.setOnClickListener(view -> slider.setValue(0.5f));
        Button buttonLeft = findViewById(R.id.buttonLeft);
        buttonLeft.setOnClickListener(view -> slider.setValue(Math.max(0, slider.getValue() - 0.1f)));
        Button buttonRight = findViewById(R.id.buttonRight);
        buttonRight.setOnClickListener(view -> slider.setValue(Math.min(slider.getValue() + 0.1f, 1.0f)));
    }
}

main_activity.xml:

スライダーからの入力（値の変化）を OnChangeListener で受け取るだけでなく、スライダーに対して setValue してプログラマブルにスライダーを動かすこともできることがわかる。

---

参考

• 公式リファレンス
• 公式ガイド
• Sliders — Material Component For Android by Velmurugan Murugesan
• Material Slider by Mark Allison