マスクされた四角形をプログラムで作成する

Question

私はiOSアプリを開発し、現在はAndroid版で作業しています。

カメラビュー（SurfaceView）の上にオーバーレイビューを作成したいと思います。私が現在複製できない部分は、画面の真ん中にマスクされた四角いオーバーレイです。私はandroid.support.percent.PercentFrameLayoutを試しましたが、それは私が欲しいものとして動作しません。

iOS版では、8つの矩形UIViewを作成してそのシェイプを作成するだけです。次に、CGRectを設定してレイアウトします。 Androidの場合、コードを使用してランタイムを作成できることはわかっています。しかし、私が知らない部分は、それらをレイアウトする方法です。

私はどのようなやり方でアドバイスをしたいですか（XML、またはプログラムでレンダリング）。

ありがとうございます！あなたは、単にプロパティテキストスキャンをcontaing "android:layout_alignParentBottom="true"に設定してお支払いTextViewを置くことができます

<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

右onCreateView 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); 

スクリーンショットでそれらを入れて、コードを精製せずに、ここで

コードがある（Fragmentを使用して）

PS内側：感謝解答を示唆したり、質問を読んだりすることなく、コメントなしで投票を無作為に辞めた人のために。感謝の仲間:)素晴らしいアンドロイドのコミュニティ。

Answer 2

]

レイアウトファイル！ SurfaceViewの親レイアウトでもあるRelativeLayoutにあります。

<?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を使用してください：

<FrameLayout 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_gravity="bottom |center_horizontal" 
android:text="SCAN AND PAY!" 
android:layout_height="wrap_content" /> 
</FrameLayout> 

Answer 3

は、このソリューションをお試しください。

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

これは必要に応じて機能します。あなたは位置決めのようないくつかのより高度な機能が必要な場合はRelativeLayoutとFrameLayoutを根絶する必要がありますので

Answer 4

FrameLayoutはかなり基本的なコンテナである、そして、あなたの（コメントアウト）android.support.percent.PercentFrameLayout要素の代わりに、あなたのマスキングsqareを示す経常ImageViewを置きます。

android:layout_centerVertical="true" 
    android:layout_centerHorizontal="true" 

十分です：ImageViewするとあなたはそれのためにこれらのセットを持って確保することを中央に。