在ImageView上的确切位置定位形状

时间:2016-06-23 14:22:34

标签: android android-layout android-studio

我无法在Android Studio的布局中正确定位元素。我有一个带有png背景的ImageView,其中包含数字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>

1 个答案:

答案 0 :(得分:1)

Android用于大量屏幕尺寸和密度不同的设备上。因此,通过xml布局很难做到你想要的。但是您可以使用具有固定视图关系的布局,因此它看起来与您想要的类似,但这不是一个好方法。

这个例子可以给你一把钥匙。此布局显示4个视图 确切的屏幕位置。          

    <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>

像这样的东西:

enter image description here

如果您在自定义视图中绘制背景(数字2)和圆圈,则效果更佳。因此,您将了解所有对象的确切尺寸和坐标,并且可以正确放置它们。

仅在自定义视图中绘图的示例:

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);
        }
    }
}

希望这有帮助。