大家中午好,,,,,,小鹿吃草刚回来真是不好意思,,,,
上篇文章已经讲到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>
代码已经贴好了,由于时间少的情况下,小鹿就不要将代码一一讲解了,有疑问大家留个言,小鹿尽量帮大家解决。(注:本次内容仅提供初学者学习与参考,大神们请不要喷,小鹿在此多谢了!)
最后,如果大家觉得本内容很有价值请大家拷贝代码到项目中;
再最后,如果大家觉得本次内容有何不好,请给予批评指正,小鹿多谢啦!
时间不早了,洗洗睡吧,,,,午安