自定义控件之伸缩式菜单栏

作者: Ray206 | 来源:发表于2021-03-01 19:21 被阅读0次

自定义控件之伸缩式菜单栏
Android自定义控件之自定义组合控件
QT2
组合控件2——海贼王选项菜单
自制控件3——仿qq侧滑删除
自制控件2 —— 自制控件仿qq侧滑菜单
组合控件1—— 设置框
自定义控件三部曲
Android自定义控件(一,基本原理)
Android 横向跑马灯效果TextView

高仿了一个小米状状态的伸缩式菜单栏

小米：

ezgif-4-745c4fd37592.gif
仿制：

ezgif-4-b56cab2f6afa.gif

主要功能点，横向滚动纵向收缩，横向滚动联代底部指示器变化，纵向收缩时，随着收缩距离动态的改变透明度，当下面两排itemview收缩完成后第五个item移动到第一排。最后是点击后记录状态，改变item背景、图标、描述颜色。

导入

中央厂库配置

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

2.依赖配置

 implementation 'com.github.ray-tianfeng:tasktabview:v1.0.3'

使用

        TaskTabView taskTabView = findViewById(R.id.task_tab);
        //norIcons(未选中/点击时icon)，preIcons(选中和点击时icon)、describes（描述文字）
        taskTabView.setTab(norIcons, preIcons, describes);
         taskTabView.addItemEventListener(new ItemEventListener() {
            @Override
            public void onItemOnClick(int itemIndex) {
                Toast.makeText(MainActivity.this, "点击：" + itemIndex, Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onItemLongClick(int itemIndex) {
                Toast.makeText(MainActivity.this, "长按：" + itemIndex, Toast.LENGTH_SHORT).show();
            }
        });

属性

字段	布局中设置	代码中设置	说明
margin	app:margin	TaskTabConfig.setMargin	item距离top、left、right间距，底部没有用margin作为间距
itemPadding	app:item_padding	TaskTabConfig.setItemPadding	icon到外部圆圈的间距
textSize	app:text_size	TaskTabConfig.setTextSize	图标下部描述文字大小
textInterval	app:text_interval	TaskTabConfig.setTextInterval	描述文字和图标间的间距
indicatorInterval	app:indicator_interval	TaskTabConfig.setIndicatorInterval	指示器间的间距
indicatorMB	app:indicator_margin_buttom	TaskTabConfig.setIndicatorMB	指示器和底部的间距
indicatorRadius	app:indicator_radius	TaskTabConfig.setIndicatorRadius	指示器半径，指示器用画实心圆实现的
circleColor	app:circle_color	TaskTabConfig.setCircleColor	item背景圆圈的颜色
circleSelectedColor	app:circle_selected_color	TaskTabConfig.setCircleSelectedColor	item背景圆圈选中/点击时的颜色
circleBorderColor	app:circle_border_color	TaskTabConfig.setCircleBorderColor	item背景圆圈边框的颜色
textColor	app:text_color	TaskTabConfig.setTextColor	描述文字颜色
textSelectedColor	app:text_selected_color	TaskTabConfig.setTextSelectedColor	描述选中/点击时文字颜色
indicatorColor	app:indicator_color	TaskTabConfig.setIndicatorColor	指示器颜色
indicatorSelectedColor	app:indicator_selected_color	TaskTabConfig.setIndicatorSelectedColor	指示器高亮时指示器颜色

代码中设置配置：

        TaskTabConfig taskTabConfig = new TaskTabConfig(this);
                 ...设置属性
        taskTabView.config(taskTabConfig);

布局中使用：

 <com.zl.tasktabview.TaskTabView
        android:id="@+id/task_tab"
        android:layout_width="match_parent"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_height="wrap_content"
        android:background="@drawable/backgroud"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:margin = "15dp"
        app:item_padding="10dp"
        app:text_size="12sp"
        app:text_interval="10dp"
        app:indicator_interval="8dp"
        app:indicator_margin_buttom="10dp"
        app:indicator_radius="2dp"
        app:circle_color="#d9dfe2"
        app:circle_selected_color="#0099ff"
        app:circle_border_color="#b0b5b7"
        app:text_color="#464849"
        app:text_selected_color="@android:color/black"
        app:indicator_color="#bec3c4"
        app:indicator_selected_color="#474949"
        />

代码设置优先级高于布局中，控件宽度必须指明不能“wrap_content”，高度是通过宽度计算出来的，设置宽度值无效。
代码传送门