2013-01-08 9 views
12

このようなカスタムビューを作成したいと思います。 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> 

どのように私はこのようなビューを作成することができますを試してみましたか?このように画像ビュー上にボタンを配置するにはどうすればよいですか?アドバンス

+0

使用の相対的なレイアウトのために解決しました。 – SKK

+0

下記の私の答えをチェックしてください。私は画面のスナップショットを添付しました。 – SKK

答えて

14

これを行うには相対レイアウトを使用できます。

for btn1;

android:layout_alignParentTop="true" 
android:layout_alignParentRight="true" 

btn1;

android:layout_alignParentBottom="true" 
android:layout_alignParentRight="true" 

[EDIT 1]

ボタン使用マージンのためのスペースを与えるために、アンドロイド: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> 
+0

イメージビューからボタンの一部を見せたいと思います。イメージが追加されています。 –

+0

編集した答えを見てください – Talha

+0

ありがとうございます。これは私のために働いた。 –

1

おかげでRelativeLayoutを使用してください。これにより、異なるビューを画面上で重複させることができます。

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

0

これは私

<?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> 
関連する問題