BottomBar
v2.3.1
ليس لدي الوقت للحفاظ على هذا بعد الآن. لقد كتبت المكتبة بأكملها على عجل، دون اختبارات، بينما كنت مبتدئًا خبيرًا جادًا في ذلك الوقت. ونتيجة لذلك، هناك الكثير من الأجزاء المتحركة التي لا يمكن التنبؤ بها، وربما لم تكن الاختبارات رائعة أيضًا. لا أعرف حقًا، لأنني لم أتطرق إلى هذا منذ زمن طويل.
أنصحك باستخدام BottomNavigationView الرسمي من Google وأحثهم على تنفيذ الميزات التي تحتاجها. أو استخدم مكتبة أخرى تابعة لجهة خارجية.
يمكن العثور على أحدث إصدار قبل ذلك في فرع v1
كيفية المساهمة
سجل التغيير
مكون عرض مخصص يحاكي نمط التنقل السفلي لتصميم المواد الجديد.
لا. إصدار minSDK هو مستوى API 11 (قرص العسل).
compile ' com.roughike:bottom-bar:2.3.1 'مخضرم:
< dependency >
< groupId >com.roughike</ groupId >
< artifactId >bottom-bar</ artifactId >
< version >2.3.1</ version >
< type >pom</ type >
</ dependency >يمكنك إضافة عناصر عن طريق كتابة ملف مورد XML .
يجب أن تكون الأيقونات معتمة تمامًا، بلون أسود خالص، وبدقة 24dp وبدون أي حشوة . على سبيل المثال، باستخدام منشئ Android Asset Studio Generic Icon، حدد "TRIM" وتأكد من أن المساحة المتروكة هي 0dp. إليك الشكل الذي يجب أن تبدو عليه أيقوناتك:
حدد علامات التبويب الخاصة بك في ملف مورد XML.
الدقة/xml/bottombar_tabs.xml:
< tabs >
< tab
id = " @+id/tab_favorites "
icon = " @drawable/ic_favorites "
title = " Favorites " />
< tab
id = " @+id/tab_nearby "
icon = " @drawable/ic_nearby "
title = " Nearby " />
< tab
id = " @+id/tab_friends "
icon = " @drawable/ic_friends "
title = " Friends " />
</ tabs >بعد ذلك، قم بإضافة BottomBar إلى تخطيطك ومنحه معرف مورد لملف xml الخاص بعلامات التبويب.
تخطيط/نشاط_main.xml
< RelativeLayout xmlns : android = " http://schemas.android.com/apk/res/android "
android : layout_width = " match_parent "
android : layout_height = " match_parent "
xmlns : app = " http://schemas.android.com/apk/res-auto " >
<!-- This could be your fragment container, or something -->
< FrameLayout
android : id = " @+id/contentContainer "
android : layout_width = " match_parent "
android : layout_height = " match_parent "
android : layout_above = " @+id/bottomBar " />
< com .roughike.bottombar.BottomBar
android : id = " @+id/bottomBar "
android : layout_width = " match_parent "
android : layout_height = " 60dp "
android : layout_alignParentBottom = " true "
app : bb_tabXmlResource = " @xml/bottombar_tabs " />
</ RelativeLayout >افتراضيًا، لا تفعل علامات التبويب أي شيء إلا إذا استمعت إلى أحداث التحديد وقمت بشيء ما عند تحديد علامات التبويب.
النشاط الرئيسي.جافا:
public class MainActivity extends Activity {
@ Override
protected void onCreate ( @ Nullable Bundle savedInstanceState ) {
super . onCreate ( savedInstanceState );
setContentView ( R . layout . activity_main );
BottomBar bottomBar = ( BottomBar ) findViewById ( R . id . bottomBar );
bottomBar . setOnTabSelectListener ( new OnTabSelectListener () {
@ Override
public void onTabSelected ( @ IdRes int tabId ) {
if ( tabId == R . id . tab_favorites ) {
// The tab with id R.id.tab_favorites was selected,
// change your content accordingly.
}
}
});
}
}إذا كنت تريد الاستماع إلى أحداث إعادة الاختيار، فإليك كيفية القيام بذلك:
bottomBar . setOnTabReselectListener ( new OnTabReselectListener () {
@ Override
public void onTabReSelected ( @ IdRes int tabId ) {
if ( tabId == R . id . tab_favorites ) {
// The tab with id R.id.tab_favorites was reselected,
// change your content accordingly.
}
}
}); إذا كنت تريد إلغاء تحديد أي علامة تبويب بشكل مشروط، فيمكنك ذلك بالتأكيد. ما عليك سوى تعيين TabSelectionInterceptor إلى BottomBar، وإرجاع صحيح من طريقة shouldInterceptTabSelection() .
bottomBar . setTabSelectionInterceptor ( new TabSelectionInterceptor () {
@ Override
public boolean shouldInterceptTabSelection ( @ IdRes int oldTabId , @ IdRes int newTabId ) {
if ( newTabId == R . id . tab_pro_feature && ! userHasProVersion ()) {
startProVersionPurchaseFlow ();
return true ;
}
return false ;
}
});إذا كنت تريد الحصول على أيقونة مختلفة عند تحديد علامة تبويب معينة، فما عليك سوى استخدام قائمة الحالة الرسومية.
res/drawable/my_tab_icon.xml
< selector xmlns : android = " http://schemas.android.com/apk/res/android " >
< item android : drawable = " @drawable/ic_myicon_selected " android : state_selected = " true " />
< item android : drawable = " @drawable/ic_myicon_default " android : state_selected = " false " />
</ selector >res/xml/bottombar_tabs.xml
...
< tab
id = " @+id/tab_favorites "
icon = " @drawable/my_tab_icon "
title = " Favorites " />
<!-- You can use @color resources too! -->
... ما عليك سوى إضافة barColorWhenSelected إلى كل علامة تبويب. عند تحديد علامة التبويب هذه، يتم تغيير لون خلفية BottomBar بالكامل من خلال رسم متحرك جميل.
res/xml/bottombar_tabs.xml
< tabs >
< tab
id = " @+id/tab_favorites "
icon = " @drawable/ic_favorites "
title = " Favorites "
barColorWhenSelected = " #5D4037 " />
<!-- You can use @color resources too! -->
</ tabs >أولاً، حدد النمط الذي يعد تابعًا لموضوع التطبيق الرئيسي الخاص بك:
res/values-v21/styles.xml
< style name = " AppTheme.TransNav " parent = " AppTheme " >
< item name = " android:navigationBarColor " >@android:color/transparent</ item >
< item name = " android:windowTranslucentNavigation " >true</ item >
< item name = " android:windowDrawsSystemBarBackgrounds " >true</ item >
</ style >سيتعين عليك أيضًا إنشاء نسخة أساسية من نفس السمة لتجنب الأعطال في مستويات واجهة برمجة التطبيقات السابقة مقارنة بـ Lollipop:
الدقة/القيم/styles.xml
< style name = " AppTheme.TransNav " parent = " AppTheme " /> قم أيضًا بتضمين نفس كعب الروتين في values-land-v21.xml لتجنب شريط التنقل الشفاف والسلوك الغريب في المناظر الطبيعية.
الدقة/القيم-الأرض-v21.xml:
< style name = " AppTheme.TransNav " parent = " AppTheme " /> قم بتطبيق السمة في AndroidManifest.xml لنشاطك.
AndroidManifest.xml:
< activity android : name = " .MyAwesomeActivity " android : theme = " @style/AppTheme.TransNav " /> أخيرًا، قم بتعيين bb_behavior لتضمين العلامة underNavbar وستكون جاهزًا للبدء!
Activity_my_awesome.xml:
< com .roughike.bottombar.BottomBar
android : id = " @+id/bottomBar "
android : layout_width = " match_parent "
android : layout_height = " 56dp "
android : layout_alignParentBottom = " true "
app : bb_tabXmlResource = " @xml/my_awesome_bottombar_tabs "
app : bb_behavior = " underNavbar " /> حدد تخطيطًا مختلفًا لنشاطك في المجلد res/layout-sw600dp وقم بتعيين bb_tabletMode على true.
الدقة/layout-sw600dp/activity_main.xml:
< RelativeLayout
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 " >
< com .roughike.bottombar.BottomBar
android : id = " @+id/bottomBar "
android : layout_width = " wrap_content "
android : layout_height = " match_parent "
android : layout_alignParentLeft = " true "
app : bb_tabXmlResource = " @xml/bottombar_tabs_three "
app : bb_tabletMode = " true " />
<!-- This could be your fragment container, or something -->
< FrameLayout
android : id = " @+id/contentContainer "
android : layout_width = " match_parent "
android : layout_height = " match_parent "
android : layout_toRightOf = " @+id/bottomBar " />
</ RelativeLayout >سهل سهل!
Activity_main.xml:
< 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 " >
< android .support.v4.widget.NestedScrollView
android : id = " @+id/myScrollingContent "
android : layout_width = " match_parent "
android : layout_height = " match_parent " >
<!-- Your loooooong scrolling content here. -->
</ android .support.v4.widget.NestedScrollView>
< com .roughike.bottombar.BottomBar
android : id = " @+id/bottomBar "
android : layout_width = " match_parent "
android : layout_height = " 60dp "
android : layout_gravity = " bottom "
app : bb_tabXmlResource = " @xml/bottombar_tabs_three "
app : bb_behavior = " shy " />
</ android .support.design.widget.CoordinatorLayout>يمكنك بسهولة إضافة شارات لإظهار عدد الرسائل غير المقروءة أو العناصر الجديدة/ما تريد.
BottomBarTab nearby = bottomBar . getTabWithId ( R . id . tab_nearby );
nearby . setBadgeCount ( 5 );
// Remove the badge when you're done with it.
nearby . removeBadge /();< com .roughike.bottombar.BottomBar
android : id = " @+id/bottomBar "
android : layout_width = " match_parent "
android : layout_height = " 60dp "
android : layout_alignParentBottom = " true "
app : bb_tabXmlResource = " @xml/bottombar_tabs_three "
app : bb_tabletMode = " true "
app : bb_behavior = " shifting|shy|underNavbar "
app : bb_inActiveTabAlpha = " 0.6 "
app : bb_activeTabAlpha = " 1 "
app : bb_inActiveTabColor = " #222222 "
app : bb_activeTabColor = " @color/colorPrimary "
app : bb_badgesHideWhenActive = " true "
app : bb_titleTextAppearance = " @style/MyTextAppearance "
app : bb_titleTypeFace = " fonts/MySuperDuperFont.ttf "
app : bb_showShadow = " true " />values/xml/shifting : علامة التبويب المحددة أوسع من الباقي. shy : ضع BottomBar داخل CoordinatorLayout وسيختفي تلقائيًا عند التمرير! underNavbar : ارسم BottomBar أسفل شريط التنقل!fonts/MySuperDuperFont.ttf . في هذه الحالة، سيبدو مسار الخط الخاص بك كما يلي src/main/assets/fonts/MySuperDuperFont.ttf ، ولكنك تحتاج فقط إلى توفير fonts/MySuperDuperFont.ttf ، حيث سيتم ملء مجلد الأصول تلقائيًا نيابة عنك.< tab
id = " @+id/tab_recents "
title = " Recents "
icon = " @drawable/empty_icon "
inActiveColor = " #00FF00 "
activeColor = " #FF0000 "
barColorWhenSelected = " #FF0000 "
badgeBackgroundColor = " #FF0000 "
badgeHidesWhenActive = " true " />أرسل لي طلب سحب باستخدام README.md المعدل للحصول على صيحة!
لا تتردد في خلق القضايا وسحب الطلبات.
عند إنشاء طلبات سحب، المزيد هو أكثر: أرغب في رؤية عشرة طلبات سحب صغيرة مفصولة حسب الميزة بدلاً من دمج كل تلك الطلبات في طلب ضخم.
BottomBar library for Android
Copyright (c) 2016 Iiro Krankka (http://github.com/roughike).
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
