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

发布了137 篇原创文章 · 获赞 88 · 访问量 35万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览