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:

1.xml file:

 <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"

2.java file

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

Tags: Android xml Java

Posted on Tue, 05 May 2020 07:47:45 -0400 by hkothari