Basically I am implementing a paint app, so I made a custom View to handle event and draw on canvas. Now I would like to display the coordinate of the points being drawn on a TextView in real time. So I am trying to use a ViewModel with LiveData to do the updating. But I can't figure out a way to give the information from my custom View to the ViewModel. How would you do that ? I also tried to use BindingAdapter but I can't find a way to do that.
Here the code for my custom View:
class PaintView(context: Context, attrs: AttributeSet): View(context,attrs) {
var params: LayoutParams
private val path : Path = Path()
private val brush: Paint = Paint()
init {
params = LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT)
brush.isAntiAlias = true
brush.color = Color.BLACK
brush.style = Paint.Style.STROKE
brush.strokeJoin = Paint.Join.ROUND
brush.strokeWidth = 8f
}
override fun onTouchEvent(event: MotionEvent): Boolean {
val pointX = event.x
val pointY = event.y
when (event.action) {
MotionEvent.ACTION_DOWN -> {
path.moveTo(pointX, pointY)
return true
}
MotionEvent.ACTION_MOVE -> {
path.lineTo(pointX, pointY)
}
else -> return false
}
postInvalidate()
return false
}
fun clearPath(){
path.reset()
invalidate()
}
public override fun onDraw(canvas: Canvas) {
canvas.drawPath(path, brush)
}
}
Here is a binding adapter that I found following this post: Android data binding view.onTouchListener . I can Log the points coordinate, but I cant't send them to my ViewModel, so it is quite empty right now.
@BindingAdapter("touchListener")
fun setTouchListener(self: View, bool: Boolean) {
self.setOnTouchListener(
object : View.OnTouchListener {
override fun onTouch(view: View, event: MotionEvent): Boolean {
val pointX = event.x
val pointY = event.y
when (event.action) {
MotionEvent.ACTION_DOWN -> {
Log.i("Points", " ($pointX, $pointY)")
}
MotionEvent.ACTION_MOVE -> {
Log.i("Points", " ($pointX, $pointY)")
}
MotionEvent.ACTION_UP -> {
Log.i("Points", " ($pointX, $pointY)")
}
}
return false
}
})
}
Sorry for sharing this in JAVA... But I guess you can capture the ideia.
On CustomView, create a custom interface:
public class PaintView {
private OnCoordinateUpdate mCoordinatesListener;
override fun onTouchEvent(event: MotionEvent): Boolean {
val pointX = event.x
val pointY = event.y
....
if(listener != null) {
listener.onUpdate(pointX, pointY);
}
}
...
public void setCoordinatesListener(OnCoordinateUpdate listener) {
mCoordinatesListener = listener;
}
public interface OnCoordinateUpdate {
void onUpdate(int x, int y);
}
}
Then, on your activity:
public class MainActivity {
...
mPaintView.setCoordinatesListener(new PaintView.OnCoordinateUpdate {
@Override
void onUpdate(int x, int y) {
if(mTextView != null) {
mTextView.setText("X: " + x + " Y: " + y);
}
}
});
}
This way, your PaintView
can invoke the onUpdate
whenever you want. Then, in your activity, everytime the onUpdate
is called, the TextView will have its content updated.
I guess this is a good a approach because you create a custom interface ( OnCoordinateUpdate
) and it only makes sense to your custom view only.
Finally it worked the following way. I took inspiration from the previous post and just used the binded viewmodel to call a function and then get the data.
here is the MainActivity code:
class MainActivity : AppCompatActivity () {
private lateinit var binding: ActivityMainBinding
private lateinit var viewModel: PaintViewModel
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
viewModel = ViewModelProviders.of(this).get(PaintViewModel::class.java)
binding.viewmodel = viewModel
binding.paintView.setCoordinatesListener(object :
PaintView.OnCoordinateUpdate {
override fun onUpdate(x: Float, y: Float) {
binding.textView.text = "X: $x \nY: $y"
binding.viewmodel?.onUpdateCoordinate(x,y)
}
})
binding.clearButton.setOnClickListener { binding.paintView.clearPath() }
}
}
Here is the ViewModel code, the challenge is to call the onUpdate function right in the ViewModel.
class PaintViewModel : ViewModel() {
private val _pointX = MutableLiveData<Float>()
private val _pointY = MutableLiveData<Float>()
val pointX : LiveData<Float> = _pointX
val pointY : LiveData<Float> = _pointY
init {
_pointX.value = 0f
_pointY.value = 0f
}
fun onUpdateCoordinate(x: Float, y: Float) {
_pointX.value = x
_pointY.value = y
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.