如何制作 SeekBar 段，每个段显示不同的颜色？

Question

我有一个项目，其中搜索栏将分为三个部分（并不总是相等）。根据滑块的进度，每个段会显示不同的颜色。

例如，假设 seekbar 的最大值是 100 所以...

• 第一次以红色显示时进度为 0-10。
• 进度为 10-80 时，第一段显示为红色，第二段 段显示为绿色。
• 80-100 的进度第一次显示为红色，第二次显示 段显示为绿色，第三段显示为黄色。

有什么办法可以做到吗？

效果图如下：

Answer 1

使用此链接...

https://azzits.wordpress.com/2013/11/17/customseekbar/

完整示例代码 https://github.com/azzits/CustomSeekbar

int progressBarWidth = getWidth();
int progressBarHeight = getHeight();
int thumboffset = getThumbOffset();
int lastProgressX = 0;
int progressItemWidth, progressItemRight;
for (int i = 0; i < mProgressItemsList.size(); i++) {
    ProgressItem progressItem = mProgressItemsList.get(i);
    Paint progressPaint = new Paint();
    progressPaint.setColor(getResources().getColor(progressItem.color));

    progressItemWidth = (int) (progressItem.progressItemPercentage
            * progressBarWidth / 100);

    progressItemRight = lastProgressX + progressItemWidth;

    // for last item give right of the progress item to width of the
    // progress bar
    if (i == mProgressItemsList.size() - 1
            && progressItemRight != progressBarWidth) {
        progressItemRight = progressBarWidth;
    }




    Rect progressRect = new Rect();
    progressRect.set(lastProgressX, thumboffset / 2, progressItemRight,
            progressBarHeight - thumboffset / 2);
    canvas.drawRect(progressRect, progressPaint);
    lastProgressX = progressItemRight;
}
super.onDraw(canvas);
 }

MainActivity.java

public class MainActivity extends Activity implements OnClickListener {

private Button btnSeekTo;
private CustomSeekBar seekbar;
private EditText txtSeekProgress;
private ToggleButton btnToogleSeek;

private float totalSpan = 1500;
private float redSpan = 200;
private float blueSpan = 300;
private float greenSpan = 400;
private float yellowSpan = 150;
private float darkGreySpan;

private ArrayList<ProgressItem> progressItemList;
private ProgressItem mProgressItem;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    seekbar = ((CustomSeekBar) findViewById(R.id.seekBar0));
    btnSeekTo = ((Button) findViewById(R.id.btnSeekTo));
    btnToogleSeek = (ToggleButton) findViewById(R.id.btnToogleSeek);
    txtSeekProgress = (EditText) findViewById(R.id.txtSeekProgress);
    initDataToSeekbar();
    btnSeekTo.setOnClickListener(this);
    btnToogleSeek.setOnClickListener(this);
}

private void initDataToSeekbar() {
    progressItemList = new ArrayList<ProgressItem>();
    // red span
    mProgressItem = new ProgressItem();
    mProgressItem.progressItemPercentage = ((redSpan / totalSpan) * 100);
    Log.i("Mainactivity", mProgressItem.progressItemPercentage + "");
    mProgressItem.color = R.color.red;
    progressItemList.add(mProgressItem);
    // blue span
    mProgressItem = new ProgressItem();
    mProgressItem.progressItemPercentage = (blueSpan / totalSpan) * 100;
    mProgressItem.color = R.color.blue;
    progressItemList.add(mProgressItem);
    // green span
    mProgressItem = new ProgressItem();
    mProgressItem.progressItemPercentage = (greenSpan / totalSpan) * 100;
    mProgressItem.color = R.color.green;
    progressItemList.add(mProgressItem);
    // yellow span
    mProgressItem = new ProgressItem();
    mProgressItem.progressItemPercentage = (yellowSpan / totalSpan) * 100;
    mProgressItem.color = R.color.yellow;
    progressItemList.add(mProgressItem);
    // greyspan
    mProgressItem = new ProgressItem();
    mProgressItem.progressItemPercentage = (darkGreySpan / totalSpan) * 100;
    mProgressItem.color = R.color.grey;
    progressItemList.add(mProgressItem);

    seekbar.initData(progressItemList);
    seekbar.invalidate();
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

@Override
public void onClick(View v) {
    // TODO Auto-generated method stub
    if (v.getId() == R.id.btnSeekTo) {
        String seekProgress = txtSeekProgress.getText().toString().trim();
        if (seekProgress.length() > 0) {
            seekbar.setProgress(Integer.valueOf(seekProgress));
        }
    } else {
        seekbar.setEnabled(btnToogleSeek.isChecked());
    }
 }

Xml

<yourpackagename.CustomSeekBar
    android:id="@+id/customSeekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="100"
    android:progress="0"
    android:progressDrawable="@android:color/transparent"
    android:thumb="@drawable/seek_thumb_normal"
    android:thumbOffset="12dp" />

Answer 2

做这样的事

public void setProgressBarColor(ProgressBar progressBar, int newColor){ 
    LayerDrawable ld = (LayerDrawable) progressBar.getProgressDrawable();
    ClipDrawable d1 = (ClipDrawable) ld.findDrawableByLayerId(R.id.progressshape);
    d1.setColorFilter(newColor, PorterDuff.Mode.SRC_IN);

}

希望对你有用

Answer 3

seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        setProgressBarColor(seekBar,Your color Code );
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {

    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {

    }
});