Android开发之仿QQ表情实现（上）

最新推荐文章于 2022-06-06 10:56:18 发布

置顶 lusiting

最新推荐文章于 2022-06-06 10:56:18 发布

阅读量3k

点赞数

分类专栏： Android 文章标签： android开发 QQ表情 GridView学习

本文链接：https://blog.csdn.net/lusiting/article/details/40604351

版权

Android 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

大家晚上好，，小鹿又来了。。最近小鹿特别忙，忙到没时间发表博客了（注：以下内容过于简单请大家不要喷，仅提供初学者学习）

今天发表两篇文章，分别是讲解模拟QQ表情的实现，先给大家看效果图，，，，

开始了，首先我们对QQ表情并不陌生了吧，用它们更不陌生了，每当我们上QQ的时候，总会想发表QQ表情来发泄我们的内心感情....

那么，这么好玩的东西，那我们也应该来玩玩一下怎么实现它们，由上图可知，是完全没有实现出QQ表情的原本效果，但总有点一样，那就不管了，接下来的就靠大家去实现更高级的效果了，小鹿能力有限。

废话不多说了，先说说本内容涉及到的知识点：

①简单的GridView使用

②想不出了....

光说好像大家都不太明白了，那就以代码讲话吧。

以下是MainActivity.java

public class MainActivity extends Activity {

	private QQFaceAdapter mQQFaceAdapter = null;
	private GridView mGridView = null;
	private EditText mEditText = null;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mQQFaceAdapter = new QQFaceAdapter(this);
		mGridView = (GridView) findViewById(R.id.tweet_detail_foot_faces);
		mEditText = (EditText) findViewById(R.id.tweet_detail_foot_editer);
		mGridView.setAdapter(mQQFaceAdapter);
		mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
				SpannableString spannableString = new SpannableString(view
						.getTag().toString());
				Drawable drawable = getResources().getDrawable(
						(int) mQQFaceAdapter.getItemId(position));
				drawable.setBounds(0, 0, 35, 35);
				ImageSpan imageSpan = new ImageSpan(drawable,
						ImageSpan.ALIGN_BOTTOM);
				spannableString.setSpan(imageSpan, 0, view.getTag().toString()
						.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
				mEditText.getText().insert(mEditText.getSelectionStart(),
						spannableString);
			}
		});
	}

}

MainActivity.java中

mGridView.setOnItemClickListener

设定当点击哪个图标时，获取图标并把图标放进EditText中

GridView的适配器如下：QQFaceAdapter.java

public class QQFaceAdapter extends BaseAdapter {
	private Context mContext;
	private static int[] mImageIds = new int[] { R.drawable.f001,
			R.drawable.f002, R.drawable.f003, R.drawable.f004, R.drawable.f005,
			R.drawable.f006, R.drawable.f007, R.drawable.f008, R.drawable.f009,
			R.drawable.f010, R.drawable.f011, R.drawable.f012, R.drawable.f013,
			R.drawable.f014, R.drawable.f015, R.drawable.f016, R.drawable.f017,
			R.drawable.f018, R.drawable.f019, R.drawable.f020, R.drawable.f021,
			R.drawable.f022, R.drawable.f023, R.drawable.f024, R.drawable.f025,
			R.drawable.f026, R.drawable.f027, R.drawable.f028, R.drawable.f029,
			R.drawable.f030, R.drawable.f031, R.drawable.f032, R.drawable.f033,
			R.drawable.f034, R.drawable.f035, R.drawable.f036, R.drawable.f037,
			R.drawable.f038, R.drawable.f039, R.drawable.f040, R.drawable.f041,
			R.drawable.f042, R.drawable.f043, R.drawable.f044, R.drawable.f045,
			R.drawable.f046, R.drawable.f047, R.drawable.f048, R.drawable.f049,
			R.drawable.f050, R.drawable.f051, R.drawable.f052, R.drawable.f053,
			R.drawable.f054, R.drawable.f055, R.drawable.f056, R.drawable.f057,
			R.drawable.f058, R.drawable.f059, R.drawable.f060, R.drawable.f061,
			R.drawable.f062, R.drawable.f063, R.drawable.f064, R.drawable.f065,
			R.drawable.f067, R.drawable.f068, R.drawable.f069, R.drawable.f070,
			R.drawable.f071, R.drawable.f072, R.drawable.f073, R.drawable.f074,
			R.drawable.f075, R.drawable.f076, R.drawable.f077, R.drawable.f078,
			R.drawable.f079, R.drawable.f080, R.drawable.f081, R.drawable.f082,
			R.drawable.f083, R.drawable.f084, R.drawable.f085, R.drawable.f086,
			R.drawable.f087, R.drawable.f088, R.drawable.f089, R.drawable.f090,
			R.drawable.f091, R.drawable.f092, R.drawable.f093, R.drawable.f094,
			R.drawable.f095, R.drawable.f096, R.drawable.f097, R.drawable.f098,
			R.drawable.f099, R.drawable.f100, R.drawable.f101, R.drawable.f103,
			R.drawable.f104, R.drawable.f105 };

	public QQFaceAdapter(Context c) {
		mContext = c;
	}

	// 获取图片的总id
	public static int[] getImageIds() {
		return mImageIds;
	}

	// 获取图片的个数
	public int getCount() {
		return mImageIds.length;
	}

	// 获取图片在库中的位置
	public Object getItem(int position) {
		return position;
	}

	// 获取图片ID
	public long getItemId(int position) {
		return mImageIds[position];
	}

	public View getView(int position, View convertView, ViewGroup parent) {
		ImageView imageView;
		if (convertView == null) {
			imageView = new ImageView(mContext);
			imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
			imageView.setScaleType(ImageView.ScaleType.CENTER);
		} else {
			imageView = (ImageView) convertView;
		}
		imageView.setImageResource(mImageIds[position]);
		if (position < 65) {
			imageView.setTag("[" + position + "]");
		} else if (position < 100) {
			imageView.setTag("[" + (position + 1) + "]");
		} else {
			imageView.setTag("[" + (position + 2) + "]");
		}
		return imageView;
	}
}

activity_main.xml的代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
        <GridView
        android:id="@+id/tweet_detail_foot_faces"
        android:layout_width="fill_parent"
        android:layout_height="220dip"
        android:background="@color/face_bg"
        android:columnWidth="50dip"
        android:fadingEdge="none"
        android:gravity="center"
        android:numColumns="auto_fit"
        android:scrollingCache="false"
        android:stretchMode="columnWidth" />

    <EditText
        android:id="@+id/tweet_detail_foot_editer"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dip"
        android:layout_marginTop="5dip"
        android:autoLink="web|email"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:gravity="top"
        />

</LinearLayout>

代码已经贴完了，如果大家喜欢，就请大家新建一个项目，再把代码贴到项目中，图片资源稍后上传更新请大家多多关注（最近在博客中上传不了资源，小鹿也不懂怎么回事，请大家多多原谅，，，）

最后结束语：以上代码看不懂的朋友请留个言，小鹿会很关照滴，如果觉得本次内容不好请不要喷，给点评论我会好好改进，在此多谢大家了。

--------------------------------------------------------------------------------------------

源码地址：http://download.csdn.net/detail/lusiting/8098163

--------------------------------------------------------------------------------------------

下集预告：Android开发之仿QQ表情实现（下）