preface

Dialogs are often used in Android development to handle popovers. Although the Android system itself encapsulates a pop-up Dialog for us, due to the difference of Android operating system, the pop-up page of each mobile phone is different, so that it is difficult for us to unify the style with the system. And the UI thinks that the popover is ugly and wants to make one so we have to do a Dialog popover ourselves. Today we call you to use the Builder pattern to encapsulate a popover Dialog itself.

Demand analysis

First of all, what do we need for popovers?

  1. Need to be able to customize their own style. Because each popover will have a different style depending on the logic and requirements. For example, some popovers have title titles, others just message; Some have ok and cancel buttons, some have only one OK button. We have to use a set of code to load different styles.
  2. Set the title or message content. Here you can set different text content depending on the id passed in.
  3. Sets the button click event
  4. Set whether to click the popover section to make the popover disappear.

Start operation

After analyzing the requirements, we can roll out the code according to the requirements.

Let’s start by writing a CommonDialog class that inherits Dialog. At this point we have to duplicate onCreat() and do some setup on onCreat(). Here we set setContentView() to load the layout style and setCancelable() to make the popover disappear by clicking out of the popover.

public class CommonDialog extends Dialog {
    private Context context;
    private View view;
    private boolean cancelTouchout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(view);
        setCancelable(cancelTouchout); }}Copy the code

This is where we start coding the Builder pattern.

The constructor pattern, as the name implies, is to add requirements to the code as we need them. For example, if we need to set the content of the title title, we add this function, and if we need to set the content of the message, we add this function. Don’t add this code if you don’t need it.

Start by loading different layouts based on different styles. In this case, we use LayoutInflater. Layout styles are passed in by parameters.

        public Builder view(int resView) {
            view = LayoutInflater.from(context).inflate(resView, null);
            return this;
        }
Copy the code

Secondly, according to whether you can click the popover window to make the popover disappear.

        public Builder cancelTouchout(boolean val) {
            cancelTouchout = val;
            return this;
        }
Copy the code

If val is passed in as true, it can disappear; if val is passed in as false, it cannot disappear.

Next, let’s look at how different content is set based on title and message. Here we set two parameters, one is the ID of the content to be set, and the other is the text title/message of the content to be set. We find the control in the View using findViewById, and then set the text to the control based on the text content.

// Set the title title public BuildersetTitle(int viewRes,String title){
            TextView txtTitle = (TextView) view.findViewById(viewRes);
            txtTitle.setText(title);
            returnthis; } // Set the content to message public BuildersetMessage(int viewRes,String message){
            TextView txtMessage = (TextView)view.findViewById(viewRes);
            txtMessage.setText(message);
            return this;
        }
Copy the code

Then it’s time to set up click events. Click events can be handled by referring to setting title and message by passing in the ID of the click control to find the ID, and then calling the click logic back and forth with view. OnClickListener.

        public Builder addViewOnclick(int viewRes,View.OnClickListener listener){
            view.findViewById(viewRes).setOnClickListener(listener);
            return this;
        }
Copy the code

Finally we just need to write the last build to return a CommonDialog. But if we call this CommonDialog at this point you’ll notice that no matter how we set the View that’s loaded, the size is actually the same. What’s going on here? This is actually because our background color is set together into the View layout. If we set the background of our loaded View to black (#000000), we’ll be surprised to see some white around the View. Because of the whiteness, no matter how we set the width of the popover, it always shows the original size. If you’re going to set it to rounded corners, it’s even less likely.

So how do you handle this situation? In fact, we just need to set the popover style with a transparent background to handle this situation.

We set a style style in the value-style and set the background to transparent.

<! < span style = "box-sizing: border-box! Important; word-wrap: break-word! Important"Dialog" parent="android:style/Theme.Dialog">
        <item name="android:background">@android:color/transparent</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowNoTitle">true</item>
    </style>
Copy the code

At this point we set a style style in the CommonDialog, which handles the style based on the style passed in.

        public Builder style(int resStyle) {
            this.resStyle = resStyle;
            return this;
        }
Copy the code

Finally, we write two more CommonDialog constructors that call different parent classes depending on whether a style is passed in. The operation is complete.

    private CommonDialog(Builder builder) {
        super(builder.context);
        context = builder.context;
        cancelTouchout = builder.cancelTouchout;
        view = builder.view;
    }


    private CommonDialog(Builder builder, int resStyle) {
        super(builder.context, resStyle);
        context = builder.context;
        cancelTouchout = builder.cancelTouchout;
        view = builder.view;
    }
Copy the code

At this point our entire code is complete.

use

It’s easy to use, just create a CommonDialog.Builder to add different operations based on your business needs.

CommonDialog build; //dialog popup private voiddialog(){build = new commondialog.builder (this).view(r.layout.dialog)// Set the style layout.style (r.style.dialog)// Set the theme, Here you can set the background to transparent so that only the parts of the dialog you want to display are displayed. CancelTouchout (true// Set the popup window to disappear after clicking dialog.trueTo disappear,falseSetTitle (r.i.d.txt_title,"This is a popover title."SetMessage (r.i.d.txt_message,"This is a popover message content."AddViewOnclick (r.id.txt_sure, new View)// Set the display text of the message content according to the ID.addViewonClick (R.id.txt_sure, new ViewOnClickListener@override public void onClick(View v) {toast.makeText (mainactivity.this,"Hit ok", Toast.LENGTH_SHORT).show();
                        build.dismiss();
                    }
                })
                .addViewOnclick(R.id.txt_cancel, new View.OnClickListener@override public void onClick(View v) {toast.makeText (mainactivity.this,"Hit the cancel button.", Toast.LENGTH_SHORT).show();
                        build.dismiss();
                    }
                }).build();

                build.show();

    }

Copy the code

Code has been uploaded to Github, just copy the CommonDialog class into your own project and then copy the style Dialog can be used, convenient and quick. Welcome to the start. Making portal

Have interest can pay attention to my small column, learn more workplace product thinking knowledge: small column