# CollapsingToolbar

**Repository Path**: open-harmony-north/collapsing-toolbar

## Basic Information

- **Project Name**: CollapsingToolbar
- **Description**: 实现可折叠标题栏效果。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-07-29
- **Last Updated**: 2022-08-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CollapsingToolbar

#### 介绍
本项目实现下面两个简单效果  
+ 实现可折叠标题栏
  1. 支持设置标题，标题随着卡片拖动具有动画效果（字体，颜色等） 
  2. 支持最大可拖动距离设置，展开和收缩动画速度设置等
+ TabBar自定义样式
  1. Tabs导航栏点击区完全自定义效果实现，隐藏自带TabBar
  2. 支持在tabBar区域添加图标

#### 软件架构
index.ets项目首页  
Detail.ets可折叠标题栏效果页

#### 使用说明
IDE: DevEco Studio 3.0 Beta4 3.0.0.991  
SDK（API9）: 3.2.5.5  
Satge模型

下载该项目，依次进入entry/src/main/ets/pages，
该文件夹包含首页和详情页。
在首页index.ets实现了tabBar的自定义样式，运行或者预览，效果如下
![image](./entry/screenshot/index.gif)

点击卡片，进入详情页Detail.ets，查看可折叠标题栏效果  
![image](./entry/screenshot/detail.gif)

特别说明：页面中icon来自于[图标库网站iconfont](https://www.iconfont.cn/)