源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Android自定义SeekBar滑动显示数字

  • 时间:2021-11-04 18:14 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Android自定义SeekBar滑动显示数字
先来上个效果图: [img]http://files.jb51.net/file_images/article/201609/2016922110223542.gif?20168221132[/img] 当滑动时:数值显示,滑动停止时显示数字,使用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);
  }
 }

废话也不多说,原理很简单。 工程地址: [url=https://github.com/xiaoli1993/SeekBarIndicated/tree/47ffcc890fb9c7000bb20d9b248620564c2c8122]https://github.com/xiaoli1993/SeekBarIndicated/tree/47ffcc890fb9c7000bb20d9b248620564c2c8122[/url] 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部