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

最新推荐文章于 2021-05-27 00:21:37 发布

置顶 lusiting

最新推荐文章于 2021-05-27 00:21:37 发布

阅读量1.5k

点赞数 1

分类专栏： Android 文章标签： Android开发 QQ表情 GridView学习 PagerView的使用

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

版权

Android 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

大家中午好，，，，，，小鹿吃草刚回来真是不好意思，，，，

上篇文章已经讲到GirdView的使用，本节内容是基于上篇内容实现更完美的QQ表情的实现，具体的说，本节内容实现的QQ表情是使用了GirdView+PagerView+RadioButton知识点，希望初学者对以上那三种控件的使用不是很好建议你们先了解一下，，当然，小鹿也略略说一点，

废话到此为止，先让大家看看效果图吧

第一页如下：

第二页如下

好了，第三第四页我就不贴出来了

刚才我为了偷懒，在网上找关于GirdView与PagerView结合用法，可是小鹿很抠门，看到了一个两个要花两个积分的源代码，瞬间就没有下载的这个心了，小鹿一直找啊找，想找个免费的，找了老半天，没戏了，小鹿还是动动手慢慢编代码出来吧！

先说明一下本次内容源码的类总共有三个：

①MainActivity.java：这个类很神奇吧，估计大家对它并不陌生了，是一个活动窗口类，主要是显示界面给用户观看和操作；

②QQFaceAdapter.java：如果大家看了上篇的内容应该对这个类不陌生了，是GirdView适配器类，它主要是给GirdView适配数据用的；

③QQImage.java：对于本次内容，比上篇内容就是多出这个类，大家不要怕，这个类很简单，只是存放QQ表情图片资源的一个类。

类名介绍到这，现在让小鹿和大家一起看代码吧，，，，

MainActivity.java

public class MainActivity extends Activity {

	private QQFaceAdapter mQQFaceAdapter = null;
	private GridView mGridView = null;
	private EditText mEditText = null;
	private ViewPager mViewPager = null;
	private ArrayList<View> mArrayList = new ArrayList<View>();
	private PagerAdapter pagerAdapter = null;
	private QQImage qqImage = new QQImage();
	private int[] radioButtonID = new int[] { R.id.radio0, R.id.radio1,
			R.id.radio2, R.id.radio3};
	private RadioGroup mGroup;
	private int mCurrentItem = 0;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mViewPager = (ViewPager) findViewById(R.id.mViewPager);
		mEditText = (EditText) findViewById(R.id.tweet_detail_foot_editer);
		mGroup = (RadioGroup) findViewById(R.id.radioGroup1);
		initAllItems();
		pagerAdapter = new PagerAdapter() {

			// 创建
			@Override
			public Object instantiateItem(View container, int position) {
				View layout = mArrayList.get(position % mArrayList.size());
				mViewPager.addView(layout);
				return layout;
			}

			// 销毁
			@Override
			public void destroyItem(View container, int position, Object object) {
				View layout = mArrayList.get(position % mArrayList.size());
				mViewPager.removeView(layout);
			}

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

			}

			@Override
			public int getCount() {
				return mArrayList.size();
			}

			
		};
		mViewPager.setAdapter(pagerAdapter);
		mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageScrollStateChanged(int position) {
				// TODO Auto-generated method stub
			
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub

			}

			@Override
			public void onPageSelected(int position) {
				// TODO Auto-generated method stub
				 mCurrentItem =mViewPager.getCurrentItem();
				mGroup.check(radioButtonID[mCurrentItem]);
			}

		});
	}

	private void initAllItems() {
		for (int i = 0; i < 4; i++) {
			mArrayList.add(initPagerItem(i));
		}
	}

	private View initPagerItem(int id) {
		View v = getLayoutInflater().inflate(R.layout.tuijian_header, null);
		mGridView = (GridView) v.findViewById(R.id.tweet_detail_foot_faces1);
		mQQFaceAdapter = new QQFaceAdapter(MainActivity.this, id);
		mGridView.setAdapter(mQQFaceAdapter);
		mGridView.setOnItemClickListener(itemClick);
		return v;
	}

	private AdapterView.OnItemClickListener itemClick = new AdapterView.OnItemClickListener() {

		@Override
		public void onItemClick(AdapterView<?> parent, View view, int position,
				long id) {
			// TODO Auto-generated method stub
			SpannableString spannableString = new SpannableString(view.getTag()
					.toString());
			Drawable drawable = null;
			switch (mViewPager.getCurrentItem()) {
			case 0:
				drawable = getResources().getDrawable(
						(int) qqImage.mImageIds1[position]);
				break;
			case 1:
				drawable = getResources().getDrawable(
						(int) qqImage.mImageIds2[position]);
				break;
			case 2:
				drawable = getResources().getDrawable(
						(int) qqImage.mImageIds3[position]);
				break;
			case 3:
				drawable = getResources().getDrawable(
						(int) qqImage.mImageIds4[position]);
				break;
			}
			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);
		}
	};

}

GirdView的适配器源代码如下：QQFaceAdapter.java

public class QQFaceAdapter extends BaseAdapter {
	private Context mContext;
	private int type = 0;
	private QQImage qqImage = null;

	public QQFaceAdapter(Context context, int id) {
		this.mContext = context;
		this.type = id;
		this.qqImage = new QQImage();
	}

	public int getCount() {
		return 24;
	}

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

	public long getItemId(int position) {
		return 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;
		}
		switch (type) {
		case 0:
			imageView.setImageResource(qqImage.mImageIds1[position]);
			break;
		case 1:
			imageView.setImageResource(qqImage.mImageIds2[position]);
			break;
		case 2:
			imageView.setImageResource(qqImage.mImageIds3[position]);
			break;
		case 3:
			imageView.setImageResource(qqImage.mImageIds4[position]);
			break;
		}

		if (position < 65) {
			imageView.setTag("[" + position + "]");
		} else if (position < 100) {
			imageView.setTag("[" + (position + 1) + "]");
		} else {
			imageView.setTag("[" + (position + 2) + "]");
		}
		return imageView;
	}
}

存放QQ表情图片资源的类QQImage.java如下：

public class QQImage {

	public QQImage() {

	}

	//第一页的图片资源    24张
	public int[] mImageIds1 = 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
	};
	//第二页的图片资源    24张
	public int[] mImageIds2 = new int[] { 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 };
	//第三页的图片资源    24张
	public int[] mImageIds3 = new int[] { 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 };
	//第四页的图片资源    24张
	public int[] mImageIds4 = new int[] { 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 };
}

再到布局文件了，本次内容的布局文件有两个：

第一个：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" >

    <android.support.v4.view.ViewPager
        android:id="@+id/mViewPager"
        android:layout_width="match_parent"
        android:layout_height="220dp" >
    </android.support.v4.view.ViewPager>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#C0FBD5" >

        <RadioGroup
            android:id="@+id/radioGroup1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center"
            android:button="@drawable/btn_radio_holo_light1"
            android:clickable="false"
            android:orientation="horizontal" >

            <RadioButton
                android:id="@+id/radio0"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="5dp"
                android:button="@drawable/btn_radio_holo_light1"
                android:checked="true"
                android:clickable="false" />

            <RadioButton
                android:id="@+id/radio1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="5dp"
                android:button="@drawable/btn_radio_holo_light1"
                android:clickable="false" />

            <RadioButton
                android:id="@+id/radio2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="5dp"
                android:button="@drawable/btn_radio_holo_light1"
                android:clickable="false" />

            <RadioButton
                android:id="@+id/radio3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="5dp"
                android:button="@drawable/btn_radio_holo_light1"
                android:clickable="false" />
        </RadioGroup>
    </RelativeLayout>

    <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>

tuijian_header.xml如下：（大家不要问为什么这么命名，因为小鹿没时间想该怎么命名它比较好，总之它是配置PagerView的一个布局，里面有GirdView控件）

<?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="match_parent"
    android:orientation="vertical" >

    <GridView
        android:id="@+id/tweet_detail_foot_faces1"
        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" />
    
</LinearLayout>

代码已经贴好了，由于时间少的情况下，小鹿就不要将代码一一讲解了，有疑问大家留个言，小鹿尽量帮大家解决。（注：本次内容仅提供初学者学习与参考，大神们请不要喷，小鹿在此多谢了！）

最后，如果大家觉得本内容很有价值请大家拷贝代码到项目中；

再最后，如果大家觉得本次内容有何不好，请给予批评指正，小鹿多谢啦！

时间不早了，洗洗睡吧，，，，午安