2013-01-08 15 views
12

Chcę utworzyć niestandardowy widok w ten sposób. enter image description hereJak umieszczać przyciski na obrazie w systemie Android?

Próbowałem następujących

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

Jak mogę utworzyć widok takiego? Jak mogę umieścić przyciski nad obrazem w ten sposób?

Dzięki z góry

+0

wykorzystanie względnego układu. – SKK

+0

sprawdź moją odpowiedź poniżej. Załączam migawkę ekranu. – SKK

Odpowiedz

14

możesz spróbować użyć względnego układu, aby to zrobić,

dla btn1;

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

dla btn1;

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

[Edycja 1]

dać miejsce na przycisk Margin android: layout_margin = "20dp"

enter image description here

Przykład układ

<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

Chcę pokazać część przycisku poza obrazem. Zwróć uwagę na obraz dodany. –

+0

Proszę spojrzeć na zredagowaną odpowiedź – Talha

+0

Dzięki. Ten pracował dla mnie. –

1

Użyj RelativeLayout. Umożliwi to nakładanie się różnych widoków na ekranie.

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

to rozwiązane dla mnie

<?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> 
Powiązane problemy