還在用shape、selector，試試自定義圓角元件吧

在進行Android應用開發過程中，設計師經常會給應用中涉及的卡片和按鈕來個圓角。對於卡片，我們可以直接使用CardView等，對於圓角按鈕通常會shape、selector等xml的方式進行配置。

雖然shape、selector的xml寫法可以解決視覺問題，但是寫的很多，對於程式碼的簡潔性來說確實大打折扣，並且xml對於Apk包的大小來說也不是很友好。所以，我們不妨考慮試試自定義圓角元件的方式來解決問題。

基於按鈕的一些常用的屬性，我們提供瞭如下的一些屬性，比如，按鈕的圓角大小、圓角顏色、按鈕顏色、文字顏色、單獨設定4個角的圓角大小等。

<declare-styleable name="RectgleTextView">
        <attr name="shapeType" format="integer|enum">
            <enum name="rectangle" value="0" />
            <enum name="oval" value="1" />
            <enum name="LINE" value="2" />
        </attr>
        <attr name="totalRadius" format="dimension" />
        <attr name="radiusTopLeft" format="dimension" />
        <attr name="radiusBottomLeft" format="dimension" />
        <attr name="radiusTopRight" format="dimension" />
        <attr name="radiusBottomRight" format="dimension" />
        <attr name="topLeft" format="dimension" />
        <attr name="topRight" format="dimension" />
        <attr name="bottomLeft" format="dimension" />
        <attr name="bottomRight" format="dimension" />
        <attr name="strColor" format="color" />
        <attr name="strWidth" format="dimension" />
        <attr name="solidBac" format="color" />
        <attr name="textPadding" format="dimension" />
        <attr name="textLeft" format="string" />
        <attr name="textRight" format="string" />
        <attr name="iconColor" format="reference|color" />
        <attr name="textLeftColor" format="reference|color" />
        <attr name="textRightColor" format="reference|color" />
        <attr name="textLeftSize" format="dimension" />
        <attr name="textRightSize" format="dimension" />
        <attr name="textLeftStyle">
            <enum name="bold" value="1" />
            <enum name="italic" value="2" />
        </attr>
        <attr name="textRightStyle">
            <enum name="bold" value="1" />
            <enum name="italic" value="2" />
        </attr>
        <attr name="textCenterStyle">
            <enum name="bold" value="1" />
            <enum name="italic" value="2" />
        </attr>
        <attr name="autoMaxHeight" format="boolean" />
        <attr name="gradientOrientation">
            <enum name="top_bottom" value="0" />
            <enum name="tp_bl" value="1" />
            <enum name="right_left" value="2" />
            <enum name="br_tl" value="3" />
            <enum name="bottom_top" value="4" />
            <enum name="bl_tr" value="5" />
            <enum name="left_right" value="6" />
            <enum name="tl_br" value="7" />
        </attr>
        <attr name="startSolid" format="reference|color" />
        <attr name="centerSolid" format="reference|color" />
        <attr name="endSolid" format="reference|color" />
    </declare-styleable>

然後，我們建立一個自定義的View，RectgleTextView繼承自AppCompatTextView。然後，就是對我們自定義的屬性進行處理，具體不再解釋，可以看文末的原始碼。最後，只需要在佈局中引入我們自定義的元件即可，比如。

<com.avatar.demo.shape.RectgleTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:layout_gravity="center"
        android:paddingHorizontal="15dp"
        android:paddingVertical="8dp"
        android:text="實心圓角按鈕"
        android:textColor="@color/white"
        android:textSize="18sp"
        app:solidBac="@color/black"
        app:totalRadius="5dp" />

以下是部分效果圖。
在這裡插入圖片描述

附件：自定義圓角元件

還在用shape、selector，試試自定義圓角元件吧

相關文章