Android 编辑框插入表情图片

2021-12-26 22:02:21

首先，把整理好的表情图片以及布局用到的一些图片导入到项目的res/drawable目录中。

然后，编辑res/layout目录下布局.xml文件，这里我把oschina客户端的布局代码贴上来，供大家参考：
tweet_pub.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical"

    android:background="@color/white">

    <FrameLayout

        android:id="@+id/tweet_pub_form"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:layout_weight="">

        <EditText

            android:id="@+id/tweet_pub_content"

            android:layout_width="fill_parent"

            android:layout_height="fill_parent"

            android:autoLink="web"

            android:gravity="top"

            android:hint="请输入动弹内容"

            android:background="@null"/>

        <ImageView

            android:id="@+id/tweet_pub_image"

            android:layout_width="60.0dip"

            android:layout_height="45.0dip"

            android:layout_marginLeft="5.0dip"

            android:layout_marginBottom="5.0dip"

            android:layout_gravity="left|bottom"

            android:clickable="true"

            android:visibility="gone"/>

        <LinearLayout

            android:id="@+id/tweet_pub_clearwords"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginRight="5.0dip"

            android:layout_marginBottom="5.0dip"

            android:layout_gravity="right|bottom"

            android:gravity="center"

            android:background="@drawable/clearwords_bg"

            android:clickable="true">

            <TextView

                android:id="@+id/tweet_pub_numberwords"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:textColor="@color/black"

                android:text=""/>

            <ImageView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_marginLeft="3dip"

                android:src="@drawable/clearwords_icon"/>

        </LinearLayout>

    </FrameLayout>

    <include layout="@layout/tweet_pub_footer"/>

</LinearLayout>

tweet_pub_footer.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content">   

    <LinearLayout

        android:orientation="horizontal"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:gravity="center_horizontal"

        android:background="@drawable/widget_bar_bg">

        <ImageView

            android:id="@+id/tweet_pub_footbar_face"

            style="@style/main_footbar_image"

            android:src="@drawable/widget_bar_face"/>

        <ImageView

            style="@style/main_footbar_cutline"

            android:src="@drawable/widget_bar_cut_off"/>

        <ImageView

            android:id="@+id/tweet_pub_footbar_photo"

            style="@style/main_footbar_image"

            android:src="@drawable/widget_bar_photo"/>

        <ImageView

            style="@style/main_footbar_cutline"

            android:src="@drawable/widget_bar_cut_off"/>

        <ImageView

            android:id="@+id/tweet_pub_footbar_atme"

            style="@style/main_footbar_image"

            android:src="@drawable/widget_bar_atme"/>

        <ImageView

            style="@style/main_footbar_cutline"

            android:src="@drawable/widget_bar_cut_off"/>

        <ImageView

            android:id="@+id/tweet_pub_footbar_software"

            style="@style/main_footbar_image"

            android:src="@drawable/widget_bar_soft"/>

    </LinearLayout>

    <GridView

        android:id="@+id/tweet_pub_faces"

        android:layout_width="fill_parent"

        android:layout_height="220dip"

        android:numColumns="auto_fit"

        android:columnWidth="50dip"

        android:stretchMode="columnWidth"

        android:gravity="center"

        android:fadingEdge="none"

        android:scrollingCache="false"

        android:background="@color/face_bg"

        android:visibility="gone"/>

</LinearLayout>

通过上面布局代码可以看出，我把整个编辑界面分成了2个.xml文件。主布局文件tweet_pub.xml通过<include>标签把底部工具栏tweet_pub_footer.xml加载进视图。这样做的好处是把一个较复杂的布局细分成几个小布局，让布局更清晰，维护起来更加方便。

接下来，创建一个Activity类，并在AndroidManifest.xml中注册，对该Activity添加一个属性：

android:windowSoftInputMode="stateVisible|adjustResize"

该属性在Activity启动显示的时候，软键盘也自动弹出显示，这样方便用户可直接对EditText编辑框进行输入文字操作。

下面贴出Activity的完整代码：

public class MainActivity extends Activity {

    private EditText mContent;

    private ImageView mFace;

    private LinearLayout mClearwords;

    private TextView mNumberwords;

    private GridView mGridView;

    private GridViewFaceAdapter mGVFaceAdapter;

    private InputMethodManager imm;

    private static final int MAX_TEXT_LENGTH = ;//最大输入字数

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.tweet_pub);

        //软键盘管理类

        imm = (InputMethodManager)getSystemService(INPUT_METHOD_SERVICE);

        //初始化基本视图

        this.initView();

        //初始化表情视图

        this.initGridView();

    }

    //初始化视图控件

    private void initView()

    {

        mContent = (EditText)findViewById(R.id.tweet_pub_content);

        mFace = (ImageView)findViewById(R.id.tweet_pub_footbar_face);

        mClearwords = (LinearLayout)findViewById(R.id.tweet_pub_clearwords);

        mNumberwords = (TextView)findViewById(R.id.tweet_pub_numberwords);

        //设置控件点击事件

        mFace.setOnClickListener(faceClickListener);

        mClearwords.setOnClickListener(clearwordsClickListener);

        //编辑器添加文本监听

        mContent.addTextChangedListener(new TextWatcher() {

            public void onTextChanged(CharSequence s, int start, int before, int count) {

                //显示剩余可输入的字数

                mNumberwords.setText((MAX_TEXT_LENGTH - s.length()) + "");

            }

            public void beforeTextChanged(CharSequence s, int start, int count, int after) {}

            public void afterTextChanged(Editable s) {}

        });

        //编辑器点击事件

        mContent.setOnClickListener(new View.OnClickListener() {

            public void onClick(View v) {

                //显示软键盘

                showIMM();

            }

        });

        //设置最大输入字数

        InputFilter[] filters = new InputFilter[];

        filters[] = new InputFilter.LengthFilter(MAX_TEXT_LENGTH);

        mContent.setFilters(filters);

    }

    //初始化表情控件

    private void initGridView() {

        mGVFaceAdapter = new GridViewFaceAdapter(this);

        mGridView = (GridView)findViewById(R.id.tweet_pub_faces);

        mGridView.setAdapter(mGVFaceAdapter);

        mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener(){

            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

                //插入的表情

                SpannableString ss = new SpannableString(view.getTag().toString());

                Drawable d = getResources().getDrawable((int)mGVFaceAdapter.getItemId(position));

                d.setBounds(, , , );//设置表情图片的显示大小

                ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BOTTOM);

                ss.setSpan(span, , view.getTag().toString().length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

                //在光标所在处插入表情

                mContent.getText().insert(mContent.getSelectionStart(), ss);

            }

        });

    }

    private void showIMM() {

        mFace.setTag();

        showOrHideIMM();

    }

    private void showFace() {

        mFace.setImageResource(R.drawable.widget_bar_keyboard);

        mFace.setTag();

        mGridView.setVisibility(View.VISIBLE);

    }

    private void hideFace() {

        mFace.setImageResource(R.drawable.widget_bar_face);

        mFace.setTag(null);

        mGridView.setVisibility(View.GONE);

    }

    private void showOrHideIMM() {

        if(mFace.getTag() == null){

            //隐藏软键盘

            imm.hideSoftInputFromWindow(mFace.getWindowToken(), );

            //显示表情

            showFace();

        }else{

            //显示软键盘

            imm.showSoftInput(mContent, );

            //隐藏表情

            hideFace();

        }

    }

    //表情控件点击事件

    private View.OnClickListener faceClickListener = new View.OnClickListener() {

        public void onClick(View v) {

            showOrHideIMM();

        }

    };

    //清除控件点击事件

    private View.OnClickListener clearwordsClickListener = new View.OnClickListener() {

        public void onClick(View v) {

            String content = mContent.getText().toString();

            if(content != ""){

                AlertDialog.Builder builder = new AlertDialog.Builder(v.getContext());

                builder.setTitle("清除文字吗？");

                builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {

                    public void onClick(DialogInterface dialog, int which) {

                        dialog.dismiss();

                        //清除文字

                        mContent.setText("");

                        mNumberwords.setText(String.valueOf(MAX_TEXT_LENGTH));

                    }

                });

                builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {

                    public void onClick(DialogInterface dialog, int which) {

                        dialog.dismiss();

                    }

                });

                builder.show();

            }

        }

    };

}

这里说明下，GridViewFaceAdapter类是我自定义的适配器类，继承了BaseAdapter。下面我也将该类的完整代码贴出来，给大家参考：

public class GridViewFaceAdapter extends BaseAdapter

{

    // 定义Context

    private Context mContext;

    // 定义整型数组 即图片源

    private int[] mImageIds;

    public GridViewFaceAdapter(Context c)

    {

        mContext = c;

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

            // 设置图片n×n显示

            imageView.setLayoutParams(new GridView.LayoutParams(, ));

            // 设置显示比例类型

            imageView.setScaleType(ImageView.ScaleType.CENTER);

        }

        else

        {

            imageView = (ImageView) convertView;

        }

        imageView.setImageResource(mImageIds[position]);

        if(position < )

            imageView.setTag("["+position+"]");

        else if(position < )

            imageView.setTag("["+(position+)+"]");

        else

            imageView.setTag("["+(position+)+"]");

        return imageView;

    }

}

对上面GridViewFaceAdapter类的代码做下说明：
1.我将所有的表情图片对应的资源ID，用一个整数数组封装了。
2.getView方法里的下面这段代码：

mageView.setImageResource(mImageIds[position]);

if(position < )

    imageView.setTag("["+position+"]");

else if(position < )

    imageView.setTag("["+(position+)+"]");

else

    imageView.setTag("["+(position+)+"]");

代码：这里

码农公寓

相关文章