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
コメント
コメントを投稿