如何重现官方Twitter应用程序中的这些按钮？

Question

如何在此屏幕截图中更新Twitter应用底部的两个按钮（更新和取消）？在创建Facebook消息时，您也可以在官方Facebook应用程序中看到类似的设计模式。它们是用9个补丁图像创建的还是比它更简单（设置背景颜色并以某种方式保持边框/状态按颜色变为橙色）。

如果Twitter开源他们的官方Android应用程序就像他们说的那样（但从未做过），这将非常简单。

Answer 1

好的，我找到了一种方法，可以在不使用9个补丁thanks to this question的情况下做一些非常相似的事情。

截图：

活动布局（仅底部）：

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0.75dp"
        android:background="@color/grey"   
        >
    </LinearLayout>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="60dip"
        android:orientation="horizontal"
        android:background="@color/NavyBlue"
        >
            <!-- Buttons -->
            <Button 
                android:id="@+id/btn_UpdateAlert" 
                android:text="Update Alert"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/button"
                android:textColor="@color/CarolinaBlue"
                android:textStyle="bold"
                android:layout_marginBottom="10dp"
                android:layout_marginTop="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="5dp"
                />
            <Button
                android:id="@+id/btn_Cancel"
                android:text="Cancel"   
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/button"
                android:textColor="@color/CarolinaBlue"
                android:textStyle="bold"
                android:layout_marginBottom="10dp"
                android:layout_marginTop="10dp" 
                android:layout_marginLeft="5dp"
                android:layout_marginRight="10dp"
                />
    </LinearLayout>

可绘制按钮：res / drawable / button.xml：

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

    <item android:state_pressed="true" >
        <shape>
            <gradient
                android:startColor="@color/yellow1"
                android:endColor="@color/yellow2"
                android:angle="270" />
            <stroke
                android:width="0.75dp"
                android:color="@color/grey" />
            <corners
                android:radius="10dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item android:state_focused="true" >
        <shape>
            <gradient
                android:endColor="@color/orange1"
                android:startColor="@color/orange2"
                android:angle="270" />
            <stroke
                android:width="0.75dp"
                android:color="@color/grey" />
            <corners
                android:radius="10dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item>        
        <shape>
            <gradient
                android:endColor="@color/NavyBlue"
                android:startColor="@color/NavyBlue"
                android:angle="270" />
            <stroke
                android:width="0.75dp"
                android:color="@color/grey" />
            <corners
                android:radius="10dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

Answer 2

您可以使用9补丁，也可以尝试使用Google在SDK中的指南http://developer.android.com/guide/topics/ui/custom-components.html创建自己的自定义组件。

它基本上只是指定XML标记来描述您希望自定义视图的外观。