android表情功能开发

最新推荐文章于 2022-01-31 12:24:56 发布
最新推荐文章于 2022-01-31 12:24:56 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： Android基础 文章标签： android 表情功能 拍照功能 表情开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/happy_fsyy/article/details/44222545
版权

之前写过一个发帖界面，但是从来没有认真整理过，现在该写的写完了，好好整理下，不说废话，直接上效果图。（以下所有图片，全部来自百度贴吧客户端“借用”）



这个发帖界面主要实现功能包括，图片的上传，表情的实现。这篇我们先说表情功能的实现。

习惯性，从设计师那里拿到界面，先考虑布局，然后开始编写xml，如下面这个文件main.xml：

<?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"
    android:background="#FFFFFF">
    <RelativeLayout 
        android:id="@+id/post_titlebar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentTop="true"
        >
        <TextView 
            android:id="@+id/post_cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="10dp"
            android:textSize="16sp"
            android:textColor="#FF00FF"
            android:text="取消"/>
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:textColor="#000000"
            android:textSize="18sp"
            android:text="发表帖子"/>
        <TextView 
            android:id="@+id/post_submit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="10dp"
            android:textSize="16sp"
            android:textColor="#FF00FF"
            android:text="发送"/>
    </RelativeLayout>
    <View 
        android:id="@+id/post_topLine"
        android:layout_below="@id/post_titlebar"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#cdcdcd"/>
    <EditText 
        android:id="@+id/post_inputEdit"
        android:layout_below="@id/post_topLine"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:maxLines="5"
        android:hint="说点什么吧"
        android:textSize="14sp"
        android:gravity="left|top"
        android:cursorVisible="true"
        android:background="@null"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        android:textColor="#959595"/>
    <FrameLayout 
        android:id="@+id/post_imagePart"
        android:layout_below="@id/post_inputEdit"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
       >
        <ImageView 
            android:id="@+id/post_addPhoto"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:scaleType="fitXY"
            android:src="@drawable/add_photo"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"/>
        <ImageView 
            android:id="@+id/post_deletePhoto"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:src="@drawable/delete_photo"
            android:layout_gravity="top|right"
            android:visibility="invisible"/>
    </FrameLayout>
    <LinearLayout
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >
        <View 
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#cdcdcd"/>
        <ImageView 
            android:id="@+id/post_addEmotion"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/add_emotion"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="10dp"
            android:scaleType="centerCrop"/>
        <View 
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#cdcdcd"/>
        <FrameLayout 
            android:id="@+id/post_emotion_content"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:layout_marginTop="5dp"
            android:visibility="gone">
        </FrameLayout>
    </LinearLayout>
</RelativeLayout>

xml里面就这些东西，没什么好说的，只是这里我们的打算是，将表情界面当做一个Framgent来写。所以出现了一个id为post_emotion_content的FrameLayout，用来装载表情界面的Fragment。



xml编写完毕之后，接下来考虑我们的Fragment该如何编写，很明显表情界面整个是一个ViewPager，而在ViewPager的每个页面则是一个GridView，这样分析之下，整个界面的结构都出来了，编写代码轻而易举。

先看下emotion_main.xml的代码：

<?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" >
    <android.support.v4.view.ViewPager
        android:id="@+id/emotion_viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        />
    <LinearLayout 
        android:id="@+id/emotion_dotViewGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="10dp"
        android:orientation="horizontal"
        android:layout_centerHorizontal="true">
    </LinearLayout>

</RelativeLayout>
这个xml里就只包括我们需要的ViewPager和一个dotViewGroup。从表面意思也可以看出，dotViewGroup就是下方的点，看过 上一篇博客的话，大家应该对ViewPager的布局甚至adapter都非常熟悉了，这里不做具体介绍了。


接下来我们看整个Fragment的内容，为了方便，我们直接将很多类都写成了内部类。具体看下EmotionFragment.java文件，如下：

package com.example.postdemo;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.text.Selection;
import android.text.Spannable;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.EditText;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.LinearLayout;

/**
 * 
 * @author happy_fsyy
 * 
 */

public class EmotionFragment extends Fragment implements OnItemClickListener {

	
	/**
	 * 表情界面的布局
	 */
	private View emotionMain;
	/**
	 * 装载表情页面的viewPager
	 */
	private ViewPager emotionViewpager;
	/**
	 * 表情滑动下方的小点布局
	 */
	private LinearLayout dotViewGroup;
	/**
	 * 每个页面其实是一个GridView
	 */
	private GridView[] emotionGridViews;
	/**
	 * 定义页面数量
	 */
	private int pageCount;
	/**
	 * 小点
	 */
	private View[] dots;
	/**
	 * 表情图片
	 */
	private int[] emotionImgs;
	/**
	 * 表情文字
	 */
	private String[] emotionText;
	/**
	 * 当前 被选中页面index
	 */
	private int currentIndex;
	
	
	private void initViews(){
		emotionMain=getActivity().getLayoutInflater().inflate(R.layout.emotion_main, null);
		emotionViewpager=(ViewPager)emotionMain.findViewById(R.id.emotion_viewPager);
		dotViewGroup=(LinearLayout)emotionMain.findViewById(R.id.emotion_dotViewGroup);
	}
	
	/**
	 * 初始化viewPager
	 */
	private void initViewPager(){
		emotionImgs=new int[]{
				R.drawable.image_emoticon1,R.drawable.image_emoticon2,R.drawable.image_emoticon3,R.drawable.image_emoticon4,R.drawable.image_emoticon5
				,R.drawable.image_emoticon6,R.drawable.image_emoticon7,R.drawable.image_emoticon8,R.drawable.image_emoticon9,R.drawable.image_emoticon10
				,R.drawable.image_emoticon11,R.drawable.image_emoticon12,R.drawable.image_emoticon13,R.drawable.image_emoticon14,R.drawable.image_emoticon15
				,R.drawable.image_emoticon16,R.drawable.image_emoticon17,R.drawable.image_emoticon18,R.drawable.image_emoticon19,R.drawable.image_emoticon20
				,R.drawable.image_emoticon21,R.drawable.image_emoticon22,R.drawable.image_emoticon23,R.drawable.image_emoticon24,R.drawable.image_emoticon25
				,R.drawable.image_emoticon26,R.drawable.image_emoticon27,R.drawable.image_emoticon28,R.drawable.image_emoticon29,R.drawable.image_emoticon30
				,R.drawable.image_emoticon31,R.drawable.image_emoticon32,R.drawable.image_emoticon33
			};
		//这里的字符串可以任意更换
		emotionText=getActivity().getResources().getStringArray(R.array.emotion_texts);
		
		currentIndex=0;
		pageCount=emotionImgs.length/15+1;//每个页面15个表情
		emotionGridViews=new GridView[pageCount];
		dots=new View[pageCount];
		
		
		
		int i=0;
		//初始化每个页面的gridview
		for(i=0;i<pageCount;i++){
			emotionGridViews[i]=new GridView(getActivity());
			emotionGridViews[i].setStretchMode(GridView.STRETCH_COLUMN_WIDTH);
			emotionGridViews[i].setNumColumns(5);
			emotionGridViews[i].setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT));
			emotionGridViews[i].setGravity(Gravity.CENTER);
			emotionGridViews[i].setAdapter(new GridViewAdapter(getActivity(), i));
			emotionGridViews[i].setOnItemClickListener(this);
		}
		
		for(i=0;i<pageCount;i++){
			dots[i]=new View(getActivity());
			LinearLayout.LayoutParams lp=new LinearLayout.LayoutParams(10, 10);
			lp.setMargins(10, 0, 10, 0);
			dots[i].setLayoutParams(lp);
			if(i!=currentIndex){
				dots[i].setBackgroundResource(R.drawable.dot_normal);
			}else{
				dots[i].setBackgroundResource(R.drawable.dot_focused);
			}
			dotViewGroup.addView(dots[i]);
		}
		
		emotionViewpager.setAdapter(new EmotionPagerAdapter());
	}
	
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		initViews();
		initViewPager();
		
		emotionViewpager.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int position) {
				currentIndex=position;
				for(int i=0;i<pageCount;i++){
					if(i==currentIndex){
						dots[i].setBackgroundResource(R.drawable.dot_focused);
					}else{
						dots[i].setBackgroundResource(R.drawable.dot_normal);
					}
				}
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				
			}
		});
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return emotionMain;
	}
	
	@Override
	public void onItemClick(AdapterView<?> parent, View view, int position,
			long id) {
		EditText inputEditText=(EditText)getActivity().findViewById(R.id.post_inputEdit);
		EmotionParser parser=new EmotionParser(getActivity());
		String content=inputEditText.getText().append(emotionText[currentIndex*15+position]).toString();
		inputEditText.setText(parser.replace(content));
		Spannable text=(Spannable)inputEditText.getText();
		Selection.setSelection(text, text.length());
	}
	
	
	private class GridViewAdapter extends BaseAdapter{
		private Context context;//Context
		private int pageIndex;//页面索引
		/**
		 * @param context Context
		 * @param pageIndex 第几页
		 */
		public GridViewAdapter(Context context,int pageIndex) {
			this.context=context;
			this.pageIndex=pageIndex;
		}
		@Override
		public int getCount() {
			if(pageIndex<pageCount-1){
				return 15;
			}else{
				return emotionImgs.length%15;
			}
		}

		@Override
		public Object getItem(int position) {
			return null;
		}

		@Override
		public long getItemId(int position) {
			return 0;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			ImageView view;
			if(convertView==null){
				view=new ImageView(context);
				view.setLayoutParams(new GridView.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
				view.setScaleType(ImageView.ScaleType.CENTER_CROP);
				view.setPadding(8, 8, 8, 8);
				
			}else{
				view=(ImageView)convertView;
			}
			view.setImageResource(emotionImgs[pageIndex*15+position]);
			return view;
		}
	}
	
	private class EmotionPagerAdapter extends PagerAdapter{

		@Override
		public int getCount() {
			return pageCount;
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0==arg1;
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView(emotionGridViews[position]);
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			((ViewPager)container).addView(emotionGridViews[position]);
			return emotionGridViews[position];
		}
	}

}
根据代码注释看起来应该没有任何问题了，具体的代码下载请看下一篇。


阿乐246
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Android实现表情功能
03-20
Android实现表情功能，自己学着做的表情功能，有源码有截图。
从零开始搭建“表情包小程序”
热门推荐
looken1024的博客
06-05 1万+
在微信公众号后台生成AppID和AppSecret，方便后面使用微信开发者工具调试，具体位置：开发 => 开发管理 => 开发设置在同一个页面配置服务器域名， 微信小程序有个限制，小程序所访问的地址必须是https且完成备案的域名。从https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html下载微信开发者工具，本文选择的是稳定版Windows 64位。创建新的小程序项目，AppID填刚才在公众平台生成的，不使用云开发，选择J
Android开发中自定义表情并发送出去之经典的发送表情
AndyYuan317的博客
11-07 2807
本文实例讲述了Android编程开发实现输入（自定义表情包）QQ表情图像并发送出去别人收到并解析出来的方法。分享给大家供大家参考，原来QQ微信等发送表情其实发送的都不是表情，而是一个富文本，收到消息后再解析得来的，具体效果如下 ： 表情发送出去是这样：   最近在开发的一个项目是即时通讯项目，像QQ，微信等功能的项目，其中我负责的一个模块中含有表情发送的 功能，具体需求如下： 1：...
android实现qq表情库,Android编程开发之EditText实现输入QQ表情图像的方法
weixin_29463587的博客
05-26 209
本文实例讲述了Android编程开发之EditText实现输入QQ表情图像的方法。分享给大家供大家参考，具体如下：实现效果如下：将QQ表情图像放到res下的drawable-hdpi文件夹下：布局文件：android:id="@+id/edittext"android:layout_width="fill_parent"android:layout_height="wrap_content"and...
android 新浪微博客户端的表情功能的实现，flutter教程pdf
wa2231a的博客
01-31 1118
4.实现一个可以让用户选择的表情界面，本人用GridView实现 5.实现点击GridView的每一个item，处理根据item的index查找对应的表情code，然后再把code利用正则把code转换为相对应的表情图片，最后表情插入EditText进行发送。 下面是具体的实现过程 1.把新浪表情图片下载到本地的实现如下：(这个可以建一个java工程进行下载) Java代码   public void getFriendList() throws Exc
Android仿 QQ 微信 表情
04-22
在Android开发中，实现类似QQ和微信的表情功能是一项常见的需求，尤其在聊天、社交类应用中。本项目“Android仿QQ微信表情”旨在帮助开发者理解并实现这些平台的表情输入和展示机制。通过分析和学习该项目，我们可以...
Android 表情开发
01-21
综上所述，Android表情开发涉及资源准备、界面设计、事件处理、输入输出以及兼容性优化等多个环节。开发者需要理解Unicode表情的使用，掌握自定义布局和事件监听，还要熟悉Android的文本处理机制，以实现流畅、高效...
基于Android开发支持表情的实现详解
09-05
在Android开发中，支持表情功能是一项常见的需求，特别是在社交应用或者聊天应用中。本文将详细介绍如何在Android环境中实现表情解析和显示。首先，我们需要理解表情的处理主要涉及到两个方面：一是表情的编码与识别...
android表情开发
03-31
以下是一些关于Android表情开发的重要知识点： 1. **Emoji字体支持**：Android系统本身内置了一些基本的Emoji字符支持，但并不是所有设备都支持最新或最全的Emoji表情。为了提供全面的Emoji支持，开发者需要引入第...
Android Emoji 表情开发
03-12
Android Emoji表情开发。两端使同一套的图片，防止两端因为系统内置的Emoji表情不一样，而造成用户体验不一致！
Android开发仿QQ表情的实现
10-30
本demo是一个模仿QQ表情的使用，实现了GridView显示所有QQ表情，再通过点击图标选择表情，并把表情存入EditText中，
html5 表情功能
03-28
html5表情实现表情功能代码，测试可以正常使用，WEB，IOS和安卓手机都可以正常使用，网络上有些资源表情代码，IOS会有问题，这个不会，简单改造就可以在项目中使用
android简单的实现emoji表情功能
12-19
android仿简单的实现emoji表情功能，可以发送出表情用Textview列表来显示出来。代码简单，拷贝就可以使用
Android聊天软件的开发(六)--表情
vaintwyt
06-20 3597
表情用于聊天对话的输入，实现de
快速打造 Android 自定义表情库
07-07 7585
简介 本文灵感来源是经典的https://github.com/rockerhieu/emojicon,部分代码直接不要脸的 copy 了，在其基础上更美观好用，且自定义空间更大。 最终效果图 源码下载与使用方法 https://github.com/mabeijianxi/android-expression 实现思想 首先叫 UI 给我做好的表情
Android 表情功能的完整处理方案
期待
07-15 1万+
概述 1.原理和实现思路 2.表情图片显示 3.表情面板 4.表情的输入框插入和删除 5.表情添加脚本 Android中表情功能,一般都不是用ImageView去设置图片实现的, 表情一般会嵌套在文本之中,那么如何实现呢,这里就介绍一下其中的原理,此外还有相关功能的实现思路和具体代码 先看下良心动态图~ --------------
Android调用系统表情实现
Young
05-24 3939
注意：文章先发表于慕课网前言：在Android开发中，有时候需求为发送一些系统里面的表情，类似于搜狗输入法的那种简单表情。调用系统的表情，ios那边可以自动识别，同时也避免自己添加表情的图片。效果是这样子的图片描述； 然后点击， EditText就会显示这些表情，同时ios那边不需要任何的识别操作，可以直接显示这些表情。开发步骤如下： S1：定义一个Gridview，适配器用TextVie
android 仿微信聊天发送表情包
最新发布
10-23
具体实现时，可以使用Android开发中常用的UI控件和布局来实现上述功能。可以使用GridView或RecyclerView来展示表情包的选择界面，通过设置监听器来处理表情包的选择和发送操作。可以使用SpannableString来同时显示...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值