Programmatically create Parallelogram Drawable in

问题:

I am trying to recreate the toggle slide that is seen in Ice Cream Sandwich, but unavailable for Android versions below ICS. I am at the point where I am comfortable with my slider, however I am currently using two parallelogram images (one for its off state, one for its on state). I would like to ideally create the drawable at runtime, and simply change the color of it based on the state. This would really help for customization in the end.

I am quite new to drawables in general, and would like to create this one programmatically, since in our framework we do not use xml.

The reason for creating this, is that parallelogram is one single piece, making scaling much more manageable, and customizable.

Any help would be greatly appreciated, and please let me know if you need any more info!

This is what androids toggle looks like, I would like to model mine after theirs:

If you need any other details please let me know, I hope I explained what I am after in a meaningful way.

Thanks!

回答1:

So I was able to answer this myself...I used paths to create the drawables and then stitched them together to create the parallelogram.

public Drawable createThumbDrawable(boolean checked){
    Path path = new Path();
    path.moveTo(0, 0);
    path.lineTo(1, 0);
    path.lineTo(1, 1);
    path.lineTo(0, 1);
    path.close();

    PathShape shape = new PathShape(path, 1, 1);
    ShapeDrawable drawable = new ShapeDrawable(shape);
    if (checked){
        drawable.getPaint().setColor(Color.CYAN);
    }
    else
    {
        drawable.getPaint().setColor(Color.BLACK);
    }
    mThumbLeftDrawable = createLeftThumbDrawable(checked);
    mThumbRightDrawable = createRightThumbDrawable(checked);
    return drawable;
}

public Drawable createLeftThumbDrawable(boolean checked){
    Path path = new Path();
    path.moveTo(0, 25);
    path.lineTo(25, 0);
    path.lineTo(25, 25);
    path.close();

    PathShape shape = new PathShape(path, 25, 25);
    ShapeDrawable drawable = new ShapeDrawable(shape);
    if (checked){
        drawable.getPaint().setColor(Color.CYAN);
    }
    else
    {
        drawable.getPaint().setColor(Color.BLACK);
    }
    return drawable;
}

public Drawable createRightThumbDrawable(boolean checked){
    Path path = new Path();
    path.moveTo(0,0);
    path.lineTo(25, 0);
    path.lineTo(0, 25);
    path.close();

    PathShape shape = new PathShape(path, 25, 25);
    ShapeDrawable drawable = new ShapeDrawable(shape);
    if (checked){
        drawable.getPaint().setColor(Color.CYAN);
    }
    else
    {
        drawable.getPaint().setColor(Color.BLACK);
    }
    return drawable;

}

public void setChecked(boolean checked) {
    //Log.d(TAG, "setChecked("+checked+")");
    boolean lc = checked;
    if (!mTextOnThumb) {
        lc = !checked;
    }

    if (checked){
        mThumbDrawable = createThumbDrawable(checked);//this.getContext().getResources().getDrawable(R.drawable.slide_off);
    }
    else {
        mThumbDrawable = createThumbDrawable(checked);//this.getContext().getResources().getDrawable(R.drawable.slide); 
    }

    super.setChecked(checked);
    mThumbPosition = lc ? getThumbScrollRange() : 0;
    invalidate();
}