SeekBar realizes that the network acquired pictures slide with thumb and are in the middle position

A demo introduction

This demo realizes the seekbar sliding effect. The picture slides with thumb, which is located in the middle of seekbar:
The renderings are as follows:

2, Code introduction:

<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 has gaps on both sides by default, because I want to cover the small red dots on both sides, so I set

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

If you don't want gaps on both sides, set:

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

In general, the thumb slider cannot be displayed completely, and some parts are hidden. Set:

android:thumbOffset="0dip"

If I want to set thumb overlay on the red dots on both sides, I set:

android:thumbOffset="15dip"

1.Glide loading circular picture

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

2.seekbar monitoring, set sliding range

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

3. Measure the width of seekbar control to get the width of each percentage

ViewTreeObserver vto2 = seekbarProgress.getViewTreeObserver(); vto2.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { seekbarProgress.getViewTreeObserver().removeGlobalOnLayoutListener(this); seekbarProgress.getWidth(); mseekWidth = seekbarProgress.getWidth(); // Get the space occupied by thumb drawable Drawable drawable = getResources().getDrawable(R.drawable.progress_theme_bar); mDrawableWidth = drawable.getIntrinsicWidth(); mDrawableHeight = drawable.getIntrinsicHeight(); //Width per percentage mMoveStep = ((mseekWidth - mDrawableWidth) / (double) 100); //Initial position of head image ivHead.layout(0, 0, mDrawableWidth, mDrawableHeight); } });

4. Monitor the slide and set the picture position:

int layoutLeft = (int) (progress * mMoveStep); //As the slide position changes ivHead.layout(layoutLeft, 0, layoutLeft + mDrawableWidth, mDrawableHeight);

Attached below is the dem address:
http://download.csdn.net/download/shanshan_1117/10164478

5 May 2020, 07:47 | Views: 5415