studio語法 - android ui




具有不同顏色的標準Android按鈕 (12)

我想稍微更改標準Android按鈕的顏色以便更好地匹配客戶的品牌。

到目前為止,我發現最好的方法是將Button的drawable更改為位於res/drawable/red_button.xml的以下drawable:

<?xml version="1.0" encoding="utf-8"?>    
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/red_button_pressed" />
    <item android:state_focused="true" android:drawable="@drawable/red_button_focus" />
    <item android:drawable="@drawable/red_button_rest" />
</selector>

但是這樣做需要我為每個我想要定制的按鈕創建三個不同的drawable(一個用於靜態按鈕,一個用於焦點,一個用於按下時)。 這似乎比我需要的更複雜和非干燥。

我真正想要做的是對按鈕應用某種顏色轉換。 有沒有比改變按鈕顏色更簡單的方法?


DroidUX組件庫有一個ColorButton控件,其顏色可以通過xml定義和運行時編程方式輕鬆更改,所以如果您的應用程序允許,您甚至可以讓用戶設置按鈕的顏色/主題。


與任何Android版本一起工作的最短解決方案:

<Button
     app:backgroundTint="@color/my_color"

注意事項/要求

  • 使用app:命名空間而不是 android:命名空間!
  • appcompat版本> 24.2.0

    依賴項{compile'c​​om.android.support:appcompat-v7:25.3.1'}

說明


以這種方式使用它:

buttonOBJ.getBackground().setColorFilter(Color.parseColor("#YOUR_HEX_COLOR_CODE"), PorterDuff.Mode.MULTIPLY);

你可以設置你的按鈕的主題

<style name="AppTheme.ButtonBlue" parent="Widget.AppCompat.Button.Colored">
 <item name="colorButtonNormal">@color/HEXColor</item>
 <item name="android:textColor">@color/HEXColor</item>
</style>

<Button>使用android:background="#33b5e5" 。 或更好的android:background="@color/navig_button"


如果您使用XML製作顏色按鈕,您可以通過在單獨的文件中指定焦點和按下狀態並重新使用它們,使代碼變得更簡潔。 我的綠色按鈕如下所示:

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

    <item android:state_focused="true" android:drawable="@drawable/button_focused"/>
    <item android:state_pressed="true" android:drawable="@drawable/button_pressed"/>

    <item>
        <shape>
            <gradient android:startColor="#ff00ff00" android:endColor="#bb00ff00" android:angle="270" />
            <stroke android:width="1dp" android:color="#bb00ff00" />
            <corners android:radius="3dp" />
            <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
        </shape>
    </item>

</selector>

您現在也可以使用帶有backgroundTint屬性的appcompat-v7的AppCompatButton

<android.support.v7.widget.AppCompatButton
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:backgroundTint="#ffaa00"/>

我做一個不同風格的按鈕的方式很好,就是對Button對象進行子類化並應用一個濾鏡。 這也通過對按鈕應用一個alpha來處理啟用和禁用狀態。

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Color;
import android.graphics.ColorFilter;
import android.graphics.LightingColorFilter;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.LayerDrawable;
import android.os.Build;
import android.util.AttributeSet;
import android.widget.Button;

public class DimmableButton extends Button {

    public DimmableButton(Context context) {
        super(context);
    }

    public DimmableButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public DimmableButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @SuppressWarnings("deprecation")
    @Override
    public void setBackgroundDrawable(Drawable d) {
        // Replace the original background drawable (e.g. image) with a LayerDrawable that
        // contains the original drawable.
        DimmableButtonBackgroundDrawable layer = new DimmableButtonBackgroundDrawable(d);
        super.setBackgroundDrawable(layer);
    }

    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    @Override
    public void setBackground(Drawable d) {
        // Replace the original background drawable (e.g. image) with a LayerDrawable that
        // contains the original drawable.
        DimmableButtonBackgroundDrawable layer = new DimmableButtonBackgroundDrawable(d);
        super.setBackground(layer);
    }

    /**
     * The stateful LayerDrawable used by this button.
     */
    protected class DimmableButtonBackgroundDrawable extends LayerDrawable {

        // The color filter to apply when the button is pressed
        protected ColorFilter _pressedFilter = new LightingColorFilter(Color.LTGRAY, 1);
        // Alpha value when the button is disabled
        protected int _disabledAlpha = 100;
        // Alpha value when the button is enabled
        protected int _fullAlpha = 255;

        public DimmableButtonBackgroundDrawable(Drawable d) {
            super(new Drawable[] { d });
        }

        @Override
        protected boolean onStateChange(int[] states) {
            boolean enabled = false;
            boolean pressed = false;

            for (int state : states) {
                if (state == android.R.attr.state_enabled)
                    enabled = true;
                else if (state == android.R.attr.state_pressed)
                    pressed = true;
            }

            mutate();
            if (enabled && pressed) {
                setColorFilter(_pressedFilter);
            } else if (!enabled) {
                setColorFilter(null);
                setAlpha(_disabledAlpha);
            } else {
                setColorFilter(null);
                setAlpha(_fullAlpha);
            }

            invalidateSelf();

            return super.onStateChange(states);
        }

        @Override
        public boolean isStateful() {
            return true;
        }
    }

}

我正在使用這種方法

style.xml

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:colorPrimaryDark">#413152</item>
    <item name="android:colorPrimary">#534364</item>
    <item name="android:colorAccent">#534364</item>
    <item name="android:buttonStyle">@style/MyButtonStyle</item>
</style>

<style name="MyButtonStyle" parent="Widget.AppCompat.Button.Colored">
    <item name="android:colorButtonNormal">#534364</item>
    <item name="android:textColor">#ffffff</item>
</style>

正如你從上面看到的,我為我的按鈕使用了自定義樣式。 按鈕顏色對應於重音顏色。 我發現這比設置android:background更好,因為我不會失去Google提供的連鎖反應。


我發現這一切都可以在一個文件中很容易地完成。 將如下代碼放在名為custom_button.xml的文件中,然後在按鈕視圖中設置background="@drawable/custom_button"

<?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="3dp"
                android:color="@color/grey05" />
            <corners
                android:radius="3dp" />
            <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/orange4"
                android:startColor="@color/orange5"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="@color/grey05" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

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

繼Tomasz的回答之後,您還可以使用PorterDuff乘法模式以編程方式設置整個按鈕的陰影。 這將改變按鈕的顏色,而不僅僅是色調。

如果您從一個標準的灰色陰影按鈕開始:

button.getBackground().setColorFilter(0xFFFF0000, PorterDuff.Mode.MULTIPLY);

會給你一個紅色的陰影按鈕,

button.getBackground().setColorFilter(0xFF00FF00, PorterDuff.Mode.MULTIPLY);

會給你一個綠色的陰影按鈕等,其中第一個值是十六進制格式的顏色。

它通過將當前按鈕顏色值乘以您的顏色值來工作。 我相信你可以用這些模式做更多的事情。


這是我的解決方案, 從API 15開始可以完美工作。 此解決方案保留了所有默認的按鈕單擊效果,如材質RippleEffect 。 我沒有在較低的API上測試它,但它應該可以工作。

你需要做的是:

1)創建只更改colorAccent的樣式:

<style name="Facebook.Button" parent="ThemeOverlay.AppCompat">
    <item name="colorAccent">@color/com_facebook_blue</item>
</style>

我建議使用ThemeOverlay.AppCompat或主AppTheme作為父母,以保留其餘的樣式。

2)將這兩行添加到您的button小部件:

style="@style/Widget.AppCompat.Button.Colored"
android:theme="@style/Facebook.Button"

有時,您的新colorAccent未在Android Studio預覽中顯示,但當您在手機上啟動應用程序時,顏色將會更改。

示例按鈕小部件

<Button
    android:id="@+id/sign_in_with_facebook"
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="@string/sign_in_facebook"
    android:textColor="@android:color/white"
    android:theme="@style/Facebook.Button" />





android-layout