Android UI-Material Design-Button風(fēng)格

概述

因?yàn)锳ndroid中Button是一個(gè)使用頻率非常高的一個(gè)組件,一般只要使用系統(tǒng)提供的就可以了。但是使用Button有一個(gè)非常大的限制,那就是要豐富Button的內(nèi)容比較麻煩,因?yàn)锽utton有固定的放置圖片等的套路。那么解決方法是什么呢,就是自定義一個(gè)布局,然后使其有Mateiral Design 一樣的Button的表現(xiàn)。

Button是如何做的

我們看下在Android24下的Button源碼。

public class Button extends TextView {
    public Button(Context context) {
        this(context, null);
    }

    public Button(Context context, AttributeSet attrs) {
        this(context, attrs, com.android.internal.R.attr.buttonStyle);
    }

    public Button(Context context, AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr, 0);
    }

    public Button(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    public CharSequence getAccessibilityClassName() {
        return Button.class.getName();
    }
}

上面是Button中的代碼,可以看到非常簡(jiǎn)單。Button只是繼承了TextView。從本質(zhì)上來(lái)講,Button就是一個(gè)TextView。然而我們知道TextView是沒有如Button一樣的Material Design效果的。
我們仔細(xì)看這段代碼,只有一個(gè)地方和Button有那么一點(diǎn)關(guān)系,那就是設(shè)置了一個(gè)com.android.internal.R.attr.buttonStyle的屬性,這就是整個(gè)問(wèn)題的關(guān)鍵。
那么現(xiàn)在要解決的問(wèn)題就是,如何給自己的控件設(shè)置這樣一個(gè)AttributeSet的問(wèn)題了。

在代碼中嘗試

首先我們想到的就是,能不能在代碼中創(chuàng)建的時(shí)候就設(shè)定這樣一個(gè)屬性。但是我們需要傳入AttributeSet這個(gè)屬性,這個(gè)屬性在代碼中獲取不到(我沒有找到方法,如果有,希望有大神告知)。

在XML中嘗試

首先呢,我們自定義一個(gè)布局

 <LinearLayout
        android:id="@+id/main_meeting_rl_create"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:orientation="horizontal"
        android:background="@color/colorPrimaryDark">

        <ImageView
            android:id="@+id/main_meeting_iv_create"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:src="@drawable/add" />

        <TextView
            android:id="@+id/main_meeting_tv_create"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:text="加入"
            android:textColor="#FFFFFF" />
    </LinearLayout>

在界面中我們沒有發(fā)現(xiàn)特殊的效果


image.png

那怎么辦呢,好像沒有辦法。但是我們知道,我們可以給android自定義屬性。
那么先來(lái)看下com.android.internal.R.attr.buttonStyle中到底是什么。查看源碼,我們看到一個(gè)XML布局文件

<style name="Widget.Button"> 
    <item name="android:background">@android:drawable/btn_default</item> 
    <item name="android:focusable">true</item> 
    <item name="android:clickable">true</item> 
    <item name="android:textSize">20sp</item> 
    <item name="android:textStyle">normal</item> 
    <item name="android:textColor">@android:color/button_text</item> 
    <item name="android:gravity">center_vertical|center_horizontal</item> 
</style> 

其系統(tǒng)自帶的Style的名稱是Widget.Button。所以我們也可以在attrs文件中寫一個(gè)style來(lái)繼承系統(tǒng)的Style。代碼如下

<style name="ButtonStyle" parent="Widget.AppCompat.Button"></style>

非常簡(jiǎn)單,我們不做其他事情。但是要實(shí)現(xiàn)Material Design效果,我們需要繼承AppCompat.Button這個(gè)Style。
然后就大功告成了,如下圖,就是非常標(biāo)準(zhǔn)的Material Design的效果了。


1.gif
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容