如何实现这个Android Discrete SeekBar设计?

时间:2017-05-20 05:21:03

标签: android android-layout android-seekbar

enter image description here

我使用此link作为参考实现了工具提示设计,现在我希望将搜索条的间隔设为垂直线而不是像图像上方的数字一样的点。

1 个答案:

答案 0 :(得分:1)

检查此代码可能会对您有所帮助

public class DWRulerSeekbar extends RelativeLayout implements SeekBar.OnSeekBarChangeListener {

    private int seekbarMinValue = 0;
    private int seekbarMaxValue = 50;

    private SeekBar seekBar;
    private Context context;

    private OnDWSeekBarListener listener;
    private LayoutParams lp;

    public interface OnDWSeekBarListener {
        public void onStopSeekbarValue(double value);
    }

    public DWRulerSeekbar(Context context) {
        super(context);
        this.context = context;
        init();
    }

    public DWRulerSeekbar(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        init();
    }

    public DWRulerSeekbar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        init();
    }

    public DWRulerSeekbar(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        this.context = context;
        init();
    }


    private void init() {

        getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                if (getHeight() > 0) {
                    addCompoenet();
                    getViewTreeObserver().removeOnPreDrawListener(this);
                }
                return false;
            }
        });
    }

    private void addCompoenet() {
        removeAllViews();
        LineRulerView lineRulerView = new LineRulerView(context);
        LayoutParams rulerLayoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, getHeight() / 3 * 2);
        rulerLayoutParams.setMargins(0, 5, 0, 0);
        rulerLayoutParams.addRule(CENTER_IN_PARENT);
        lineRulerView.setLayoutParams(rulerLayoutParams);
        lineRulerView.setMinMaxValue(4, 21);
        lineRulerView.setBackgroundColor(Color.TRANSPARENT);
        addView(lineRulerView);

        DisplayMetrics metrics = getResources().getDisplayMetrics();
        int densityDpi = (int)(metrics.density * 160f);
        seekBar = new SeekBar(context);

        lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 60);
        seekBar.setThumb(getResources().getDrawable(R.drawable.green_round_circlebg));


        seekBar.setProgressDrawable(getResources().getDrawable(R.drawable.seekbar));
        seekBar.setProgress(0);
        seekBar.setVisibility(View.VISIBLE);
        seekBar.setBackgroundColor(Color.TRANSPARENT);
        seekBar.setLayoutParams(lp);

        seekBar.setMax(15);
        seekBar.setOnSeekBarChangeListener(this);
        addView(seekBar);
    }

    public DWRulerSeekbar setDWRulerSeekbarListener(OnDWSeekBarListener listener) {
        this.listener = listener;
        return this;
    }

    public DWRulerSeekbar setMinMaxValue(int seekbarMinValue, int seekbarMaxValue) {
        this.seekbarMinValue = seekbarMinValue;
        this.seekbarMaxValue = seekbarMaxValue;
        addCompoenet();
        return this;
    }

    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        if (listener != null) {

            listener.onStopSeekbarValue(seekbarMinValue + progress);

        }
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {

    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {

    }
}

并且在xml中你必须添加这个

 <com.xelpmoc.zommodity.customseekbar.DWRulerSeekbar
            android:id="@+id/dwRulerSeekbar"
            android:layout_width="match_parent"
            android:layout_marginTop="10dp"
            android:layout_height="75dp">

        </com.xelpmoc.zommodity.customseekbar.DWRulerSeekbar>

要从搜索栏获取值,请在活动中添加此内容

 private void initDWSeekbar() {
        seekbar_ruler = (DWRulerSeekbar) findViewById(R.id.dwRulerSeekbar);
        seekbar_ruler
                .setMinMaxValue((int) MIN_VALUE, (int) MAX_VALUE)
                .setDWRulerSeekbarListener(new DWRulerSeekbar.OnDWSeekBarListener() {

                    @Override
                    public void onStopSeekbarValue(double value) {
                        timeslorval=value;
                    }
                });
    }

seekbar.xml

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:height="5dp" android:gravity="center"
        android:id="@android:id/background"
        android:drawable="@drawable/seek_bar_background"/>
    <item android:height="5dp"  android:gravity="center"
        android:id="@android:id/progress"
        android:drawable="@drawable/seek_bar_progress" />
</layer-list>

和green_round_circlebg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:width="20dp" android:height="20dp">
        <shape android:shape="oval" >
            <solid android:color="#2CC285"></solid>
            <stroke android:color="#000000" android:width="1dp"></stroke>
        </shape>
    </item>

</layer-list>