web-dev-qa-db-ja.com

Androidの画像の上にボタンを配置する方法は？

このようなカスタムビューを作成したいと思います。enter image description here

私は以下を試しました

<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="center"
    Android:orientation="vertical" >

    <ImageView
        Android:id="@+id/customView"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="center"
        Android:src="@drawable/sample_image" />

    <Button
        Android:id="@+id/button1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="right|top"
        Android:text="Button" />

    <Button
        Android:id="@+id/button2"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="right|bottom"
        Android:text="Button" />

</FrameLayout>

このようなビューを作成するにはどうすればよいですか？このようにimageviewの上にボタンを配置するにはどうすればよいですか？

前もって感謝します

androidandroid-layoutcustom-controls
14
Devu Soman

これを行うには、相対レイアウトを使用してみてください。

btn1の場合;

Android:layout_alignParentTop="true"
Android:layout_alignParentRight="true"

btn1の場合;

Android:layout_alignParentBottom="true"
Android:layout_alignParentRight="true"

[編集1]

ボタン使用マージン用のスペースを確保するには、Android：layout_margin = "20dp"

enter image description here

レイアウト例

<RelativeLayout Android:layout_width="300dp"
    Android:layout_height="300dp">


    <ImageView
        Android:id="@+id/img"
        Android:layout_width="fill_parent"
        Android:layout_height="fill_parent"
        Android:background="#ffaadd" 
        Android:layout_margin="20dp" />


    <Button
        Android:id="@+id/button1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentTop="true"
        Android:layout_alignParentRight="true"
        Android:text="btn1" />

    <Button
        Android:id="@+id/button2"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentBottom="true"
        Android:layout_alignParentRight="true"       
        Android:text="btn2" />

</RelativeLayout>
16
Talha
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
Android:id="@+id/RelativeLayout1"
Android:layout_width="fill_parent"
Android:layout_height="wrap_content"
Android:gravity="center"
Android:orientation="horizontal" >

<ImageView
    Android:id="@+id/imageView1"
    Android:layout_width="wrap_content"
    Android:layout_height="match_parent"
    Android:layout_alignParentLeft="true"
    Android:layout_alignParentRight="true"
    Android:layout_alignParentTop="true"
    Android:layout_weight="1"
    Android:padding="60dp"
    Android:src="@drawable/abs__ab_stacked_solid_dark_holo" />

<Button
    Android:id="@+id/button2"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_alignBaseline="@+id/button1"
    Android:layout_alignBottom="@+id/button1"
    Android:layout_alignParentLeft="true"
    Android:layout_marginLeft="30dp"
    Android:background="@drawable/ic_launcher" />

<Button
    Android:id="@+id/button1"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_alignParentRight="true"
    Android:layout_alignParentTop="true"
    Android:layout_marginRight="32dp"
    Android:layout_marginTop="102dp"
    Android:background="@drawable/ic_launcher" />
</RelativeLayout>

snapshot

1
SKK

RelativeLayout を使用します。これにより、画面上で異なるビューを重ねることができます。

1
Raghav Sood

これは私のために解決しました

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:id="@+id/RelativeLayout1"
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content"
    Android:gravity="center"
    Android:orientation="horizontal" >

    <ImageView
        Android:id="@+id/img"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:src = "@drawable/basic"
        Android:layout_alignParentTop="true"
        Android:layout_alignRight="@+id/button1"
        Android:layout_alignEnd="@+id/button1" />


    <ImageButton
        Android:id="@+id/button1"
        Android:layout_width="40dp"
        Android:layout_height="40dp"
        Android:layout_alignParentTop="true"
        Android:layout_alignParentRight="true"
        Android:text="btn1"
        Android:background="@drawable/ic_cancel_black"/>



 </RelativeLayout>
0
SAWAUNG

これが私がいつも使っているチュートリアルです http://www.learn-Android.com/2010/01/05/Android-layout-tutorial/ 必要なものが見つかるはずです。よく説明されているので、問題はないはずです。

0
sschrass

これは、デバイスのサイズが異なる場合の、プログラムによる私のソリューションです。位置（157,927）、387,927）、（617,927）の画像1080x1920の正しい場所に配置する必要がある3つのボタンがあります

    final ImageView iv = (ImageView)findViewById( R.id.imageView );
    iv.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        public void onGlobalLayout() {
            // Once data has been obtained, this listener is no longer needed, so remove it...
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                iv.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            } else {
                iv.getViewTreeObserver().removeGlobalOnLayoutListener(this);
            }
            RectF bounds = new RectF();
            Drawable drawable = iv.getDrawable();
            if (drawable != null) {
                iv.getImageMatrix().mapRect(bounds, new RectF(drawable.getBounds()));
            }
            float x = bounds.left;
            float y = bounds.top;
            float new_width = bounds.right - x;
            float new_height = bounds.bottom - y;
            int original_width = 1080;
            int original_height = 1920;

            int x1 = (int) (x + (new_width*157/original_width));
            int x2 = (int) (x + (new_width*387/original_width));
            int x3 = (int) (x + (new_width*617/original_width));
            int newY = (int) (y + (new_height*927/original_height));

            enroll.setX(x1);
            ccfront.setX(x2);
            verify.setX(x3);
            enroll.setY(newY);
            ccfront.setY(newY);
            verify.setY(newY);
        }
    });
0
lbolanos