如何制作SeekBar段,并且每个段显示不同的颜色?
How to make SeekBar segments, and each segment shows different colors?
我有一个项目,其中搜索栏被分成三段(不总是相等的)。根据滑块的进度,每一段会显示不同的颜色。
例如,假设 seekbar 的最大值为 100,那么...
- 当第一次显示为红色时,进度为 0-10。
- 当第一段显示为红色时,进度为 10-80,第二段显示为红色
段显示绿色。
- 当第一个显示为红色时,进度为 80-100,第二个
段显示绿色,第三段显示黄色。
有什么办法可以实现吗?
效果图如下:
做这样的事情
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);
}
希望对你有用
使用这个Link...
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" />
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) {
}
});
我有一个项目,其中搜索栏被分成三段(不总是相等的)。根据滑块的进度,每一段会显示不同的颜色。
例如,假设 seekbar 的最大值为 100,那么...
- 当第一次显示为红色时,进度为 0-10。
- 当第一段显示为红色时,进度为 10-80,第二段显示为红色 段显示绿色。
- 当第一个显示为红色时,进度为 80-100,第二个 段显示绿色,第三段显示黄色。
有什么办法可以实现吗?
效果图如下:
做这样的事情
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);
}
希望对你有用
使用这个Link...
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" />
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) {
}
});