Android实用视图动画及工具系列之五：底部回复对话框，仿QQ空间微信朋友圈回复对话框
来源：互联网 发布：js跳转指定页面 编辑：程序博客网 时间：2024/04/30 06:59
实现效果
功能说明
这就是一个底部弹出对话框，仿QQ空间微信朋友圈底部弹出对话框，用了一些普通的UI优化，以及添加了表情框等，需要用到类似功能的自行下载源码集成。
适用于新手及新学习Android的码友们，老玩家当然也可以看看，这个还是挺简单挺实用的，在后面会简略介绍实现方法及源代码，同时博客的最后还提供源代码和图片等资源github下载地址。
本部分内容主要讲解底部弹出框的实现，不讲解表情栏部分，需要查看表情栏部分实现的请查看这篇文章：
--------------------------------------------------------------------------------------------------------------------
Android实用视图动画及工具系列之六：通用表情栏，仿QQ微信聊天弹出表情选框：
http://blog.csdn.net/jaikydota163/article/details/52098873
--------------------------------------------------------------------------------------------------------------------
实现步骤
步骤一：创建外观样式
这个底部弹出对话框只用了两张图片，其他的都是通过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(); } }); }}--------------------------------------------------------------------------------------------------------------------
获取源代码及资源文件：
https://github.com/jaikydota/Android-ReplayDialog
--------------------------------------------------------------------------------------------------------------------
声明
欢迎转载，但请保留文章原始出处
作者：Jaiky_杰哥
出处：http://blog.csdn.net/jaikydota163/article/details/52098869
9 1
- Android实用视图动画及工具系列之五：底部回复对话框，仿QQ空间微信朋友圈回复对话框
- Android实用视图动画及工具系列之二：Toast对话框和加载载入对话框
- Android实用视图动画及工具系列之六：通用表情栏，仿QQ微信聊天弹出表情选框
- (转)Android实用视图动画及工具系列之六：通用表情栏，仿QQ微信聊天弹出表情选框
- android仿qq空间、微信朋友圈图片展示
- Android实用视图动画及工具系列之十：漂亮的发布动画，仿新浪首页加号发布微博动画框
- Android实用视图动画及工具系列之十：漂亮的发布动画，仿新浪首页加号发布微博动画框
- 微信 被动回复 (五)
- Android 朋友圈之评论回复列表
- Android实用视图动画及工具系列之三：表情加载动画和失败加载动画，人物加载动画
- 【Android】高仿QQ对话框之自定义对话框CustomDialog
- Android工具类— 分享到QQ（QQ空间）、微信（朋友圈）
- Android QQ空间说说回复功能简介
- Android QQ空间说说回复功能简介
- Android实用视图动画及工具系列之一：简单的载入视图和载入动画
- android特效集锦系列之六 仿QQ空间底部菜单
- Android实用视图动画及工具系列之七：可定制Tab标签栏，ViewPaper和Fragment滑动标签视图
- android 微信朋友圈 中 回复功能的实现 是怎么弄的呢？寻求帮助
- 非负矩阵分解NMF
- Android实用视图动画及工具系列之四：多状态CheckBox，可设置大小尺寸和设置不可用的复选框
- Linux基础-文件
- TP:728A348E
- 一类数据多种存储（虑将频繁查询的数据加载到内存或者内存数据库。如果一类数据，即要在内存中存储一份，又要在数据库中存储一）
- Android实用视图动画及工具系列之五：底部回复对话框，仿QQ空间微信朋友圈回复对话框
- C++中Defaulted 函数
- 一个小小程序员的爬坑笔记
- Android实用视图动画及工具系列之六：通用表情栏，仿QQ微信聊天弹出表情选框
- Android实用视图动画及工具系列之七：可定制Tab标签栏，ViewPaper和Fragment滑动标签视图
- 2016 google host地址
- Android实用视图动画及工具系列之八：带头部的Viewpaper，结合头部的Fragment切换效果
- java学习之路 之 面向对象编程-面向对象-第一个小项目P1-FAACS
- Android实用视图动画及工具系列之九：漂亮的图片选择器，高性能防崩溃图片选择工具
