238188114111.png
第一次写博文，写的不好还请见谅，有什么建议意见都可以提出来。
前段时间公司有个pad项目需要整合一下侧边栏，在github上看了看，没找到符合需求的，就找了个小的项目，自己来改一改，刚好这个开源项目的动画效果是我想以后用在其他项目上。
项目一上传github：Sidebar
原开源项目：LuseenBottomNavigation
isClickChangeBackgroundColor 这个参数是确定点击 Item 是否改变菜单栏的颜色。
isItemSelectedColor / isItemUnSelectedColor：是否设置了 Item 选中 / 未选中时的颜色。
if (isClickChangeBackgroundColor) {
if (!isItemSelectedColor) {
mItemSelectedColor = ContextCompat.getColor(mContext, R.color.colorWhite);
}
if (!isItemUnSelectedColor) {
mItemUnSelectedColor = ContextCompat.getColor(mContext, R.color.colorPink);
}
} else {
if (!isItemSelectedColor) {
mItemSelectedColor = ContextCompat.getColor(mContext, R.color.white);
}
if (!isItemUnSelectedColor) {
mItemUnSelectedColor = ContextCompat.getColor(mContext, R.color.colorGray);
}
}
isOrientation：Sidebar 方向。
if (isOrientation) {
params.width = mNavigationWidth + NAVIGATION_LINE_WIDTH;
params.height = ViewGroup.LayoutParams.MATCH_PARENT;
} else {
params.width = ViewGroup.LayoutParams.MATCH_PARENT;
params.height = mDisableShadow ? mNavigationWidth : mNavigationWidth + mShadowHeight;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
setElevation(getResources().getDimension(R.dimen.sidebar_elevation));
}
}
点击事件
- 是否可以点击已选中的 Item。PS：项目中有这需求，也就不改了。
if (mCurrentItem == itemIndex) {
// isSelectedItemClick 是否可以选中已点击的 Item，默认false
if (onSidebarClickListener != null && isSelectedItemClick) {
onSidebarClickListener.onSidebarItemClick(itemIndex);
}
return;
}
- Item 未选中时的状态
if (isAnimator) {
if (i == mCurrentItem) {
if (isOrientation) {
icon.setColorFilter(R.color.itemClickColor);
// Item 未选中时，Sidebar 竖着的时的偏移量
SidebarUtils.changeRightPadding(view, getPaddingRight() - mAnimatorPadding, getPaddingRight() + mInitializePadding);
} else {
// Item 未选中时，Sidebar 横着的时的偏移量
SidebarUtils.changeViewTopPadding(view, getPaddingTop() - mAnimatorPadding, getPaddingTop() + mInitializePadding);
}
SidebarUtils.changeTextColor(isAnimator, title, isItemSelectedTextColor ? mItemSelectedTextColor : mItemSelectedColor, isItemUnSelectedTextColor ? mItemUnSelectedTextColor : mItemUnSelectedColor);
SidebarUtils.changeTextSize(title, mSelectedTextSize, mShowText ? mUnSelectedTextSize : 0);
// Item 未选中时，Item 缩小
icon.animate()
.setDuration(150)
.scaleX((float) 0.9)
.scaleY((float) 0.9)
.start();
}
} else {
title.setTextColor(isItemUnSelectedTextColor ? mItemUnSelectedTextColor : mItemUnSelectedColor);
SidebarUtils.changeTextColor(isAnimator, title, i == mCurrentItem ? mItemSelectedTextColor : mItemUnSelectedTextColor, mItemUnSelectedTextColor);
}
- Item 选中时的状态
if (i == itemIndex) {
if (mSidebarList.get(i).getImageResourceSelected() != 0) {
icon.setImageResource((mSidebarList.get(i).getImageResourceSelected()));
}
SidebarUtils.changeImageColorFilter(isAnimator, icon, mItemUnSelectedColor, mItemSelectedColor);
if (isAnimator) {
SidebarUtils.changeTextColor(isAnimator, title, isItemUnSelectedTextColor ? mItemUnSelectedTextColor : mItemUnSelectedColor, isItemSelectedTextColor ? mItemSelectedTextColor : mItemSelectedColor);
SidebarUtils.changeTextSize(title, mShowText ? mUnSelectedTextSize : 0, mSelectedTextSize);
if (isOrientation) {
// Item 选中时，Sidebar 竖着的时的偏移量
SidebarUtils.changeRightPadding(view, getPaddingRight() + mAnimatorPadding, getPaddingRight() - mAnimatorPadding);
} else {
// Item 选中时，Sidebar 横着的时的偏移量
SidebarUtils.changeViewTopPadding(view, getPaddingTop() + mAnimatorPadding, getPaddingTop() - mAnimatorPadding);
}
// Item 选中时，Item 放大
icon.animate()
.setDuration(150)
.scaleX((float) 1.1)
.scaleY((float) 1.1)
.start();
} else {
title.setTextColor(isItemSelectedTextColor ? mItemSelectedTextColor : mItemUnSelectedColor);
}
if (onSidebarClickListener != null) {
onSidebarClickListener.onSidebarItemClick(itemIndex);
}
}
常用Sidebar 配置
// 显示文字, default: false
sidebarView.isShowText(true);
// 默认选中 index ； 不默认选中 则为 -1; 当 setViewPager 时, mCurrentItem value set 0
sidebarView.setDefaultSelectItemOfIndex(-1);
// 点击 item 是否改变 Sidebar 的背景颜色, default: false
sidebarView.isClickChangeBackgroundColor(false);
// Sidebar 背景颜色, 当 显示动画效果且 index >= 0 时, 失效
sidebarView.setBaseBackgroundColor(getResources().getColor(R.color.colorPink));
// 选中 Item 的颜色
sidebarView.setItemSelectedColor(getResources().getColor(R.color.colorWhite));
// 未选中 Item 的颜色
sidebarView.setItemUnSelectedColor(getResources().getColor(R.color.colorGray));
sidebarView.setItemSelectedTextColor(getResources().getColor(R.color.itemClickColor));
sidebarView.setItemUnSelectedTextColor(getResources().getColor(R.color.colorCC));
// 设置textSize, default: 12sp
sidebarView.setSelectedTextSize(32);
sidebarView.setUnSelectedTextSize(32);
// Sidebar 方向, default: horizontal
sidebarView.orientationIsVertical();
// Sidebar 横向的高度 或者 竖向 item 的宽高
sidebarView.setSidebarWidth(100);
// 点击 item 是否有动画效果, default：true
sidebarView.isAnimator(false);
// 点击事件响应已选中 Item, default: false
sidebarView.isSelectedItemClick(true);
// if isAnimator is true, 点击 Item, Item 偏移量， default: 30
sidebarView.setAnimatorPadding(30);
// if isAnimator is true, Item 初始偏移量, default：10
sidebarView.setInitializePadding(10);
// 隐藏 Item， 传值类型为 int[] 数组, 当某个 Item 或者多个 Item 暂时不需要时，设置该项
sidebarView.setItemGone(new int[]{1});
xml布局
Sidebar 在左侧
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="horizontal">
<com.github.chengheaven.sidebar.SidebarView
android:id="@+id/sidebar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
无动画.gif
有动画.gif
有动画改变背景颜色
将 orientation 的方向改为 vertical , 则 Sidebar 在上方
无动画
有动画.gif
有动画改变背景颜色
Sidebar 在下方布局
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<com.github.chengheaven.sidebar.SidebarView
android:id="@+id/sidebar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/sidebar" />
</RelativeLayout>
无动画.gif
有动画.gif
有动画改变背景颜色
如果对你有帮助，希望各位能够点一个关注或者喜欢，在 github 上给个 star，如果有什么疑问也可以在评论中提出。
关于我:
- github : chengHeaven
- 简书: 月色丶 Heaven
- 邮箱: chen464994292@163.com / heavencheng1916@gmail.com
