Android搜索栏显示搜索栏沿着的进度值

ki0zmccv  于 2022-11-20  发布在  Android
关注(0)|答案(7)|浏览(110)

我有一个listviewseekbar,每个seekbar代表100%的产品值。通过移动seekbar可以改变%值,我想在用户拖动seekbar时沿着搜索栏显示值的变化。我 * 不 * 希望在值更新的地方添加另一个文本框。
我更关注的是在seekbar指针顶部显示一个小视图的选项,该指针出现onStartTracking,并消失onStopTracking事件。
有没有办法做到这一点?

wz3gfoph

wz3gfoph1#

这里有一个简单的方法,

  • 在XML中添加textView
  • 随着seekBar的移动改变其位置
  • 这将使用setX()对其进行定位
  • 如果需要,也可以将其Y位置给予setY()
  • 如果你想隐藏,写一些逻辑,并使textView可见性消失时,你需要。

例如:

seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
                @Override
                public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

                    int val = (progress * (seekBar.getWidth() - 2 * seekBar.getThumbOffset())) / seekBar.getMax();
                    textView.setText("" + progress);
                    textView.setX(seekBar.getX() + val + seekBar.getThumbOffset() / 2);
                    //textView.setY(100); just added a value set this properly using screen with height aspect ratio , if you do not set it by default it will be there below seek bar 

                }

也可以将Paint与不带任何TextView的自定义SeekBar类一起使用
创建类

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.SeekBar;

public class MySeekBar extends SeekBar {
    public MySeekBar (Context context) {
        super(context);
    }

    public MySeekBar (Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public MySeekBar (Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas c) {
        super.onDraw(c);
        int thumb_x = (int) (( (double)this.getProgress()/this.getMax() ) * (double)this.getWidth());
        float middle = (float) (this.getHeight());

        Paint paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setTextSize(20);
        c.drawText(""+this.getProgress(), thumb_x, middle, paint);
    }
}

在XML中设置/创建SeekBar

<yourPackageName.MySeekBar
            android:id="@+id/my_seek_bar"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginTop="26dp"
            android:max="10"/>

现在从您的活动

seekBar = (MySeekBar) findViewById(R.id.my_seek_bar);
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
    }
});
f1tvaqid

f1tvaqid2#

在xml文件中添加一个文本视图,可以使用如下的线性布局:

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <SeekBar
            android:id="@+id/seekBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:max="1000" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

    </LinearLayout>

在java文件中,在seekbar onProgressChanged方法中更改文本视图文本:

SeekBar sk = (SeekBar) findViewById(R.id.seekBar);
    sk.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {

        @Override
        public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
            TextView t=(TextView)findViewById(R.id.textView4);
            t.setText(String.valueOf(i));
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {

        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {

        }
    });
dgsult0t

dgsult0t3#

若要使文本视图真正与缩略图位置X的中心对齐

@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean b) {
    progressTextView.setText(String.valueOf(progress));

    int width = seekBar.getWidth() - seekBar.getPaddingLeft() - seekBar.getPaddingRight();
    int thumbPos = seekBar.getPaddingLeft() + width * seekBar.getProgress() / seekBar.getMax();

    progressTextView.measure(0, 0);
    int txtW = progressTextView.getMeasuredWidth();
    int delta = txtW / 2;
    progressTextView.setX(seekBar.getX() + thumbPos - delta);
}
mv1qrgav

mv1qrgav4#

试试这个离散Seekbar库我找到here
最简单的方法是使用Materila Slider,它可以为您添加值标签,而无需编写textView来跟踪。

<com.google.android.material.slider.Slider
        android:id="@+id/continuous_slider"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:valueFrom="0"
       android:stepSize="1"
        app:labelBehavior="withinBounds"
        android:valueTo="100"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"/>
llew8vvj

llew8vvj5#

看看这个library。你可以使用"范围搜索栏与单拇指到真“。

fkvaft9z

fkvaft9z6#

对于大多数情况,可接受的答案可能已经足够好了。但是,如果您希望文本精确地位于搜索条滑块的中间,则必须进行更多的计算。这是因为文本的宽度不同。例如,您希望显示从0到150的数字。宽度188将不同于111。因此,显示的文本将始终向某一侧倾斜。
解决这个问题的方法是测量文本的宽度,从seekbar缩略图的宽度中减去它,除以2,然后将它加到接受答案中给出的结果上。现在你不会关心数字范围有多大了。下面是代码:

override fun onProgressChanged(seekBar: SeekBar, progress: Int, fromUser: Boolean) {
                    val value = progress * (seekBar.width - 2 * seekBar.thumbOffset) / seekBar.max
                    label.text = progress.toString()
                    label.measure(0, 0)
                    val textWidth =  label.measuredWidth
                    val firstRemainder = seekThumbWidth - textWidth
                    val result = firstRemainder / 2
                    label.x = (seekBar.x + value + result)
                }
yjghlzjz

yjghlzjz7#

使用下面的代码,我能够实现实时跟踪的文本视图与seekbar。我不得不根据需要修改

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:visibility="visible">

            <TextView
                android:id="@+id/tvProgress"
                android:layout_width="@dimen/_50sdp"
                android:layout_height="@dimen/_30sdp"
                 android:background="@drawable/bg_box_border_unselected"
                android:backgroundTint="@color/black"
                android:fontFamily="@font/open_sans_regular"
                android:gravity="center"
                android:paddingStart="@dimen/_3sdp"
                android:paddingEnd="@dimen/_3sdp"
                android:text="CAD 20"
                android:textColor="@color/white" />

            <androidx.appcompat.widget.AppCompatSeekBar
                android:id="@+id/seekBar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/tvProgress"
                 android:max="28"
                android:maxHeight="@dimen/_5sdp"
                android:min="20"
                android:minHeight="@dimen/_5sdp"
                android:padding="@dimen/_10sdp"
                android:progress="20"
                android:progressDrawable="@drawable/custom_seekbar"
                android:thumb="@drawable/ic_thumb_seekbar" />
        </RelativeLayout>


 seekBar?.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
        override fun onProgressChanged(seekBar: SeekBar, progress: Int,
                                       fromUser: Boolean) {

            tvProgress.text = "CAD "+ progress.toString()
            val bounds: Rect = seekBar.thumb.bounds
            tvProgress.x = (seekBar.left + bounds.left + seekBar.thumbOffset).toFloat()

         }

        override fun onStartTrackingTouch(seekBar: SeekBar) {
         }

        override fun onStopTrackingTouch(seekBar: SeekBar) {
            seekBarValue = seekBar.progress
         }
    })

相关问题