AnimatedBottomBar
vailable on Maven Central
ViewPager, ViewPager2, NavController 및 배지를 지원하는 세련된 애니메이션을 갖춘 사용자 정의 가능하고 사용하기 쉬운 BottomBar 탐색 보기입니다.
조리 드로퍼스(Joery Droppers)
Google Play에서 놀이터 앱을 다운로드하세요. 이 앱을 사용하면 모든 기능을 시험해 볼 수 있고 선택한 구성으로 XML을 생성할 수도 있습니다.
이 라이브러리는 Maven Central에서 사용할 수 있습니다. build.gradle 에 다음 종속성을 추가하여 설치하세요.
implementation ' nl.joery.animatedbottombar:library:1.1.0 '버전 1.0.x는 jCenter에서만 사용할 수 있고, 버전 1.1.x 이상은 Maven Central에서 사용할 수 있습니다.
사용자 정의 속성을 사용하여 XML 레이아웃에서 AnimatedBottomBar 정의합니다.
< nl .joery.animatedbottombar.AnimatedBottomBar
android : id = " @+id/bottom_bar "
android : background = " #FFF "
android : layout_width = " match_parent "
android : layout_height = " wrap_content "
app : abb_selectedTabType = " text "
app : abb_indicatorAppearance = " round "
app : abb_indicatorMargin = " 16dp "
app : abb_indicatorHeight = " 4dp "
app : abb_tabs = " @menu/tabs "
app : abb_selectedIndex = " 1 " /> res/menu/ resources 폴더에 tabs.xml 이라는 파일을 만듭니다.
< menu xmlns : android = " http://schemas.android.com/apk/res/android " >
< item
android : id = " @+id/tab_home "
android : icon = " @drawable/home "
android : title = " @string/home " />
< item
android : id = " @+id/tab_alarm "
android : icon = " @drawable/alarm "
android : title = " @string/alarm " />
< item
android : id = " @+id/tab_bread "
android : icon = " @drawable/bread "
android : title = " @string/bread " />
< item
android : id = " @+id/tab_cart "
android : icon = " @drawable/cart "
android : title = " @string/cart " />
</ menu >콜백을 설정하여 선택한 탭이 변경되면 알림을 받습니다.
bottom_bar.onTabSelected = {
Log .d( " bottom_bar " , " Selected tab: " + it.title)
}
bottom_bar.onTabReselected = {
Log .d( " bottom_bar " , " Reselected tab: " + it.title)
}또는 더 자세한 정보가 필요한 경우 리스너를 설정하세요.
bottom_bar.setOnTabSelectListener( object : AnimatedBottomBar . OnTabSelectListener {
override fun onTabSelected (
lastIndex : Int ,
lastTab : AnimatedBottomBar . Tab ? ,
newIndex : Int ,
newTab : AnimatedBottomBar . Tab
) {
Log .d( " bottom_bar " , " Selected index: $newIndex , title: ${newTab.title} " )
}
// An optional method that will be fired whenever an already selected tab has been selected again.
override fun onTabReselected ( index : Int , tab : AnimatedBottomBar . Tab ) {
Log .d( " bottom_bar " , " Reselected index: $index , title: ${tab.title} " )
}
})코드를 사용하여 탭을 관리하는 방법에 대한 간략한 개요입니다.
// Creating a tab by passing values
val bottomBarTab1 = AnimatedBottomBar .createTab(drawable, " Tab 1 " )
// Creating a tab by passing resources
val bottomBarTab2 = AnimatedBottomBar .createTab( R .drawable.ic_home, R .string.tab_2, R .id.tab_home) // Adding a tab at the end
AnimatedBottomBar .addTab(bottomBarTab1)
// Add a tab at a specific position
AnimatedBottomBar .addTabAt( 1 , bottomBarTab2) // Removing a tab by object reference
val tabToRemove = AnimatedBottomBar .tabs[ 1 ]
AnimatedBottomBar .removeTab(tabToRemove)
// Removing a tab at a specific position
AnimatedBottomBar .removeTabAt(tabPosition)
// Removing a tab by the given ID resource
AnimatedBottomBar .removeTabById( R .id.tab_home) // Selecting a tab by object reference
val tabToSelect = AnimatedBottomBar .tabs[ 1 ]
AnimatedBottomBar .selectTab(tabToSelect)
// Selecting a tab at a specific position
AnimatedBottomBar .selectTabAt( 1 )
// Selecting a tab by the given ID resource
AnimatedBottomBar .selectTabById( R .id.tab_home) // Disabling a tab by object reference
val tabToDisable = AnimatedBottomBar .tabs[ 1 ]
AnimatedBottomBar .setTabEnabled(tabToDisable, false ) // Use true for re-enabling the tab
// Disabling a tab at a specific position
AnimatedBottomBar .setTabEnabledAt( 1 , false )
// Disabling a tab by the given ID resource
AnimatedBottomBar .setTabEnabledById( R .id.tab_home, false )이는 프리미엄 영역에 대한 접근을 제한하는 경우에 유용할 수 있습니다. 콜백이나 더 자세한 리스너를 사용할 수 있습니다.
bottom_bar.onTabIntercepted = {
if (newTab.id == R .id.tab_pro_feature && ! hasProVersion) {
// e.g. show a dialog
false
}
true
}자세한 청취자:
bottom_bar.setOnTabInterceptListener( object : AnimatedBottomBar . OnTabInterceptListener {
override fun onTabIntercepted (
lastIndex : Int ,
lastTab : AnimatedBottomBar . Tab ? ,
newIndex : Int ,
newTab : AnimatedBottomBar . Tab
): Boolean {
if (newTab.id == R .id.tab_pro_feature && ! hasProVersion) {
// e.g. show a dialog
return false
}
return true
}
}) 탭에 대한 배지를 설정하는 방법에 대한 지침인 AnimatedBottomBar.Badge 객체는 BottomBar에 제공되어야 합니다. 텍스트 없이 배지를 추가하는 것도 가능하다는 점에 유의하세요.
// Adding a badge by tab reference
val tabToAddBadgeAt = AnimatedBottomBar .tabs[ 1 ]
AnimatedBottomBar .setBadgeAtTab(tabToAddBadgeAt, AnimatedBottomBar . Badge ( " 99 " ))
// Adding a badge at a specific position
AnimatedBottomBar .setBadgeAtTabIndex( 1 , AnimatedBottomBar . Badge ( " 99 " ))
// Adding a badge at the given ID resource
AnimatedBottomBar .setBadgeAtTabId( R .id.tab_home, AnimatedBottomBar . Badge ( " 99 " )) // Removing a badge by tab reference
val tabToRemoveBadgeFrom = AnimatedBottomBar .tabs[ 1 ]
AnimatedBottomBar .clearBadgeAtTab(tabToRemoveBadgeFrom)
// Removing a badge at a specific position
AnimatedBottomBar .clearBadgeAtTabIndex( 1 , AnimatedBottomBar . Badge ( " 99 " ))
// removing a badge at the given ID resource
AnimatedBottomBar .clearBadgeAtTabId( R .id.tab_home, AnimatedBottomBar . Badge ( " 99 " ))또한 개별적으로 배지 스타일을 지정할 수도 있습니다.
AnimatedBottomBar . Badge (
text = " 99 " ,
backgroundColor = Color . RED ,
textColor = Color . GREEN ,
textSize = 12 .spPx // in pixels
) ViewPager 또는 ViewPager2와 함께 BottomBar를 사용하는 것은 쉽습니다. setupWithViewPager() 메서드를 사용하면 됩니다. 제대로 작동하려면 탭 수와 ViewPager 페이지 수가 동일해야 합니다.
용법
// For ViewPager use:
bottom_bar.setupWithViewPager(yourViewPager)
// For ViewPager2 use:
bottom_bar.setupWithViewPager2(yourViewPager2)모든 구성 옵션에 대한 개요입니다. 모든 옵션은 동등한 이름을 사용하여 프로그래밍 방식으로 액세스하고 설정할 수도 있습니다.
| 기인하다 | 설명 | 기본 |
|---|---|---|
| abb_tabs | 탭은 res/menu/ resource 폴더의 메뉴 파일(메뉴 리소스)에서 정의할 수 있습니다. icon 및 title 속성이 필요합니다. 기본적으로 모든 탭은 활성화되어 있습니다. 탭을 비활성화하려면 android:enabled를 false 로 설정하세요. < menu xmlns : android = " http://schemas.android.com/apk/res/android " >
< item
android : id = " @+id/tab_example "
android : icon = " @drawable/ic_example "
android : title = " @string/tab_example "
android : enabled = " true|false " />
...etc
</ menu > | |
| abb_selectedIndex | 기본 선택 탭 인덱스를 정의합니다. | |
| abb_selectedTabId | ID로 기본 선택 탭을 정의합니다(예: @id/tab_id) . |
| 기인하다 | 설명 | 기본 |
|---|---|---|
| abb_selectedTabType | 탭을 선택할 때 아이콘이나 텍스트를 표시할지 여부를 결정합니다. 상  텍스트  | 상 |
| abb_tab색상 | 탭이 선택되지 않았을 때 아이콘이나 텍스트의 색상입니다. | @color/textColorPrimary |
| abb_tabColorSelected | 탭이 선택되었을 때 아이콘이나 텍스트의 색상입니다. | @color/colorPrimary |
| abb_tabColorDisabled | 탭이 비활성화될 때마다 아이콘이나 텍스트의 색상입니다. | @color/textColorSecondary |
| abb_text외관 | 탭에서 텍스트의 모양과 느낌을 사용자 정의하세요. 아래에는 사용자 정의 텍스트 모양의 예가 나와 있습니다. res/values/styles.xml 에 새 스타일을 정의합니다. < style name = " CustomText " >
< item name = " android:textAllCaps " >true</ item >
< item name = " android:fontFamily " >serif</ item >
< item name = " android:textSize " >16sp</ item >
< item name = " android:textStyle " >italic|bold</ item >
</ style > | |
| abb_text스타일 | 텍스트 스타일(보통, 굵게, 기울임꼴, 굵은|기울임꼴)입니다. 프로그래밍 방식으로 텍스트 스타일을 설정하려면 Bottom_bar.typeface를 사용하세요. | 정상 |
| abb_text크기 | 텍스트의 크기입니다. 텍스트에 권장되는 치수 유형은 "sp"(조정된 픽셀)입니다(예: 14sp). | 14sp |
| abb_icon크기 | 아이콘의 크기를 늘리거나 줄입니다. | 24dp |
| abb_rippleEnabled | 탭을 선택할 때 '물결' 효과를 활성화합니다.  | 거짓 |
| abb_ripple색상 | 앞서 언급한 파급효과의 색상을 변경합니다. | 기본 테마 색상 |
| 기인하다 | 설명 | 기본 |
|---|---|---|
| abb_badge배경색상 | 배지의 배경색입니다. | #ff0c10 (빨간색) |
| abb_badgeTextColor | 배지 내부 텍스트의 텍스트 색상입니다. | #FFFFFF |
| abb_badge텍스트크기 | 배지 내부 텍스트의 텍스트 크기입니다. 텍스트에 권장되는 치수 유형은 "sp"(조정된 픽셀)입니다(예: 14sp). | 10sp |
| abb_badge애니메이션 | 배지의 들어가기 및 나가기 애니메이션 유형입니다. 없음 규모 바래다 | 규모 |
| abb_badgeAnimationDuration | 배지 시작 및 종료 애니메이션의 지속 시간입니다. | 150 |
| 기인하다 | 설명 | 기본 |
|---|---|---|
| abb_animation지속시간 | 표시기 애니메이션을 포함한 모든 애니메이션의 지속 시간입니다. | 400 |
| abb_tab애니메이션 | 선택되지 않은 탭의 시작 및 종료 애니메이션 스타일입니다. 없음  슬라이드  바래다  | 바래다 |
| abb_tab애니메이션 선택됨 | 선택한 탭의 시작 및 종료 애니메이션 스타일입니다. 없음  슬라이드  바래다 | 슬라이드 |
| abb_animation보간기 | 모든 애니메이션에 사용되는 보간기입니다. 사용 가능한 보간기에 대한 자세한 내용은 "Android 보간기: 시각적 가이드"를 참조하세요. 예시 값: @android:anim/overshoot_interpolator  | FastOutSlowIn보간기 |
| 기인하다 | 설명 | 기본 |
|---|---|---|
| abb_indicator색상 | 표시기의 색상입니다. | @android/colorPrimary |
| abb_indicator높이 | 표시기의 높이입니다. | 3dp |
| abb_indicator마진 | 표시기의 가로 여백입니다. 이는 표시기의 너비를 결정합니다. | 0dp |
| abb_indicator외관 | 표시기의 모양을 사각형 또는 원형으로 구성합니다. 보이지 않는  정사각형  둥근  | 정사각형 |
| abb_indicator위치 | 선택한 탭 표시기의 위치를 위쪽, 아래쪽 또는 보이지 않게 구성합니다. 맨 위 맨 아래  | 맨 위 |
| abb_indicator애니메이션 | 선택한 탭을 변경할 때 표시기의 애니메이션 유형입니다. 없음  슬라이드 바래다  | 슬라이드 |
MIT License
Copyright (c) 2021 Joery Droppers (https://github.com/Droppers)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
