Android如何自定義view仿iOS彈出框效果

這篇文章將為大家詳細講解有關Android如何自定義view仿iOS彈出框效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

1.layout布局文件

view_actionsheet.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:orientation="vertical"  android:padding="8dp">  <TextView    android:id="@+id/txt_title"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="@drawable/actionsheet_top_normal"    android:gravity="center"    android:minHeight="45dp"    android:paddingBottom="10dp"    android:paddingLeft="15dp"    android:paddingRight="15dp"    android:paddingTop="10dp"    android:textColor="@color/actionsheet_gray"    android:textSize="13sp"    android:visibility="gone" />  <ScrollView    android:id="@+id/sLayout_content"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:fadingEdge="none">    <LinearLayout      android:id="@+id/lLayout_content"      android:layout_width="match_parent"      android:layout_height="wrap_content"      android:orientation="vertical"></LinearLayout>  </ScrollView>  <TextView    android:id="@+id/txt_cancel"    android:layout_width="match_parent"    android:layout_height="45dp"    android:layout_marginTop="8dp"    android:background="@drawable/actionsheet_single_selector"    android:gravity="center"    android:text="取消"    android:textColor="@color/actionsheet_blue"    android:textSize="18sp" /></LinearLayout>

view_alertdialog.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:id="@+id/lLayout_bg"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:background="@drawable/alert_bg"  android:orientation="vertical">  <TextView    android:id="@+id/txt_title"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_marginLeft="15dp"    android:layout_marginRight="15dp"    android:layout_marginTop="15dp"    android:gravity="center"    android:textColor="@color/black"    android:textSize="18sp"    android:textStyle="bold" />  <TextView    android:id="@+id/txt_msg"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_marginLeft="15dp"    android:layout_marginRight="15dp"    android:layout_marginTop="15dp"    android:gravity="center"    android:textColor="@color/black"    android:textSize="16sp" />  <ImageView    android:layout_width="match_parent"    android:layout_height="0.5dp"    android:layout_marginTop="10dp"    android:background="@color/alertdialog_line" />  <LinearLayout    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="horizontal">    <Button      android:id="@+id/btn_neg"      android:layout_width="wrap_content"      android:layout_height="43dp"      android:layout_weight="1"      android:background="@drawable/alertdialog_left_selector"      android:gravity="center"      android:textColor="@color/actionsheet_blue"      android:textSize="16sp" />    <ImageView      android:id="@+id/img_line"      android:layout_width="0.5dp"      android:layout_height="43dp"      android:background="@color/alertdialog_line" />    <Button      android:id="@+id/btn_pos"      android:layout_width="wrap_content"      android:layout_height="43dp"      android:layout_weight="1"      android:background="@drawable/alertdialog_right_selector"      android:gravity="center"      android:textColor="@color/actionsheet_blue"      android:textSize="16sp" />  </LinearLayout></LinearLayout>

2.style.xml文件

<style name="ActionSheetDialogStyle" parent="android:Theme.Dialog">    <!-- 背景透明 -->    <item name="android:windowBackground">@android:color/transparent</item>    <item name="android:windowContentOverlay">@null</item>    <!-- 浮于Activity之上 -->    <item name="android:windowIsFloating">true</item>    <!-- 邊框 -->    <item name="android:windowFrame">@null</item>    <!-- Dialog以外的區域模糊效果 -->    <item name="android:backgroundDimEnabled">true</item>    <!-- 無標題 -->    <item name="android:windowNoTitle">true</item>    <!-- 半透明 -->    <item name="android:windowIsTranslucent">true</item>    <!-- Dialog進入及退出動畫 -->    <item name="android:windowAnimationStyle">@style/ActionSheetDialogAnimation</item>  </style>  <!-- ActionSheet進出動畫 -->  <style name="ActionSheetDialogAnimation" parent="@android:style/Animation.Dialog">    <item name="android:windowEnterAnimation">@anim/actionsheet_dialog_in</item>    <item name="android:windowExitAnimation">@anim/actionsheet_dialog_out</item>  </style>  <!-- 頭部字體樣式 -->  <style name="ETitle" parent="@android:style/Widget.Button">    <item name="android:textColor">@color/actionsheet_blue</item>    <item name="android:textSize">@dimen/nav_title_text_size</item>  </style>  <style name="AlertDialogStyle" parent="@android:style/Theme.Dialog">    <item name="android:windowBackground">@android:color/transparent</item>    <item name="android:windowContentOverlay">@null</item>    <item name="android:windowIsFloating">true</item>    <item name="android:windowFrame">@null</item>    <item name="android:backgroundDimEnabled">true</item>    <item name="android:windowNoTitle">true</item>    <item name="android:windowIsTranslucent">true</item>  </style>

3.color.xml文件

<?xml version="1.0" encoding="utf-8"?><resources>  <color name="colorPrimary">#3F51B5</color>  <color name="colorPrimaryDark">#303F9F</color>  <color name="colorAccent">#FF4081</color>  <color name="black">#000000</color>  <color name="trans">#00000000</color>  <color name="alertdialog_line">#c6c6c6</color>  <color name="actionsheet_blue">#037BFF</color>  <color name="actionsheet_red">#FD4A2E</color>  <color name="actionsheet_gray">#8F8F8F</color></resources>

4.dimen.xml文件

<?xml version="1.0" encoding="utf-8"?><resources>  <!-- Default screen margins, per the Android Design guidelines. -->  <dimen name="activity_horizontal_margin">16dp</dimen>  <dimen name="activity_vertical_margin">16dp</dimen>  <dimen name="nav_title_text_size">20sp</dimen></resources>

5.anim動畫

actionsheet_dialog_in.xml

<?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android"  android:duration="200"  android:fromYDelta="100%"  android:toYDelta="0" />

actionsheet_dialog_out.xml

<?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android"  android:duration="200"  android:fromYDelta="0"  android:toYDelta="100%" />

6.drawable文件夾的諸多資源

資源下載來源

7.底部彈出框

import android.app.Dialog;import android.content.Context;import android.graphics.Color;import android.view.Display;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.view.Window;import android.view.WindowManager;import android.widget.LinearLayout;import android.widget.ScrollView;import android.widget.TextView;import java.util.ArrayList;import java.util.List;/** * Author:AND * Time:2018/3/16. * Email:2911743255@qq.com * Description: * Detail: */public class ActionSheetDialog {  private Context context;  private Dialog dialog;  private TextView txt_title;  private TextView txt_cancel;  private LinearLayout lLayout_content;  private ScrollView sLayout_content;  private boolean showTitle = false;  private List<SheetItem> sheetItemList;  private Display display;  public ActionSheetDialog(Context context) {    this.context = context;    WindowManager windowManager = (WindowManager) context        .getSystemService(Context.WINDOW_SERVICE);    display = windowManager.getDefaultDisplay();  }  public ActionSheetDialog builder() {    // 獲取Dialog布局    View view = LayoutInflater.from(context).inflate(        R.layout.view_actionsheet, null);    // 設置Dialog最小寬度為屏幕寬度    view.setMinimumWidth(display.getWidth());    // 獲取自定義Dialog布局中的控件    sLayout_content = (ScrollView) view.findViewById(R.id.sLayout_content);    lLayout_content = (LinearLayout) view        .findViewById(R.id.lLayout_content);    txt_title = (TextView) view.findViewById(R.id.txt_title);    txt_cancel = (TextView) view.findViewById(R.id.txt_cancel);    txt_cancel.setOnClickListener(new View.OnClickListener() {      @Override      public void onClick(View v) {        dialog.dismiss();      }    });    // 定義Dialog布局和參數    dialog = new Dialog(context, R.style.ActionSheetDialogStyle);    dialog.setContentView(view);    Window dialogWindow = dialog.getWindow();    dialogWindow.setGravity(Gravity.LEFT | Gravity.BOTTOM);    WindowManager.LayoutParams lp = dialogWindow.getAttributes();    lp.x = 0;    lp.y = 0;    dialogWindow.setAttributes(lp);    return this;  }  public ActionSheetDialog setTitle(String title) {    showTitle = true;    txt_title.setVisibility(View.VISIBLE);    txt_title.setText(title);    return this;  }  public ActionSheetDialog setCancelable(boolean cancel) {    dialog.setCancelable(cancel);    return this;  }  public ActionSheetDialog setCanceledOnTouchOutside(boolean cancel) {    dialog.setCanceledOnTouchOutside(cancel);    return this;  }  /**   * @param strItem 條目名稱   * @param color  條目字體顏色，設置null則默認藍色   * @param listener   * @return   */  public ActionSheetDialog addSheetItem(String strItem, SheetItemColor color,                     OnSheetItemClickListener listener) {    if (sheetItemList == null) {      sheetItemList = new ArrayList<SheetItem>();    }    sheetItemList.add(new SheetItem(strItem, color, listener));    return this;  }  /**   * 設置條目布局   */  private void setSheetItems() {    if (sheetItemList == null || sheetItemList.size() <= 0) {      return;    }    int size = sheetItemList.size();    // TODO 高度控制，非最佳解決辦法    // 添加條目過多的時候控制高度    if (size >= 7) {      ViewGroup.LayoutParams params = (ViewGroup.LayoutParams) sLayout_content          .getLayoutParams();      params.height = display.getHeight() / 2;      sLayout_content.setLayoutParams(params);    }    // 循環添加條目    for (int i = 1; i <= size; i++) {      final int index = i;      SheetItem sheetItem = sheetItemList.get(i - 1);      String strItem = sheetItem.name;      SheetItemColor color = sheetItem.color;      final OnSheetItemClickListener listener = (OnSheetItemClickListener) sheetItem.itemClickListener;      TextView textView = new TextView(context);      textView.setText(strItem);      textView.setTextSize(18);      textView.setGravity(Gravity.CENTER);      // 背景圖片      if (size == 1) {        if (showTitle) {          textView.setBackgroundResource(R.drawable.actionsheet_bottom_selector);        } else {          textView.setBackgroundResource(R.drawable.actionsheet_single_selector);        }      } else {        if (showTitle) {          if (i >= 1 && i < size) {            textView.setBackgroundResource(R.drawable.actionsheet_middle_selector);          } else {            textView.setBackgroundResource(R.drawable.actionsheet_bottom_selector);          }        } else {          if (i == 1) {            textView.setBackgroundResource(R.drawable.actionsheet_top_selector);          } else if (i < size) {            textView.setBackgroundResource(R.drawable.actionsheet_middle_selector);          } else {            textView.setBackgroundResource(R.drawable.actionsheet_bottom_selector);          }        }      }      // 字體顏色      if (color == null) {        textView.setTextColor(Color.parseColor(SheetItemColor.Blue            .getName()));      } else {        textView.setTextColor(Color.parseColor(color.getName()));      }      // 高度      float scale = context.getResources().getDisplayMetrics().density;      int height = (int) (45 * scale + 0.5f);      textView.setLayoutParams(new ViewGroup.LayoutParams(          ViewGroup.LayoutParams.MATCH_PARENT, height));      // 點擊事件      textView.setOnClickListener(new View.OnClickListener() {        @Override        public void onClick(View v) {          listener.onClick(index);          dialog.dismiss();        }      });      lLayout_content.addView(textView);    }  }  public void show() {    setSheetItems();    dialog.show();  }  public interface OnSheetItemClickListener {    void onClick(int which);  }  public class SheetItem {    String name;    OnSheetItemClickListener itemClickListener;    SheetItemColor color;    public SheetItem(String name, SheetItemColor color,             OnSheetItemClickListener itemClickListener) {      this.name = name;      this.color = color;      this.itemClickListener = itemClickListener;    }  }  public enum SheetItemColor {    Blue("#037BFF"), Red("#FD4A2E");    private String name;    private SheetItemColor(String name) {      this.name = name;    }    public String getName() {      return name;    }    public void setName(String name) {      this.name = name;    }  }}

8.中間彈出框

import android.app.Dialog;import android.content.Context;import android.view.Display;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.view.WindowManager;import android.widget.Button;import android.widget.FrameLayout;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;/** * Author:AND * Time:2018/3/16. * Email:2911743255@qq.com * Description: * Detail: */public class AlertDialog {  private Context context;  private Dialog dialog;  private LinearLayout lLayout_bg;  private TextView txt_title;  private TextView txt_msg;  private Button btn_neg;  private Button btn_pos;  private ImageView img_line;  private Display display;  private boolean showTitle = false;  private boolean showMsg = false;  private boolean showPosBtn = false;  private boolean showNegBtn = false;  public AlertDialog(Context context) {    this.context = context;    WindowManager windowManager = (WindowManager) context        .getSystemService(Context.WINDOW_SERVICE);    display = windowManager.getDefaultDisplay();  }  public AlertDialog builder() {    // 獲取Dialog布局    View view = LayoutInflater.from(context).inflate(        R.layout.view_alertdialog, null);    // 獲取自定義Dialog布局中的控件    lLayout_bg = (LinearLayout) view.findViewById(R.id.lLayout_bg);    txt_title = (TextView) view.findViewById(R.id.txt_title);    txt_title.setVisibility(View.GONE);    txt_msg = (TextView) view.findViewById(R.id.txt_msg);    txt_msg.setVisibility(View.GONE);    btn_neg = (Button) view.findViewById(R.id.btn_neg);    btn_neg.setVisibility(View.GONE);    btn_pos = (Button) view.findViewById(R.id.btn_pos);    btn_pos.setVisibility(View.GONE);    img_line = (ImageView) view.findViewById(R.id.img_line);    img_line.setVisibility(View.GONE);    // 定義Dialog布局和參數    dialog = new Dialog(context, R.style.AlertDialogStyle);    dialog.setContentView(view);    // 調整dialog背景大小    lLayout_bg.setLayoutParams(new FrameLayout.LayoutParams((int) (display        .getWidth() * 0.85), ViewGroup.LayoutParams.WRAP_CONTENT));    return this;  }  public AlertDialog setTitle(String title) {    showTitle = true;    if ("".equals(title)) {      txt_title.setText("標題");    } else {      txt_title.setText(title);    }    return this;  }  public AlertDialog setMsg(String msg) {    showMsg = true;    if ("".equals(msg)) {      txt_msg.setText("內容");    } else {      txt_msg.setText(msg);    }    return this;  }  public AlertDialog setCancelable(boolean cancel) {    dialog.setCancelable(cancel);    return this;  }  public AlertDialog setPositiveButton(String text,                     final View.OnClickListener listener) {    showPosBtn = true;    if ("".equals(text)) {      btn_pos.setText("確定");    } else {      btn_pos.setText(text);    }    btn_pos.setOnClickListener(new View.OnClickListener() {      @Override      public void onClick(View v) {        listener.onClick(v);        dialog.dismiss();      }    });    return this;  }  public AlertDialog setNegativeButton(String text,                     final View.OnClickListener listener) {    showNegBtn = true;    if ("".equals(text)) {      btn_neg.setText("取消");    } else {      btn_neg.setText(text);    }    btn_neg.setOnClickListener(new View.OnClickListener() {      @Override      public void onClick(View v) {        listener.onClick(v);        dialog.dismiss();      }    });    return this;  }  private void setLayout() {    if (!showTitle && !showMsg) {      txt_title.setText("提示");      txt_title.setVisibility(View.VISIBLE);    }    if (showTitle) {      txt_title.setVisibility(View.VISIBLE);    }    if (showMsg) {      txt_msg.setVisibility(View.VISIBLE);    }    if (!showPosBtn && !showNegBtn) {      btn_pos.setText("確定");      btn_pos.setVisibility(View.VISIBLE);      btn_pos.setBackgroundResource(R.drawable.alertdialog_single_selector);      btn_pos.setOnClickListener(new View.OnClickListener() {        @Override        public void onClick(View v) {          dialog.dismiss();        }      });    }    if (showPosBtn && showNegBtn) {      btn_pos.setVisibility(View.VISIBLE);      btn_pos.setBackgroundResource(R.drawable.alertdialog_right_selector);      btn_neg.setVisibility(View.VISIBLE);      btn_neg.setBackgroundResource(R.drawable.alertdialog_left_selector);      img_line.setVisibility(View.VISIBLE);    }    if (showPosBtn && !showNegBtn) {      btn_pos.setVisibility(View.VISIBLE);      btn_pos.setBackgroundResource(R.drawable.alertdialog_single_selector);    }    if (!showPosBtn && showNegBtn) {      btn_neg.setVisibility(View.VISIBLE);      btn_neg.setBackgroundResource(R.drawable.alertdialog_single_selector);    }  }  public void show() {    setLayout();    dialog.show();  }}

9.具體使用

activity調用

@Override  public void onClick(View v) {    switch (v.getId()) {      case R.id.click:        // TODO 18/03/16        new ActionSheetDialog(this)            .builder()            .setTitle("清空消息列表后，聊天記錄依然保留，確定要清空消息列表？")            .setCancelable(false)            .setCanceledOnTouchOutside(false)            .addSheetItem("清空消息列表", ActionSheetDialog.SheetItemColor.Red                , new ActionSheetDialog.OnSheetItemClickListener() {                  @Override                  public void onClick(int which) {                  }                }).show();        break;      case R.id.iamge:// TODO 18/03/16        new ActionSheetDialog(this)            .builder()            .setCancelable(false)            .setCanceledOnTouchOutside(false)            .addSheetItem("發送給好友", ActionSheetDialog.SheetItemColor.Blue,                new ActionSheetDialog.OnSheetItemClickListener() {                  @Override                  public void onClick(int which) {                  }                })            .addSheetItem("轉載到空間相冊", ActionSheetDialog.SheetItemColor.Blue,                new ActionSheetDialog.OnSheetItemClickListener() {                  @Override                  public void onClick(int which) {                  }                })            .addSheetItem("上傳到群相冊", ActionSheetDialog.SheetItemColor.Blue,                new ActionSheetDialog.OnSheetItemClickListener() {                  @Override                  public void onClick(int which) {                  }                })            .addSheetItem("保存到手機", ActionSheetDialog.SheetItemColor.Blue,                new ActionSheetDialog.OnSheetItemClickListener() {                  @Override                  public void onClick(int which) {                  }                })            .addSheetItem("收藏", ActionSheetDialog.SheetItemColor.Blue,                new ActionSheetDialog.OnSheetItemClickListener() {                  @Override                  public void onClick(int which) {                  }                })            .addSheetItem("查看聊天圖片", ActionSheetDialog.SheetItemColor.Blue,                new ActionSheetDialog.OnSheetItemClickListener() {                  @Override                  public void onClick(int which) {                  }                }).show();        break;      case R.id.ctrol:// TODO 18/03/16        new ActionSheetDialog(this)            .builder()            .setTitle("請選擇操作")            .setCancelable(false)            .setCanceledOnTouchOutside(false)            .addSheetItem("條目一", ActionSheetDialog.SheetItemColor.Blue,                new ActionSheetDialog.OnSheetItemClickListener() {                  @Override                  public void onClick(int which) {                  }                })            .addSheetItem("條目二", ActionSheetDialog.SheetItemColor.Blue,                new ActionSheetDialog.OnSheetItemClickListener() {                  @Override                  public void onClick(int which) {                  }                }).show();        break;      case R.id.login:// TODO 18/03/16        new AlertDialog(this).builder().setTitle("退出當前賬號")            .setMsg("再連續登陸15天，就可變身為QQ達人。退出QQ可能會使你現有記錄歸零，確定退出？")            .setPositiveButton("確認退出", new View.OnClickListener() {              @Override              public void onClick(View v) {              }            }).setNegativeButton("取消", new View.OnClickListener() {          @Override          public void onClick(View v) {          }        }).show();        break;      case R.id.msg:// TODO 18/03/16        new AlertDialog(this).builder()            .setMsg("你現在無法接收到新消息提醒。請到系統-設置-通知中開啟消息提醒")            .setNegativeButton("確定", new View.OnClickListener() {              @Override              public void onClick(View v) {              }            }).show();        break;      default:        break;    }  }

關于“Android如何自定義view仿iOS彈出框效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。