侧边 / 底部工具栏 Sidebar

2017-09-04 本文已影响136人月色丶Heaven

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

侧边 / 底部工具栏 Sidebar

点击事件

常用Sidebar 配置

xml布局

关于我:

猜你喜欢

热点阅读