easyclick seekBar进度条创建和设置颜色

因为easyclick 的layout.xsd里面并没有seekBar

这个进度条,用于音乐或视频播放器,或下载更新进度等等

方法有很多种,

方式一,自己在android studio生成dex,然后easyclick loadDex后使用

方式二,找一些成熟的进度条开源控件

方式三,自己创建,这里为例

1.找个容器给放seekbar

<RelativeLayout
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xsi:noNamespaceSchemaLocation="layout.xsd"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="fill"
        android:clickable="false"
        android:background="#33000000">
        <LinearLayout
                        android:tag="seekBarBox"
                        android:layout_width="match_parent"
                        android:layout_height="fill_parent"
                        android:gravity="center"
                        android:orientation="horizontal">
                </LinearLayout>
</RelativeLayout>

main.js或ui.js

importPackage(android.widget);
importPackage(android.view);

var context=ui.getContext();
var layoutParams = new WindowManager.LayoutParams();
layoutParams.height = WindowManager.LayoutParams.FILL_PARENT;
layoutParams.width = WindowManager.LayoutParams.FILL_PARENT;
layoutParams.x = 0;
layoutParams.y = 0;
layoutParams.verticalWeight = 1.0;
layoutParams.horizontalWeight = 1.0;
layoutParams.verticalMargin = 0.0;
layoutParams.horizontalMargin = 0.0;
var seekBar = new SeekBar(context);
//seekBar.setLayoutParams(SeekBar.LayoutParams(-1, -2));
seekBar.setLayoutParams(layoutParams); //样式
seekBar.setMax(1); //最大进度,比如音乐时长,下载完整字节量
seekBar.setProgress(0); //当前进度

//一些样式定义代码见下文

seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
	onProgressChanged: function (seekb, progress, fromUser) {
		logd("Progress: "+progress);
		if(fromUser){
			//控制播放音乐进度
		}
	},
	onStartTrackingTouch: function (seekb) {
		logd("SeekTouch Started!!");
	},
	onStopTrackingTouch: function(seekb) {
		logd('手动切换进度');
		let progress = seekBar.getProgress();
		//控制播放音乐进度
	}
});

var seekBarBox = ui.findViewByTag('seekBarBox');
if(seekBarBox!=null){
	seekBarBox.addView(seekBar);
}

改色方案很多种,最简单是类似这样:

importClass(android.content.res.ColorStateList) //seekbar改色

let sl = ColorStateList.valueOf(Color.YELLOW); //ColorStateList
seekBar.setThumbTintList(sl); //滑块
seekBar.setProgressTintList(sl); //进度条

比较容易理解,且好用的方法如下:

let progressDrawable = seekBar.getProgressDrawable(); //LayerDrawable
// 进度线条 *progress* 进度色彩
let processDrawable = progressDrawable.findDrawableByLayerId(android.R.id.progress); //Drawable
// 进度线条 *background* 背景色彩
let backgroundDrawable = progressDrawable.findDrawableByLayerId(android.R.id.background); //Drawable
// 进度线条 *secondaryProgress* 次进度(视频缓冲)色彩
let secondaryProgressDrawable = progressDrawable.findDrawableByLayerId(android.R.id.secondaryProgress); //Drawable
processDrawable.setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
// 进度线条所有颜色
seekBar.getProgressDrawable().setColorFilter(Color.BLUE, PorterDuff.Mode.SRC_IN);
// 圆点滑块颜色
seekBar.getThumb().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);

还有一种高能的设置,理解原理

let normalColor = Color.parseColor("#FF6666"); //或者主题默认 context.getColor(context, android.R.color.normal_color);
let selectedColor = Color.parseColor("#FF6666");
//drawable
let normalDrawable = new ColorDrawable(normalColor);
let selectedDrawable = new ColorDrawable(selectedColor);
let clipDrawable = new ClipDrawable(selectedDrawable, Gravity.LEFT, ClipDrawable.HORIZONTAL);
let layers = [normalDrawable, clipDrawable, clipDrawable];
let seekbarDrawable = new LayerDrawable(layers);
seekBar.setProgressDrawable(seekbarDrawable);

参考自

https://stackoverflow.com/questions/16163215/android-styling-seek-bar

最后一个drawable的应用,使用canva画图,暂时没测试

https://blog.csdn.net/weixin_29038537/article/details/117493924

xml绘制原理

http://news.sohu.com/a/537777395_121124375

代码绘制原理

https://blog.csdn.net/weixin_30655569/article/details/98935438

https://blog.csdn.net/Cupster/article/details/111933730

https://blog.csdn.net/guibao513/article/details/105842193

https://www.zybuluo.com/act262/note/767641

drawable转bitmap

https://blog.csdn.net/qq_24641847/article/details/77897886

参考

https://blog.csdn.net/sywcache/article/details/107038301

public class LoadingTextDrawable extends Drawable implements DrawBufferIndicatorHelper.Callback {

    private final DrawBufferIndicatorHelper drawHelper;
    private Paint paint;
    private final RectF rectF;
    private Context context;
    private int dp2;

    public LoadingTextDrawable(Context context) {
        this.context = context;
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setTextSize(DisplayUtil.dip2px(context, 12));
        paint.setColor(Color.BLACK);

        rectF = new RectF();

        drawHelper = new DrawBufferIndicatorHelper(this);
        drawHelper.show(false);
    }

    public void loading(boolean loading) {
        drawHelper.show(loading);
    }

    /**
     * Drawable border changes
     *
     * @param bounds
     */
    @Override
    protected void onBoundsChange(Rect bounds) {
        super.onBoundsChange(bounds);
        dp2 = DisplayUtil.dip2px(context, 2);
        int dp50 = DisplayUtil.dip2px(context, 50);
        int dp30 = DisplayUtil.dip2px(context, 12);
        rectF.left = bounds.left + dp50;
        rectF.right = bounds.right - dp50;
        rectF.top = bounds.top + dp30;
        rectF.bottom = bounds.bottom - dp30;

        drawHelper.setSize((int) (Math.abs(rectF.height()) / 2f));

        invalidate();
    }

    /**
           * Draw
     *
     * @param canvas
     */
    @Override
    public void draw(@NonNull Canvas canvas) {
        Log.d("MyDrawable", "drawable draw...");

        paint.setColor(Color.WHITE);
        float width = Math.abs(rectF.width());
        canvas.drawRoundRect(rectF, width / 4, width / 4, paint);


        //Draw time text
        String string = "00:10/06:22";
        paint.setColor(Color.BLACK);
        Paint.FontMetrics fontMetrics = paint.getFontMetrics();
        float bottomLineY = rectF.centerY() - (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.top;
        float x = (rectF.width() - paint.measureText(string)) / 2 + rectF.left + drawHelper.getSize();
        canvas.drawText(string, x, bottomLineY, paint);

        //Draw loading
        canvas.save();
        //How to calculate loading can not be centered, add 2dp to center visually
        canvas.translate(rectF.right + drawHelper.getSize(), rectF.centerY() + rectF.height() / 2 + drawHelper.getSize() / 2 + dp2);
        drawHelper.draw(canvas);
        canvas.restore();
    }

    /**
           * Set brush transparency
     *
     * @param alpha
     */
    @Override
    public void setAlpha(int alpha) {
        paint.setAlpha(alpha);
        invalidateSelf();
    }

    /**
           * Set brush color filter
     *
     * @param colorFilter
     */
    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {
        paint.setColorFilter(colorFilter);
        invalidateSelf();
    }

    /**
           * Set the drawable transparency type
     */
    /**
     * @return
     */
    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }

    @Override
    public void invalidate() {
        if (getCallback() == null) {
            Log.d("MyDrawable", "invalidateSelf null");
        } else {
            Log.d("MyDrawable", "invalidateSelf");
        }
        //Refresh drawable
        invalidateSelf();
    }
}
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注