Skip to content

Commit 29149fb

Browse files
author
lemon
committed
implements guideview with dialogfragment
0 parents  commit 29149fb

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+1892
-0
lines changed

Diff for: ‎.gitignore

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
*.iml
2+
.gradle
3+
/local.properties
4+
/.idea/libraries
5+
/.idea/modules.xml
6+
/.idea/workspace.xml
7+
.DS_Store
8+
/build
9+
/captures
10+
.externalNativeBuild

Diff for: ‎.idea/caches/build_file_checksums.ser

580 Bytes
Binary file not shown.

Diff for: ‎.idea/codeStyles/Project.xml

+29
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎.idea/gradle.xml

+19
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎.idea/misc.xml

+34
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎.idea/runConfigurations.xml

+12
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎.idea/vcs.xml

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎README.md

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
# GuideView:基于DialogFragment实现
2+
3+
基于`DialogFragment`实现的引导遮罩浮层视图，具备以下的特性：
4+
5+
* 响应导航按钮的动作（因为透明的浮层本质是一个dialog）
6+
* 链式引导层，支持设定一组的引导遮罩视图，点击切换下一个试图
7+
* 自动绘制半透明浮层、透明核心区以及确保目标视图和引导视图的位置
8+
9+
效果如下图所示：
10+
11+
![](/assets/guideview.gif)
12+
13+
## 实现说明
14+
15+
页面的结构如下图所示：
16+
17+
![ic_guideview](/assets/ic_guideview.png)
18+
19+
### 核心类
20+
21+
#### GuideViewBundle
22+
23+
引导视图的配置项类，每一页引导视图对应一个配置项。在**GuideView**内部通过这个配置项去构造`GuideView`的实例，并通过`GuideViewFragment`显示在界面上。
24+
25+
其中的属性都通过构造器的模式，通过静态内部类`Builder`进行构建，属性说明如下：
26+
27+
* targetView
28+
29+
引导视图需要显示附着的目标视图
30+
31+
* hintView
32+
33+
引导视图（不包含半透明浮层以及透明焦点区）
34+
35+
* transparentSpaceXXX
36+
37+
默认的情况下，透明焦点区的大小跟目标视图的大小保持一致，如果需要加大透明区域的大小，可以通过设置这组属性，指定上下左右的额外的空白区域
38+
39+
* hintViewMarginXXX
40+
41+
引导视图（hintView）相对于目标视图（targetView）的边距
42+
43+
* hasTransparentLayer
44+
45+
是否显示透明焦点区域，默认显示。可以选择不绘制透明焦点区域而只有半透明的浮层
46+
47+
* hintViewDirection
48+
49+
引导视图（hintView）相对于目标视图（targetView）的位置方向，目前可以定义上（上方左对齐）、下（下方左对齐）、左（左方上对齐）、右（右方上对齐）四个方向。如果需要在位置之余有不一样的对齐效果，可以使用hintViewMarginXXX属性
50+
51+
* outlineType
52+
53+
透明焦点区的轮廓类型，有圆形（椭圆）轮廓和方形轮廓两种
54+
55+
* maskColor
56+
57+
半透明遮罩浮层的颜色
58+
59+
* isDismissOnClicked
60+
61+
全局点击可以关闭引导视图，默认为true。如果设置false，则需要手动设置点击hintView的特定位置关闭视图
62+
63+
#### GuideView
64+
65+
界面实际展示的视图对象，根据`GuideViewBundle`设置的属性，由`GuideViewFragment`创建并添加到齐视图容器中，对外部业务完全透明无感知到一个类
66+
67+
#### GuideViewFragment
68+
69+
实际显示引导视图的弹窗。其内部加载了一个`FrameLayout`容器，通过在容器中添加`GuideView`的实例实现显示引导视图层。一个`GuideViewFragment`可以设定一组引导视图，完成一组引导序列。请使用其静态内部类`Builder`构建其实例，并使用`Builder#addGuidViewBundle(bundle)`方法添加引导视图的配置项。
70+
71+
如果需要自定义点击关闭的动作（`GuideViewBundle.Builder#setDismissOnClicked(false)`的情况下），可以使用下面的方法
72+
73+
```Java
74+
void onNext()
75+
```
76+
77+
如果还存在没有显示的引导视图，这个方法会继续显示下一张，否则会关闭弹窗
78+
79+
### 使用示例
80+
81+
```kotlin
82+
GuideViewFragment.Builder()
83+
.addGuidViewBundle(GuideViewBundle.Builder()
84+
.setTargetView(tvContent)
85+
.setHintView(hintViewLeft)
86+
.setDismissOnClicked(false)
87+
.setHintViewMargin(0, -160, 0, 0)
88+
.setTransparentSpace(space, space, space, space)
89+
.setOutlineType(TYPE_RECT)
90+
.setHintViewParams(params)
91+
.setHintViewDirection(LEFT).build())
92+
.addGuidViewBundle(GuideViewBundle.Builder()
93+
.setTargetView(tvContent)
94+
.setOutlineType(TYPE_OVAL)
95+
.setHintView(hintViewTop)
96+
.setDismissOnClicked(false)
97+
.setHintViewParams(params)
98+
.setHintViewMargin(-dp2px(this, 55f), 0, 0, 0)
99+
.setTransparentSpace(space, space, space, space)
100+
.setHintViewDirection(TOP)
101+
.build())
102+
.addGuidViewBundle(GuideViewBundle.Builder()
103+
.setTargetView(tvContent)
104+
.setOutlineType(TYPE_OVAL)
105+
.setHintView(hintViewRight)
106+
.setDismissOnClicked(false)
107+
.setHintViewParams(params)
108+
.setHintViewMargin(0, -160, 0, 0)
109+
.setTransparentSpace(space, space, space, space)
110+
.setHintViewDirection(RIGHT)
111+
.build())
112+
.addGuidViewBundle(GuideViewBundle.Builder()
113+
.setTargetView(tvContent)
114+
.setOutlineType(TYPE_OVAL)
115+
.setHintViewParams(params)
116+
.setHintViewMargin(-dp2px(this, 55f), 0, 0, 0)
117+
.setHintView(hintViewBottom)
118+
.setTransparentSpace(space, space, space, space)
119+
.setHintViewDirection(BOTTOM)
120+
.build())
121+
.setCancelable(false)
122+
.build().show(supportFragmentManager, "hit")
123+
```
124+
125+
126+

Diff for: ‎app/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/build

Diff for: ‎app/build.gradle

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
apply plugin: 'com.android.application'
2+
3+
apply plugin: 'kotlin-android'
4+
5+
apply plugin: 'kotlin-android-extensions'
6+
7+
android {
8+
compileSdkVersion 27
9+
defaultConfig {
10+
applicationId "easily.tech.guideview"
11+
minSdkVersion 15
12+
targetSdkVersion 27
13+
versionCode 1
14+
versionName "1.0"
15+
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
16+
}
17+
buildTypes {
18+
release {
19+
minifyEnabled false
20+
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
21+
}
22+
}
23+
}
24+
25+
dependencies {
26+
implementation fileTree(include: ['*.jar'], dir: 'libs')
27+
implementation "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"
28+
implementation 'com.android.support:appcompat-v7:27.1.1'
29+
implementation 'com.android.support.constraint:constraint-layout:1.1.0'
30+
testImplementation 'junit:junit:4.12'
31+
androidTestImplementation 'com.android.support.test:runner:1.0.1'
32+
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
33+
implementation project(':lib')
34+
}

Diff for: ‎app/proguard-rules.pro

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Add project specific ProGuard rules here.
2+
# You can control the set of applied configuration files using the
3+
# proguardFiles setting in build.gradle.
4+
#
5+
# For more details, see
6+
# http://developer.android.com/guide/developing/tools/proguard.html
7+
8+
# If your project uses WebView with JS, uncomment the following
9+
# and specify the fully qualified class name to the JavaScript interface
10+
# class:
11+
#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
12+
# public *;
13+
#}
14+
15+
# Uncomment this to preserve the line number information for
16+
# debugging stack traces.
17+
#-keepattributes SourceFile,LineNumberTable
18+
19+
# If you keep the line number information, uncomment this to
20+
# hide the original source file name.
21+
#-renamesourcefileattribute SourceFile

Diff for: ‎app/src/androidTest/java/easily/tech/guideview/ExampleInstrumentedTest.kt

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
package easily.tech.guideview
2+
3+
import android.support.test.InstrumentationRegistry
4+
import android.support.test.runner.AndroidJUnit4
5+
6+
import org.junit.Test
7+
import org.junit.runner.RunWith
8+
9+
import org.junit.Assert.*
10+
11+
/**
12+
* Instrumented test, which will execute on an Android device.
13+
*
14+
* See [testing documentation](http://d.android.com/tools/testing).
15+
*/
16+
@RunWith(AndroidJUnit4::class)
17+
class ExampleInstrumentedTest {
18+
@Test
19+
fun useAppContext() {
20+
// Context of the app under test.
21+
val appContext = InstrumentationRegistry.getTargetContext()
22+
assertEquals("easily.tech.guideview", appContext.packageName)
23+
}
24+
}

Diff for: ‎app/src/main/AndroidManifest.xml

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
3+
package="easily.tech.guideview">
4+
5+
<application
6+
android:allowBackup="true"
7+
android:icon="@mipmap/ic_launcher"
8+
android:label="@string/app_name"
9+
android:roundIcon="@mipmap/ic_launcher_round"
10+
android:supportsRtl="true"
11+
android:theme="@style/AppTheme">
12+
<activity android:name=".MainActivity">
13+
<intent-filter>
14+
<action android:name="android.intent.action.MAIN" />
15+
16+
<category android:name="android.intent.category.LAUNCHER" />
17+
</intent-filter>
18+
</activity>
19+
</application>
20+
21+
</manifest>

0 commit comments

Comments
 (0)