1

境界線、グラデーションの背景、およびガラス効果を備えたカスタム ボタン グラフィックを作成する必要があります。

カスタム ボタン グラフィックス

9patch を使用したり、カスタム クラスをコーディングしたりしたくありません。xml (シェイプ、レイヤーなど) だけです。

ここでは、ボタンを描画するために使用する XML コードを示します (「ガラス効果」はまだ含まれていません!):

<layer-list>
</shape>

    <!-- item to draw the inner border and the background -->
    <item>
        <shape>
            <stroke
                android:width="4px"
                android:color="#5f87aa" />

            <corners android:radius="10dp" />

            <gradient
                android:angle="270"
                android:endColor="#034b89"
                android:startColor="#03437b" />
        </shape>
    </item>

    <!-- item to draw the outer border (transparent background) -->
    <item>
        <shape>

            <stroke
                android:width="2px"
                android:color="#212121" />

            <corners android:radius="10dp" />

        <solid android:color="#00000000" />
    </item>
</layer-list>

次のようになります。

カスタムボタン

では、ガラス効果も持たせるにはどうすればよいでしょうか。

4

1 に答える 1

2

私は自分自身の質問に答えます。私の問題には解決策がないようです。それを解決できるのはコード (および 9 パッチ) だけです。そこで、標準の「ボタン」を拡張した独自のボタンを作成します。

これは、ボタン グラフィックを再生成するときに輝きの効果を描画するために使用されるコードです。

//get the drawing rectangle (calculate inner/outer border width)
RectF sr = new RectF();

sr.set(cr.left + innerBorderScaledSize / 2f, 
       cr.top + innerBorderScaledSize / 2f, 
       cr.right - innerBorderScaledSize / 2f,
(cr.top - innerBorderScaledSize / 2f 
+ cr.bottom - innerBorderScaledSize / 2f) / 2f);

RectF cor = new RectF();
cor.set(sr.left, sr.top, sr.left + cornerScaledRaius, sr.top + cornerScaledRaius);

//here the interesting part: draw the shape   
Path path = new Path();
path.reset();
path.moveTo(sr.left, sr.bottom);
path.lineTo(sr.left, sr.top + cornerScaledRaius);
path.arcTo(cor, 180, 90);
cor.set(sr.right - cornerScaledRaius, sr.top, sr.right, sr.top + cornerScaledRaius);
path.arcTo(cor, 270, 90);
path.lineTo(sr.right, sr.bottom);
path.close();
canvas.drawPath(path, shinePaint);

したがって、ペイントを使用して、背景にカスタムの丸みを帯びた半透明の形状を描画するだけです

Paint shinePaint = new Paint();
shinePaint.setAntiAlias(true);
shinePaint.setStyle(Paint.Style.FILL);
shinePaint.setColor(0x16ffffff);

あなた

ボタン レイアウトの XML コードは次のとおりです。

<xxx.uicomponents.iconbutton.IconButton
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="@drawable/standard_button_background"
android:textColor="@drawable/standard_button_text"
android:textStyle="bold"
android:textSize="14dp"
android:text="Click me" />

この助けを願っています！

于 2013-01-15T14:28:21.640 に答える