Kotlinでタップした場所に画像を描画すると右下にずれる

Question

実現したいこと

タップした部分に画像を描画できているのですが右下にずれます。
タップした部分が画像の中央座標となるように描画したいです。

ある記事では、タップした部分は画像の左上座標を示すため右下にずれる・・・と記述があったので、32*32の小さな画像を用意しましたがズレ具合は変わりませんでした。
このズレは何からきているのでしょうか。
またズレはどのように調整すればよいのでしょうか。

ソースコード

onTouchEventで画像を描画する座標をセットしています。
img1.pngの解像度は32*32の小さいファイルです。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="UsingOnClickInXml"
    tools:context=".MainActivity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/mainActivity"
    >

    <ImageView
        android:id="@+id/img1"
        android:layout_width="100px"
        android:layout_height="100px"
        android:src="@drawable/img1"
        tools:ignore="MissingConstraints"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

private var x: Float = 0f
private var y: Float = 0f

override fun onTouchEvent(event: MotionEvent?): Boolean {
  x = event!!.x
  y = event.y
  binding.img1.x = x
  binding.img1.y = y
  return true
}

Comments

[jimbe]

まず基本的に、xml 等でレイアウトしているビューの位置をコードでテキトウに変更しようとしないで下さい。
各ビューは各々階層上位のビューによって位置や大きさを管理され、必要ならそれらを自動的に変更しています、(表示したら終わりはありません。表示されている間、常に行われる可能性があります。)
タップした位置に画像を表示するのであれば、そのような機能を持つビューを探してくるなり作るなりするのが確実でしょう。

[user3799257542]

jimbeさん、ありがとうございます！
根本から見直すべく調べてきます。

Answer 1

例えば SurfaceView でタッチ位置に塗り潰し四角を書くようにしてみます。

※ java ですみません。簡単なので kotlin にもすぐ出来ると思いますが。

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.graphics.*;
import android.os.Bundle;
import android.util.Log;
import android.view.*;

public class MainActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(new TouchView(this));
  }

  public static class TouchView extends SurfaceView {
    public TouchView(Context context) {
      super(context);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
      Log.d("MainActivity ***", "onTouchEvent: pos=("+event.getX()+","+event.getY()+")");

      Canvas canvas = getHolder().lockCanvas();
      canvas.drawColor(Color.BLACK);

      Paint paint = new Paint();
      paint.setColor(Color.GREEN);
      paint.setStyle(Paint.Style.FILL);
      canvas.drawRect(event.getX()-50, event.getY()-50, event.getX()+50, event.getY()+50, paint);

      getHolder().unlockCanvasAndPost(canvas);
      return true;
    }
  }
}

Comments

[user3799257542]

ありがとうございます！
今基礎の部分を学習しています。まだ間に合っていない状態なので、追いつき次第いただいたコードを確認しようかと思っています。