在使用TagsViewGroup 流布局后,我替换了原来的GridView作为表情控件.因为原来的表情是图片,大小是固定的,统一的.而有了颜表情后,这次变得很糟糕.
因为颜表情字数不定,所以宽度不定.使用固定宽度的布局,有些列会显得很空.于是,使用一个非固定宽度的布局更合适些.
此次除了应用TagsViewGroup外,还将表情,放入一个控件中,可以供不同的地方使用.
EmojiPanelView,表情面板,是一个LinearLayout控件.public class EmojiPanelView extends LinearLayout然后就可以在布局中使用了<cn.archko.microblog.view.EmojiPanelView android:layout_below="@id/status_bar" android:id="@+id/emoji_panel" android:visibility="gone" android:layout_width="match_parent" android:layout_height="match_parent"/>xml布局的其它部分略.接着在Activity等ui中初始化:mEmojiPanelView=(EmojiPanelView) findViewById(R.id.emoji_panel);mEmojiPanelView.setContent(commentET);//设置颜表情的EditText输入框.这个EmojiPanelView,是包含了多个表情内容的,从附件图片中可以看出,上方是一个ScrollView,里面放着不同的类型的表情,有图片的有文字颜表情.ui并不好看,可以自己改造.定义域变量:TagsViewGroup mEmotionGridview; private GridAdapter mEmotionAdapter;//下面一表情类型的按钮, Button btn_emoji_picture, btn_emoji_love, btn_emoji_pig, btn_emoji_wakeup, btn_emoji_kiss, btn_emoji_happy, btn_emoji_embarrased, btn_emoji_cry, btn_emoji_angry, btn_emoji_animal; private static final int MODE_PICTURE=0;//是图片表情,目前只有一个, private static final int MODE_TEXT=1;//文字表情 int mode=MODE_PICTURE; EditText mContent;public EmojiPanelView(Context context) { super(context); init(context); } public EmojiPanelView(Context context, AttributeSet attrs) { super(context, attrs); init(context); } private void init(Context context) { ((LayoutInflater) context.getSystemService("layout_inflater")).inflate(R.layout.emoji_panel, this); btn_emoji_picture=(Button) findViewById(R.id.btn_emoji_picture); btn_emoji_love=(Button) findViewById(R.id.btn_emoji_love); btn_emoji_pig=(Button) findViewById(R.id.btn_emoji_pig); btn_emoji_wakeup=(Button) findViewById(R.id.btn_emoji_wakeup); btn_emoji_kiss=(Button) findViewById(R.id.btn_emoji_kiss); btn_emoji_happy=(Button) findViewById(R.id.btn_emoji_happy); btn_emoji_embarrased=(Button) findViewById(R.id.btn_emoji_embarrased); btn_emoji_cry=(Button) findViewById(R.id.btn_emoji_cry); btn_emoji_angry=(Button) findViewById(R.id.btn_emoji_angry); btn_emoji_animal=(Button) findViewById(R.id.btn_emoji_animal); btn_emoji_picture.setOnClickListener(clickListener); btn_emoji_love.setOnClickListener(clickListener); btn_emoji_pig.setOnClickListener(clickListener); btn_emoji_wakeup.setOnClickListener(clickListener); btn_emoji_kiss.setOnClickListener(clickListener); btn_emoji_happy.setOnClickListener(clickListener); btn_emoji_embarrased.setOnClickListener(clickListener); btn_emoji_cry.setOnClickListener(clickListener); btn_emoji_angry.setOnClickListener(clickListener); btn_emoji_animal.setOnClickListener(clickListener); mEmotionGridview=(TagsViewGroup) findViewById(R.id.tags); mEmotionAdapter=new GridAdapter(getContext()); getPictureEmoji(); }//设置输入的内容框 public void setContent(EditText content) { this.mContent=content; }这里的布局:<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:ignore="ContentDescription" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content"> <HorizontalScrollView android:fillViewport="true" android:scrollbars="none" android:layout_width="fill_parent" android:layout_height="wrap_content"> <LinearLayout android:id="@+id/button_bar" android:layout_width="wrap_content" android:layout_height="@dimen/bottom_action_bar_height2" android:layout_gravity="bottom" android:layout_marginBottom="0dip"> <Button android:id="@+id/btn_emoji_picture" android:visibility="visible" android:text="@string/emoji_picture" style="?attr/bottomActionBarItem"/> <Button android:id="@+id/btn_emoji_love" android:visibility="visible" android:text="@string/emoji_love" style="?attr/bottomActionBarItem"/> <Button android:id="@+id/btn_emoji_pig" android:visibility="gone" android:text="@string/emoji_pig" style="?attr/bottomActionBarItem"/> <Button android:id="@+id/btn_emoji_wakeup" android:text="@string/emoji_wakeup" style="?attr/bottomActionBarItem"/> <Button android:id="@+id/btn_emoji_kiss" android:visibility="visible" android:text="@string/emoji_kiss" style="?attr/bottomActionBarItem"/> <Button android:id="@+id/btn_emoji_happy" android:visibility="visible" android:text="@string/emoji_happy" style="?attr/bottomActionBarItem"/> <Button android:id="@+id/btn_emoji_embarrased" android:visibility="visible" android:text="@string/emoji_embarrased" style="?attr/bottomActionBarItem"/> <Button android:id="@+id/btn_emoji_cry" android:visibility="visible" android:text="@string/emoji_cry" style="?attr/bottomActionBarItem"/> <Button android:id="@+id/btn_emoji_angry" android:visibility="visible" android:text="@string/emoji_angry" style="?attr/bottomActionBarItem"/> <Button android:id="@+id/btn_emoji_animal" android:visibility="visible" android:text="@string/emoji_animal" style="?attr/bottomActionBarItem"/> </LinearLayout> </HorizontalScrollView>原来的网格,去除后用流布局 <!--<GridView android:id="@+id/faces" android:visibility="visible" android:drawSelectorOnTop="false" android:fadingEdgeLength="0.0dip" android:columnWidth="45dp" android:layout_width="fill_parent" android:layout_height="fill_parent" android:listSelector="@color/transparent" android:paddingLeft="6dp" android:paddingRight="6dp" android:verticalSpacing="6dp" android:horizontalSpacing="4dp" android:cacheColorHint="@null" android:stretchMode="columnWidth" android:numColumns="auto_fit"/>--> <ScrollView android:fillViewport="true" android:scrollbars="none" android:layout_width="wrap_content" android:layout_height="wrap_content"> <cn.archko.microblog.view.TagsViewGroup android:id="@+id/tags" style="@style/tags" android:layout_width="match_parent" android:layout_height="match_parent"/> </ScrollView></LinearLayout>private void getPictureEmoji() { mEmotionAdapter.setList(AKSmileyParser.getInstance(getContext()).mSmileyTexts); mEmotionGridview.setAdapter(mEmotionAdapter); }AKSmileyParser是一个处理图片表情的工具类,之前好像有发过.这里不说,不是重点,甚至可以去除.添加按钮的监听器:OnClickListener clickListener=new OnClickListener() { @Override public void onClick(View view) { int id=view.getId(); if (id==R.id.btn_emoji_picture) { mode=MODE_PICTURE; getPictureEmoji(); } else { mode=MODE_TEXT; int resId=R.raw.emoji_angry; if (id==R.id.btn_emoji_angry) { } else if (id==R.id.btn_emoji_love) { resId=R.raw.emoji_love; } else if (id==R.id.btn_emoji_pig) { resId=R.raw.emoji_pig; } else if (id==R.id.btn_emoji_wakeup) { resId=R.raw.emoji_wakeup; } else if (id==R.id.btn_emoji_kiss) { resId=R.raw.emoji_kiss; } else if (id==R.id.btn_emoji_happy) { resId=R.raw.emoji_happy; } else if (id==R.id.btn_emoji_embarrased) { resId=R.raw.emoji_embarrassed; } else if (id==R.id.btn_emoji_cry) { resId=R.raw.emoji_cry; } else if (id==R.id.btn_emoji_animal) { resId=R.raw.emoji_animal; } getTextEmoji(resId); } } };private void getTextEmoji(int resId) { String[] txts=AKTxtSmileyParser.getInstance().getSmileyTexts(getContext(), resId); if (null==txts) { Toast.makeText(getContext(), "解析表情出错.", Toast.LENGTH_LONG).show(); return; } mEmotionAdapter.setList(txts); mEmotionGridview.setAdapter(mEmotionAdapter); }AKTxtSmileyParser是一个颜表情的解析类,这个类的功能就是将一个txt文本的内容解析出来.文本内容:比如(*≧m≦*)(>_<)(,,#?Д?)ヽ(ｏ`皿′ｏ)?o(>< )oｏ( ><)oAKTxtSmileyParser就是读取文件,一行一行读取出来,放入ArrayList<String> smileyList=new ArrayList<String>();中,然后mSmileyMap.put(id, smileyList.toArray(new String[smileyList.size()]));放入一个map中,因为颜表情有多类,所以把资源的id作为key,缓存到map中.public class GridAdapter extends BaseAdapter 就是一个简单的适配器.public View getView(int index, View convertView, ViewGroup parent) { GridHolder holder; if (convertView==null) { convertView=mInflater.inflate(R.layout.emoji_item, null); holder=new GridHolder(); holder.appImage=(ImageView) convertView.findViewById(R.id.itemImage); holder.textView=(TextView) convertView.findViewById(R.id.itemTxt); convertView.setTag(holder); } else { holder=(GridHolder) convertView.getTag(); } if (mode==MODE_PICTURE) { holder.appImage.setImageDrawable(context.getResources().getDrawable(AKSmiley.mSmileyMap.get(list[index]))); holder.textView.setText(null); holder.textView.setVisibility(GONE); } else { holder.appImage.setImageDrawable(null); holder.textView.setVisibility(VISIBLE); holder.textView.setText(list[index]); } final int pos=index; holder.appImage.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { onClickItem(view, pos); } }); holder.textView.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { onClickItem(view, pos); } }); return convertView; }布局是将文字与图片合在一起了.也可以分开.<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:id="@+id/itemImage" android:layout_margin="2dp" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TextView android:id="@+id/itemTxt" style="@style/emoji_tag_items" android:layout_width="wrap_content" android:layout_height="wrap_content"/></LinearLayout>private void onClickItem(View view, int pos) { if (null==mContent) { Log.e(VIEW_LOG_TAG, "没有编辑框,无法输入表情."); return; } String txt=list[pos];//获取之前解析的内容 if (view instanceof ImageView) { refreshText(txt);//刷新输入框的文字内容 } else if (view instanceof TextView) { refreshText2(txt);//刷新输入框的图片表情内容,因为图片表情的表现形式,其它也是文字,但是是包含了特殊开始与结束的文字,所以如果想在输入一个字符后,还可以看到输入框中有图片表情,最好是重新设置 } }到这里,差不多就结束了.可以根据自己的需要,调整表情面板的布局,比如可以添加按钮选中后的状态背景,当然这里使用流布局也有个缺点,它是一边对齐,另一边无法对齐的.本文也算是自定义ui的一个内容,组合原有控件制造出自定义控件.[img]http://dl2.iteye.com/upload/attachment/0087/2125/4933f022-d2c2-3d0f-8966-8b167d557765.png[/img]由于git上的源码没有及时更新,附件上传了最新的布局.