Android布局:创建一个圆形3D按钮?

时间:2014-08-18 17:35:45

标签: android android-layout geometry android-button

在我目前的Android布局中,我有5个透明的按钮。

我希望将它们的形状更改为完全圆形,并为它们添加一个3d效果,就像this question

的接受答案中的阴影一样

我该怎么办?

目前看:

enter image description here

Android xml布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
     android:background="@drawable/menubackground" >


    <Button
        android:id="@+id/btnSearchHomeDate"
         android:layout_width="270dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:layout_marginTop="15dp"
        android:background="@drawable/circle2"
        android:shadowColor="#A8A8A8"
        android:shadowDx="0"
        android:shadowDy="0"
        android:shadowRadius="10"
        android:text="Date"
        android:textSize="30sp" />

    <Button
        android:id="@+id/btnSearchHomeGame"
        android:layout_width="270dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:layout_marginTop="15dp"
        android:background="@drawable/circle2"
        android:shadowColor="#A8A8A8"
        android:shadowDx="0"
        android:shadowDy="0"
        android:shadowRadius="10"
        android:text="Game"
        android:textSize="30sp" />

    <Button
        android:id="@+id/btnSearchHomeMedValues"
        android:layout_width="270dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:layout_marginTop="15dp"
        android:background="@drawable/circle2"
        android:shadowColor="#A8A8A8"
        android:shadowDx="0"
        android:shadowDy="0"
        android:shadowRadius="5"
        android:text="Meditation Values"
        android:textSize="30sp" />

    <Button
        android:id="@+id/btnSearchHomeAttValues"
        android:layout_width="270dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:layout_marginTop="15dp"
        android:background="@drawable/circle2"
        android:shadowColor="#A8A8A8"
        android:shadowDx="0"
        android:shadowDy="0"
        android:shadowRadius="5"
        android:text="Attention Values"
        android:textSize="30sp" />

    <Button
        android:id="@+id/btnSearchHomeScore"
        android:layout_width="270dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:layout_marginTop="15dp"
        android:background="@drawable/circle2"
        android:shadowColor="#A8A8A8"
        android:shadowDx="0"
        android:shadowDy="0"
        android:shadowRadius="5"
        android:text="Score"
        android:textSize="30sp" />

</LinearLayout>

Circle2 drawable:

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape 
            android:shape="rectangle" >
            <solid android:color="#0000" />
            <stroke
                android:width="1dp"
                android:color="@android:color/black" />
            <padding
                android:left="0.9dp"
                android:right="0.9dp"
                android:top="0.9dp"
                android:bottom="0.9dp"/>
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item>
            <shape 
                android:shape="rectangle" >
                <solid android:color="#0000" />
                <stroke
                    android:width="1dp"
                    android:color="#4a6176" />
                <padding
                    android:left="10dp"
                    android:right="10dp"/>
                <corners android:radius="8dp" />
            </shape>
    </item>
</layer-list>

1 个答案:

答案 0 :(得分:5)

ok首先在drawable文件夹中创建一个btn_blue.xml文件

把这段代码放在上面

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#449def" />
            <stroke
                android:width="1dp"
                android:color="#2f6699" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#449def"
                android:endColor="#2f6699"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#2f6699" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

现在在按钮侧

    android:background="@drawable/btn_blue"

它将为您提供该视图

enter image description here

我希望它可以帮助你