One minute implementation of Android mask boot view

Time:2021-6-11

One minute implementation of Android mask boot view, for your reference, the specific content is as follows

Take a look at the renderings first

leadGuideViewCome on!

Guideview is a software based onDialogFragmentIt has the following characteristics:

  • Respond to the action of the navigation button (because guiding the floating layer is essentially a dialog);
  • The chain boot layer supports setting a set of boot mask views, switching to the next attempt by clicking, fast reading and business decoupling;
  • Automatically draw translucent floating layer, transparent core area and ensure the position of target view and guide view.

Implementation description

The structure of the page is as follows:

Core class

GuideViewBundle

Each page of the bootstrap view corresponds to a configuration item. This configuration item is used to construct an instance of the guideview inside the guideview and display it on the interface through the guideview fragment.

The attributes are constructed through the static inner class builder through the constructor mode. The description of the attributes is as follows:

targetView

The guide view needs to display the attached target view

hintView

Guide view (excluding translucent floating layer and transparent focus area)

transparentSpaceXXX

By default, the size of the transparent focus area is the same as that of the target view. If you need to increase the size of the transparent area, you can set this set of properties to specify additional blank areas up, down, left and right

hintViewMarginXXX

The margin of the hintview relative to the target view

hasTransparentLayer

Whether to display the transparent focus area is displayed by default. You can choose not to draw a transparent focus area but only a translucent floating layer

hintViewDirection

The position and direction of the hintview relative to the target view can be defined as up (top left alignment), down (bottom left alignment), left (left up alignment) and right (right up alignment). If you need to have a different alignment effect beyond the position, you can use the hintviewmarginxxx property

outlineType

There are two types of contour in transparent focus area: Circular (ellipse) contour and square contour

maskColor

Color of floating layer of translucent mask

isDismissOnClicked

Click globally to close the boot view, which is true by default. If it is set to false, you need to manually set it and click the specific location of hintview to close the view

GuideView

According to the properties set by the guideviewbundle, the view object actually displayed in the interface is created by the guideviewfragment and added to the qiview container. It is completely transparent to external business and does not perceive a class

GuideViewFragment

A pop-up window that actually displays the guidance view. A FrameLayout container is loaded inside the container, and the guiding view layer is displayed by adding an instance of guideview to the container. A guide view fragment can set a set of guide views to complete a set of guide sequences. Use its static inner class builder to build its instance, and use the builder # addguidviewbundle (bundle) method to add the configuration item of the boot view.

If you need to customize the action of clicking close (in the case of guideviewbundle. Builder # setdisassonclick (false)), you can use the following method


void onNext()

If there is still a guide view that is not displayed, this method will continue to display the next one, otherwise it will close the pop-up window

Add dependency

1. Add jitpack warehouse to the build.gradle file in the root directory


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

2. Add guideview dependency


dependencies {
  compile 'com.github.easilycoder:GuideView:0.0.1'
}

Use examples


GuideViewFragment.Builder()
          .addGuidViewBundle(GuideViewBundle.Builder()
              .setTargetView(tvContent)
              .setHintView(hintViewLeft)
              .setDismissOnClicked(false)
              .setHintViewMargin(0, -160, 0, 0)
              .setTransparentSpace(space, space, space, space)
              .setOutlineType(TYPE_RECT)
              .setHintViewParams(params)
              .setHintViewDirection(LEFT).build())
          .addGuidViewBundle(GuideViewBundle.Builder()
              .setTargetView(tvContent)
              .setOutlineType(TYPE_OVAL)
              .setHintView(hintViewTop)
              .setDismissOnClicked(false)
              .setHintViewParams(params)
              .setHintViewMargin(-dp2px(this, 55f), 0, 0, 0)
              .setTransparentSpace(space, space, space, space)
              .setHintViewDirection(TOP)
              .build())
          .addGuidViewBundle(GuideViewBundle.Builder()
              .setTargetView(tvContent)
              .setOutlineType(TYPE_OVAL)
              .setHintView(hintViewRight)
              .setDismissOnClicked(false)
              .setHintViewParams(params)
              .setHintViewMargin(0, -160, 0, 0)
              .setTransparentSpace(space, space, space, space)
              .setHintViewDirection(RIGHT)
              .build())
          .addGuidViewBundle(GuideViewBundle.Builder()
              .setTargetView(tvContent)
              .setOutlineType(TYPE_OVAL)
              .setHintViewParams(params)
              .setHintViewMargin(-dp2px(this, 55f), 0, 0, 0)
              .setHintView(hintViewBottom)
              .setTransparentSpace(space, space, space, space)
              .setHintViewDirection(BOTTOM)
              .build())
          .setCancelable(false)
          .build().show(supportFragmentManager, "hit")

Specific examples and design and implementation can refer to my GitHub warehouse: guideview

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.

Recommended Today

What is “hybrid cloud”?

In this paper, we define the concept of “hybrid cloud”, explain four different cloud deployment models of hybrid cloud, and deeply analyze the industrial trend of hybrid cloud through a series of data and charts. 01 introduction Hybrid cloud is a computing environment that integrates multiple platforms and data centers. Generally speaking, hybrid cloud is […]