实际解决方案

Question

我正在一个有自定义视图的android项目上工作。单击自定义视图时，我希望在视图的每个角上放置一个视图（一个圆圈）。

此刻，我只是想让它在左上角起作用，但最终在中间。

下面是我添加视图的单击功能。

View view = LayoutInflater.from(getContext()).inflate(R.layout.view, this, false);

        TextView textItem = view.findViewById(R.id.lblItemText);

        textItem.setText("View: " + counter);

        view.setOnClickListener(new OnClickListener()
        {
            @Override
            public void onClick(View v)
            {

                Anchor anchor1 = new Anchor(getContext());

                anchor1.setLeft(v.getLeft());
                anchor1.setTop(CustomView.this.getTop());
                CustomView.this.addView(anchor1);
            }
        });

自定义视图位于相对布局内。自定义视图扩展了RelativeLayout，锚定视图扩展了自定义视图的左上角。

anchor构造函数包含以下内容：

public Anchor(Context context)
    {
        super(context);
        this.setBackgroundResource(R.drawable.anchor);
        this.setPadding(0,0,0,0);
        this.setWidth(1);
        this.setHeight(1);
}

由于某种原因，锚点出现在中间而不是如下所示的拐角处

以下是一种期望。

更新

过了几天，我取得了一些进展，但确实可以使用，但是它使用了硬编码的值来将其放置在正确的位置，这似乎不太正确。我猜想这只能在我正在测试的特定设备上使用，另一台分辨率不同的设备将定位错误。

下面是我所希望的代码，该代码可以显示我正在尝试实现的目标以及屏幕快照，以显示我现在拥有的内容。

private void createAnchorPoints()
    {

        //Main View
        ViewGroup mainView = activity.findViewById(android.R.id.content);

        int[] viewToBeResizedLoc = new int[2];
        viewToBeResized.getLocationOnScreen(viewToBeResizedLoc);


        //Add top left anchor
        Anchor topLeftAnchor = new Anchor(context, Anchor.ResizeMode.TOP_LEFT);
        FrameLayout.LayoutParams topLeftParms = new FrameLayout.LayoutParams(150,150);
        topLeftParms.leftMargin = viewToBeResizedLoc[0] - 50;
        topLeftParms.topMargin = viewToBeResizedLoc[1] - viewToBeResized.getHeight() - 30;
        topLeftAnchor.setLayoutParams(topLeftParms);
        mainView.addView(topLeftAnchor);

        //Add top right anchor
        Anchor topRightAnchor = new Anchor(context, Anchor.ResizeMode.TOP_RIGHT);
        FrameLayout.LayoutParams topRightParms = new FrameLayout.LayoutParams(150, 150);
        topRightParms.leftMargin = topLeftParms.leftMargin + viewToBeResized.getWidth() - 40;
        topRightParms.topMargin = topLeftParms.topMargin;
        topRightAnchor.setLayoutParams(topRightParms);
        mainView.addView(topRightAnchor);

        //Add bottom left anchor
        Anchor bottomLeftAnchor = new Anchor(context, Anchor.ResizeMode.BOTTOM_LEFT);
        FrameLayout.LayoutParams bottomLeftParms = new FrameLayout.LayoutParams(150, 150);
        bottomLeftParms.leftMargin = topLeftParms.leftMargin;
        bottomLeftParms.topMargin = topLeftParms.topMargin + viewToBeResized.getHeight() - 40;
        bottomLeftAnchor.setLayoutParams(bottomLeftParms);
        mainView.addView(bottomLeftAnchor);

        //Add bottom right anchor
        Anchor bottomRightAnchor = new Anchor(context, Anchor.ResizeMode.BOTTOM_RIGHT);
        FrameLayout.LayoutParams bottomRightParms = new FrameLayout.LayoutParams(150, 150);
        bottomRightParms.leftMargin = topRightParms.leftMargin;
        bottomRightParms.topMargin = bottomLeftParms.topMargin;
        bottomRightAnchor.setLayoutParams(bottomRightParms);
        mainView.addView(bottomRightAnchor);

    }

Answer 1

由于顶层布局是RelativeLayout，因此您将需要使用RelativeLayout可用的视图定位来实现所需的功能。（请参见documentation。）

这里是您想要用XML实现的模型。该模型将演示我们如何找到实际的解决方案。我正在使用标准视图，但这没关系。该技术将应用于您的自定义视图。该图像来自Android Studio的设计器，因此无需使用任何代码即可创建该图像。

activity_main.xml

<RelativeLayout 
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/customView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_centerInParent="true"
        android:background="@android:color/holo_green_light" />

    <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignStart="@id/customView"
        android:layout_alignTop="@id/customView"
        android:src="@drawable/circle"
        android:translationX="-10dp"
        android:translationY="-10dp" />

    <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignEnd="@id/customView"
        android:layout_alignTop="@id/customView"
        android:src="@drawable/circle"
        android:translationX="10dp"
        android:translationY="-10dp" />

    <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignBottom="@id/customView"
        android:layout_alignStart="@id/customView"
        android:src="@drawable/circle"
        android:translationX="-10dp"
        android:translationY="10dp" />

    <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignBottom="@id/customView"
        android:layout_alignEnd="@id/customView"
        android:src="@drawable/circle"
        android:translationX="10dp"
        android:translationY="10dp" />

</RelativeLayout>

circle.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <!-- fill color -->
    <solid android:color="@android:color/holo_red_light" />
    <size
        android:width="20dp"
        android:height="20dp" />
</shape>

实际解决方案

现在，我们已经证明了模拟方法是可行的，现在我们必须在代码中重现效果。我们将必须使用RelativeLayout视图定位和平移来添加圆视图并将其定位在父RelativeLayout中。以下代码仅显示了左上角的圆圈的位置，而其他圆圈的位置也类似。

activity_main.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Drawable circle = ContextCompat.getDrawable(this, R.drawable.circle);
        ImageView imageView = new ImageView(this);
        imageView.setImageDrawable(circle);
        int circleSize = dpToPx(CIRCLE_SIZE_DP);
        RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(circleSize, circleSize);

        // Position top left circle within the custom view.
        lp.addRule(RelativeLayout.ALIGN_START, R.id.customView);
        lp.addRule(RelativeLayout.ALIGN_TOP, R.id.customView);

        // Uncomment these 2 lines to position the top left circle with translation.
        imageView.setTranslationX(-circleSize / 2);
        imageView.setTranslationY(-circleSize / 2);

        // Uncomment these 3 lines to position the top left circle with margins.
//        View customView = findViewById(R.id.customView);
//        lp.leftMargin = customView.getLeft() - circleSize / 2;
//        lp.topMargin = customView.getTop() - circleSize / 2;

        ((RelativeLayout) findViewById(R.id.relativeLayout)).addView(imageView, lp);
    }

    private int dpToPx(int dp) {
        return (int) (dp * getResources().getDisplayMetrics().density);
    }

    private static final int CIRCLE_SIZE_DP = 20;
}

上面的代码使用了缩短的布局：

activity_main.xml

<RelativeLayout 
    android:id="@+id/relativeLayout"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/customView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_centerInParent="true"
        android:background="@android:color/holo_green_light" />

</RelativeLayout>

也可以使用边距产生相同的定位。使用边距的代码已注释掉，但可以使用。（我认为负边距也可能有效，但我读到它们不是officially supported，所以我尽量避免它们。）

获取视图每个角的位置，然后在该位置添加视图

1 个答案:

实际解决方案