diff --git a/README.md b/README.md index f475519..edb72b9 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,7 @@ - [x] 快速配置点击重试 - [x] 监听缺省页回调 - [x] 自定义动画/布局 -- [x] [骨骼动画](https://liangjingkanji.github.io/StateLayout/skeleton/) +- [x] [骨骼动画](https://liangjingkanji.github.io/StateLayout/skeleton.html) - [x] 传递标签 - [x] 异步线程使用 - [x] 自定义缺省页切换处理 diff --git a/docs/callback.md b/docs/callback.md index 99825e7..9d146f4 100644 --- a/docs/callback.md +++ b/docs/callback.md @@ -1,4 +1,4 @@ -我们可以通过监听缺省页显示的生命周期来获取其对应的视图对象(View), 在其回调中可以拿到缺省页的任何控件(类似于Activity的`onCreate`) +生命周期回调中可以获取状态参数/视图对象 | 函数 | 描述 | |-|-| @@ -6,82 +6,43 @@ | onError | showError 时回调 | | onContent | showContent 时回调 | | onLoading | showLoading 时回调 | -| onRefresh | showLoading 时回调, 一般在其中执行加载网络或异步任务的逻辑, 而不是加载视图| +| onRefresh | showLoading 时回调, 一般在其中执行加载网络异步任务| | stateChangedHandler | 完全接管缺省页状态变更时处理 | -每个StateLayout实例都可以设置单独的回调监听, 同时StateConfig可以设置全局的回调监听 - -> 你对缺省页有任何自定义的需求, 点击事件? 开始播放动画? 通过参数展示不同的错误页或者空页面? 都可以在这里判断!
-> `show*()`函数可以通过其参数Any传递任何对象到`on*()`生命周期回调中 +可以在此对缺省页自定义的需求, 点击事件或播放动画, 或根据标签展示不同的错误页 ## 监听缺省页显示 -=== "示例" - ```kotlin - state.onRefresh { - // 每次showLoading都会执行该回调 - } - state.showLoading() - ``` - -=== "链式调用" - ```kotlin - - state.onRefresh { - // 每次showLoading都会执行该回调 - }.showLoading() - ``` +```kotlin +state.onRefresh { + // 每次showLoading都会执行该回调 +}.showLoading() +``` 监听缺省页显示 -=== "示例" - ```kotlin - state.onEmpty { - findViewById(R.id.msg).text = "空布局信息" - } - - state.onError { - - } - - state.onLoading { - - } - - state.onRefresh { - - } - - state.onContent { - - } - ``` - -=== "链式调用" - ```kotlin - state.onEmpty { - - }.onError { +```kotlin +state.onEmpty { - }.onLoading { +}.onError { - }.onRefresh { +}.onLoading { - } - ``` +}.onRefresh { -`onRefresh`和`onLoading`触发的条件一样, 但是他们的函数参数接收者不一样, 他们所代表的的作用也不同 +} +``` -- onRefresh 中常见处理异步任务(例如网络请求) -- onLoading 中常见处理的是加载视图/动画 +`onRefresh`和`onLoading`触发条件相同, 但是参数不同, 他们所代表的的作用也不同 -## 自定义缺省页切换处理 +1. `onRefresh` 中常见处理网络请求异步任务 +2. `onLoading` 中常见处理的是加载视图/动画 -创建`StateChangedHandler`来取代默认的缺省页切换逻辑, 可以自定义缺省页显示/隐藏动画, 并且可以自定义布局参数(宽高) +## 完全自定义 -StateChangedHandler默认是removeView/addView, 如果你想改成visibility就可以实现接口自定义处理 +实现`StateChangedHandler`可以实现最大程度自定义 -可以全部配置或者单例配置 +甚至来取代默认的缺省页切换逻辑, 可以自定义缺省页显示/隐藏动画, 并且可以自定义布局参数(宽高) ```kotlin // 单例 @@ -89,4 +50,6 @@ state.stateChangedHandler = StateChangedHandler() // 全局 StateConfig.stateChangedHandler = StateChangedHandler() -``` \ No newline at end of file +``` + +StateChangedHandler默认是removeView/addView, 如果你想改成visibility就请自定义 \ No newline at end of file diff --git a/docs/css/extra.css b/docs/css/extra.css index f4a9b34..3f5119d 100644 --- a/docs/css/extra.css +++ b/docs/css/extra.css @@ -1,71 +1,31 @@ -:root > * { - --md-code-fg-color: #A9B7C6; - --md-code-bg-color: #2b2b2b; - --md-code-hl-color: #214283; - --md-code-hl-number-color: #82AAFF; - --md-code-hl-special-color: #A9B7C6; - --md-code-hl-function-color: #FFE64C; - --md-code-hl-constant-color: hsla(250, 70%, 64%, 1); - --md-code-hl-keyword-color: #CC7832; - --md-code-hl-string-color: #6A8759; - --md-code-hl-name-color: var(--md-code-fg-color); - --md-code-hl-operator-color: #A9B7C6; - --md-code-hl-punctuation-color: #A9B7C6; - --md-code-hl-comment-color: #787878; - --md-code-hl-generic-color: #A9B7C6; - --md-code-hl-variable-color: #A9B7C6; - - --md-typeset-color: #333333; - --drake-highlight: #d63200; - --drake-accent: #e95f59; - --drake-highlight-opacity: #d6320022; - --md-admonition-fg-color: #333333; - --drake-font-size: 12px; -} - -[data-md-color-scheme="drake"] { - --md-primary-fg-color: hsla(0, 0%, 100%, 1); - --md-primary-fg-color--light: hsla(0, 0%, 100%, 0.7); - --md-primary-fg-color--dark: hsla(0, 0%, 0%, 0.07); - --md-primary-bg-color: hsla(0, 0%, 0%, 0.87); - --md-primary-bg-color--light: hsla(0, 0%, 0%, 0.54); - --md-accent-fg-color: #d63200; - --md-accent-fg-color--light: #d63200; - --md-accent-fg-color--dark: #d63200; - --md-typeset-a-color: #d63200 !important; -} - -/*字体渲染*/ @font-face{ - font-family: 'JetBrains Mono'; - src: local('JetBrains Mono'), - url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-Regular.woff2') format('woff2'), - url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/ttf/JetBrainsMono-Regular.ttf') format('truetype'); + font-family: 'Iosevka Curly'; + src: local('Iosevka Curly Medium'), + url('https://raw.githubusercontent.com/liangjingkanji/liangjingkanji/master/font/iosevka-curly/iosevka-curly-medium.woff2') format('woff2'); font-display: swap; font-weight: normal; font-style: normal; } @font-face{ - font-family: 'JetBrains Mono'; - src: local('JetBrains Mono'), - url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-Bold.woff2') format('woff2'), - url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/ttf/JetBrainsMono-Bold.ttf') format('truetype'); + font-family: 'Iosevka Curly'; + src: local('Iosevka Curly Bold'), + url('https://raw.githubusercontent.com/liangjingkanji/liangjingkanji/master/font/iosevka-curly/iosevka-curly-bold.woff2') format('woff2'); font-display: swap; font-weight: bold; font-style: normal; } @font-face{ - font-family: 'HYZhengYuan'; - src: local('HYZhengYuan'), - url('https://raw.githubusercontent.com/liangjingkanji/liangjingkanji/master/font/HYZhengYuan.ttf') format('truetype'); + font-family: 'HYYouYuan'; + src: local('HYYouYuan-55W'), + url('https://raw.githubusercontent.com/liangjingkanji/liangjingkanji/master/font/HYYouYuan/HYYouYuan-55W.ttf') format('truetype'); font-display: swap; font-weight: normal; font-style: normal; } @font-face{ - font-family: 'HYZhengYuan'; - src: local('HYZhengYuan-75W'), - url('https://raw.githubusercontent.com/liangjingkanji/liangjingkanji/master/font/HYZhengYuan-75W.ttf') format('truetype'); + font-family: 'HYYouYuan'; + src: local('HYYouYuan-75W'), + url('https://raw.githubusercontent.com/liangjingkanji/liangjingkanji/master/font/HYYouYuan/HYYouYuan-75W.ttf') format('truetype'); font-display: swap; font-weight: bold; font-style: normal; @@ -76,241 +36,16 @@ -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; text-rendering: optimizeLegibility; - font-family: "JetBrains Mono", HYZhengYuan, monospace !important; -} - -/*布局*/ -.md-content { - max-width: 49.5rem; -} -.md-grid { - max-width: 80rem; -} - -/*表格*/ -.md-typeset__table { - display: block; - padding: 0 .8rem; - margin: 1em 0; -} -table tr:nth-child(2n), thead { - background-color: #fafafa; -} -.md-typeset table:not([class]) { - border-collapse: collapse; - border-spacing: 0px; - width: 100%; - break-inside: auto; - text-align: left; - display: table; - box-shadow:none; - font-size: var(--drake-font-size); -} - -.md-typeset table:not([class]) th { - border: 1px solid #dfe2e5; - background-color: #f2f2f2; - padding: 6px 13px; - font-weight: bold; - color: var(--md-typeset-color); -} -.md-typeset table:not([class]) td { - border: 1px solid #dfe2e5; -} - -/*隐藏搜索框, 因为不支持中文搜索*/ -.md-search__form { - visibility: hidden; + font-family: "Iosevka Curly", HYYouYuan !important; } -/*引用*/ -.md-typeset :is(.admonition,details) { - font-size: 12px; -} -[dir=ltr] .md-typeset blockquote { - border-left:none; -} -.md-typeset blockquote { - color: inherit; - padding: 10px 16px; - background-color: #fdefee; - position: relative; - border-left: none; - margin: 2em 0; -} -.md-typeset blockquote p { - margin: 0 0 !important; -} -.md-typeset blockquote:before { - display: block; - position: absolute; - content: ''; - width: 4px; - left: 0; - top: 0; - height: 100%; - background-color:var(--drake-accent); - border-radius: 4px; -} - -/*字间距*/ +code, +.md-nav, +.md-typeset code, .md-typeset { - line-height: 1.8; - font-size: var(--drake-font-size); -} -.md-typeset pre { - line-height: 1.6; -} - -/*标签*/ -.md-typeset .tabbed-set>label { - border-bottom: 2px solid transparent; - color: var(--md-typeset-color); - line-height: 1.3; - font-size: var(--drake-font-size); - margin-bottom: .8em; - font-weight:normal; -} -.md-typeset .tabbed-set>input:checked+label { - font-weight:500; - line-height: 1.3; - margin-bottom: .8em; -} - -/*侧边导航*/ -.md-nav__item .md-nav__link--active { - color: var(--drake-highlight); - font-weight:500; -} -.md-nav__title[for="__drawer"] { - display: none; -} -div .md-source__fact { - display: none; -} -.md-source__icon+.md-source__repository { - margin-left: -1em; - padding-left: 0; - font-weight: 500; -} -.md-nav__link { - font-size: var(--drake-font-size); - line-height: 1.6; + font-size: 14px !important; } -/*代码块*/ -.md-typeset code { - font-size: inherit; - border-radius: 2px !important; - border: none !important; -} -.md-typeset pre>code { - padding: 0.8em 0.8em; -} -code span::selection { - background: #214283; -} -.highlight code::selection { - background: #214283; -} - -/*代码片段*/ -p code, article > code, li > code, td > code, th > code, a > code { - background-color: transparent !important; - color: var(--drake-highlight) !important; - padding: 0 2px !important; -} - -img { - border-radius: 2px; - margin: 4px 0; -} - -/*链接*/ -.md-content a { - color: var(--drake-highlight) !important; - text-decoration: underline; - margin: 0 2px; -} - -/*编辑按钮*/ -.md-typeset .md-content__button { - color: var(--md-default-fg-color--lighter) !important; -} -.md-icon svg { - width: 14px; -} - -/*标题*/ -h1, h2, h3, h4, h5, h6, .md-header-nav__title { - font-weight: bold !important; - color: #273849; -} -.md-typeset h1 { - text-align: center; - font-size: 1.45em; - color:#273849; -} -.md-typeset h2 { - display: inline-block; - font-size: 1.45em; -} -h2:after { - display: block; - content: ''; - height: 2px; - margin-top: 4px; - background-color:#273849; - border-radius: 2px; - margin-right: 1.1em; -} - -/*清单*/ -.md-typeset [type=checkbox]:checked+.task-list-indicator:before { - background-color: #43A047; -} -.md-typeset .task-list-indicator:before { - background-color: #c7c7c7; -} -.md-typeset .task-list-control { - margin-right: 8px; -} - -/*复制图标*/ -.md-clipboard:after { - background-color: #4d4d4d; -} - -/*头部*/ -.md-ellipsis { - font-weight: bold; -} - -/*折叠块*/ -/*标题展开状态*/ .md-typeset .admonition-title, .md-typeset summary { - border-left: none; - margin: 0; -} -/*标题背景*/ -.md-typeset .abstract>.admonition-title, .md-typeset .abstract>summary, .md-typeset .summary>.admonition-title, .md-typeset .summary>summary, .md-typeset .tldr>.admonition-title, .md-typeset .tldr>summary { - background-color: #f2f2f2; - border: 1px solid #dfe2e5; - font-weight: bold; -} -/*内容展开状态*/ -.md-typeset .admonition, .md-typeset details { - border-left: none; - box-shadow: none; - padding: 0; - font-size: var(--drake-font-size); -} -/*标题栏左侧图标*/ -.md-typeset .abstract>.admonition-title:before, .md-typeset .abstract>summary:before, .md-typeset .summary>.admonition-title:before, .md-typeset .summary>summary:before, .md-typeset .tldr>.admonition-title:before, .md-typeset .tldr>summary:before { - background-color: var(--md-admonition-fg-color); - top: .5rem; -} -/*箭头图标*/ -.md-typeset summary:after { - top: .5rem; + font-weight: normal; } \ No newline at end of file diff --git a/docs/global.md b/docs/global.md index 840f7d3..a82a258 100644 --- a/docs/global.md +++ b/docs/global.md @@ -1,5 +1,3 @@ -应用大部分页面其实缺省页都是相同的布局, 如果每个页面的缺省页都需要指定就显得很麻烦了, 所以推荐使用全局缺省页配置 - 全部配置由该单例对象[StateConfig](https://github.com/liangjingkanji/StateLayout/blob/master/statelayout/src/main/java/com/drake/statelayout/StateConfig.kt)来配置 ```kotlin @@ -24,4 +22,4 @@ StateConfig.apply { } ``` -> 单例可以覆盖全局的配置, 单例即当前页面的`StateLayout` \ No newline at end of file +> 单例即指定当前`StateLayout` \ No newline at end of file diff --git a/docs/img/book-open.svg b/docs/img/book-open.svg new file mode 100644 index 0000000..90c8748 --- /dev/null +++ b/docs/img/book-open.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/docs/img/discussesions.svg b/docs/img/discussesions.svg new file mode 100644 index 0000000..eca257d --- /dev/null +++ b/docs/img/discussesions.svg @@ -0,0 +1,25 @@ + + + 编组备份 + + + + + + + 讨论 + + + Discussions + + + + + \ No newline at end of file diff --git a/docs/img/issues.svg b/docs/img/issues.svg new file mode 100644 index 0000000..9719f9d --- /dev/null +++ b/docs/img/issues.svg @@ -0,0 +1,29 @@ + + + 编组 + + + + + + + 常见问题 + + + + + + Issues + + + + + + \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index f3e1395..f0960e8 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,6 +1,6 @@

-StateLayout布局包裹的内容才能控制其显示缺省页 +缺省页存在不同的状态, 可以称为状态页, 而StateLayout布局包裹的视图叫内容视图
@@ -38,7 +38,7 @@ StateLayout布局包裹的内容才能控制其显示缺省页 ## 设置缺省页 -设置缺省页可以通过两种方式设置 +指定状态页可以两种方式 === "代码设置" ```kotlin @@ -80,4 +80,4 @@ state.showEmpty() state.showError() state.showContent() ``` -这些`show*()`函数都有一个Any参数, 可以传递任何对象到[生命周期](callback.md)中, 进行定制化展示不同的缺省页 \ No newline at end of file +`showXX()`都有一个Any参数(标签), 可以传递对象到[生命周期](callback.md)中, 进行定制化展示 \ No newline at end of file diff --git a/docs/material/partials/footer.html b/docs/material/partials/footer.html index 9ee66ff..d583f41 100644 --- a/docs/material/partials/footer.html +++ b/docs/material/partials/footer.html @@ -1,18 +1,3 @@ - {% import "partials/language.html" as lang with context %} @@ -24,7 +9,8 @@ {% if page.previous_page %} -