Question

我想创建自定义view以显示5种不同的颜色作为附加图像：

有谁知道如何实现上述view？

感谢。

Answer 1

您可以通过为其设置自定义Seekbar来使用自定义Drawable来执行此操作。请参阅this示例。

ProgressItem.java

public class ProgressItem {

   public int color;
   public float progressItemPercentage;
}

CustomSeekBar.java

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);
}

activity_main.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" />

MainActivity.java

private CustomSeekBar seekbar;
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.customSeekBar));
initDataToSeekbar();
}

private void initDataToSeekbar() {
progressItemList = new ArrayList<ProgressItem>();
// red span
mProgressItem = new ProgressItem();
mProgressItem.progressItemPercentage = ((redSpan / totalSpan) * 100);
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();
}

Answer 2

我认为您可以通过创建 CustomProgressBar ：

来实现

public class CustomProgressBar extends SeekBar {
    private ArrayList mProgressItemsList;

    public CustomProgressBar(Context context) {
        super(context);
        mProgressItemsList = new ArrayList();
    }

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

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

    public void initData(ArrayList progressItemsList) {
        this.mProgressItemsList = progressItemsList;
    }

    @Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    protected void onDraw(Canvas canvas) {
        if (mProgressItemsList.size() > 0) {
            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 to progress item to the width
                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);
        }
    }

    private class ProgressItem {
        public int color;
        public float progressItemPercentage;
    }
}

如何使用：

progressItemList = new ArrayList(); 

// red span 
mProgressItem = new ProgressItem(); 
mProgressItem.progressItemPercentage = 20; 
mProgressItem.color = R.color.red; 
progressItemList.add(mProgressItem); 

// blue span 
mProgressItem = new ProgressItem(); 
mProgressItem.progressItemPercentage = 25; 
mProgressItem.color = R.color.blue; 
progressItemList.add(mProgressItem);

输出：

来自：android-custom-horizontal-progress-bar

希望它会对你有所帮助。谢谢。

创建5种不同颜色的自定义栏

2 个答案:

如何使用：

输出：