2017-01-02 10 views
14

मैं एक एंड्रॉइड ऐप पर काम कर रहा हूं और डिज़ाइन लाइब्रेरी से BottomNavigationView लागू कर रहा हूं। मैंने कई उदाहरण देखे हैं और मैं यह नहीं समझ सकता कि मेरे लेआउट में क्या गलत है। BottomNavigationView पूर्ण चौड़ाई के रूप में प्रदर्शित नहीं होता है।BottomNavigationView पूर्ण चौड़ाई नहीं है

एक और मुद्दा स्टेटस बार रंग लागू नहीं हो रहा है।

enter image description here

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 

<!-- Include the toolbar --> 
<include layout="@layout/toolbar"/> 

<RelativeLayout android:id="@+id/fragment_container" 
      xmlns:android="http://schemas.android.com/apk/res/android" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent"/> 


<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:layout_gravity="bottom" 
    app:itemBackground="@color/colorPrimary" 
    app:itemIconTint="@android:color/white" 
    app:itemTextColor="@android:color/white" 
    app:menu="@menu/bottom_navigation_main"/> 

</android.support.design.widget.CoordinatorLayout> 

toolbar.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.AppBarLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:theme="@style/AppTheme.AppBarOverlay"> 

<android.support.v7.widget.Toolbar 
    android:id="@+id/toolbar" 
    android:layout_width="match_parent" 
    android:layout_height="?attr/actionBarSize" 
    android:background="?attr/colorPrimary" 
    app:popupTheme="@style/AppTheme.PopupOverlay"/> 

</android.support.design.widget.AppBarLayout> 

संपादित: स्थिति के लिए जोड़ा समाधान रंग सेट नहीं किया जा रहा

android:fitsSystemWindows="true"

(colorPrimaryDark) status bar color not working on android v21?

उत्तर

39

BottomNavigationView पूरी चौड़ाई के रूप में प्रदर्शित नहीं है।

ऐसा नहीं माना जाता है।

design guidelines के अनुसार एक क्रिया की चौड़ाई 80 डीपी और 168 डीपी के बीच भिन्न हो सकती है। आपके द्वारा परिभाषित किए गए दो कार्य क्षैतिज रूप से पूरे क्षेत्र को भरने के लिए पर्याप्त नहीं हैं।
(एक तरफ ध्यान दें के रूप में, यह भी दिशा निर्देशों के अनुसार दृश्य तीन और पांच कार्यों के बीच में होना चाहिए।)

आप BottomNavigationView के पीछे जगह को भरने के लिए चाहते हैं, तो आप दृश्य की पृष्ठभूमि का रंग सेट कर सकते हैं होने के लिए

<android.support.design.widget.BottomNavigationView 
    android:background="@color/bottom_view_color" 
    app:itemBackground="@color/bottom_view_color" 

    // .... /> 
+0

निचला नौसेना Google Play न्यूस्टैंड में पूर्ण चौड़ाई लगता है, इसलिए मैंने सोचा कि मेरे लेआउट के साथ कोई समस्या थी। मैं जल्द ही एक तीसरा मेनू आइटम जोड़ने की योजना बना रहा हूं। – midhunhk

+0

@ मिधुनह हां यह संभव है। मैंने इसके लिए समाधान जोड़ा। लेकिन एंडी सही है, आपको डिजाइन चश्मा का पालन करना चाहिए। –

5

मैं केवल

android:background="@color/bottom_view_color" 

उपयोग करने के लिए यह पूरी चौड़ाई के रूप में बार प्रदर्शित करेगा और जब उपयोगकर्ता मैं क्लिक करता है यह असर रखेंगे सुझाव देते हैं: आइटम के रंग जैसा ही tems।

यदि आप app: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:layout_gravity="bottom" 
    android:background="@color/colorPrimary" 
    app:itemIconTint="@android:color/white" 
    app:itemTextColor="@android:color/white" 
    app:menu="@menu/bottom_navigation_main"/> 
5

कि संभव है में। लेकिन यह default design specs को दोबारा शुरू करेगा, और मैं आपको default design specs के साथ जाने का सुझाव दूंगा।


अब मेरी समाधान के लिए आ रहा है ...

dimens.xml में आयाम नीचे परिभाषित करें।ये आयाम values, values-large, values-large-land और 600dp1000dp या values-large, values-large-land में बढ़ाया जा सकता है, यदि टैबलेट में आप इस परिवर्तन को नहीं देख रहे हैं।

<resources xmlns:tools="http://schemas.android.com/tools"> 
    <dimen name="design_bottom_navigation_item_max_width" tools:override="true">600dp</dimen> 
    <dimen name="design_bottom_navigation_active_item_max_width" tools:override="true">600dp</dimen> 
</resources> 

और यह है !!! परिणाम enter image description here


यह एक मैजिक नहीं है।

क्यों आयाम जैसे नाम और मान के साथ जोड़ दिया गया है (जो वर्ग BottomNavigationView में मेनू का प्रतिनिधित्व करते थे जा रहा है) 600dp

दोनों आयाम BottomNavigationMenuView.java द्वारा इस्तेमाल किया जा रहा है। नीचे कोड

public BottomNavigationMenuView(Context context, AttributeSet attrs) { 
    super(context, attrs); 
    ... 
    mInactiveItemMaxWidth = res.getDimensionPixelSize(
      R.dimen.design_bottom_navigation_item_max_width); 
    .... 
    mActiveItemMaxWidth = res.getDimensionPixelSize(
      R.dimen.design_bottom_navigation_active_item_max_width); 
    ..... 
} 

अब इन मूल्यों को निश्चित चौड़ाई के साथ दृश्य बनाने के लिए किया जा रहा है, (है नीचे

@Override 
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
    .... 
    if (mShiftingMode) { 
     final int inactiveCount = count - 1; 
     final int activeMaxAvailable = width - inactiveCount * mInactiveItemMinWidth; 
     final int activeWidth = Math.min(activeMaxAvailable, mActiveItemMaxWidth); 
     final int inactiveMaxAvailable = (width - activeWidth)/inactiveCount; 
     final int inactiveWidth = Math.min(inactiveMaxAvailable, mInactiveItemMaxWidth); 
     ... 
    } else { 
     final int maxAvailable = width/count; 
     final int childWidth = Math.min(maxAvailable, mActiveItemMaxWidth); 
     ..... 
    } 
    .... 
} 

activeMaxAvailable का मूल्य हमेशा उपयोग करने के लिए, मैं mActiveItemMaxWidth को एक डमी मान सेट के रूप में dimens में ऊपर)। तो activeWidth में activeMaxAvailable का मूल्य होगा। inactiveWidth के लिए वही नियम लागू होता है।

तो जब आप परियोजना, design_bottom_navigation_item_max_width और design_bottom_navigation_active_item_max_width परिभाषित डिजाइन समर्थन-लिब में , हमारे द्वारा परिभाषित आयाम से बदल दिया जाएगा निर्माण।

अधिकतम समर्थित विकल्पों (5 अधिकतम) पर भी सत्यापित कोड।

संबंधित मुद्दे