我正在尝试使用 4 个点在我的 ImageView 上标记出 4 个点。当我移动其中一个视图时,另一个视图会自动移动



我正试图用4个点在ImageView上标出4个点。当我移动其中一个视图时,另一个会自动移动。原因是我正在将它们映射到彼此。但如果我不把它们映射到一起,它们只是重叠,看起来真的很难看(并不是说现在看起来更少了(。请帮我把这4种布局分开。我的头撞墙已经有一段时间了。我在下面附上了XML和JAVA代码。

activity_mail.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layoutContainer"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="@+id/imgMapper"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/test"/>
<LinearLayout
android:id="@+id/layoutTopLeftMarker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Top Left"
android:textSize="16sp" />
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="right"
android:src="@drawable/tag" />
</LinearLayout>
<LinearLayout
android:id="@+id/layoutTopRightMarker"
android:layout_toRightOf="@id/layoutTopLeftMarker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Top Right"
android:textSize="16sp" />
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:src="@drawable/tag" />
</LinearLayout>
<LinearLayout
android:id="@+id/layoutBottomLeftMarker"
android:layout_below="@id/layoutTopLeftMarker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bottom Left"
android:textSize="16sp" />
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:src="@drawable/tag"
android:layout_gravity="right"/>
</LinearLayout>
<LinearLayout
android:id="@+id/layoutBottomRightMarker"
android:layout_below="@id/layoutTopRightMarker"
android:layout_toRightOf="@id/layoutBottomLeftMarker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bottom Right"
android:textSize="16sp" />
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:src="@drawable/tag" />
</LinearLayout>
</RelativeLayout>

主要活动.java

package com.example.pointmapperpoc;
import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
public class MainActivity extends AppCompatActivity {
private ImageView imgMapper;
private LinearLayout layoutTopLeftMarker,layoutTopRightMarker,layoutBottomLeftMarker,layoutBottomRightMarker;
private int _yDeltaTopRight;
private int _xDeltaTopRight;
private int _yDeltaTopLeft;
private int _xDeltaTopLeft;
private int _xDeltaBottomLeft;
private int _yDeltaBottomLeft;
private int _xDeltaBottomRight;
private int _yDeltaBottomRight;
@SuppressLint("ClickableViewAccessibility")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imgMapper = findViewById(R.id.imgMapper);
layoutTopRightMarker = findViewById(R.id.layoutTopRightMarker);
layoutTopLeftMarker = findViewById(R.id.layoutTopLeftMarker);
layoutBottomRightMarker = findViewById(R.id.layoutBottomRightMarker);
layoutBottomLeftMarker = findViewById(R.id.layoutBottomLeftMarker);
layoutTopLeftMarker.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
final int X = (int) event.getRawX();
final int Y = (int) event.getRawY();
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams) v.getLayoutParams();
_xDeltaTopLeft = X - lParams.leftMargin;
_yDeltaTopLeft = Y - lParams.topMargin;
case MotionEvent.ACTION_MOVE:
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) v.getLayoutParams();
layoutParams.leftMargin = X - _xDeltaTopLeft;
layoutParams.topMargin = Y - _yDeltaTopLeft;
v.setLayoutParams(layoutParams);
break;
}
return true;
}
});
layoutTopRightMarker.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
final int X = (int) event.getRawX();
final int Y = (int) event.getRawY();
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams) v.getLayoutParams();
_xDeltaTopRight = X - lParams.leftMargin;
_yDeltaTopRight = Y - lParams.topMargin;
case MotionEvent.ACTION_MOVE:
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) v.getLayoutParams();
layoutParams.leftMargin = X - _xDeltaTopRight;
layoutParams.topMargin = Y - _yDeltaTopRight;
v.setLayoutParams(layoutParams);
break;
}
return true;
}
});
layoutBottomLeftMarker.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
final int X = (int) event.getRawX();
final int Y = (int) event.getRawY();
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams) v.getLayoutParams();
_xDeltaBottomLeft = X - lParams.leftMargin;
_yDeltaBottomLeft = Y - lParams.topMargin;
case MotionEvent.ACTION_MOVE:
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) v.getLayoutParams();
layoutParams.leftMargin = X - _xDeltaBottomLeft;
layoutParams.topMargin = Y - _yDeltaBottomLeft;
v.setLayoutParams(layoutParams);
break;
}
return true;
}
});
layoutBottomRightMarker.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
final int X = (int) event.getRawX();
final int Y = (int) event.getRawY();
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams) v.getLayoutParams();
_xDeltaBottomRight = X - lParams.leftMargin;
_yDeltaBottomRight = Y - lParams.topMargin;
case MotionEvent.ACTION_MOVE:
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) v.getLayoutParams();
layoutParams.leftMargin = X - _xDeltaBottomRight;
layoutParams.topMargin = Y - _yDeltaBottomRight;
v.setLayoutParams(layoutParams);
break;
}
return true;
}
});
}
}

这里的想法是操纵它们的x和y,而不是边距。当你设置布局参数时,你的映射会自动更新,这就是它们相互跟随的原因。如果你设置了视图的x和y,它们仍然会移动,但它们的布局参数不会更新。

最新更新