android - 将形状定位在 ImageView 上的确切位置

Question

我无法让元素在 Android Studio 的布局上正确定位。我有一个 ImageView，其背景为 png，其中包含数字 2。我有两个 View ，每个 View 都包含一个小圆圈。我希望圆圈始终在数字 2 的每个尖端对齐。我可以在一台设备上正确对齐它们，但在另一台设备上对齐方式会发生变化。是否有可能使它们在每个设备中始终正确对齐？

这是我想要的样子: http://i.stack.imgur.com/v7nsg.png

这是我计算点位置之一的代码:

    circle2 = findViewById(R.id.circle2);

    DisplayMetrics metrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(metrics);
    int heightPixels = metrics.heightPixels;
    int widthPixels = metrics.widthPixels;

    //dimensions of background image: 547x839

    dot2H = (heightPixels / 547) * 70;
    dot2W = (widthPixels / 829) * 70;
    dot2Hposition = (heightPixels / 829) * 500;
    dot2Wposition = (widthPixels / 547) * 300;
    RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) circle2.getLayoutParams();
    params.height = dot2H;
    params.width = dot2H;
    params.leftMargin = dot2Wposition;
    params.topMargin = dot2Hposition;
    circle2.setLayoutParams(params);

这是布局代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="net.beauvine.animationtest.MainActivity"
tools:showIn="@layout/activity_main">
<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scaleType="centerInside"

    android:src="@drawable/two"
    android:id="@+id/imageView"
    android:padding="10dp"
    android:layout_alignParentEnd="false"
    android:layout_alignParentTop="true"
    android:layout_alignParentRight="true" />

<RelativeLayout
    android:id="@+id/dotLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:gravity="center"
    >

    <View android:layout_width="70dp"
        android:layout_height="70dp"
        android:id="@+id/circle2"
        android:background="@drawable/circle"
        android:clickable="true"
        android:alpha=".8"
        />
    <View android:layout_width="70dp"
        android:layout_height="70dp"
        android:id="@+id/circle"
        android:background="@drawable/circle"
        android:clickable="true"
        android:alpha=".8"
        />

</RelativeLayout>

Answer 1

Android 在屏幕尺寸和密度差异很大的大量设备上使用。因此很难通过 xml 布局做你想做的事。但是您可以使用具有固定 View 关系的布局，因此它看起来与您想要的相似，但这不是好方法。

这个例子可以给你一把 key 。此布局显示 4 个 View 屏幕的确切位置总是。

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:weightSum="2">

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <View
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:background="@android:color/white" />
        </FrameLayout>

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <View
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:background="@android:color/white" />
        </FrameLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:weightSum="2">

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <View
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:background="@android:color/white" />
        </FrameLayout>

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <View
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:background="@android:color/white" />
        </FrameLayout>
    </LinearLayout>

</LinearLayout>

像这样的:

如果您在自定义 View 中同时绘制背景(数字 2)和圆圈，那就更好了。因此，您将知道所有对象的确切大小和坐标，并可以正确放置它们。

在自定义 View 中绘制的示例:

public class MainActivity extends Activity {

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

    public class MyView extends View {
        public MyView(Context context) {
            super(context);
            // TODO Auto-generated constructor stub
        }

        @Override
        protected void onDraw(Canvas canvas) {
            // TODO Auto-generated method stub
            super.onDraw(canvas);

            int x = getWidth();
            int y = getHeight();
            int radius;
            radius = 100;
            Paint paint = new Paint();
            paint.setStyle(Paint.Style.FILL);
            paint.setColor(Color.BLACK);
            canvas.drawPaint(paint);

            paint.setColor(Color.WHITE);
            canvas.drawCircle(x / 2, y / 2, radius, paint);

            paint.setColor(Color.WHITE);
            canvas.drawCircle(x / 3, y / 3, radius, paint);
        }
    }
}

希望这对您有所帮助。