Question

我开发了一个iOS应用程序，现在正在使用Android版本。

我想在相机视图（SurfaceView）上方创建叠加视图。我目前无法复制的部分是屏幕中间的蒙版方形叠加。我尝试了android.support.percent.PercentFrameLayout，但它不能像我想要的那样工作。

对于iOS版本，我只需创建8个矩形UIViews即可形成该形状。然后通过设置它们的CGRect来布局它们。但对于Android，我知道我可以使用代码创建运行时。但我不知道的部分是如何布局它们。

想要一些建议，比如我应该采用哪种方式？（XML或以编程方式呈现）。

非常感谢！

enter image description here ]

布局文件

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.nerfire.hk.flexibill.ScanMain">




    <!-- TODO: Update blank fragment layout -->
    <SurfaceView
        android:id="@+id/camera_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />


    <!--<android.support.percent.PercentFrameLayout-->
        <!--android:orientation="vertical"-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="match_parent">-->
        <!--<View-->
            <!--android:layout_width="match_parent"-->
            <!--app:layout_heightPercent="68%"-->
            <!--/>-->

    <!--</android.support.percent.PercentFrameLayout>-->


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="10dp"
        android:text="Scan and Pay!"/>
</FrameLayout>

Answer 1

试试这个解决方案。

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.app.mynewproject.MainActivity">

    <SurfaceView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/surfaceView" />

    <ImageView
        android:layout_height="250dp"
        app:srcCompat="@android:drawable/ic_menu_mylocation"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/imageView"
        android:layout_width="250dp" />

    <TextView
        android:text="SCAN AND PAY!"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:textSize="25sp"
        android:textColor="@android:color/white"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="15dp"
        android:id="@+id/textView" />
</RelativeLayout>

这是按要求运作的。

Answer 2

在onCreateView内（使用Fragment）

以下是代码，没有完善代码，将它们放入for循环

    DisplayMetrics metrics = new DisplayMetrics();
    getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);

    FrameLayout viewLayout = (FrameLayout) view.findViewById(R.id.scan_main_frame_layout);

    int overlayColor = Color.argb(127, 255, 255, 255);
    int lineWidth = 20;
    int lineLength = (int)(metrics.widthPixels*0.2);
    float originX = (float) (metrics.widthPixels*0.25);
    float endPointX = (float) (metrics.widthPixels*0.75);
    float screenCentreY = (float)(metrics.heightPixels*0.5);

    FrameLayout.LayoutParams horizontalLineFrame = new FrameLayout.LayoutParams(lineLength, lineWidth);
    FrameLayout.LayoutParams verticalLineFrame = new FrameLayout.LayoutParams(lineWidth, lineLength-lineWidth);

    View view1 = new View(getContext());
    view1.setX(originX);
    view1.setY(screenCentreY-originX);
    view1.setBackgroundColor(overlayColor);
    view1.setLayoutParams(horizontalLineFrame);
    viewLayout.addView(view1);

    View view2 = new View(getContext());
    view2.setX(endPointX-lineLength);
    view2.setY(screenCentreY-originX);
    view2.setBackgroundColor(overlayColor);
    view2.setLayoutParams(horizontalLineFrame);
    viewLayout.addView(view2);

    View view3 = new View(getContext());
    view3.setX(originX);
    view3.setY(screenCentreY+originX-lineWidth);
    view3.setBackgroundColor(overlayColor);
    view3.setLayoutParams(horizontalLineFrame);
    viewLayout.addView(view3);

    View view4 = new View(getContext());
    view4.setX(endPointX-lineLength);
    view4.setY(screenCentreY+originX-lineWidth);
    view4.setBackgroundColor(overlayColor);
    view4.setLayoutParams(horizontalLineFrame);
    viewLayout.addView(view4);

    View view5 = new View(getContext());
    view5.setX(originX);
    view5.setY(screenCentreY-originX+lineWidth);
    view5.setBackgroundColor(overlayColor);
    view5.setLayoutParams(verticalLineFrame);
    viewLayout.addView(view5);

    View view6 = new View(getContext());
    view6.setX(endPointX-lineWidth);
    view6.setY(screenCentreY-originX+lineWidth);
    view6.setBackgroundColor(overlayColor);
    view6.setLayoutParams(verticalLineFrame);
    viewLayout.addView(view6);

    View view7 = new View(getContext());
    view7.setX(originX);
    view7.setY(screenCentreY+originX-lineLength);
    view7.setBackgroundColor(overlayColor);
    view7.setLayoutParams(verticalLineFrame);
    viewLayout.addView(view7);

    View view8 = new View(getContext());
    view8.setX(endPointX-lineWidth);
    view8.setY(screenCentreY+originX-lineLength);
    view8.setBackgroundColor(overlayColor);
    view8.setLayoutParams(verticalLineFrame);
    viewLayout.addView(view8);

截图

ps：感谢那些随意放弃投票而不发表评论而没有提出任何解决方案或阅读问题的人。谢谢伙伴:)不错的Android社区。

Answer 3

您只需将属性设置为TextView的{{1}}放入包含文本扫描和付款的文件即可！在"android:layout_alignParentBottom="true"中，它也是RelativeLayout的父级布局。

SurfaceView

如果没有其他相对于其他人的观点，请使用<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <SurfaceView android:id="@+id/surfaceView" android:layout_width="match_parent" android:layout_height="match_parent" /> <TextView android:textColor="@android:color/white" android:layout_width="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:text="SCAN AND PAY!" android:layout_height="wrap_content" /> </RelativeLayout>：

FrameLayout

Answer 4

FrameLayout是非常基本的容器，所以如果你需要一些更高级的功能，例如定位，你应该FrameLayout与RelativeLayout，然后代替你的（注释掉的）{{1} } element put plain android.support.percent.PercentFrameLayout显示你的masking sqare。以ImageView为中心确保您为它设置了这些：

ImageView

应该足够了。

以编程方式创建蒙版方块

4 个答案: