2017-02-07 11 views
9

मैं हालांकि किसी भी तरह BottomNavigationView बिल्ला नहीं दिखा रहा है, किसी भी पुस्तकालय का उपयोग किए बिना BottomNavigationView मद में एक बैज जोड़ कोशिश कर रहा हूँ (custom_view) परबिल्ला BottomNavigationView

main_view.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/activity_main" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    tools:context="com.hrskrs.test.MainActivity"> 

    <FrameLayout 
    android:id="@+id/container" 
    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" 
    app:itemBackground="@color/colorPrimary" 
    app:itemIconTint="@color/colorAccent" 
    app:itemTextColor="@color/colorPrimaryDark" 
    app:menu="@menu/bottom_navigation_main" /> 
</RelativeLayout> 

bottom_navigation_menu .xml:

<menu xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto"> 
    <item 
    android:id="@+id/item_test" 
    android:icon="@mipmap/ic_launcher" 
    android:title="action1" 
    app:showAsAction="always" /> 

    <item 
    android:enabled="true" 
    android:icon="@mipmap/ic_launcher" 
    android:title="action2" 
    app:showAsAction="ifRoom" /> 

    <item 
    android:enabled="true" 
    android:icon="@mipmap/ic_launcher" 
    android:title="action3" 
    app:showAsAction="ifRoom" /> 
</menu> 

गतिविधि AppCompatActivity से बढ़ाया:

@Override 
    public boolean onCreateOptionsMenu(Menu menu) { 
    menu = bottomNavigationView.getMenu(); 
    menu.clear(); 
    getMenuInflater().inflate(R.menu.bottom_navigation_main, menu); 
    MenuItem item = menu.findItem(R.id.item_test); 
    item = MenuItemCompat.setActionView(item, R.layout.custom_view); 
    RelativeLayout badgeWrapper = (RelativeLayout) MenuItemCompat.getActionView(item); 

    TextView textView = (TextView) badgeWrapper.findViewById(R.id.txtCount); 
    textView.setText("99+"); 

    return super.onCreateOptionsMenu(menu); 
    } 

custom_view.xml:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    style="@android:style/Widget.ActionButton" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@android:color/transparent" 
    android:clickable="true" 
    android:gravity="center" 
    android:orientation="vertical"> 

    <ImageView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:contentDescription="Notification Icon" 
    android:gravity="center" 
    android:src="@mipmap/ic_launcher" /> 

    <TextView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/txtCount" 
    android:gravity="right" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@drawable/ic_badge" 
    android:text="55" 
    android:textColor="#ffffffff" 
    android:textSize="12sp" /> 
</RelativeLayout> 

(badge) custom_view दिखाने का istead यह आइटम केवल खुद पता चलता है:

enter image description here

आप डिबग मोड view पहुँचा है कि से देख सकते हैं नीचे सही एक और यह सही ढंग से सेट किया जा रहा है। हालांकि किसी भी तरह BottomNavigationView अवैध नहीं किया जा रहा है:

enter image description here

+1

क्या आपको इसके लिए कोई कामकाज मिला ?? – Moulesh

+0

मैंने इस प्रश्न का उत्तर यहां दिया है https://stackoverflow.com/questions/42682855/display-badge-on-top-of-bottom-navigation-bars-icon/46595155#46595155। आशा है कि ये आपकी मदद करेगा। – Arash

उत्तर

1

@hrskrs अपने txtCount या badgeWrapper पर ही अधिक ऊंचाई जोड़ने का प्रयास करें। BottomNavigationView स्क्रीन पर विचारों की तुलना में उच्च ऊंचाई है।

मैं BottomNavigationView आइटम पर बैज दिखाने के साथ संघर्ष कर रहा था। मेरे बैज (बिना किसी टेक्स्ट वैल्यू के) ड्रॉइंग का हिस्सा होने पर ग्रे बदल गया जब उपयोगकर्ता ने अन्य आइटम पर क्लिक किया या टिंट में परिभाषित एक ही रंग बन गया (यदि परिभाषित नहीं किया गया है तो रंग प्राथमिक है)। मुझे लगता है कि आप उसी समस्या में भाग लेंगे जिसमें मुझे BottomNavigationView के मेनू आइटम के शीर्ष पर बैज/काउंटर के रंग का सामना करना पड़ रहा है क्योंकि टिंट रंग आइटम पर ही लागू होगा और आपका बैज MenuItem का हिस्सा होने वाला ट्रैपर (टर्न ग्रे जब आप किसी अन्य आइटम को टैप करते हैं जिसे आप नहीं चाहते हैं तो मुझे लगता है)।

मेरे यहाँ जवाब की जाँच करें: Is there a way to display notification badge on Google's official BottomNavigationView menu items introduced in API 25?

मैं एक बिल्ला के लिए एक ImageView इस्तेमाल किया, लेकिन आप अपने badgeWrapper RelativeView बजाय imageView हो सकता है।

+0

मैं एक विकल्प नहीं मांग रहा हूं क्योंकि इसे प्राप्त करने के कई तरीके हैं। मैं 'संसाधन संसाधन' – hrskrs

+0

के माध्यम से 'BottomNavigationView' पर बैज जोड़ने के लिए कह रहा हूं, मैंने मेनू संसाधनों के साथ संघर्ष किया और यह मेरे लिए काम नहीं किया। मेनू संसाधनों के साथ ऐसा करना सही तरीका होगा। मुझे यह देखकर खुशी होगी कि क्या आप इसे मेनू संसाधनों के साथ काम कर रहे हैं। – Waqas

+0

@hrskrs क्या आपको कोई कामकाज मिला है? –

4

मैं बैज के साथ BottomNavigationView बनाने में कामयाब रहा। मेरा कोड (कोटलिन) यहाँ है।

यह पैनल (BottomNavigationView से विरासत में मिली)

/** Bottom menu with badge */ 
class AdvancedBottomNavigationView(context: Context, attrs: AttributeSet) : BottomNavigationView(context, attrs) { 

    private companion object { 
     const val BADGE_MIN_WIDTH = 16   // [dp] 
     const val BADGE_MARGIN_TOP = 5   // [dp] 
     const val BADGE_MARGIN_LEFT = 15  // [dp] 
    } 

    @Inject internal lateinit var uiCalculator: UICalculatorInterface 

    private val bottomMenuView: BottomNavigationMenuView 

    init { 
     // Get access to internal menu 
     val field = BottomNavigationView::class.java.getDeclaredField("mMenuView") 
     field.isAccessible = true 
     bottomMenuView = field.get(this) as BottomNavigationMenuView 

     App.injections.presentationLayerComponent!!.inject(this) 

     @SuppressLint("CustomViewStyleable") 
     val a = context.obtainStyledAttributes(attrs, R.styleable.advanced_bottom_navigation_bar) 
     val badgeLayoutId = a.getResourceId(R.styleable.advanced_bottom_navigation_bar_badge_layout, -1) 
     a.recycle() 

     initBadges(badgeLayoutId) 
    } 

    /** 
    * [position] index of menu item */ 
    fun setBadgeValue(position: Int, count: Int) { 
     val menuView = bottomMenuView 
     val menuItem = menuView.getChildAt(position) as BottomNavigationItemView 

     val badge = menuItem.findViewById(R.id.bottom_bar_badge) 
     val badgeText = menuItem.findViewById(R.id.bottom_bar_badge_text) as TextView 

     if (count > 0) { 
      badgeText.text = count.toString() 
      badge.visibility = View.VISIBLE 
     } else { 
      badge.visibility = View.GONE 
     } 
    } 

    /** 
    * Select menu item 
    * [position] index of menu item to select 
    */ 
    fun setSelected(position: Int) = bottomMenuView.getChildAt(position).performClick() 

    private fun initBadges(badgeLayoutId: Int) { 
     // Adding badges to each Item 
     val menuView = bottomMenuView 
     val totalItems = menuView.childCount 

     val oneItemAreaWidth = uiCalculator.getScreenSize(context).first/totalItems 

     val marginTop = uiCalculator.dpToPixels(context, BADGE_MARGIN_TOP) 
     val marginLeft = uiCalculator.dpToPixels(context, BADGE_MARGIN_LEFT) 

     for (i in 0 until totalItems) { 
      val menuItem = menuView.getChildAt(i) as BottomNavigationItemView 

      // Add badge to every item 
      val badge = View.inflate(context, badgeLayoutId, null) as FrameLayout 
      badge.visibility = View.GONE 
      badge.minimumWidth = uiCalculator.dpToPixels(context, BADGE_MIN_WIDTH) 

      val layoutParam = FrameLayout.LayoutParams(
       FrameLayout.LayoutParams.WRAP_CONTENT, 
       FrameLayout.LayoutParams.WRAP_CONTENT) 
      layoutParam.gravity = Gravity.START 

      layoutParam.setMargins(oneItemAreaWidth/2 + marginLeft, marginTop, 0, 0) 
      menuItem.addView(badge, layoutParam) 
     } 
    } 
} 

यह attr है।

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item> 
     <shape> 
      <solid android:color="#ff0000" /> 
      <corners android:radius="10dp" /> 
     </shape> 
    </item> 
</selector> 

बिल्ला ही: drawable फ़ोल्डर से बैज के लिए

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
    <declare-styleable name="advanced_bottom_navigation_bar"> 
     <attr name="badge_layout" format="reference|integer" /> 
    </declare-styleable> 
</resources> 

पृष्ठभूमि: इस घटक के लिए विकल्पों के साथ xml फ़ाइल

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout 
    android:id="@+id/bottom_bar_badge" 
    android:layout_height="20dp" 
    android:layout_width="20dp" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:background="@drawable/bcg_badge" 
    > 
<TextView 
    android:id="@+id/bottom_bar_badge_text" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="1" 
    android:textSize="10sp" 
    android:textColor="@android:color/white" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:textAlignment="center" 
    android:layout_gravity="center"/> 
</FrameLayout> 

और यह कैसे में इसका इस्तेमाल करने के लिए एक उदाहरण है आपके कोड:

<?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="su.ivcs.ucim.presentationLayer.userStories.mainScreen.view.MainActivity"> 

    <su.ivcs.ucim.presentationLayer.common.advancedBottomNavigationView.AdvancedBottomNavigationView 
     android:id="@+id/bottom_navigation" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     app:itemBackground="@android:color/white" 
     app:itemIconTint="@color/main_screen_tabs_menu_items" 
     app:itemTextColor="@color/main_screen_tabs_menu_items" 
     app:menu="@menu/main_screen_tabs_menu" 
     app:badge_layout = "@layout/common_badge" 

     app:layout_constraintTop_toBottomOf="@+id/fragmentsContainer" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintBottom_toBottomOf="parent" 
     /> 

</android.support.constraint.ConstraintLayout> 

मुझे आशा है कि यह आपकी मदद करेगा।

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