2014-04-22 5 views
9


내가 여기에 둥근 버튼에보기에 유사한 버튼을 만들려고했다 - 나는 배치하여 그것을했다 이
http://livetools.uiparade.com/index.html
(그것이 몰입 섹션 내에처럼 모든 버튼의 모양을) 어떻게 같은 것을 달성 할 수

enter image description here

는 (I 수는 일단 내 코드를 업로드) -이 결과를 가지고 있지만 같은
을 결국 didnt는 원형 백그라운드에서 버튼
그들을주는 약간의 그라데이션 모두 보기?의 3D 모양의 버튼을 만들기 안드로이드

+0

친절한 알림 ([그들은 여전히 ​​라운드 가지고하지 않았기 때문에 자동 폐쇄 알림을 구현하기] (http://meta.stackexchange.com/q/93842/308440)) :이 퀘스트 (몇 개월 전) 폐쇄되었습니다. 그것을 유효하게 만들 수 있습니까? –

답변

24

이 코드를 사용해보십시오. 나는 보이는 이미지를 만들 수 있어요 다음 코드를 사용하여, 링크 첫 번째 버튼과 유사이

Android xml button

있다. 핵심은 <layer-list>을 사용하여 원하는 효과를 내기 위해 하나 이상의 다른 도형을 겹쳐서 사용하는 것입니다.

파일 : 고해상도 메인 레이아웃에서/드로어 블/사진 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> 

,이 이미지를 표시 할 것 ImageView 추가 할 수 있습니다.

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

당신은 자바 코드에서에게 OnClickListener를 제공함으로써 ImageView 클릭 할 수 있습니다.

+0

방금 ​​50 점을 얻었습니다 ..! =) – crazyPixel

+0

좋은 형제. 하지만 한 가지 질문이 있습니다. 이 모양으로 콘텐츠 채우기를 제공하는 방법은 무엇입니까? 버튼 내의 텍스트가 테두리를 터치하기 때문입니다. –

+0

@ShabbirDhangot 텍스트를 추가하는 위치를 모르겠습니다. 'ImageView'가 텍스트를 저장할 수 없다는 것을 알고있는 한. 'ImageView'를'Button'으로 변경하고'android : background = "@ drawable/button"'을 설정하면'android : text'에 설정 한 모든 텍스트가 가운데에 배치됩니다. 'ImageView' /'Button'의'android : padding' 속성을 설정할 수도 있습니다 – savanto

4

이 링크로 이동하여 맞춤 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> 

버튼 코드

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