Android guideview realizes the first login guidance

Time:2021-6-15

Introduction: the lightest novice guide library, can quickly create a mask layer for any view, support a single page, multiple guide tips, support setting different graphics for highlighted areas, support guide animation, and facilitate expansion

Project address: binioter / guideview

GuideView

This system can quickly create a mask navigation page for any view control in an activity.

working principle

First of all, it needs a target view or its ID. we get the view through findviewbyid and calculate its area targetrect on the screen. Through this area, we start to draw a mask covering the entire activity, which can define the color and transparency of the mask. However, the target view is painted transparent to achieve the highlight effect. The next step is to draw some pictures or text in the area relative to the targetrect. We abstract such an image or text into a component interface, and set the text or image. All the image text is defined relative to targetrect. You can set additional X and Y offsets, you can set monitoring callbacks when the visible state of the mask system changes, you can set animation effects at the beginning and end of the mask system, in addition, you can not cover the whole activity, but cover a view.

be careful:See demo for specific usage, with detailed notes

usage

public class SimpleComponent implements Component {
 
  @Override
  public View getView(LayoutInflater inflater) {
     LinearLayout ll = new LinearLayout(inflater.getContext());
     LinearLayout.LayoutParams param =
         new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
     ll.setOrientation(LinearLayout.VERTICAL);
     ll.setLayoutParams(param);
     TextView textView = new TextView(inflater.getContext());
     textView.setText(R.string.welcome);
     textView.setTextColor(inflater.getContext().getResources().getColor(R.color.color_white));
     textView.setTextSize(20);
     ImageView imageView = new ImageView(inflater.getContext());
     imageView.setImageResource(R.mipmap.arrow);
     ll.removeAllViews();
     ll.addView(textView);
     ll.addView(imageView);
     ll.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View view) {
         Toast. Maketext (view. Getcontext (), "the boot layer has been clicked", toast. Length_ SHORT).show();
 
       }
     });
     return ll;
  }
 
    @Override
    public int getAnchor() {
       return Component.ANCHOR_BOTTOM;
    }
 
    @Override
    public int getFitPosition() {
       return Component.FIT_START;
    }
 
    @Override
    public int getXOffset() {
        return 30;
    }
 
    @Override
    public int getYOffset() {
       return 0;
    }
  }
 
 public void showGuideView() {  
   final GuideBuilder builder1 = new GuideBuilder();
   builder1.setTargetView(button1)
       .setAlpha(150)
       . setoverlaytarget (true) // sets whether the target area is highlighted
       .setOutsideTouchable(false);
   builder1.setOnVisibilityChangedListener(new GuideBuilder.OnVisibilityChangedListener() {
     @Override
     public void onShown() {
       // Toast.makeText(MutiGuideViewActivity.this, "show", Toast.LENGTH_SHORT).show();
       }
     @Override
     public void onDismiss() {
       button2.post(new Runnable() {
         @Override
         public void run() {
           showGuideView2();
         }
       });
       // Toast.makeText(MutiGuideViewActivity.this, "dismiss", Toast.LENGTH_SHORT).show();
     }
   });
 
   builder1.addComponent(new SimpleComponent());
   Guide guide = builder1.createGuide();
   guide.setShouldCheckLocInWindow(false);
   guide.show(MutiGuideViewActivity.this);
}

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

Example analysis of the implementation of observer pattern in Ruby design pattern development

In general,Observer modeThe definition of should be as follows: building a clean interface between the source of news that some object has changed and the consumers of that news. The observer pattern establishes a clean interface between message producers and consumers, which makes the coupling between message producers and consumers abstract. The observed can not […]