自定义dialog对话框 (类似与QQ,微信分享文章的对话框)

项目有分享文章到直播间的功能,当点击分享的时候的弹出对话框,类似与微信中把文章分享给朋友的对话框,话不多说直接上图.

像这种不同于弹出框,Android系统提供的方法无法满足要求,那么就需要自己定义一个.

首先写一个布局文件shareTo.xml

<?xml version="1.0" encoding="utf-8"?><!--分享文章到直播间弹窗-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="310dp"
    android:layout_height="275dp"
    android:background="@drawable/share_chatroom_dialog"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="310dp"
        android:layout_height="225dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="21dp"
            android:text="@string/share_to"
            android:textColor="@color/black"
            android:textSize="17sp"
            android:textStyle="bold" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="15dp"
            android:gravity="center"
            android:orientation="horizontal">


            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/circleImageView"
                android:layout_width="37dp"
                android:layout_height="37dp"
                android:src="@mipmap/icon_wx" />

            <TextView
                android:id="@+id/tv_chatRoom_name"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_alignBaseline="@id/circleImageView"
                android:layout_marginLeft="10dp"
                android:layout_toRightOf="@id/circleImageView"
                android:gravity="center_vertical"
                android:singleLine="true"
                android:text="某某某的直播间"
                android:textColor="@color/black"
                android:textSize="17sp" />

        </LinearLayout>

        <View
            android:layout_width="270dp"
            android:layout_height="0.5dp"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="15dp"
            android:background="@color/essayshare_divider" />

        <TextView
            android:id="@+id/tv_essayTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20.5dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="15dp"
            android:ellipsize="end"
            android:maxLines="2"
            android:text="文章的标题内容<span style="font-family: Arial, Helvetica, sans-serif;">文章的标题内容</span><span style="font-family: Arial, Helvetica, sans-serif;">文章的标题内容</span>"
            android:textColor="@color/essayshare_title"
            android:textSize="14sp" />

        <EditText
            android:id="@+id/et_liuyan"
            android:layout_width="270dp"
            android:layout_height="35dp"
            android:layout_marginBottom="18dp"
            android:layout_gravity="center"
            android:layout_marginTop="15dp"
            android:background="@drawable/et_sharetochat_liuyan"
            android:hint="说说我的观点"
            android:textColorHint="@color/essayshare_title"
            android:textColor="@color/black"
            android:singleLine="true"
            android:textCursorDrawable="@drawable/color_cursor"
            android:paddingLeft="12dp"
            android:textSize="14sp"/>

    </LinearLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="50dp"
        android:background="@color/essayshare_divider" />
    <LinearLayout
        android:layout_width="310dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_cancel"
            android:layout_width="155dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="@string/cancle"
            android:textColor="@color/black"
            android:textSize="17sp" />

        <View
            android:layout_width="0.5dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:background="@color/essayshare_divider" />

        <TextView
            android:id="@+id/tv_post"
            android:layout_width="154.5dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="@string/umeng_fb_send"
            android:textColor="@color/red"
            android:textSize="17sp" />
    </LinearLayout>
</RelativeLayout>

布局文件很简单,一下background只是对话框的圆角,自己写一下就可以或者删除就可以了.

下面是自定义dialog的实现 dialogShare.java

public class DialogShareEssay {
    private Dialog dialog;
    private Context context;
    private ImageView circleImageView;
    private View contentView;
    private TextView tvChatRoomName, tvEssayTitle, tvCancel, tvPost;
    private EditText etliuyan;
   
    public DialogShareEssay(Context context) {
        this.context = context;
        if (dialog == null) {
            dialog = createDialog(context);
        }
    }

    private Dialog createDialog(final Context context) {
        final Dialog dialog = new Dialog(context, R.style.dialog_fullScreen);
        contentView = LayoutInflater.from(context).inflate(R.layout.essay_shareto_chatroom, null, false);

        dialog.setContentView(contentView);
        dialog.setCancelable(false);
        dialog.setCanceledOnTouchOutside(true);


        tvChatRoomName = (TextView) contentView.findViewById(R.id.tv_chatRoom_name);
        tvEssayTitle = (TextView) contentView.findViewById(R.id.tv_essayTitle);
        tvCancel = (TextView) contentView.findViewById(R.id.tv_cancel);
        tvPost = (TextView) contentView.findViewById(R.id.tv_post);
        circleImageView = (ImageView) contentView.findViewById(R.id.circleImageView);
        etliuyan = (EditText) contentView.findViewById(R.id.et_liuyan);
        etliuyan.setCursorVisible(false);
        etliuyan.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                etliuyan.setCursorVisible(true);
            }
        });

        tvCancel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
            }
        });

        return dialog;
    }

    public void show() {
        dialog.show();
    }

    public void dismiss() {
        dialog.dismiss();
    }
}

如果你需要向你的弹出框传入一些参数,比如头像,好有名称,文章标题之类的,可以在构造方法中加入这些参数,例如:

 public DialogShareEssay(Context context, Banner mBanner, String authorLogo, String abstractContent, int web_type) {
        this.context = context;
        this.mBanner = mBanner;
        this.authorLogo = authorLogo;
        this.web_type = web_type;
        this.abstractContent = abstractContent;
        if (dialog == null) {
            dialog = createDialog(context);
        }
    }

这样只需要在create中通过TextView的设置这些属性就可以了.

下面是Activity对这个弹出框的使用.在需要弹框的地方加上这句话:

DialogShareEssay Dialog = new DialogShareEssay(mContext, mBanner, authorLogo, abstractContent, web_type);

这样就可以使用自定义的弹出框了,抢红包对话框与之类似.

效果如下:

<img src="https://img-blog.youkuaiyun.com/20161014104311711?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

PS:谷歌推出来dialogFragment,以后尽量用这个,因为dialog存在一定的问题.