android 颜表情.

在使用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
ｏ( ><)o
AKTxtSmileyParser就是读取文件,一行一行读取出来,放入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上的源码没有及时更新,附件上传了最新的布局.