DialogFragment的应用

 

一.DialogFragment简单介绍:

1.基本概念

DialogFrament 指一个与fragment建立了关联的Dialog, 随fragment生, 随fragment死, 即Dialog随Fragment的生命周期而变.

2.使用背景

像常规的Dialog或者是Popupwindow, 都依附于Activity而存在, 如果Activity突然销毁了, 在Dialog和Popupwindow已经show的情况下, 程序会报android.view.WindowLeaked, 当然也是有办法解决的, 在Activity的onDestroy方法中判断不为空时dismiss即可

DialogFrament的优点有 ① 保持和Fragment相同的生命周期 ② 屏幕旋转相关数据不会被销毁 ③ 像Activity,Fragment一样网络请求 （英语趣配音这个App 在点击1请求得到单词发音，如果还没响应，再点击2返回时, 会一直卡在那里, 应该是线程阻塞了，导致这个原因很可能 是此App的弹框用的是PopupWindow, 然后在 PopupWindow中做网络请求了, 在调用 onBackPressed方法时, 网络请求还没完成导致的, 欢迎对这个假设进行反驳）

可以说DialogFragment 能够实现 Dialog 和 PopupWindow能实现的功能, 何乐而不为呢

二.DialogFragment的创建

1.两种不同的创建方式

①和②的整体流程都是如此:

① .使用onCreateView

在onCreate中接收传递过来的参数

在onCreateView中创建布局文件

在onViewCreated中对布局控件处理

在onStart中设置布局在屏幕中的属性

使用展示Fragment的方式展示DialogFragment

这里将重点讲下onStart方法中的操作

为什么不在onCreateView中对布局在屏幕中的位置,宽高进行设置的,而是要在onStart中操作？

其实看下DialogFragment 的onStart()的源码会发现

@Override
    public void onStart() {
        super.onStart();
        if (mDialog != null) {
            mViewDestroyed = false;
            mDialog.show();
        }
    }

注意mDialog.show();

回想下当初是怎么设置自定义Dialog的位置和宽高的,是不是先调用show方法,再进行设置Dialog位置和宽高才有效, 同理这里也是如此; 因此就不能再onCreateView中设置Dialog的布局属性了.

可以以BottomDialog作为参考

还有个问题，如何DialogFragment在屏幕中的位置

和Dialog一样，DialogFragment默认是在屏幕中心, 如果你想把他设置在某个具体的位置, 可以把它先设置到坐标(0,0)的位置, 然后设置DialogFragment离左边的距离是多少，离顶部的距离是多少

@Override
    public void onStart() {
        super.onStart();
        Window window = getDialog().getWindow();
        WindowManager.LayoutParams params = window.getAttributes();
        params.gravity = Gravity.TOP | Gravity.LEFT;
        params.y = mTop;
        params.x = mLeft;
        window.setAttributes(params);
        window.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#00000000")));
    }

可以这么说,DialogFragment 就是 Dialog套了一层 Fragment的皮, 源码也不长，真值得研究

②. onCreateDialog(Bundle)

可以做从onCreate到onStart的事, 可以说是一步到位

三.DialogFragment应用场景

1. 底部弹出框 如分享/打开相册+底部弹出动画

2. 请求网络加载中,清理缓存如ProgressBar

3. QQ列表长按 弹出框提示 置顶,删除

 

场景一

为了显得易读, 我觉得 用① .使用onCreateView比较好

这里有个问题没搞清楚?

public boolean onTouch(View v, MotionEvent event) { dismiss(); return true; }

return true 弹出动画会执行

return false 弹出动画就不执行, 哪位高人知道的还望指点

public class BottomDialog extends DialogFragment {

    private String mTitle;
    private String mCancle;
    private String[] mItems;
    private BottomDialogListener mListener;
    private boolean mIsDismiss = false;
    private View mRootView;

    public static BottomDialog newInstance(String title, String cancle, String[] items) {
        BottomDialog dialog = new BottomDialog();
        // Supply as arguments.
        Bundle args = new Bundle();
        args.putString("title", title);
        args.putString("cancle", cancle);
        args.putStringArray("items", items);
        dialog.setArguments(args);
        return dialog;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mTitle = getArguments().getString("title");
        mCancle = getArguments().getString("cancle");
        mItems = getArguments().getStringArray("items");
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        Log.e("Wislie", "onCreateView");
        getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);
        mRootView = inflater.inflate(R.layout.dialog_bottom, container, false);
        mRootView.startAnimation(AnimationUtils.loadAnimation(getActivity(), R.anim.fade_in));
        return mRootView;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        Log.e("Wislie", "onCreateDialog");

        TextView title = (TextView) view.findViewById(R.id.title);
        ListView listView = (ListView) view.findViewById(R.id.listview);
        TextView cancel = (TextView) view.findViewById(R.id.cancel);
        title.setText(mTitle);
        listView.setAdapter(new ArrayAdapter(getActivity(),
                android.R.layout.simple_list_item_1, android.R.id.text1, mItems));
        cancel.setText(mCancle);

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                if (mListener != null) {
                    mListener.onItemClick(position);
                }
            }
        });

        cancel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dismiss();
                if (mListener != null) {
                    mListener.onConfirm();
                }

            }
        });
    }

    @Override
    public void onStart() {
        super.onStart();
        Log.e("Wislie", "onStart");
        Window window = getDialog().getWindow();
        WindowManager.LayoutParams params = window.getAttributes();

        params.gravity = Gravity.BOTTOM;
        params.width = WindowManager.LayoutParams.MATCH_PARENT;
        window.setAttributes(params);

        window.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#00000000")));
        window.getDecorView().setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                dismiss();
                return true;
            }
        });
    }

    /*
    * 也可以通过 onCreateDialog 来创建Dialog
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {

        Dialog dialog = new Dialog(getActivity());
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        dialog.setContentView(R.layout.dialog_bottom);
        Window window = dialog.getWindow();
        WindowManager.LayoutParams params = window.getAttributes();

        params.gravity = Gravity.BOTTOM;
        params.width = WindowManager.LayoutParams.MATCH_PARENT;
        params.height = WindowManager.LayoutParams.WRAP_CONTENT;
        window.setAttributes(params);
        return dialog;
    }*/

    /**
     *  弹出对话框
     * @param fragmentManager
     */
    public void showDialog(FragmentManager fragmentManager) {
        if(this == null) return;

        // DialogFragment.show() will take care of adding the fragment
        // in a transaction.  We also want to remove any currently showing
        // dialog, so make our own transaction and take care of that here.
        FragmentTransaction ft = fragmentManager.beginTransaction();
        Fragment prev = fragmentManager.findFragmentByTag(getTag());
        if (prev != null) {
            ft.remove(prev);
        }
        ft.addToBackStack(null);
        // Create and show the dialog.
        show(ft, getTag());
    }

    /**
     * 对话框消失
     */
    @Override
    public void dismiss() {

        if (mIsDismiss) {
            return;
        }
        mIsDismiss = true;

        Animation fadeOutAnim = AnimationUtils.loadAnimation(getActivity(), R.anim.fade_out);
        mRootView.startAnimation(fadeOutAnim);
        fadeOutAnim.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                Log.e("Wislie","animation end");
               BottomDialog.super.dismiss();
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

    }

    public interface BottomDialogListener {
        
        void onConfirm();

        void onItemClick(int position);
    }

    public void setOnBottomDialogListener(BottomDialogListener listener) {
        mListener = listener;
    }
}

场景二

实现的步骤大同小异, 关键是布局文件

布局文件由一个ProgressBar 和 TextView文本构成, ProgressBar 有个重要的属性 indeterminateDrawable, 指向一个drawable的 xml文件, 该drawable 实现围绕自身旋转, 有多种实现方式

方式1: 

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@mipmap/ic_loading_white"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360" />

方式2: drawable用帧动画集合

场景三

 

实现这一效果的代码 是参考PopupList, 在Github上可以找到这个资源, 这里我是用DialogFragment实现的

关键的几点思路: 1.横向的布局嵌入TextView; 2.背景点击和文字点击状态的变化; 3.上下三角形的绘制

代码看个大概就好了,因为都是差不多的套路

public class HintDialogFragment extends BaseDialogFragment {

    private int mTop;
    private boolean mIsTop;
    private View mRootView;
    private TriangleView mTopArrow;
    private TriangleView mBottomArrow;

    public static HintDialogFragment newInstance(int top, boolean isTop) {
        HintDialogFragment dialog = new HintDialogFragment();
        // Supply as arguments.
        Bundle args = new Bundle();
        args.putInt("top", top);
        args.putBoolean("isTop",isTop);
        dialog.setArguments(args);
        return dialog;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mTop = getArguments().getInt("top");
        mIsTop = getArguments().getBoolean("isTop");
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);
        mRootView = inflater.inflate(R.layout.dialog_hint, container, false);
        mTopArrow = (TriangleView) mRootView.findViewById(R.id.top_arrow);
        mBottomArrow = (TriangleView) mRootView.findViewById(R.id.bottom_arrow);
        if(mIsTop){
            ViewUtils.measureView(mTopArrow);

            mTop = mTop - mTopArrow.getMeasuredHeight();
            mTopArrow.setVisibility(View.VISIBLE);
            mBottomArrow.setVisibility(View.GONE);
        }else{
            mTopArrow.setVisibility(View.GONE);
            mBottomArrow.setVisibility(View.VISIBLE);
        }
        return mRootView;
    }


    @Override
    public void onStart() {
        super.onStart();
        Window window = getDialog().getWindow();
        WindowManager.LayoutParams params = window.getAttributes();
        params.gravity = Gravity.TOP;
        params.y = mTop;
        window.setAttributes(params);
        window.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#00000000")));

    }
}

布局文字是这样子的 dialog_hint.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical">

    <wislie.com.widgets_sample.widgets.TriangleView
        android:id="@+id/bottom_arrow"
        android:layout_width="30dp"
        android:layout_height="15dp"
        android:visibility="gone"
        app:is_top="false" />

    <wislie.com.widgets_sample.widgets.listview.HintView
        android:id="@+id/horizontal_listview"
        android:layout_width="wrap_content"
        android:layout_height="40dp" />

    <wislie.com.widgets_sample.widgets.TriangleView
        android:id="@+id/top_arrow"
        android:layout_width="30dp"
        android:layout_height="15dp"
        android:visibility="gone"
        app:is_top="true" />

</LinearLayout>

看HintView, 这里主要涉及到文字点击的ColorStateList 和 背景点击的StateListDrawable

public class HintView extends LinearLayout {

    //TextView的样式
    private static final int STYLE_LEFT = 0;
    private static final int STYLE_RIGHT = 1;
    private static final int STYLE_BOTH_SIDES = 2;
    private static final int STYLE_NONE = 3;
    //这里的数量可以随便增加 减少
    private List<String> inputList = Arrays.asList("编辑","删除","取消","更多");

    public HintView(Context context) {
        super(context);
    }

    public HintView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public HintView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {

        setOrientation(HORIZONTAL);
        setGravity(Gravity.CENTER_VERTICAL);
        addData(inputList);
    }

    public void addData(List<String> inputDatas){
        if(inputDatas == null || inputDatas.size() == 0) return;

        // 1  2 多个

        switch (inputDatas.size()){
            case 1:
                createTextView(0, inputDatas.get(0), STYLE_BOTH_SIDES);
                break;
            case 2:
                createTextView(0, inputDatas.get(0), STYLE_LEFT);
                createView();
                createTextView(1, inputDatas.get(1), STYLE_RIGHT);
                break;
            default:
                createTextView(0, inputDatas.get(0), STYLE_LEFT);
                createView();
                for(int i = 1; i < inputDatas.size() - 1; i++) {
                    createTextView(i, inputDatas.get(i), STYLE_NONE);
                    createView();
                }
                createTextView(inputDatas.size() - 1, inputDatas.get(inputDatas.size() - 1), STYLE_RIGHT);
                break;
        }

    }

    private void createTextView(int index, String inputData, int style){
        TextView textView = new TextView(getContext());
        textView.setGravity(Gravity.CENTER);
        textView.setText(inputData);
        //文字点击
        ColorStateList colorStateList =  getResources().getColorStateList(R.color.press_text);
        textView.setTextColor(colorStateList);

        //背景点击
        StateListDrawable stateListDrawable = null;
        if(style == STYLE_BOTH_SIDES){
            stateListDrawable = (StateListDrawable) getResources().getDrawable(R.drawable.press_bg_round);
        }else if(style == STYLE_LEFT){
            stateListDrawable = (StateListDrawable) getResources().getDrawable(R.drawable.press_bg_left_round);
        }else if(style == STYLE_RIGHT){
            stateListDrawable = (StateListDrawable) getResources().getDrawable(R.drawable.press_bg_right_round);
        }else if(style == STYLE_NONE){
            stateListDrawable = (StateListDrawable) getResources().getDrawable(R.drawable.press_bg_rect);
        }

        textView.setBackground(stateListDrawable);
        LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        params.gravity = Gravity.CENTER;
        textView.setPadding(10, 10, 10, 10);
        textView.setLayoutParams(params);
        textView.setTag(index);
        textView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                int index = (int) v.getTag();
                Toast.makeText(getContext(),inputList.get(index), Toast.LENGTH_SHORT).show();
            }
        });
        addView(textView);
    }

    private void createView(){
        View view = new View(getContext());
        LayoutParams params = new LayoutParams(1, LayoutParams.MATCH_PARENT);
        view.setLayoutParams(params);
        view.setBackgroundColor(Color.parseColor("#ffffff"));
        addView(view);
    }
}

TriangleView 三角形的绘制看看就好

public class TriangleView extends View {

    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private Path mPath = new Path();

    private float[][] mPointsBottom = new float[3][2];
    private float[][] mPointsTop = new float[3][2];

    private boolean mIsTop = false;
    public TriangleView(Context context) {
        super(context);
    }

    public TriangleView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TriangleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TriangleView, defStyleAttr, 0);
        mIsTop = typedArray.getBoolean(R.styleable.TriangleView_is_top, mIsTop);

    }

    private void init(){
        if(getWidth() == 0 || getHeight() == 0) return;
        int width = getWidth();
        int height = getHeight();
        if(mIsTop){
            mPointsTop[0][0] = 0;
            mPointsTop[0][1] = 0;
            mPointsTop[1][0] = width;
            mPointsTop[1][1] = 0;
            mPointsTop[2][0] = width/2;
            mPointsTop[2][1] = height;
        }else{
            mPointsBottom[0][0] = width/2;
            mPointsBottom[0][1] = 0;
            mPointsBottom[1][0] = width;
            mPointsBottom[1][1] = height;
            mPointsBottom[2][0] = 0;
            mPointsBottom[2][1] = height;
        }

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        init();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if(getWidth() == 0 || getHeight() == 0) return;
        mPaint.setColor(Color.parseColor("#585858"));
        mPaint.setStyle(Paint.Style.FILL);
        if(mIsTop){
            mPath.moveTo(mPointsTop[0][0], mPointsTop[0][1]);
            mPath.lineTo(mPointsTop[1][0], mPointsTop[1][1]);
            mPath.lineTo(mPointsTop[2][0], mPointsTop[2][1]);
            mPath.close();
        }else{
            mPath.moveTo(mPointsBottom[0][0], mPointsBottom[0][1]);
            mPath.lineTo(mPointsBottom[1][0], mPointsBottom[1][1]);
            mPath.lineTo(mPointsBottom[2][0], mPointsBottom[2][1]);
            mPath.close();
        }
        canvas.drawPath(mPath, mPaint);
    }
}

在这里, 万分抱歉, 代码没有写明注释~~~

github链接地址:https://github.com/A18767101271/widgets_sample