weex制作原生android插件,Android Weex 自定义 Component 具体实现（WEEX SDK 0.19.0）

class WeexSeekBar(instance: WXSDKInstance, parent: WXVContainer  , basic: BasicComponentData) : WXComponent(instance, parent,basic), SeekBar.OnSeekBarChangeListener {

companion object {

private const val KEY_MAX = "max"

private const val KEY_MIN = "min"

private const val KEY_PROGRESS = "progress"

private const val EVENT_ON_START_SLIDE = "startSlide"

private const val EVENT_ON_SLIDE = "slide"

private const val EVENT_ON_STOP_SLIDE = "stopSlide"

private const val TYPE_BRIGHTNESS = "normal"

private const val TYPE_COLOR = "horizontal_hux_color"

private const val TYPE_SHADE = "horizontal_linear_gradient"

}

//注册hostview  此方法必须重写

override fun initComponentHostView(context: Context): AppCompatSeekBar {

val tempView = AppCompatSeekBar(context).apply {

val pxValue = dp2px(context, 16f).toInt();

setPadding(pxValue, 0, pxValue, 0)

thumb = ContextCompat.getDrawable(context, R.drawable.button_slide)

}

tempView.setOnSeekBarChangeListener(this)

return tempView

}

override fun onProgressChanged(seekBar: SeekBar, progress: Int, fromUser: Boolean) {

//key值为vue中的响应标签如key 为slide  在vue中的标签为 @slide="funtionname"

//当fireevent 发送数据时weex会转到你标签中的对应的方法

fireEvent(EVENT_ON_SLIDE, seekBar.getSeekBarInfo())

}

override fun onStartTrackingTouch(seekBar: SeekBar) {

fireEvent(EVENT_ON_START_SLIDE, seekBar.getSeekBarInfo())

}

override fun onStopTrackingTouch(seekBar: SeekBar) {

//        Log.e("seekbar",GsonHelp.gson().toJson(seekBar.getSeekBarInfo()))

fireEvent(EVENT_ON_STOP_SLIDE, seekBar.getSeekBarInfo())

}

@WXComponentProp(name = "max")

fun max(maximum:Int){

hostView?.max = maximum

}

//注册vue中的props 属性 name 为vue中使用的标签

@WXComponentProp(name = "progress")

fun progress(progress:Int){

Log.e("wx",progress.toString())

hostView?.progress = progress

}

override fun bindData(component: WXComponent?) {

super.bindData(component)

}

// 此标注标识注册为weex端代码使用  调用方法在下方给出 下面同理

@JSMethod

fun setProgress(progress:Int){

hostView?.progress = progress

}

@JSMethod

fun setMax(max:Int){

hostView?.max = max

}

@WXComponentProp(name = "type")

fun setType(type:String){

when(type){

TYPE_BRIGHTNESS -> {

//                hostView.progressDrawable=context.resources.getDrawable(R.drawable.seekbar_bg)

}

TYPE_COLOR -> {

hostView.progressDrawable = PaintDrawable().apply {

shape = RectShape()

setCornerRadius(10f)

shaderFactory = object : ShapeDrawable.ShaderFactory(){

override fun resize(width: Int, height: Int): Shader

= LinearGradient(0f,0f,width.toFloat(),height.toFloat(),

ColorPickGradient.PICKCOLORBAR_COLORS,ColorPickGradient.PICKCOLORBAR_POSITIONS,

Shader.TileMode.REPEAT)

}

}

}

TYPE_SHADE -> {

hostView.progressDrawable = ContextCompat.getDrawable(context, R.drawable.seek_bar_bg1)

}

}

}

@JSMethod

fun setProgressDrawable(hue:Int){

//设置的颜色

val hueVal = (hue.toFloat() / 100f * 360f)

val PICKCOLORBAR_COLORS = intArrayOf(Color.HSVToColor(floatArrayOf(hueVal, 0f, 1f)),

Color.HSVToColor(floatArrayOf(hueVal, 1f, 1f)))

val shaderFactory = object : ShapeDrawable.ShaderFactory() {

override fun resize(width: Int, height: Int): Shader {

return LinearGradient(0f, 0f, width.toFloat(), height.toFloat(), PICKCOLORBAR_COLORS, floatArrayOf(0f, 1f), Shader.TileMode.REPEAT)

}

}

val paint = PaintDrawable()

paint.shape = RectShape()

paint.setCornerRadius(10f)

paint.shaderFactory = shaderFactory

hostView?.progressDrawable = paint

}

fun SeekBar.getSeekBarInfo():HashMap{

return HashMap().apply {

put(KEY_MAX, this@getSeekBarInfo.max)

put(KEY_PROGRESS, this@getSeekBarInfo.progress)

put(KEY_MIN, if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O){

this@getSeekBarInfo.min

}else{

0

})

}

}

fun HashMap.getValue(key:String, defaultValue:T):T

= this.get(key) ?: defaultValue

private fun dp2px(context: Context, size:Float):Float{

return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, size, context.getResources().getDisplayMetrics())

}

class ColorPickGradient {

companion object {

//设置的颜色

val PICKCOLORBAR_COLORS = intArrayOf(0xFFff0000.toInt(), 0xFFffff00.toInt(), 0xFF00ff00.toInt(),

0xFF00ffff.toInt(), 0xFF0000ff.toInt(),

0xFFff00ff.toInt(), 0xFFff0000.toInt())

//每个颜色的位置

val PICKCOLORBAR_POSITIONS = floatArrayOf(0f, 0.16f, 0.33f, 0.51f, 0.67f, 0.85f, 1f)

}

private var mColorArr = PICKCOLORBAR_COLORS

private var mColorPosition = PICKCOLORBAR_POSITIONS

constructor()

constructor(colorArr : IntArray){

this.mColorArr = colorArr

}

/**

* 获取某个百分比位置的颜色

*

* @param radio 取值[0,1]

* @return

*/

fun getColor(radio:Float):Int{

var startColor = 0

var endColor = 0

if (radio >= 1) {

return mColorArr[mColorArr.size - 1]

}

for(i in 0 until mColorPosition.size){

if (radio <= mColorPosition[i]) {

if (i == 0) {

return mColorArr[0]

}

startColor = mColorArr[i - 1]

endColor = mColorArr[i]

val areaRadio : Float = getAreaRadio(radio, mColorPosition[i - 1], mColorPosition[i])

return getColorFrom(startColor, endColor, areaRadio)

}

}

return -1;

}

fun getAreaRadio(radio : Float ,startPosition : Float , endPosition:Float ):Float{

return (radio - startPosition) / (endPosition - startPosition)

}

/**

* 取两个颜色间的渐变区间 中的某一点的颜色

*

* @param startColor

* @param endColor

* @param radio

* @return

*/

fun getColorFrom( startColor : Int,  endColor : Int,  radio : Float) : Int {

val redStart = Color.red(startColor);

val blueStart = Color.blue(startColor);

val greenStart = Color.green(startColor);

val redEnd = Color.red(endColor);

val blueEnd = Color.blue(endColor);

val greenEnd = Color.green(endColor);

val red =  (redStart + ((redEnd - redStart) * radio + 0.5)).toInt()

val greed =  (greenStart + ((greenEnd - greenStart) * radio + 0.5)).toInt()

val blue =  (blueStart + ((blueEnd - blueStart) * radio + 0.5)).toInt()

return Color.argb(255, red, greed, blue)

}

}

}