crazyzhangxl/windowshowdemo

Android 弹窗案例总结(仿淘宝弹窗 咸鱼菜单 筛选列表)

WindowShowDemo

1、简介

本文将主要介绍Android常见的窗体效果。包括Dialog,DialogFragment,PopupWindow,BottomSheetDialog以及自定义view实现弹窗等效果。 附属包含进度条效果以及自定义Toast。
案例包含，dialog仿淘宝购买页,dialogFragment实现仿爱好选择，popupwindow实现拍照选择，bottomsheetDialog实现条目选择，chipChildren实现仿咸鱼添加菜单效果，dialog实现仿ios拍照选择，自定义view背景和布局方式实现顶部筛选效果，DialogFragment实现弹窗更新效果，自定义dialog效果，建造者模式模仿AlertDialog，进度条效果等

apk下载

运行效果

                   
                   
                   

                                       
                    

            

2.1 Dialog形式

注释写的还是很清晰的，如下。

private void showPurchaseView() {
    // 以特定的风格创建一个dialog
    Dialog dialog = new Dialog(this,R.style.MyDialog);
    // 加载dialog布局view
    View purchase = LayoutInflater.from(this).inflate(R.layout.dialog_purchase, null);
    // 设置外部点击 取消dialog
    dialog.setCancelable(true);
    // 获得窗体对象
    Window window = dialog.getWindow();
    // 设置窗体的对齐方式
    window.setGravity(Gravity.BOTTOM);
    // 设置窗体动画
    window.setWindowAnimations(R.style.AnimBottom);
    // 设置窗体的padding 
    window.getDecorView().setPadding(0, 0, 0, 0);
    WindowManager.LayoutParams lp = window.getAttributes();
    lp.width = WindowManager.LayoutParams.MATCH_PARENT;
    lp.height = WindowManager.LayoutParams.WRAP_CONTENT;
    window.setAttributes(lp);
    dialog.setContentView(purchase);
    dialog.show();
}

下面给出style的设置。 

<!-- 设置 弹出弹入的动画  由下往上 然后再返回去-->
<style name="AnimBottom" parent="@android:style/Animation">
    <item name="android:windowEnterAnimation">@anim/push_bottom_in</item>
    <item name="android:windowExitAnimation">@anim/push_bottom_out</item>
</style>

<!--底部弹框 样式-->
<style name="MyDialog" parent="@android:style/Theme.Dialog">
    <item name="android:windowFrame">@null</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:background">@android:color/transparent</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:backgroundDimEnabled">true</item>
    <item name="android:backgroundDimAmount">0.6</item>
</style>

 R.layout.dialog_purchase.xml

 其实这里还是挺重要的：

1. 得为布局设置白色背景 否则为dialog背景色

2. 这种错落的效果 是使用的 clipChildren = "false" 属性，需要去了解

<android.support.v7.widget.CardView android:id="@+id/cd" android:layout_gravity="bottom" android:layout_marginLeft="10dp" android:foreground="?android:attr/selectableItemBackground" android:layout_width="120dp" android:layout_height="150dp" card_view:cardBackgroundColor="#FFFFFF" card_view:cardCornerRadius="4dp" card_view:cardElevation="2dp" card_view:cardUseCompatPadding="true"> </android.support.v7.widget.CardView>

        </LinearLayout>

    </LinearLayout>
    <ImageView
        android:id="@+id/iv_back"
        android:padding="10dp"
        android:layout_alignParentRight="true"
        android:src="@mipmap/buy_delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>
<View
    android:background="#fff"
    android:layout_width="match_parent"
    android:layout_height="100dp"/>
<LinearLayout
    android:background="#fff"
    android:layout_width="match_parent"
    android:layout_height="45dp">

    <Button
        android:id="@+id/add_cart_btn"
        android:layout_weight="1.0"
        android:layout_width="0dip"
        android:layout_height="match_parent"
        android:text="加入购物车"
        android:textColor="#fff"
        android:background="@drawable/button_yellow_selector"
        android:layout_alignParentLeft="true"
        />

    <Button
        android:id="@+id/buy_btn"
        android:layout_weight="1.0"
        android:layout_width="0dip"
        android:layout_height="match_parent"
        android:text="立即购买"
        android:textColor="#fff"
        android:background="@drawable/button_selector"
        android:layout_alignParentRight="true"
        />
</LinearLayout>

2.2 DialogFragment形式

主要是创建一个Java类，然后继承自DialogFragment方法即可，下面给出部分代码

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    // 使用不带Theme的构造器, 获得的dialog边框距离屏幕仍有几毫米的缝隙。
    Dialog dialog = new Dialog(getActivity(), R.style.MyDialog);
    mContext = getActivity();
    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); // 设置Content前设定
    dialog.setContentView(R.layout.fragment_dialog_show_enjoy);
    dialog.setCanceledOnTouchOutside(true); // 外部点击取消
    // 设置宽度为屏宽, 靠近屏幕底部。
    final Window window = dialog.getWindow();
    window.setWindowAnimations(R.style.AnimBottom);
    final WindowManager.LayoutParams lp = window.getAttributes();
    lp.gravity = Gravity.BOTTOM; // 紧贴底部
    lp.width = WindowManager.LayoutParams.MATCH_PARENT; // 宽度持平
    lp.height = getActivity().getWindowManager().getDefaultDisplay().getHeight() * 2/ 3;
    window.setAttributes(lp);
    getDataFromBefore();
    initView(dialog);
    // 窗口初始化后 请求网络数据
    return dialog;
}

 如何从一个活动跳转向DialogFragment且传值呢

ShowEnjoyDialogFragment showEnjoyDialogFragment = new ShowEnjoyDialogFragment(); Bundle bundle = new Bundle(); // bundle.putStringArrayList(AppConst.HOBBY_KEY_ENJOY, mHobbyStrList); showEnjoyDialogFragment.setArguments(bundle); showEnjoyDialogFragment.show(getFragmentManager(), "showEnjoyDialogFragment");

2.3普通的View形式

这里的**主要是通过布局的显示与隐藏加上动画来实现特定的效果

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.windowshowdemo.MainActivity">

</android.support.design.widget.CoordinatorLayout>

private void hideBottomMenu(){
    TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 
            0, Animation.RELATIVE_TO_SELF, 0,
            Animation.RELATIVE_TO_SELF, 
            0, Animation.RELATIVE_TO_SELF, 1);
    ta.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {

        }

        @Override
        public void onAnimationEnd(Animation animation) {
            mRlMenu.setVisibility(View.GONE);
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    });
    ta.setDuration(200);
    mSvMenu.startAnimation(ta);
}

总结：

好了，以上主要是起一个笔记的作用，希望对读者有一定的帮助，写的不对的地方请多多指教，谢谢
如上还增加了一个咸鱼底部凹凸的例子，也是学到了许多东西。

概述展示博客地址
popupwindow实现博客地址