BottomBar
v2.3.1
ฉันไม่มีเวลาที่จะรักษาสิ่งนี้อีกต่อไป โดยพื้นฐานแล้วฉันเขียนทั้งห้องสมุดอย่างรวดเร็วโดยไม่มีการทดสอบ ในขณะที่ยังเป็นผู้เริ่มต้นที่เชี่ยวชาญอย่างจริงจังในขณะนั้น เป็นผลให้มีชิ้นส่วนที่เคลื่อนไหวอย่างคาดเดาไม่ได้จำนวนมาก และการทดสอบก็อาจไม่ดีนักเช่นกัน ไม่ทราบจริงๆ เพราะผมไม่ได้สัมผัสสิ่งนี้มานานแล้ว
ฉันขอแนะนำให้คุณใช้ BottomNavigationView อย่างเป็นทางการจาก Google และกระตุ้นให้พวกเขาใช้คุณสมบัติที่คุณต้องการ หรือใช้ไลบรารีบุคคลที่สามอื่น
เวอร์ชันล่าสุดก่อนหน้านั้นสามารถพบได้ในสาขา v1
วิธีการมีส่วนร่วม
บันทึกการเปลี่ยนแปลง
องค์ประกอบมุมมองที่กำหนดเองซึ่งเลียนแบบรูปแบบการนำทางด้านล่างของดีไซน์ Material ใหม่
ไม่. เวอร์ชัน minSDK คือ API ระดับ 11 (Honeycomb)
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 ให้เลือก "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 ของแท็บ
เค้าโครง/activity_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 >ตามค่าเริ่มต้น แท็บจะไม่ทำอะไรเลย เว้นแต่คุณจะฟังเหตุการณ์การเลือกและดำเนินการบางอย่างเมื่อเลือกแท็บแล้ว
MainActivity.java:
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 ;
}
});หากคุณต้องการมีไอคอนอื่นเมื่อเลือกแท็บใดแท็บหนึ่ง เพียงใช้รายการสถานะที่ถอนออกได้
ความละเอียด/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 >ความละเอียด/xml/bottombar_tabs.xml
...
< tab
id = " @+id/tab_favorites "
icon = " @drawable/my_tab_icon "
title = " Favorites " />
<!-- You can use @color resources too! -->
... เพียงเพิ่ม barColorWhenSelected ลงในแต่ละแท็บ เมื่อเลือกแท็บนั้น สีพื้นหลัง BottomBar ทั้งหมดจะเปลี่ยนไปพร้อมกับภาพเคลื่อนไหวที่สวยงาม
ความละเอียด/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 >ขั้นแรก ให้กำหนดสไตล์ที่เป็นลูกของธีมแอปพลิเคชันหลักของคุณ:
ความละเอียด/ค่า-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 >คุณจะต้อง สร้างธีมเดียวกันในเวอร์ชัน stub เพื่อหลีกเลี่ยงข้อขัดข้องในระดับ API ก่อนหน้ามากกว่า Lollipop:
ความละเอียด/ค่า/styles.xml
< style name = " AppTheme.TransNav " parent = " AppTheme " /> รวม stub เดียวกันใน values-land-v21.xml ของคุณเพื่อหลีกเลี่ยงแถบนำทางที่โปร่งใสและพฤติกรรมแปลก ๆ ในแนวนอน
ความละเอียด/ค่า-land-v21.xml:
< style name = " AppTheme.TransNav " parent = " AppTheme " /> ใช้ธีมใน AndroidManifest.xml สำหรับกิจกรรมของคุณ
AndroidManifest.xml:
< activity android : name = " .MyAwesomeActivity " android : theme = " @style/AppTheme.TransNav " /> สุดท้าย ให้ตั้งค่า bb_behavior ให้รวมค่าสถานะ underNavbar ไว้ เท่านี้ก็พร้อมแล้ว!
กิจกรรม_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
ความละเอียด/เค้าโครง-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 >ง่าย!
กิจกรรม_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 ใต้ navBar!fonts/MySuperDuperFont.ttf ในกรณีนั้นพาธแบบอักษรของคุณจะมีลักษณะดังนี้ src/main/assets/fonts/MySuperDuperFont.ttf แต่คุณจะต้องระบุเพียง fonts/MySuperDuperFont.ttf เท่านั้น เนื่องจากโฟลเดอร์ Asset จะถูกเติมอัตโนมัติให้คุณ< 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.
