2014-04-22 12 views
9


starałem się utworzyć przycisk podobny w wyglądzie do przycisków okrągłe tutaj -
http://livetools.uiparade.com/index.html
(każdy przycisk wygląda to wewnątrz zanurzonej części) Miałem go przez umieszczenie przycisk
w okręgu tła i dając im zarówno małe nachylenie, które zrobił w końcu ten sam
chociaż mam ten wynik -

enter image description here

(będę przesłać mój kod raz mogę) w jaki sposób można osiągnąć ten sam Popatrz?Tworzenie 3d w kształcie przycisku w android

+0

Przypominamy ([bo jeszcze nie mam okrągły do ​​realizacji automatycznych powiadomień zamknięcia] (http://meta.stackexchange.com/q/93842/308440)): ten questi na zamknięciu (miesiące temu). Czy możesz go ulepszyć, aby był ważny? –

Odpowiedz

24

Spróbuj tego kodu. Jestem w stanie uzyskać obraz, który wygląda tak

Android xml button

który jest podobny do pierwszego przycisku, który połączy się za pomocą następującego kodu. Kluczem jest użycie <layer-list> do nadawania kształtu warstwom jeden nad drugim, aby uzyskać pożądany efekt.

pliku: res/odkształcalne/button.xml

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 

    <!-- Outside border/shadow --> 
    <item> 
    <shape android:shape="oval"> 
     <size android:width="200dp" android:height="200dp" /> 
     <gradient android:angle="90" android:startColor="#f4f4f4" android:endColor="#b9b9b9" /> 
    </shape> 
    </item> 

    <!-- Inset --> 
    <item android:top="1dp" android:left="1dp" android:right="1dp" android:bottom="1dp"> 
     <shape android:shape="oval"> 
     <gradient android:angle="90" android:startColor="#dcdcdc" android:endColor="#c9c9c9" /> 
     </shape> 
    </item> 

    <!-- Inside border/shadow --> 
    <item android:top="15dp" android:left="15dp" android:right="15dp" android:bottom="15dp"> 
    <shape android:shape="oval"> 
     <gradient android:angle="90" android:startColor="#8c8c8c" android:endColor="#cbcbcb" /> 
    </shape> 
    </item> 

    <!-- Main button --> 
    <item android:top="16dp" android:left="16dp" android:right="16dp" android:bottom="16dp"> 
    <shape android:shape="oval"> 
     <solid android:color="#ffffff" /> 
    </shape> 
    </item> 

    <!-- Button image --> 
    <item android:top="70dp" android:left="70dp" android:right="70dp" android:bottom="70dp"> 
    <shape android:shape="rectangle"> 
     <solid android:color="#3b88c2" /> 
     <corners android:radius="20dp" /> 
    </shape> 
    </item> 

    <item android:top="75dp" android:left="75dp" android:right="75dp" android:bottom="75dp"> 
    <shape android:shape="rectangle"> 
     <solid android:color="#ffffff" /> 
     <corners android:radius="20dp" /> 
    </shape> 
    </item> 

    <item android:top="80dp" android:left="80dp" android:right="80dp" android:bottom="80dp"> 
    <shape android:shape="rectangle"> 
     <solid android:color="#3b88c2" /> 
     <corners android:radius="20dp" /> 
    </shape> 
    </item> 

</layer-list> 

w głównym układzie, dodaj ImageView który wyświetli obraz.

<ImageView 
    android:src="@drawable/button" /> 

Można dokonać ImageView klikalne, dając mu OnClickListener w kodzie Java.

+0

Właśnie zdobyłeś 50 punktów, proszę pana ...! =) – crazyPixel

+0

Dobry przykład brata. Ale mam jedno pytanie. jak nadać zawartość z tym kształtem? ponieważ tekst w obrębie przycisku dotyka granicy. –

+0

@ShabbirDhangot Nie jestem pewien, gdzie dodajesz tekst - O ile mi wiadomo, 'ImageView' nie może przechowywać tekstu. Jeśli zmienisz 'ImageView' na' Button' i ustawisz 'android: background =" @ drawable/button "', tekst ustawiony w 'android: text' będzie wyśrodkowany. Możesz także spróbować ustawić atrybut 'android: padding' przycisku' ImageView'/'Button' – savanto

4

Przejdź do tego łącza i wygeneruj przycisk niestandardowego 3D.

http://angrytools.com/android/button/

buttonshape.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > 
<corners 
android:radius="30dp" 
/> 
<gradient 
android:gradientRadius="45" 
android:centerX="35%" 
android:centerY="50%" 
android:startColor="##4CAB0B" 
android:endColor="#004507" 
android:type="radial" 
/> 
<padding 
android:left="0dp" 
android:top="0dp" 
android:right="0dp" 
android:bottom="0dp" 
/> 
<size 
android:width="270dp" 
android:height="60dp" 
/> 
<stroke 
android:width="3dp" 
android:color="#0B8717" 
/> 
</shape> 

Kod Przycisk

<Button 
android:id="@+id/angry_btn" 

android:text="Button" 
android:textColor="#FFFFFF" 
android:textSize="30sp" 

android:layout_width="270dp" 
android:layout_height="60dp" 
android:background="@drawable/buttonshape" 
android:shadowColor="#A8A8A8" 
android:shadowDx="3" 
android:shadowDy="2" 
android:shadowRadius="8" 
/> 
Powiązane problemy