web-dev-qa-db-ja.com

BottomNavigationView-影と波紋の効果

BottomNavigationView が1週間前にリリースされたとき、私は本当に幸せでしたが、GoogleフォトAndroidアプリが表示します：

The shadow over Bottom Navigation Bar

Googleフォトメニュー項目をタップすると、アイコンとテキストの色（選択されている場合）のように青く着色された波紋効果を見ることができます。

Googleが提供するソリューションのみを実装すると、グレーの波紋効果の色が表示され、さらに悪いことに、bottomnavigationviewの背景色を変更しても表示されません（design:itemBackground="..."）。

誰かがそれを解決する方法を知っていますか？

androidshadowbottomnavigationview
14
Filipe Brito

私が達成したことは次のとおりです。

リップル効果+標高gif

GitHubのデモ を作成しました。

まず、最新のサポートライブラリcompile "com.Android.support:design:$SUPPORT_VERSION"を使用します

白い背景色Android:background="@Android:color/white"を設定した場合にのみ機能します

注app:itemBackgroundプロパティを使用する場合、または場合によってはdesign:itemBackground="..."である場合、リップル効果は消えますので、削除してください。

<Android.support.design.widget.BottomNavigationView
    Android:id="@+id/bottom_navigation"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_alignParentBottom="true"
    Android:background="@Android:color/white"
    app:elevation="16dp"
    app:itemIconTint="@drawable/nav_item_color_state"
    app:itemTextColor="@drawable/nav_item_color_state"
    app:menu="@menu/bottom_navigation_main" />

有効/無効状態の処理：

セレクタファイルを作成する必要があります。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_checked="true" Android:color="@color/colorPrimary" />
    <item Android:color="@Android:color/darker_gray"  />
</selector>

標準の灰色の波紋効果を変更する場合は、AppThemeのcolorControlHighlightプロパティを次のように変更します。

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="colorControlHighlight">@color/colorPrimaryRipple</item>
</style>

色付きの波紋には26％のアルファを使用します。

<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryRipple">#423F51B5</color>
39
luksha
  1. Shadowの場合、BottomNavigationViewで標高を使用しますapp:elevation="8dp"。
  2. リップル効果の場合は、app:itemBackgroundと設定Android:backgroundそのような白色にAndroid:background="@Android:color/white"

以下の完全な例：

<Android.support.design.widget.BottomNavigationView
        Android:id="@+id/bottom_navigation"
        Android:layout_width="match_parent"
        Android:layout_height="56dp"
        Android:layout_alignParentBottom="true"
        Android:background="@Android:color/white"
        Android:clickable="true"
        app:elevation="8dp"
        app:itemIconTint="@drawable/nav_item_color_state"
        app:itemTextColor="@drawable/nav_item_color_state"
        app:menu="@menu/my_navigation_items" />
15
Étienne Théodore

影を描くFrameLayoutと このグラジエントドローアブルxml ：

_public class DrawShadowFrameLayout extends FrameLayout {
    private Drawable mShadowDrawable;
    private final int mShadowElevation = 8;
    private int mWidth;
    private int mHeight;
    private boolean mShadowVisible = true;

    public DrawShadowFrameLayout(Context context) {
        this(context, null, 0);
    }

    public DrawShadowFrameLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public DrawShadowFrameLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mShadowDrawable = ContextCompat.getDrawable(getContext(), R.drawable.shadow);
        if (mShadowDrawable != null) {
            mShadowDrawable.setCallback(this);
        }
        setWillNotDraw(!mShadowVisible);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
        updateShadowBounds();
    }


    private void updateShadowBounds() {
        if (mShadowDrawable != null) {
            mShadowDrawable.setBounds(0, 0, mWidth, mShadowElevation);
        }
        ViewCompat.postInvalidateOnAnimation(this);
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        if (mShadowDrawable != null && mShadowVisible) {
            getBackground().setBounds(0, mShadowDrawable.getBounds().bottom, mWidth, mHeight);
            mShadowDrawable.draw(canvas);
        }
    }

    public void setShadowVisible(boolean shadowVisible) {
        setWillNotDraw(!mShadowVisible);
        updateShadowBounds();
    }

    int getShadowElevation() {
        return mShadowVisible ? mShadowElevation : 0;
    }

}
_

このレイアウト内にBottomNavigationViewを次のようにラップします。

_<DrawShadowFrameLayout>
  <BottomNavigationView />
</DrawShadowFrameLayout>
_

残念ながら、ビューの下にネイティブシャドウが描画されます。この上向きのシャドウを自分で模倣する必要があります。

DrawShadowFrameLayoutにも_Android:elevation="8dp"_を追加することを忘れないでください。

別のアプローチが拡張されていますBottomNavigationViewおよびdraw()をオーバーライドして同じことを行います。これは、ビュー階層でFrameLayoutを1つ失うのに役立ちます。

enter image description hereZoomed

1
Nikola Despotoski

これはデザインライブラリの問題であり、 here と報告されています。

この質問の影の部分はすでに解決されているため、サポートおよび設計ライブラリのGradle依存関係を25.0.1に更新する必要があります。

Googleのエンジニアは、波及効果の問題も修正されたと主張していますが、私はこれを適切に機能させることができませんでした。

BottomNavigationViewのXMLがどのように見えるかの例は、次のとおりです。

<Android.support.design.widget.BottomNavigationView
    Android:id="@+id/bottom_navigation"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_alignParentBottom="true"
    Android:background="@Android:color/black"
    app:itemBackground="@Android:color/white"
    app:itemIconTint="@drawable/bottom_navigation_selector"
    app:itemTextColor="@drawable/bottom_navigation_selector"
    app:menu="@menu/bottom_navigation_menu" />

問題にスターを付けて認知度を高めます。

1
Darwind

波及効果の問題の解決策を見つけました。

1）Android：backgroundおよびapp：itemBackgroundは正しく動作すると、BottomNavigationViewから両方が削除されます。

2）新しいFrameLayoutを作成し、BottomNavigationViewをFrameLayout内に配置します。

3）FrameLayoutのこれらのプロパティを変更します。

Android:layout_width="match_parent"
Android:layout_height="wrap_content"

4）最後に、ButtomNavigationViewの希望の色をAndroid：backgroundとしてFrameLayoutに追加します。

例：

<FrameLayout
 Android:id="@+id/buttomnavigation_container"
 Android:layout_width="match_parent"
 Android:layout_height="wrap_content"
 Android:background="@color/blue"><!--Background color for BNV-->
 <Android.support.design.widget.BottomNavigationView
    Android:id="@+id/nav_view"
    Android:layout_width="match_parent"
    Android:layout_height="56dp"
    app:itemIconTint="@color/bottom_navigation_colors"
    app:itemTextColor="@color/bottom_navigation_colors"
    app:labelVisibilityMode="labeled"
    app:menu="@menu/bottom_nav_menu"/>
</FrameLayout>

bottom_navigation_colors.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
   <item
        Android:state_checked="true"
        Android:color="#FFFFFF" />
   <item
       Android:state_checked="false"
       Android:color="#C7FFFFFF" />
</selector>

Image

0
Kh.Nomani

次のようなセレクターをボタンに追加することもできます。

Android:background="@drawable/my_selector"

/res/drawable/my_selector.xml：

<ripple Android:color="@color/my_favourite_color"
    xmlns:Android="http://schemas.Android.com/apk/res/Android" />

続きを読む： RippleDrawable

0
Kamran Ahmed

できることは、同じ効果を得るためにBottomNavigationViewをAppBarLayoutでラップするだけです。

このような

<com.google.Android.material.appbar.AppBarLayout
            app:layout_constraintBottom_toBottomOf="parent"
            Android:layout_width="match_parent"
            Android:background="@Android:color/white"
            Android:layout_height="wrap_content">

        <com.google.Android.material.bottomnavigation.BottomNavigationView
                Android:id="@+id/bottomNav"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"/>

</com.google.Android.material.appbar.AppBarLayout>
0
Varun Raj