android仿微信表情雨下落效果的实现方法
前言
众所周知，微信聊天中我们输入一些关键词会有表情雨下落，比如输入「生日快乐」「么么哒」会有相应的蛋糕、亲吻的表情雨下落，今天就来完成这个表情雨下落的效果。下面话不多说了，来一起看看详细的介绍吧
效果图
先来看下效果，真·狗头雨·落！
实现代码
确认表情的模型，定义属性
public class ItemEmoje {
//坐标
public int x;
public int y;
// 横向偏移
public int offsetX;
//纵向偏移
public int offsetY;
//缩放
public float scale;
//图片资源
public Bitmap bitmap;
}
自定义RainView 表情下落视图，初始化变量。
public class RainView extends View {
private Paint paint;
//图片处理
private Matrix matrix;
private Random random;
//判断是否运行的，默认没有
private boolean isRun;
//表情包集合
private List<ItemEmoje> bitmapList;
//表情图片
private int imgResId = R.mipmap.dog;
public RainView(Context context) {
this(context, null);
}
public RainView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public RainView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
paint = new Paint();
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
matrix = new Matrix();
random = new Random();
bitmapList = new ArrayList<>();
}
}
初始化表情雨数据，确认每个表情的起始位置，下落过程中横向、纵向的偏移，以及缩放大小。
private void initData() {
for (int i = 0; i < 20; i++) {
ItemEmoje itemEmoje = new ItemEmoje();
itemEmoje.bitmap = BitmapFactory.decodeResource(getResources(), imgResId);
//起始横坐标在[100,getWidth()-100) 之间
itemEmoje.x = random.nextInt(getWidth() - 200) + 100;
//起始纵坐标在(-getHeight(),0] 之间，即一开始位于屏幕上方以外
itemEmoje.y = -random.nextInt(getHeight());
//横向偏移[-2,2) ，即左右摇摆区间
itemEmoje.offsetX = random.nextInt(4) - 2;
//纵向固定下落12
itemEmoje.offsetY = 12;
//缩放比例[0.8,1.2) 之间
itemEmoje.scale = (float) (random.nextInt(40) + 80) / 100f;
bitmapList.add(itemEmoje);
}
}
下落过程通过 onDraw进行绘制，不断的计算横纵坐标，达到下落效果。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (isRun) {
//用于判断表情下落结束，结束即不再进行重绘
boolean isInScreen = false;
for (int i = 0; i < bitmapList.size(); i++) {
matrix.reset();
//缩放
matrix.setScale(bitmapList.get(i).scale, bitmapList.get(i).scale);
//下落过程坐标
bitmapList.get(i).x = bitmapList.get(i).x + bitmapList.get(i).offsetX;
bitmapList.get(i).y = bitmapList.get(i).y + bitmapList.get(i).offsetY;
if (bitmapList.get(i).y <= getHeight()) {//当表情仍在视图内，则继续重绘
isInScreen = true;
}
//位移
matrix.postTranslate(bitmapList.get(i).x, bitmapList.get(i).y);
canvas.drawBitmap(bitmapList.get(i).bitmap, matrix, paint);
}
if (isInScreen) {
postInvalidate();
}else {
release();
}
}
}
/**
*释放资源
*/
private void release(){
if(bitmapList != null && bitmapList.size()>0){
for(ItemEmoje itemEmoje : bitmapList){
if(!itemEmoje.bitmap.isRecycled()){
itemEmoje.bitmap.recycle();
}
}
bitmapList.clear();
}
}
提供start() 方法触发。
public void start(boolean isRun) {
this.isRun = isRun;
initData();
postInvalidate();
}
布局文件
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <com.rain.RainView android:id="@+id/testView" android:layout_width="match_parent" android:layout_height="match_parent" /> <Button android:id="@+id/btn_dog" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:text="真·狗头雨·落！" /> <Button android:id="@+id/btn_cake" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginLeft="10dp" android:layout_toRightOf="@+id/btn_dog" android:text="蛋糕雨" /> </RelativeLayout>
activity 点击事件触发
btnCake.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//蛋糕图片
rainView.setImgResId(R.mipmap.cake);
rainView.start(true);
}
});
btnDog.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//狗头图片
rainView.setImgResId(R.mipmap.dog);
rainView.start(true);
}
});
github地址：https://github.com/taixiang/rain_emoji （本地下载）
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。
相关推荐
-
Android编程开发实现TextView显示表情图像和文字的方法
本文实例讲述了Android编程开发实现TextView显示表情图像和文字的方法.分享给大家供大家参考,具体如下: 从这个案例中我们可以学到当我们美化图片美化界面的时候可以在某一区域输入图片和文字混搭信息,第三张图片按比例缩小,第四张图像有超链接 布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.andro
-
Android编程实现QQ表情的发送和接收完整实例(附源码)
本文实例讲述了Android编程实现QQ表情的发送和接收.分享给大家供大家参考,具体如下: 在自己做一个聊天应用练习的时候,需要用到表情,于是就想着模仿一下QQ表情,图片资源完全copy的QQ.apk,解压就可以得到,这里不细说. 下面将该应用中的表情模块功能抽离出来,以便自己以后复习回顾.. 先看一下效果图: 首先进入界面:(完全仿照QQ) 点击一下上面的表情图标: 选择一些表情,输入一些文字混合: 点击发送: 可以看到文字和表情图片都一起显示出来了. 下面列出一些关键代码: 表情工具类Exp
-
android高仿微信表情输入与键盘输入代码(详细实现分析)
表情与键盘的切换输入大部分IM都会需要到,之前自己实现了一个,还是存在些缺陷,比如说键盘与表情切换时出现跳闪问题,这个困扰了我些时间,不过所幸在Github(其代码整体结构很不错)并且在论坛上找些解决思路,再加上研究了好几个开源项目的代码,最后终于苦逼地整合出比较不错的实现效果(这里不仅给出了实现方案,还提供一个可拓展的fragment模板以便大家实现自己的表情包)代码我已进行另外的封装与拓展,大家需要其他表情的话只需要根据fragment模板实现自己的表情界面,然后根据工厂类获取即可,实现效果
-
Android开发技巧之像QQ一样输入文字和表情图像
EditText和TextView一样,也可以进行图文混排.所不同的是,TextView只用于显示图文混排效果,而EditText不仅可显示,也可混合输入文字和图像,让我们先回顾一下图5.2所示的QQ聊天输入框,在输入框中可以同时输入文字和表情图像.实际上,这种效果在Android SDK中只需要几行代码就可以实现.为了使读者更有学习的冲动,先来欣赏一下即将实现的效果,如图5.16所示. 图5.16 在EditText控件中输入文字和图像 为了实现这个程序,首先来准备一些要用到的素材,也就是要在
-
Android编程开发之EditText实现输入QQ表情图像的方法
本文实例讲述了Android编程开发之EditText实现输入QQ表情图像的方法.分享给大家供大家参考,具体如下: 实现效果如下: 将QQ表情图像放到res下的drawable-hdpi文件夹下: 布局文件: <EditText android:id="@+id/edittext" android:layout_width="fill_parent" android:layout_height="wrap_content" android:
-
基于Android开发支持表情的实现详解
最近项目需要支持表情,表情的添加和解析实现基本上是参照Android自身的SmileyParser,具体就不多讲了,直接贴上代码: 复制代码 代码如下: public class SmileyParser {private static SmileyParser sInstance = null; private Context mContext = null;private Pattern mPattern = null;private HashMap<String, Integer> mS
-
Android自带emoji表情的使用方法详解
什么是emoji表情 emoji表情是一种表情符号,在代码中它现在其实是一组遵循Unicode的编码,即每一个表情符号都对应了一个Unicode编码.更进一步说,emoji表情实际上是一组Unicode编码与一组表情描述之间的对应.注意,这里所说的不是表情图片,而是表情描述.那么图片的实现是由谁来负责的呢?图片是由各个系统或者软件针对统一的表情描述来各自实现的,他们都遵循统一的Unicode编码规范.也就是说Unicode编码其所对应的表情描述是统一的,是所有人都要共同遵守的一套标准或者规范,而
-
Android高仿微信表情输入与键盘输入详解
最近公司在项目上要使用到表情与键盘的切换输入,自己实现了一个,还是存在些缺陷,比如说键盘与表情切换时出现跳闪问题,这个相当困扰我,不过所幸在Github(其中一个不错的开源项目,其代码整体结构很不错)并且在论坛上找些解决方案,再加上我也是研究了好多个开源项目的代码,最后才苦逼地整合出比较不错的实现效果,可以说跟微信基本一样(嘿嘿,只能说目前还没发现大Bug,若发现大家一起日后慢慢完善,这里我也只是给出了实现方案,拓展其他表情我并没有实现哈,不过代码中我实现了一个可拓展的fragment模板以便大
-
完整的Android表情功能处理方案
Android表情功能处理方案概述 1.原理和实现思路 2.表情图片显示 3.表情面板 4.表情的输入框插入和删除 5.表情添加脚本 Android中表情功能,一般都不是用ImageView去设置图片实现的,表情一般会嵌套在文本之中,那么如何实现呢,这里就介绍一下其中的原理,此外还有相关功能的实现思路和具体代码. 先看下良心动态图 1.原理和思路 a.表情内容的数据格式 表情看上去是图片,但是在数据传输的时候本质上是一个特殊文本: 比如QQ表情就是一个 "/表情字母"的结构,比如害羞的
-
android仿微信表情雨下落效果的实现方法
前言 众所周知,微信聊天中我们输入一些关键词会有表情雨下落,比如输入「生日快乐」「么么哒」会有相应的蛋糕.亲吻的表情雨下落,今天就来完成这个表情雨下落的效果.下面话不多说了,来一起看看详细的介绍吧 效果图 先来看下效果,真·狗头雨·落! 实现代码 确认表情的模型,定义属性 public class ItemEmoje { //坐标 public int x; public int y; // 横向偏移 public int offsetX; //纵向偏移 public int offsetY;
-
Android仿Flipboard动画效果的实现代码
1.上原图 前几天在 Hencoder 征稿看到的Filpboard 里的的动画效果: Filipboard.gif 先bb一句:在看本文的同时,如果觉得我写的模糊看不太懂的可以直接拉到文末,配合完整代码再一步一步看. 2.实现 整体思路: 用手机拍下来,逐帧观看了许久,恍然大悟,就是一张纸,折起一边之后,让其对折线绕中心点旋转. 关联自定义 View : Camera 来控制对折幅度, canves 控制旋转. 具体: 每当对折线旋转的时候,图标总是一边是折起来的,一边是平铺的,且中心对称,所
-
Android 仿支付宝密码输入框效果
模仿支付宝输入效果,实现很简单,就是画个矩形框和圆形,其他的通过组合view来实现所有功能,虽然简单但是封装起来,方便以后使用,也分享一下,希望对别人也有点帮助. 1.如何使用,可以设置自己的进入退出动画,不设置则没有动画效果,自己觉得封装之后还是非常用好的. private MyInputPwdUtil myInputPwdUtil; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(sa
-
Android仿微信输入框效果的实现代码
仿微信输入框效果图: 输入框: <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="50dp" android:layout_marginRight="50dp" android:background="@drawable/weixin_edit
-
Android仿京东分类效果
本文实例为大家分享了Android仿京东分类效果展示的具体代码,供大家参考,具体内容如下 1.写一个fragment import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView;
-
Android仿IOS回弹效果 支持任何控件
本文实例为大家分享了Android仿IOS回弹效果的具体代码,供大家参考,具体内容如下 效果图: 导入依赖: dependencies { // ... compile 'me.everything:overscroll-decor-android:1.0.4' } RecyclerView 支持线性布局和网格布局管理器(即所有原生Android布局).可以轻松适应支持自定义布局管理器. RecyclerView recyclerView = (RecyclerView) findViewByI
-
Android仿微信主界面的实现方法
本文实例为大家分享了Android模仿微信主界面展示的具体代码,供大家参考,具体内容如下 先看一下效果图 实现的原理: ViewPager+FragmentPagerAdapter 主界面可分为三部分: top标题栏就是一个TextView 中间的ViewPager作为显示的容器,填充Fragment bottom是一个RadioGroup 这里为了布局的优化,将top和bottom抽取出来 ,然后用include将其导入主布局,如下 <LinearLayout xmlns:android=&quo
-
分享Android仿刮奖效果控件
本文实例为大家分享了Android刮刮卡效果控件,供大家参考,具体内容如下 刮刮卡类: package com.reyo.view; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.graphics.Canvas; import android.graphics.Paint; import android.gr
-
android仿iphone主题效果的主菜单
现在很多第三方Launcher((如360Launcher,GoLauncher)带有iphone主题,相信玩Android的人大都知道. 本例实现仿iphone主题的launcher的冰山一角.如下图: 从效果看,大概就能猜出用什么控件类(支持左右滑动的控件类+GridView),支持左右滑动的控件类,有很多了比如常用的Gallery,ViewPager,ViewFlipper,ViewFlow等等,本例自定义继承ViewGroup的.看过launcher源码的人应该都知道 有个Workspa
-
android仿支付宝密码输入框效果
本文实例为大家分享了android仿支付宝密码输入框展示的具体代码,供大家参考,具体内容如下 这个没什么好分析的,就是一些基本的绘制什么线,矩形什么的,看代码更具体 布局文件: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layou