Android UI Design Series custom dialog Implement various styles of dialog box effects (7) _android

Source: Internet
Author: User
Tags button type event listener

Although Android provides us with a number of components, but not very convenient to use, we developed the APK have their own style, if the use of the system self-contained components, always feel and the application of the theme is irrelevant and does not look good, then we need to customize, In order to facilitate the learning of custom components, I have prepared several dialog articles on customization, which I hope will help you.
The most common estimate in development apk is the pop-up dialog box, which is roughly three according to the number of buttons: A button, two buttons, and three buttons. Now it's about dividing the number of buttons into these three categories (of course you can have more buttons if you want).
Custom dialog dialogs can be roughly divided into three steps: The first step is to redefine the style of the dialog, the second is to define the layout files we need to display, and the third is to set up event listeners.
Well, the old rules, first put on the engineering directory:

In engineering I have defined a base class Basebean, which is used as the base class in the whole project, the base class defines some common common properties, if there is a need for additional attributes we just need to inherit the base class, so I defined Dialogbean, it inherits Basebean, So it has all the features of Basebean. Let's take a look at what is defined in Basebean:

public class Basebean { 
 
  /** 
   * Title 
  /String title; 
  /** 
   * Contents 
  /String content; 
 
  /** 
   * Get title 
   * 
   * @return title 
  /Public String GetTitle () {return title 
    ; 
  } 
 
  /** 
   * Set Title 
   * 
   * @param title 
   *      Header 
  /public void Settitle (String title) { 
    this.title = title; 
  } 
 
  /** 
   * Get content 
   * 
   * @return content 
  /public String getcontent () {return content 
    ; 
  } 
 
  /** 
   * Set Content 
   * 
   * @param content 
   *      Contents 
   * 
  /public void SetContent (String content) { 
    this.content = content; 
  } 
 

The above is the content in the base class, then let's look at what is defined in dialog:

public class Dialogbean extends Basebean {/** * Click the return key to disappear * * Boolean cancelable; 
  /** * Click whether the skin can disappear * * Boolean outcancelable; 
  /** * Event Monitoring * * Dialogclicklistener listener; 
 
  /** * Button Type "default display two Buttons" * * dialogbuttontype buttontype = Dialogbuttontype.twobutton; 
 
  /** * Display layout resource ID */Integer layoutresid;  Public Dialogbean () {}/** * Click the back key to disappear * * @return "true: Can Disappear" "false: Do not disappear" * * public Boolean 
  Iscancelable () {return cancelable; /** * Settings Click the back key can disappear * * @param cancelable * "true: Can Disappear" "false: Do not disappear" */public void SETC 
  Ancelable (Boolean cancelable) {this.cancelable = cancelable; /** * Click whether the skin can disappear * * @return "true: Can Disappear" "false: Do not disappear" * * public boolean isoutcancelable () {RE 
  Turn outcancelable; /** * Settings Click whether the skin can disappear * * @param outcancelable * "true: Can Disappear" "false: Do not disappear" */public void SetO UtcAncelable (Boolean outcancelable) {this.outcancelable = outcancelable; /** * Get Event Listener * * @return Event Listener/Public Dialogclicklistener Getlistener () {return listen 
  Er /** * Set Event listener * * @param listener * Event listener/public void Setlistener (Dialogclicklistene 
  R listener) {This.listener = listener; /** * Get Button Type * * @return button type/public Dialogbuttontype Getbuttontype () {return Buttontyp 
  E  /** * Set Button type * * @param buttontype * Button type/public void Setbuttontype (Dialogbuttontype 
  ButtonType) {this.buttontype = ButtonType; /** * Gets the layout ID to display * * @return the layout ID to display */public Integer Getlayoutresid () {return layoutres 
  ID; /** * Set the layout ID to display * * @param layoutresid * The layout ID to display */public void Setlayoutresid (intege 
  R layoutresid) {this.layoutresid = Layoutresid; } 
 
  /**
   * Button Type * * @author Llew */public enum Dialogbuttontype {/** * a button * * Onebutton ,/** * Two button/Twobutton,/** * three buttons * * Threebutton}/** * button click Supervisor @author Llew * * */public interface Dialogclicklistener {/** * Click button * * 
  Param buttonindex * button subscript "starting from 0" */public void OnClick (int buttonindex); 
 } 
}

The code annotation in the Dialogbean is very detailed, it is no longer explained, mainly to encapsulate the common properties of the dialog box. Let's take a look at the dialog style you need to define:

<style name= "Theme_dialog_alert" parent= "@android: Style/theme.dialog" > 
    <item name= "Android: Windownotitle ">true</item> 
    <item name=" Android:windowbackground "> @android: Color/transparent </item> 
</style> 

Style mainly defines the dialog box has no title, the background color is transparent, now the required style is defined, the protagonist Globledialog should appear, the code is as follows:

public class Globledialog extends Dialog implements View.onclicklistener {private TextView Titletextview, Contentte 
  Xtview; 
  Private Button LeftButton, Centerbutton, Rightbutton; 
   
  Private Dialogbean Bean; 
    Public Globledialog (context, int theme, Dialogbean beans) {Super (context, theme); 
    This.bean = Bean; 
  Initwedgits (); 
      /** * Initialize components/private void Initwedgits () {try {setcancelable (bean.iscancelable ()); 
      Setcanceledontouchoutside (Bean.isoutcancelable ()); 
      View Dialogview = Getlayoutinflater (). Inflate (Bean.getlayoutresid (), NULL); 
      Titletextview = (TextView) Dialogview.findviewbyid (r.id.button_title); 
      Contenttextview = (TextView) Dialogview.findviewbyid (r.id.button_content); 
      Titletextview.settext (Bean.gettitle ()); 
      Contenttextview.settext (Bean.getcontent ()); 
      LeftButton = (Button) Dialogview.findviewbyid (r.id.button_left); Centerbutton = (Button) Dialogview.findvieWbyid (R.id.button_center); 
       
      Rightbutton = (Button) Dialogview.findviewbyid (r.id.button_right); 
      Leftbutton.setonclicklistener (this); 
      Centerbutton.setonclicklistener (this); 
       
      Rightbutton.setonclicklistener (this); 
        if (Dialogbuttontype.onebutton = = Bean.getbuttontype ()) {leftbutton.setvisibility (view.gone); 
      Rightbutton.setvisibility (View.gone); 
      else if (Dialogbuttontype.twobutton = = Bean.getbuttontype ()) {centerbutton.setvisibility (view.gone); 
       
      } setcontentview (Dialogview); 
      Window Dialogwindow = GetWindow (); 
      Windowmanager.layoutparams LP = Dialogwindow.getattributes (); 
      Dialogwindow.setgravity (Gravity.center); 
      Displaymetrics dm = new Displaymetrics (); 
      Dialogwindow.getwindowmanager (). Getdefaultdisplay (). Getmetrics (DM); 
      Lp.width = dm.widthpixels-20; 
    Dialogwindow.setattributes (LP); 
 catch (Exception e) {e.printstacktrace ();   @Override public void OnClick (View v) {try {switch (V.getid ()) {case r.id.button_l 
        Eft:bean.getListener (). OnClick (0); 
      Break 
        Case R.id.button_center:bean.getlistener (). OnClick (1); 
      Break 
        Case R.id.button_right:bean.getlistener (). OnClick (2); 
      Break 
      Default:break; 
    } catch (Exception e) {e.printstacktrace (); 
 } 
  } 
 
}

Custom Globledialog code is written, so let's see how it's used:

Package com.llew.e.dialog.view.activity; 
Import android.app.Activity; 
Import Android.app.Dialog; 
Import Android.os.Bundle; 
Import Android.view.View; 
Import Android.view.View.OnClickListener; 
Import Android.widget.TextView; 
 
Import Android.widget.Toast; 
Import COM.LLEW.E.DIALOG.R; 
Import Com.llew.e.dialog.view.bean.dialogbean; 
Import Com.llew.e.dialog.view.bean.dialogbean.dialogbuttontype; 
Import Com.llew.e.dialog.view.bean.dialogbean.dialogclicklistener; 
 
Import Com.llew.e.dialog.view.wedgit.globledialog; The public class Mainactivity extends activity {/** called the ' when the ' is the ' activity ' is the ' the '. * Private created Di 
  Alog; 
   
  Private TextView TextView; 
    @Override public void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); 
    Setcontentview (R.layout.main); 
    TextView = (TextView) Findviewbyid (R.id.textview); Textview.setonclicklistener (New Onclicklistener () {@Override public void OnClick (View v) { 
        Dialogbean Dialogbean = new Dialogbean (); 
        Dialogbean.setcancelable (TRUE); 
        Dialogbean.setoutcancelable (TRUE); 
        Dialogbean.settitle ("small Exercise"); 
        Dialogbean.setcontent ("Enter the hint information here"); 
        Dialogbean.setbuttontype (Dialogbuttontype.twobutton); 
        Dialogbean.setlayoutresid (R.layout.dialog_common); 
            Dialogbean.setlistener (New Dialogclicklistener () {@Override public void OnClick (int buttonindex) { Switch (buttonindex) {case 0:toast.maketext (Mainactivity.this, "clicked Play", TOAST.L 
              Ength_short). Show (); 
            Break 
              Case 1:toast.maketext (Mainactivity.this, "clicked Paused", Toast.length_short). Show (); 
            Break 
              Case 2:toast.maketext (Mainactivity.this, "Click on Stop", Toast.length_short). Show (); 
            Break 
            Default:break; 
        } 
          } 
        }); CreatedialOG (Dialogbean); 
  } 
    }); public void createdialog (Dialogbean bean) {if (null = = Dialog) {dialog = new Globledialog (mainactivi 
    Ty.this, R.style.theme_dialog_alert, Bean); 
  } dialog.show (); 
 } 
}

There is no good explanation for the code, I believe you will look at it, then look at the operation of the effect bar:

The interface looks a bit ugly, you can modify the color values themselves or use a picture instead.

All right, here we go. Customize the dialog to implement the different style effects of the dialog box is finished, thank you for your reading.

SOURCE Download: Android UI design implements various styles of dialog box effect

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.