web-dev-qa-db-ja.com

事前ロリポップのマテリアルデザインの標高を実装する方法

Googleは、Lollipopで標高効果を表示する素敵な方法をいくつか示しました here 。

Android:elevation="2dp"

ボタンの場合、

Android:stateListAnimator="@anim/button_state_list_animator"

サードパーティのライブラリなしでLollipop以前のバージョンのエレベーション効果をどのように模倣できますか？

androidmaterial-designandroid-appcompatandroid-elevation
40
AndroidDev

公式の方法で、事前ロリポップの標高を模倣できます。

私は同じ効果を達成します、

  Android:background="@Android:drawable/dialog_holo_light_frame"

テスト済みの出力：

enter image description here

リファレンス- https://stackoverflow.com/a/25683148/3879847

ユーザー@Repoに感謝します。

更新：このドロアブルの色を変更したい場合は、以下の@Irfanの回答を試してください↓

https://stackoverflow.com/a/40815944/3879847

72
Ranjith Kumar

公式の方法では、ロリポップ以前の標高を模倣することはできません。

いくつかのドロアブルを使用して、コンポーネントにシャドウを作成できます。 Googleは、たとえばCardViewでこの方法を使用します。

ViewCompat.setElevation(View, int)は現在、API21 +でのみシャドウを作成します。コードビハインドをチェックすると、このメソッドは以下を呼び出します。

API 21 +：

  @Override
    public void setElevation(View view, float elevation) {
        ViewCompatLollipop.setElevation(view, elevation);
    }

API <21

@Override
public void setElevation(View view, float elevation) {

}
22
Gabriele Mariotti

カードビューを使用してハッキングできます。

<Android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/btnGetStuff"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    card_view:cardCornerRadius="4dp"
    card_view:cardBackgroundColor="@color/accent"
    >
    <!-- you could also add image view here for icon etc. -->
    <TextView
        Android:id="@+id/txtGetStuff"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:textSize="@dimen/textSize_small"
        Android:textColor="@color/primary_light"
        Android:freezesText="true"
        Android:text="Get Stuff"
        Android:maxWidth="120dp"
        Android:singleLine="true"
        Android:ellipsize="end"
        Android:maxLines="1"
        /></Android.support.v7.widget.CardView>

または、このサードパーティライブラリの使用をご覧ください： https://github.com/rey5137/Material （ボタンに関するwiki記事 https://github.com/rey5137/Material/wiki/Button ）

13
Steven Mark Ford

ダイナミックなアニメーションシャドウをLollipop以前のデバイスにもたらすには、次のことを行う必要があります。

  1. ビューの黒い形状をビットマップに描画します
  2. 標高を半径として使用して、その形状をぼかします。それにはRenderScriptを使用します。 Lollipopが使用している方法とは異なりますが、良い結果が得られ、既存のビューに簡単に追加できます。
  3. ビューの下にそのぼやけた形状を描画します。おそらく、最適な場所はdrawChildメソッドです。また、setElevationとsetTranslationZをオーバーライドし、レイアウトで子ビューの描画をオーバーライドし、クリップからパディングをオフにし、ステートアニメーターを実装する必要があります。

enter image description here

それは多くの作業ですが、応答アニメーションで最高の外観の動的な影を提供します。サードパーティのライブラリなしでそれを達成したい理由がわかりません。必要に応じて、Carbonのソースを分析し、アプリに含める部分を移植できます。

シャドウ生成

private static void blurRenderScript(Bitmap bitmap, float radius) {
    Allocation inAllocation = Allocation.createFromBitmap(renderScript, bitmap,
            Allocation.MipmapControl.MIPMAP_NONE, Allocation.USAGE_SCRIPT);
    Allocation outAllocation = Allocation.createTyped(renderScript, inAllocation.getType());

    blurShader.setRadius(radius);
    blurShader.setInput(inAllocation);
    blurShader.forEach(outAllocation);

    outAllocation.copyTo(bitmap);
}

public static Shadow generateShadow(View view, float elevation) {
    if (!software && renderScript == null) {
        try {
            renderScript = RenderScript.create(view.getContext());
            blurShader = ScriptIntrinsicBlur.create(renderScript, Element.U8_4(renderScript));
        } catch (RSRuntimeException ignore) {
            software = true;
        }
    }

    ShadowView shadowView = (ShadowView) view;
    CornerView cornerView = (CornerView) view;
    boolean isRect = shadowView.getShadowShape() == ShadowShape.RECT ||
            shadowView.getShadowShape() == ShadowShape.ROUND_RECT && cornerView.getCornerRadius() < view.getContext().getResources().getDimension(R.dimen.carbon_1dip) * 2.5;

    int e = (int) Math.ceil(elevation);
    Bitmap bitmap;
    if (isRect) {
        bitmap = Bitmap.createBitmap(e * 4 + 1, e * 4 + 1, Bitmap.Config.ARGB_8888);

        Canvas shadowCanvas = new Canvas(bitmap);
        Paint.setStyle(Paint.Style.FILL);
        Paint.setColor(0xff000000);

        shadowCanvas.drawRect(e, e, e * 3 + 1, e * 3 + 1, Paint);

        blur(bitmap, elevation);

        return new NinePatchShadow(bitmap, elevation);
    } else {
        bitmap = Bitmap.createBitmap((int) (view.getWidth() / SHADOW_SCALE + e * 2), (int) (view.getHeight() / SHADOW_SCALE + e * 2), Bitmap.Config.ARGB_8888);

        Canvas shadowCanvas = new Canvas(bitmap);
        Paint.setStyle(Paint.Style.FILL);
        Paint.setColor(0xff000000);

        if (shadowView.getShadowShape() == ShadowShape.ROUND_RECT) {
            roundRect.set(e, e, (int) (view.getWidth() / SHADOW_SCALE - e), (int) (view.getHeight() / SHADOW_SCALE - e));
            shadowCanvas.drawRoundRect(roundRect, e, e, Paint);
        } else {
            int r = (int) (view.getWidth() / 2 / SHADOW_SCALE);
            shadowCanvas.drawCircle(r + e, r + e, r, Paint);
        }

        blur(bitmap, elevation);

        return new Shadow(bitmap, elevation);
    }
}

影付きのビューを描く

@Override
protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
    if (!child.isShown())
        return super.drawChild(canvas, child, drawingTime);

    if (!isInEditMode() && child instanceof ShadowView && Build.VERSION.SDK_INT <= Build.VERSION_CODES.KitKat_WATCH) {
        ShadowView shadowView = (ShadowView) child;
        Shadow shadow = shadowView.getShadow();
        if (shadow != null) {
            Paint.setAlpha((int) (ShadowGenerator.ALPHA * ViewHelper.getAlpha(child)));

            float childElevation = shadowView.getElevation() + shadowView.getTranslationZ();

            float[] childLocation = new float[]{(child.getLeft() + child.getRight()) / 2, (child.getTop() + child.getBottom()) / 2};
            Matrix matrix = carbon.internal.ViewHelper.getMatrix(child);
            matrix.mapPoints(childLocation);

            int[] location = new int[2];
            getLocationOnScreen(location);
            float x = childLocation[0] + location[0];
            float y = childLocation[1] + location[1];
            x -= getRootView().getWidth() / 2;
            y += getRootView().getHeight() / 2;   // looks Nice
            float length = (float) Math.sqrt(x * x + y * y);

            int saveCount = canvas.save(Canvas.MATRIX_SAVE_FLAG);
            canvas.translate(
                    x / length * childElevation / 2,
                    y / length * childElevation / 2);
            canvas.translate(
                    child.getLeft(),
                    child.getTop());

            canvas.concat(matrix);
            canvas.scale(ShadowGenerator.SHADOW_SCALE, ShadowGenerator.SHADOW_SCALE);
            shadow.draw(canvas, child, Paint);
            canvas.restoreToCount(saveCount);
        }
    }

    if (child instanceof RippleView) {
        RippleView rippleView = (RippleView) child;
        RippleDrawable rippleDrawable = rippleView.getRippleDrawable();
        if (rippleDrawable != null && rippleDrawable.getStyle() == RippleDrawable.Style.Borderless) {
            int saveCount = canvas.save(Canvas.MATRIX_SAVE_FLAG);
            canvas.translate(
                    child.getLeft(),
                    child.getTop());
            rippleDrawable.draw(canvas);
            canvas.restoreToCount(saveCount);
        }
    }

    return super.drawChild(canvas, child, drawingTime);
}

Lollipop以前にバックポートされた高度API

private float elevation = 0;
private float translationZ = 0;
private Shadow shadow;

@Override
public float getElevation() {
    return elevation;
}

public synchronized void setElevation(float elevation) {
    if (elevation == this.elevation)
        return;
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Lollipop)
        super.setElevation(elevation);
    this.elevation = elevation;
    if (getParent() != null)
        ((View) getParent()).postInvalidate();
}

@Override
public float getTranslationZ() {
    return translationZ;
}

public synchronized void setTranslationZ(float translationZ) {
    if (translationZ == this.translationZ)
        return;
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Lollipop)
        super.setTranslationZ(translationZ);
    this.translationZ = translationZ;
    if (getParent() != null)
        ((View) getParent()).postInvalidate();
}

@Override
public ShadowShape getShadowShape() {
    if (cornerRadius == getWidth() / 2 && getWidth() == getHeight())
        return ShadowShape.CIRCLE;
    if (cornerRadius > 0)
        return ShadowShape.ROUND_RECT;
    return ShadowShape.RECT;
}

@Override
public void setEnabled(boolean enabled) {
    super.setEnabled(enabled);
    setTranslationZ(enabled ? 0 : -elevation);
}

@Override
public Shadow getShadow() {
    float elevation = getElevation() + getTranslationZ();
    if (elevation >= 0.01f && getWidth() > 0 && getHeight() > 0) {
        if (shadow == null || shadow.elevation != elevation)
            shadow = ShadowGenerator.generateShadow(this, elevation);
        return shadow;
    }
    return null;
}

@Override
public void invalidateShadow() {
    shadow = null;
    if (getParent() != null && getParent() instanceof View)
        ((View) getParent()).postInvalidate();
}
8
Zielony

9-patch イメージを作成します。イメージにストレッチ可能なパッチを定義し、その周囲に影を付けます。

enter image description here

この9パッチ画像をボタンの背景としてパディングで追加し、影が見えるようにします。

事前定義された9パッチ（.9.png）イメージを見つけることができます here または here を選択、カスタマイズして、プロジェクトのドロアブルにコピーできます。

8
random

@Ranjith Kumarの回答を追加するには

描画可能に背景色を追加するには（ボタンの背景色の例）、プログラムで描画可能にする必要があります。

最初にドロアブルを取得します

Drawable drawable = getResources().getDrawable(Android.R.drawable.dialog_holo_light_frame);

色を設定する

drawable.setColorFilter(new PorterDuffColorFilter(getResources().getColor(R.color.color_primary), PorterDuff.Mode.MULTIPLY));

次に、ビューに設定します。

view.setBackgroundDrawable(drawable);

誰かが検索する場合。

6
Irfan

uは、このようなドロウアブルを宣言することで簡単にシミュレートできます-

shadow.xml

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

    >

    <gradient Android:type="linear" Android:angle="270" Android:startColor="#b6b6b6" Android:endColor="#ffffff"/>


</shape>

そして、それをメインxmlで使用します-

 Android:background="@drawable/shadow"
1
Sniper