2016-10-29 9 views
8

मैं वास्तव में खुश था जब BottomNavigationView एक सप्ताह पहले जारी किया गया था, लेकिन मुझे कुछ समस्याएं आ रही हैं जो मुझे इसे हल करने में असमर्थ बनाती हैं, जैसे कि BottomNavigationView पर एक छाया देखने के लिए, जैसे Google फ़ोटो Android एप्लिकेशन हमें पता चलता है:BottomNavigationView - छाया और लहर प्रभाव

The shadow over Bottom Navigation Bar

यदि हम एक Google फ़ोटो मेनू आइटम पर टैप करते हैं, हम एक लहर प्रभाव जो आइकन और पाठ रंग (जब चयनित) की तरह नीले रंग रंगा हुआ है देख सकते हैं।

Google द्वारा प्रदान किए गए समाधान को लागू करने के लिए केवल एक ग्रे रिपल प्रभाव रंग प्रदर्शित होता है, और इससे भी बदतर, यह तब प्रदर्शित नहीं होता है जब हम bottomnavigationview (design:itemBackground="...") के पृष्ठभूमि रंग को बदलते हैं।

कोई जानता है कि इसे कैसे हल किया जाए?

उत्तर

0

आप की तरह अपने बटन के लिए एक चयनकर्ता जोड़ सकते हैं:

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

इस FrameLayout ले लो जो छाया खींचता है और 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; 
    } 

} 

लपेटें अपने BottomNavigationView इस इस लेआउट की तरह अंदर:

<DrawShadowFrameLayout> 
    <BottomNavigationView /> 
</DrawShadowFrameLayout> 

दुर्भाग्य से, देशी छाया देखने के तहत तैयार की है, हम इस नकल करने के लिए है ऊपर की ओर अपने आप को शैडो।

DrawShadowFrameLayout के लिए भी android:elevation="8dp" जोड़ने के लिए मत भूलना।

Another approach is extendingBottomNavigationView और ऐसा करने के लिए draw() ओवरराइड करना। इससे आपको अपने दृश्य पदानुक्रम में FrameLayout खोने में मदद मिलेगी।

enter image description here Zoomed

0

इस डिजाइन पुस्तकालय में एक मुद्दा है और here सूचना दी गई है।

इस प्रश्न का छाया हिस्सा पहले ही हल हो चुका है, इसलिए आपको समर्थन और डिज़ाइन लाइब्रेरी के लिए अपनी ग्राडल निर्भरताओं को 25.0.1 पर अपडेट करना चाहिए।

Google इंजीनियरों जोर देते हैं कि लहर प्रभाव समस्या भी तय की गई है, लेकिन मैं इसे ठीक से काम करने में सक्षम नहीं हूं।

कैसे BottomNavigationView के लिए एक्सएमएल की तरह यहाँ देखा जा सकता दिखाई दे सकता है पर एक उदाहरण:

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

स्टार इसे करने के लिए जागरूकता को जोड़ने के लिए इस मुद्दे को।

20

यहाँ मैं क्या हासिल कर लिया है है:

Ripple effect + Elevation gif

मैं एक demo on 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 proproperty इतना चाहते हैं यह निम्न जैसा दिखता है:

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

यह सच छाया प्रतीत होता है कि केवल जब पृष्ठभूमि सफेद है। यह तो बेवकूफी है। कोई विचार क्यों? – WindRider

+0

मैं मानता हूं कि यह बहुत निराश है और इसका कोई संकेत नहीं है। – luksha

+0

हाय @ लुकशा मैं वही करता हूं जो आप कहते हैं, लेकिन मैं अभी तक काम नहीं कर रहा हूं :(आश्चर्य की बात है कि, यदि मैं स्क्रीन के शीर्ष पर BottomNavigationBar डालता हूं, तो यह नेविगेशन व्यू की निचली सीमा को बढ़ाता है। हालांकि, जब मैं इसे नीचे के नीचे रखता हूं स्क्रीन, ऊंचाई काम करना बंद कर देता है –

6
    छाया उपयोग उन्नयन के लिए अपने BottomNavigationView app:elevation="8dp" में
  1. और लहर प्रभाव के लिए आप सिर्फ app:itemBackground हटाने की जरूरत है और कहा कि android:background="@android:color/white"

पूर्ण नीचे दिए गए उदाहरण की तरह सफेद रंग के लिए android:background सेट:

<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" /> 
संबंधित मुद्दे