2016-10-29 15 views
8

Tôi thực sự hạnh phúc khi BottomNavigationView được phát hành cách đây một tuần nhưng tôi đang gặp phải một số vấn đề khiến tôi không thể giải quyết nó, như nhìn thấy bóng tối trên BottomNavigationView, giống như cách Google Photos Android App cho chúng ta thấy:BottomNavigationView - Hiệu ứng Shadow và Ripple

The shadow over Bottom Navigation Bar

Nếu chúng ta gõ vào một mục Photos menu của Google, chúng ta có thể nhìn thấy một hiệu ứng gợn được màu xanh như biểu tượng và màu chữ (khi chọn).

Việc triển khai giải pháp do Google cung cấp chỉ được hiển thị màu hiệu ứng gợn xám và tệ hơn, nó không được hiển thị khi chúng tôi thay đổi màu nền của chế độ xem dưới cùng (design:itemBackground="...").

Ai đó biết cách giải quyết?

Trả lời

0

Bạn có thể muốn thêm một chọn nút của bạn như:

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" /> 

Read more: RippleDrawable

0

Hãy FrameLayout này vẽ bóng và this gradient drawable 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); 
     init(); 
    } 

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

    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; 
    } 

} 

Quấn bạn BottomNavigationView bên này bố trí này như:

<DrawShadowFrameLayout> 
    <BottomNavigationView /> 
</DrawShadowFrameLayout> 

Thật không may, bóng mẹ đẻ được vẽ dưới xem, chúng ta phải bắt chước này lên bóng mình.

Đừng quên thêm android:elevation="8dp" cho số DrawShadowFrameLayout nữa.

Another approach is extendingBottomNavigationView và ghi đè draw() để thực hiện tương tự. Điều này sẽ giúp bạn mất một FrameLayout trong hệ thống phân cấp chế độ xem của mình.

enter image description here Zoomed

0

Đây là một vấn đề trong thư viện Thiết kế và đã được báo cáo here.

Phần bóng của câu hỏi này đã được giải quyết, vì vậy bạn nên cập nhật phụ thuộc Gradle của bạn thành 25.0.1 cho thư viện Hỗ trợ và thiết kế.

Các kỹ sư của Google khẳng định rằng vấn đề hiệu ứng gợn sóng cũng đã được khắc phục, nhưng tôi chưa thể thực hiện việc này đúng cách.

Một ví dụ về cách XML cho BottomNavigationView có thể trông giống như có thể được nhìn thấy ở đây:

<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" /> 

sao vấn đề để thêm nhận thức với nó.

20

Dưới đây là những gì tôi đã đạt được:

Ripple effect + Elevation gif

Tôi đã tạo một demo on GitHub để giúp bạn.

Trước hết sử dụng thư viện hỗ trợ mới nhất compile "com.android.support:design:$SUPPORT_VERSION"

Nó chỉ hoạt động nếu bạn thiết lập màu nền trắng android:background="@android:color/white"

Note rằng gợn hiệu ứng sẽ biến mất nếu bạn sử dụng app:itemBackground tài sản hoặc trong trường hợp của bạn đó là design:itemBackground="...", vì vậy chỉ cần loại bỏ nó.

<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" /> 

Xử bật/tắt trạng thái:

Bạn cần phải tạo tập tin chọn:

<?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> 

Nếu bạn muốn thay đổi tiêu chuẩn màu xám thay đổi hiệu ứng gợn colorControlHighlight proproperty trong AppTheme nên có vẻ như sau:

<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> 

Sử dụng alpha 26% cho các gợn sóng màu.

<color name="colorPrimary">#3F51B5</color> 
<color name="colorPrimaryRipple">#423F51B5</color> 
+0

Đúng là bóng chỉ xuất hiện khi nền là màu trắng. Thật là ngu xuẩn. Bất kỳ ý tưởng tại sao? – WindRider

+0

Tôi đồng ý nó rất thất vọng và không có một đầu mối tại sao. – luksha

+0

Hi @ luksha Tôi làm chính xác những gì bạn nói, nhưng tôi vẫn không làm việc: (đáng ngạc nhiên, nếu tôi đặt BottomNavigationBar trên đầu trang của màn hình, Nó nâng cao biên giới dưới cùng của giao diện điều hướng. Tuy nhiên, khi tôi đặt nó ở dưới cùng của màn hình, độ cao dừng hoạt động –

6
  1. Đối với độ cao sử dụng Shadow trong BottomNavigationView bạn app:elevation="8dp".
  2. Và đối với Ripples Effect bạn chỉ cần loại bỏ app:itemBackground và thiết lập android:background để màu trắng như thế android:background="@android:color/white"

Full ví dụ dưới đây:

<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" /> 
Các vấn đề liên quan