Android实用视图动画及工具系列之五:底部回复对话框,仿QQ空间微信朋友圈回复对话框

版权声明:本文为Jaiky_杰哥原创,转载请注明出处。This blog is written by Jaiky, reproduced please indicate. https://blog.csdn.net/jaikydota163/article/details/52098869

实现效果



功能说明

这就是一个底部弹出对话框,仿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>


在drawable文件夹下新建chatform_sendmsgbg_selector.xml,回复按钮样式:
<?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>

新建类ReplayDialog,继承自Dialog:
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.csdn.net/jaikydota163/article/details/52098869

阅读更多

没有更多推荐了,返回首页