Today I’m going to recommend a good mask boot library, an open source project I’ve been working on for the better part of a year. Just finished the first version of the time, I also recorded the article, and had the honor to recommend guo Lin dashen’s public account: recommend a good small Android guide mask (floating layer) library. The functions of the first version were relatively simple. In the subsequent iterations, I also added many new functions: Fragment support, multi-page continuous display, switching animation, Anchor, etc. The current 2.x version is fundamentally different from the first version, including the way it is called.

If you read my article above, you know why I created this project. But with my special attention, I found that there are many similar wheels, the more famous ones are GuideView, Highlight, TourGuide and so on. I also downloaded each of these projects, studied their source code, and analyzed their implementation. After drawing lessons from these projects, I tried to absorb the advantages of each project and constantly improve my own project, so that I can grow by maintaining the project.

So far, this project has most of the function points of the above projects and is much easier to use. How to use or see the following introduction ~

The project address

NewbieGuide

The import

Build. Gradle adds to the project

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

Build. Gradle for module

 dependencies {
	  compile 'com. Making. Huburt - Hu: NewbieGuide: v2.0.1'
}
Copy the code

If you use AppCompat-v7 in your project, you can exclude references to V7 from this library to avoid version confusion

 dependencies {
	  compile ('com. Making. Huburt - Hu: NewbieGuide: v2.0.0') {
            exclude group: 'com.android.support'}}Copy the code

Simple to use

NewbieGuide.with(activity)
        .setLabel("guide1")
        .addGuidePage(GuidePage.newInstance()
            .addHighLight(btnSimple)
            .setLayoutRes(R.layout.view_guide_simple))
        .show();
Copy the code

A single line of code can be used to display the boot layer through a chain call.

Among them:

  • withMethod can be passed to an Activity or Fragment to get an attachment to the boot page. If a Fragment is passed with a suggestion, the internal listener is added. When the attached Fragment is destroyed, the bootstrap layer disappears automatically.
  • setLabelThe bootpage () method is used to set the bootpage label to distinguish between different bootpagesMust beCall Settings, otherwise an exception is thrown. This label is used internally to control the number of times the boot page is displayed.
  • addGuidePageMethod to add a boot page, where the boot layer can have multiple boot pages, but at least one is required.
  • GuidePageThe bootpage object represents a bootpage that can be passed.newInstance()Create an object. And through theaddHighLightAdd one or more views that need to be highlighted. This method has multiple overloads to set the highlighted shape, the padding, etc. (default is rectangle).setLayoutResMethod is used to guide the page description layout, as shown in the illustration above.
  • showMethod to display the boot layer directly, if you do not want to display it immediatelybuildMethod returns a Controller object to complete the build. Call the show method of the Controller object again if necessary.

Display frequency control

Normally the boot page is only displayed when the user opens the app for the first time, not the second time, so by default it is only displayed once. SetShowCounts (3) specifies how many counts to display. AlwaysShow (true) specifies how many counts to display.

NewbieGuide.with(activity)
        .setLabel("guide1")//.setShowCounts(3)true// Always display, To debug, open.addGuidePage(guidePage.newinstance ().addHighlight (btnSimple).setLayoutres (r.layout.view_guide_simple) .show();Copy the code

Even if.alwaysshow (true) is set to setShowCounts(3), the actual count may have already exceeded the limit and will not be displayed again. Reset times using the Controller object’s resetLabel method. (Or clearing the app cache can also reset the count)

Customize the description layout

To highlight the setLayoutRes method, other similar libraries use code parameters to control the display of the content in the highlight view, as shown below. It often takes multiple runs to find parameters in a satisfactory location. Most of the description content can only appear around the highlight, requires library support, the degree of customization is not very high.

The approach I took was to customize the placement of the description content via XML. Make the description highly customizable, whether you’re a simple image or a dialog box type.

GuidePage.newInstance()
    .addHighLight(btnDialog)
    .setEverywhereCancelable(false)// Whether to click any position to disappear the boot page, defaulttrue
    .setLayoutRes(R.layout.view_guide_dialog, R.id.btn_ok)
    .setOnLayoutInflatedListener(new OnLayoutInflatedListener() { @Override public void onLayoutInflated(View view) { TextView tv = view.findViewById(R.id.tv_text); }})Copy the code

The method also has a variable parameter setLayoutRes(@layoutRes int resId, int… Id), passing in an array of ids to indicate a View in the layout that clicks make the bootpage disappear or go to the next page (for example, the ID of Button OK). SetOnLayoutInflatedListener set layout fill finished listening, when the incoming XML (R.l ayout. View_guide_dialog) fill complete answer calls the listening, when they set the layout of the elements used for initialization.

The background color

Guide the page background color don’t set in the XML, through GuidePage. SetBackgroundColor () set the background color of page guide, guide page can have different background color, the default is 0 xb2000000, suggested Settings have a transparent background color.

anchor

By default the bootstrap layer is added to the DecorView. I borrow the anchor concept of Highlight and can change the view to which the bootstrap layer is added to display the local bootstrap layer. AnchorView, which is the root layout of the boot layer, is passed in by calling. Anchor (View).

final View anchorView = findViewById(R.id.ll_anchor);
 
NewbieGuide.with(FirstActivity.this)
        .setLabel("anchor")                        .anchor(anchorView)
        .alwaysShow(true// Always display, To debug, open.addGuidePage(guidePage.newinstance ().addHighlight (btnAnchor, highlight.shape.circle, 5) .setLayoutRes(R.layout.view_guide_anchor)) .show();Copy the code

This is where the concrete display boot layer is implemented.

The guide layer is actually a FrameLayout. After setting the anchor, the size of the guide layer will be the same as the location occupied by the Anchor. The default is a DecorView, that is, full screen. The illustrated layout set by the setLayoutRes method is added to the FrameLayout of the boot layer.

The boot layer shows hidden listeners

SetOnGuideChangedListener add layers show hidden listening, said a label a guiding layer and a guiding layer can have multiple page guide, guide page switch will trigger the listener.

NewbieGuide.with(FirstActivity.this)
    .setLabel("listener")
    .alwaysShow(true) / / always show, when debugging, can open the setOnGuideChangedListener (newOnGuideChangedListener() {
        @Override
        public void onShowed(Controller controller) {
            Toast.makeText(FirstActivity.this, "Boot layer display", Toast.LENGTH_SHORT).show();
        }

        @Override
        public void onRemoved(Controller controller) {
            Toast.makeText(FirstActivity.this, "The guidance layer is gone.", Toast.LENGTH_SHORT).show();
        }
    })
    .addGuidePage(GuidePage.newInstance().addHighLight(btnListener))
    .show();
Copy the code

Multi – page boot page with listener

.setOnPageChangedListener(new OnPageChangedListener() {@override public void onPageChanged(int page) {// Initiate page switch, page is the current page position, from 0 toasts. MakeText (mainactivity.this,"Boot page switch:"+ page, Toast.LENGTH_SHORT).show(); }}).addguidepage (// add a GuidePage guidepage.newinstance ()// create an instance. AddHighLight (button)// add a highlight view.addhighlight (tvBottom, HighLight. Shape. RECTANGLE). SetLayoutRes (R.l ayout. View_guide). / / set to guide page layout setOnLayoutInflatedListener (newOnLayoutInflatedListener() {@override public void onlayoutvehicle (View View) {// Lead page layout after filling callback, TextView TV = view.findViewById(R.i.d.extView2); tv.setText("I'm dynamically set text"); }}).setenterAnimation (enterAnimation).setexitAnimation (exitAnimation) / / exit Animation). AddGuidePage (GuidePage. NewInstance () addHighLight (tvBottom, HighLight. Shape. A RECTANGLE, 20).setLayOutres (r.layout.view_guide_custom, R.id.vi).setLayOutres (r.layout.view_guide_custom, R.id.vi)false)// Whether to click anywhere to jump to the next page or disappear the boot layer, defaulttrue.setBackgroundColor(getResources().getColor(r.color.testcolor))// Set the background color, SetEnterAnimation (enterAnimation)// Enter the animation.setexitAnimation (exitAnimation)// Exit Animation)Copy the code

Boot page switch animation

As shown in the example above, you can also add a switch animation for the boot page

Animation enterAnimation = new AlphaAnimation(0f, 1f);
enterAnimation.setDuration(600);
enterAnimation.setFillAfter(true);

Animation exitAnimation = new AlphaAnimation(1f, 0f);
exitAnimation.setDuration(600);
exitAnimation.setFillAfter(true); GuidePage. SetEnterAnimation (enterAnimation) / / into the animation GuidePage setExitAnimation (exitAnimation)// Exits the AnimationCopy the code

More Settings

View the readme for your project