自定義SeekBar滑動顯示數字

先來上個效果圖：

2016092001.gif

當滑動時：數值顯示，滑動停止時顯示數字。

使用FrameLayout結合SeekBar。

首先我們看看。Layout：

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <RelativeLayout
        android:id="@+id/wrapper_seekbar_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/img_seekbar_indicator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true" />

        <TextView
            android:id="@+id/txt_seekbar_indicated_progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="#333333"
            android:textSize="@dimen/space_12"
            tools:text="100" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/wrapper_seekbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <SeekBar
            android:id="@+id/seekbar"
            style="@style/Widget.SeekBar.Normal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </RelativeLayout>

</merge>

需要自定義可再上面修改圖片問題顏色等，或者自己封裝起來。

初始化函數。

private void init(Context context, AttributeSet attrs, int defStyle) {
        View view = LayoutInflater.from(context).inflate(
                R.layout.view_seekbar_indicated, this);
        bindViews(view);

        if (attrs != null)
            setAttributes(context, attrs, defStyle);
        mSeekBar.setOnSeekBarChangeListener(this);
        mTextViewProgress.setText(String.valueOf(mSeekBar.getProgress()));

        getViewTreeObserver().addOnGlobalLayoutListener(
                new ViewTreeObserver.OnGlobalLayoutListener() {
                    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
                    @Override
                    public void onGlobalLayout() {
                        mMeasuredWidth = mSeekBar.getWidth()
                                - mSeekBar.getPaddingLeft()
                                - mSeekBar.getPaddingRight();
                        mSeekBar.setPadding(
                                mSeekBar.getPaddingLeft(),
                                mSeekBar.getPaddingTop()
                                        + mWrapperIndicator.getHeight(),
                                mSeekBar.getPaddingRight(),
                                mSeekBar.getPaddingBottom());
                        setIndicator();
                        getViewTreeObserver()
                                .removeOnGlobalLayoutListener(this);
                    }
                });
        // mWrapperIndicator.setVisibility(View.GONE);
    }

主要是根據是否有改變，和觸摸進行判斷字和圖片的顯示。

@Override
    public void onProgressChanged(SeekBar seekBar, int progress,
                                  boolean fromUser) {
        setIndicator();
        if (mOnSeekBarChangeListener != null)
            mOnSeekBarChangeListener.onProgressChanged(seekBar, progress,
                    fromUser);
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        if (mOnSeekBarChangeListener != null) {
            mOnSeekBarChangeListener.onStartTrackingTouch(seekBar);
            mWrapperIndicator.setVisibility(View.VISIBLE);
        }
    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        if (mOnSeekBarChangeListener != null) {
            mOnSeekBarChangeListener.onStopTrackingTouch(seekBar);
            mWrapperIndicator.setVisibility(View.GONE);
        }
    }

廢話也不多說，原理很簡單。

來自：http://www.jianshu.com/p/3a67789e85bf

文章來源：