本文详细介绍了一种在Android应用中实现底部弹出对话框的方法，包括对话框的外观样式定制、自定义对话框的编写以及如何集成表情选择等功能。
实现效果
功能说明
这就是一个底部弹出对话框，仿QQ空间微信朋友圈底部弹出对话框，用了一些普通的UI优化，以及添加了表情框等，需要用到类似功能的自行下载源码集成。
适用于新手及新学习Android的码友们，老玩家当然也可以看看，这个还是挺简单挺实用的，在后面会简略介绍实现方法及源代码，同时博客的最后还提供源代码和图片等资源github下载地址。
本部分内容主要讲解底部弹出框的实现，不讲解表情栏部分，需要查看表情栏部分实现的请查看这篇文章：
--------------------------------------------------------------------------------------------------------------------
Android实用视图动画及工具系列之六：通用表情栏，仿QQ微信聊天弹出表情选框：
--------------------------------------------------------------------------------------------------------------------
实现步骤
步骤一：创建外观样式
这个底部弹出对话框只用了两张图片，其他的都是通过drawable shape绘制实现，两个表情图：（其他图片资源在源代码内，需要的自行下载）：
项目结构如下，其中faceview为表情栏部分，单独封装为模块，此处不用理会：
在drawable下新建chatform_face_selector.xml，表情符号点击样式：
<?xml version="1.0" encoding="UTF-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/chatform_flag_face2" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/chatform_flag_face2" />
<item android:state_focused="false" android:drawable="@drawable/chatform_flag_face" />
</selector><?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_focused="true">
<shape>
<solid android:color="#008ee0" />
<stroke
android:width="1dp"
android:color="#008ee0" />
<corners android:radius="3dp"/>
<padding
android:top="1dp"
android:bottom="1dp"
android:left="1dp"
android:right="1dp"/>
</shape>
</item>
<item android:state_pressed="true">
<shape>
<solid android:color="#008ee0" />
<stroke
android:width="1dp"
android:color="#008ee0" />
<corners android:radius="3dp"/>
<padding
android:top="1dp"
android:bottom="1dp"
android:left="1dp"
android:right="1dp"/>
</shape>
</item>
<item >
<shape>
<solid android:color="#00a2ff" />
<stroke
android:width="1dp"
android:color="#00a2ff" />
<corners android:radius="3dp"/>
<padding
android:top="1dp"
android:bottom="1dp"
android:left="1dp"
android:right="1dp"/>
</shape>
</item>
</selector>
在drawable下新建 chatform_textinput_shape.xml，编辑框样式：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#FFFFFF" />
<corners
android:radius="1dp"
android:topLeftRadius="3dp"
android:bottomLeftRadius="3dp"
android:topRightRadius="3dp"
android:bottomRightRadius="3dp"
/>
<stroke
android:width="0.1dp"
android:color="#BDC7D8" />
<padding
android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp"/>
</shape>
步骤二：编写对话框布局和自定义对话框
在layout文件夹下创建dialog_replyform.xml，代码如下（com.jaiky.test.faceview.FaceView为引用自表情库，如果不需要可屏蔽）
：
<?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" >
<View
android:layout_width="match_parent"
android:layout_height="0.1dp"
android:background="#b4b4b4" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f9f9f9"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingBottom="7dp"
android:paddingTop="7dp" >
<ImageView
android:id="@+id/dialog_reply_ivFace"
android:layout_width="27dp"
android:layout_height="27dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_gravity="center_vertical"
android:clickable="true"
android:contentDescription="@null"
android:src="@drawable/chatform_face_selector" />
<EditText
android:id="@+id/dialog_reply_etContent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/chatform_textinput_shape"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:hint="填写回复内容..."
android:inputType="text"
android:paddingBottom="7dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="7dp"
android:textColorHint="#aaaaaa"
android:textSize="13sp" />
<LinearLayout
android:id="@+id/dialog_reply_llBtnReply"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/chatform_sendmsgbg_selector"
android:clickable="true"
android:gravity="center"
android:orientation="horizontal"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:visibility="visible" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="回复"
android:textColor="#ffffff"
android:textSize="13sp" />
</LinearLayout>
</LinearLayout>
<com.jaiky.test.faceview.FaceView
android:id="@+id/face_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" >
</com.jaiky.test.faceview.FaceView>
</LinearLayout>在styles.xml文件中添加如下样式：
<!-- 无标题无背景对话框主题 -->
<style name="MyNoFrame_Dialog" parent="android:Theme.Dialog">
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowNoTitle">true</item>
</style>package com.jaiky.test.replydialog;
import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.os.Handler;
import android.view.Gravity;
import android.view.Window;
import android.view.WindowManager.LayoutParams;
import android.view.inputmethod.InputMethodManager;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.LinearLayout;
import com.jaiky.test.faceview.FaceView;
/**
* 回复对话框
*
* @author Jaiky
* @date 2015-3-30 PS: Not easy to write code, please indicate.
*/
public class ReplyDialog extends Dialog {
private FaceView faceView;
private EditText etContent;
private ImageView ivFace;
private LinearLayout llBtnReply;
private Context mContext;
public ReplyDialog(Context context) {
super(context, R.style.MyNoFrame_Dialog);
mContext = context;
init();
}
private ReplyDialog(Context context, int theme) {
super(context, theme);
mContext = context;
init();
}
private void init() {
setContentView(R.layout.dialog_replyform);
// 设置宽度
Window window = getWindow();
window.setGravity(Gravity.BOTTOM);
LayoutParams lp = window.getAttributes();
lp.width = LayoutParams.MATCH_PARENT;
window.setAttributes(lp);
ivFace = (ImageView) findViewById(R.id.dialog_reply_ivFace);
etContent = (EditText) findViewById(R.id.dialog_reply_etContent);
llBtnReply = (LinearLayout) findViewById(R.id.dialog_reply_llBtnReply);
//此处绑定表情栏
faceView = (FaceView) findViewById(R.id.face_view);
faceView.setEdit(etContent);
faceView.setBtnView(ivFace);
// 弹出键盘
etContent.setFocusable(true);
etContent.setFocusableInTouchMode(true);
etContent.requestFocus();
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
InputMethodManager inputManager = (InputMethodManager) mContext
.getSystemService(Context.INPUT_METHOD_SERVICE);
inputManager.showSoftInput(etContent, 0);
}
}, 200);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
public ReplyDialog setContent(String content) {
etContent.setText(content);
return this;
}
public ReplyDialog setHintText(String hint) {
etContent.setHint(hint);
return this;
}
public String getContent() {
return etContent.getText().toString();
}
public ReplyDialog setOnBtnCommitClickListener(
android.view.View.OnClickListener onClickListener) {
llBtnReply.setOnClickListener(onClickListener);
return this;
}
}步骤三：Demo测试修改布局和主类
修改activity_main.xml内容如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.jaiky.test.replydialog.MainActivity">
<TextView
android:id="@+id/tvShow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"
android:text="Hello World!"/>
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="回复"/>
</LinearLayout>
修改MainActiivty类内容如下（注意包名）：
package com.jaiky.test.replydialog;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.Html;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import com.jaiky.test.faceview.FaceImageGetter;
public class MainActivity extends AppCompatActivity {
Button btn1;
TextView tvShow;
FaceImageGetter mFaceImageGetter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btn1 = (Button) findViewById(R.id.btn1);
tvShow = (TextView) findViewById(R.id.tvShow);
mFaceImageGetter = new FaceImageGetter(this);
btn1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
final ReplyDialog replyDialog = new ReplyDialog(MainActivity.this);
replyDialog.setHintText("回复某人的评论...")
.setOnBtnCommitClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
replyDialog.dismiss();
Log.d("XXX", replyDialog.getContent());
tvShow.setText(Html.fromHtml(replyDialog.getContent(), mFaceImageGetter, null));
}
})
.show();
}
});
}
}
--------------------------------------------------------------------------------------------------------------------
获取源代码及资源文件：
--------------------------------------------------------------------------------------------------------------------
声明
欢迎转载，但请保留文章原始出处
作者：Jaiky_杰哥
出处：http://blog.youkuaiyun.com/jaikydota163/article/details/52098869
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
