SeekBar 实现网络获取图片随thumb滑动,,并位于中间位置

一 demo介绍

此demo实现了seekbar 滑动效果,图片随thumb 滑动而滑动,位于seekbar中间位置:
效果图如下:

二.代码介绍:

1.xml文件:

 <SeekBar  android:id="@+id/seekbar_progress"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:focusable="true"  android:maxHeight="7dp"  android:minHeight="7dp"  android:paddingEnd="15dp"  android:paddingStart="15dp"  android:progressDrawable="@drawable/progress_test          android:thumb="@drawable/progress_theme_bar"  android:thumbOffset="15dip" />

seekbar默认两边会有间隙，因为我想覆盖住两边的小红点,所以设置了

android:paddingStart="15dp"android:paddingEnd="15dp"

如果你不想要两边的空隙,设置:

android:paddingStart="0dp"android:paddingEnd="0dp"

一般情况下, thumb滑块不能显示完全，一部分被隐藏掉,设置:

android:thumbOffset="0dip"  

我想设置thumb覆盖在两边红点上,则设置了:

android:thumbOffset="15dip"

2.java文件

1.Glide 加载圆形图片

        Glide.with(MainActivity.this).load(imgurl)                .diskCacheStrategy(DiskCacheStrategy.ALL)                .error(R.mipmap.ic_launcher)                .centerCrop().transform(new GlideRoundTransformUtil(MainActivity.this)).into(ivHead);

2.seekbar 监听,设置滑动区间

seekbarProgress.setOnSeekBarChangeListener(new OnSeekBarChangeListenermy());        seekbarProgress.setMax(100);        seekbarProgress.setProgress(0);

3.测量seekbar 控件的宽度 获取每个百分比的宽度

 ViewTreeObserver vto2 = seekbarProgress.getViewTreeObserver();        vto2.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {            @Override            public void onGlobalLayout() {                seekbarProgress.getViewTreeObserver().removeGlobalOnLayoutListener(this);                seekbarProgress.getWidth();                mseekWidth = seekbarProgress.getWidth();                // 获取thumb drawable 占用的空间                Drawable drawable = getResources().getDrawable(R.drawable.progress_theme_bar);                mDrawableWidth = drawable.getIntrinsicWidth();                mDrawableHeight = drawable.getIntrinsicHeight();                //每个百分比所占的宽度                mMoveStep = ((mseekWidth - mDrawableWidth) / (double) 100);                //头像初始位置                ivHead.layout(0, 0, mDrawableWidth, mDrawableHeight);            }        });

4.监听滑动,设置图片位置:

 int layoutLeft = (int) (progress * mMoveStep);            //随着滑动 图片位置改变            ivHead.layout(layoutLeft, 0, layoutLeft + mDrawableWidth, mDrawableHeight);

下面附下dem地址:
http://download.csdn.net/download/shanshan_1117/10164478