快捷導(dǎo)航

Android自定義PopupWindow實(shí)現(xiàn)炫酷的IOS對(duì)話框效果

更新時(shí)間：2018年05月14日 09:32:21 作者：宿罪

這篇文章主要給大家介紹如何在android中實(shí)現(xiàn)高仿ios對(duì)話框效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

前言：

最近在使用IOS系統(tǒng)的過程中發(fā)現(xiàn)IOS底部彈出框甚是漂亮，大氣，上檔次，于是乎就想啊能不能在Android中實(shí)現(xiàn)類似的對(duì)話框呢？你說，這不是廢話嗎，除了一些極少數(shù)的系統(tǒng)級(jí)的不能模仿外（版權(quán)）還有啥不能依瓢畫葫蘆的呢，所以啊，這篇文章將介紹如何在Android中實(shí)現(xiàn)高仿IOS對(duì)話框效果，先上圖，給大家養(yǎng)養(yǎng)眼：

這里寫圖片描述

大家在看到上面的對(duì)話框時(shí)有沒有想到簡(jiǎn)單的實(shí)現(xiàn)思路呢？我這里給出的思路是我們可以自定義一個(gè)PopupWindow，然后設(shè)置我們的布局。這里的布局很有技巧哦，那就是對(duì)話框中間的透明隔斷區(qū)域其實(shí)是一個(gè)margin值，每個(gè)隔斷的item layout的背景為一個(gè)白色圓角矩形，之后再讓PopupWindow的背景為透明即可，是不是很簡(jiǎn)單呢。好了，讓我們動(dòng)手編寫代碼將它帶回家吧。

大家也可以看看我的上篇文章：Android自定義Dialog，炫酷主流的加載對(duì)話框。

代碼實(shí)現(xiàn)

1. 編寫布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
 <LinearLayout
 android:layout_width="match_parent"
 android:orientation="horizontal"
 android:paddingTop="12dp"
 android:paddingBottom="12dp"
 android:background="@drawable/corner_white_bg"
 android:layout_height="wrap_content">
 <Button
  android:id="@id/btn_share_weixin"
  android:layout_width="0dp"
  android:layout_weight="1"
  android:drawableTop="@mipmap/ic_share_weixin"
  android:drawablePadding="6dp"
  android:background="@null"
  android:textColor="@android:color/black"
  android:textSize="@dimen/text_14_sp"
  android:text="@string/weixin"
  android:layout_height="wrap_content"/>
 <Button
  android:id="@id/btn_share_friends"
  android:layout_width="0dp"
  android:layout_weight="1"
  android:drawableTop="@mipmap/ic_share_friends"
  android:drawablePadding="6dp"
  android:background="@null"
  android:textColor="@android:color/black"
  android:textSize="@dimen/text_14_sp"
  android:text="@string/weixin_friends"
  android:layout_height="wrap_content"/>
 <Button
  android:id="@id/btn_share_qq"
  android:layout_width="0dp"
  android:layout_weight="1"
  android:drawableTop="@mipmap/ic_share_qq"
  android:drawablePadding="6dp"
  android:background="@null"
  android:textColor="@android:color/black"
  android:textSize="@dimen/text_14_sp"
  android:text="@string/qq"
  android:layout_height="wrap_content"/>
 <Button
  android:id="@id/btn_share_qq_zone"
  android:layout_width="0dp"
  android:layout_weight="1"
  android:drawableTop="@mipmap/ic_share_zones"
  android:drawablePadding="6dp"
  android:textColor="@android:color/black"
  android:textSize="@dimen/text_14_sp"
  android:background="@null"
  android:text="@string/qq_zones"
  android:layout_height="wrap_content"/>
 </LinearLayout>
 <Button
 android:id="@id/btn_cancel"
 android:layout_width="match_parent"
 android:textColor="@android:color/black"
 android:textSize="@dimen/text_14_sp"
 android:layout_marginTop="10dp"
 android:layout_marginBottom="10dp"
 android:text="@string/cancel"
 android:background="@drawable/corner_white_bg"
 android:layout_height="wrap_content"/>
</LinearLayout>

這里被隔斷的部分有兩個(gè)，所以布局中有兩個(gè)view的背景為白色圓角矩形。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
 <corners android:radius="10dp"/>
 <solid android:color="@android:color/white"/>
</shape>

2. 繼承PopupWindow

public class IosPopupWindow extends PopupWindow implements View.OnClickListener {
 private Context mContext;
 public IosPopupWindow(Activity activity) {
 super(activity);
 mContext = activity;
 LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
 View contentView = inflater.inflate(R.layout.dialog_share, null);
 setContentView(contentView);
 int screenWidth = activity.getWindowManager().getDefaultDisplay().getWidth();
 //獲取popupwindow的高度與寬度
 this.setWidth((int) (screenWidth - 2 * dp2px(mContext,12f)));
 this.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
 // 設(shè)置背景透明度
 setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
 // 設(shè)置動(dòng)畫
 this.setAnimationStyle(R.style.IosDialog);
 // 設(shè)置彈出窗體可點(diǎn)擊
 this.setFocusable(true);
 // 點(diǎn)擊外部可取消
 this.setOutsideTouchable(true);
 initView(contentView);
 }

以上代碼最關(guān)鍵的就是給我們的PopupWindow設(shè)置一個(gè)透明的背景Drawable啦。

3. 窗口彈出時(shí)讓外部變暗

/**
 * 讓popupwindow以外區(qū)域陰影顯示
 */
private void popOutShadow() {
 final Window window = ((Activity) mContext).getWindow();
 WindowManager.LayoutParams lp = window.getAttributes();
 lp.alpha = 0.5f;//設(shè)置陰影透明度
 window.setAttributes(lp);
 setOnDismissListener(new OnDismissListener() {
 @Override
 public void onDismiss() {
  WindowManager.LayoutParams lp = window.getAttributes();
  lp.alpha = 1f;
  window.setAttributes(lp);
 }
 });
}

與Dialog不同的是PopupWindow實(shí)現(xiàn)外部變暗需通過改變它依附的window的透明度，所以我們傳給PopupWindow的Context需為Activity類型，同時(shí)在窗口消失的時(shí)候記得將Window的透明度重置。

最后，奉上IosPopupWindow的github，你值得擁有：https://github.com/ydxlt/LoadingDialog

總結(jié)

以上所述是小編給大家介紹的Android自定義PopupWindow實(shí)現(xiàn)炫酷的IOS對(duì)話框效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: