仿qq表情输入框
Posted jzdwajue
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了仿qq表情输入框相关的知识，希望对你有一定的参考价值。
Activity代码
package cn.com.likeshow.inpututils; import cn.com.likeshow.inpututils.FaceInputView.Face; import cn.com.likeshow.inpututils.FaceInputView.OnFaceClickListener; import android.app.Activity; import android.graphics.drawable.Drawable; import android.os.Bundle; import android.text.Editable; import android.text.html; import android.text.Html.ImageGetter; import android.view.View; import android.view.View.OnClickListener; import android.widget.EditText; public class MainActivity extends Activity { EditText content_et; //输入表情须要 ImageGetter imageGetter = new ImageGetter() { @Override public Drawable getDrawable(String source) { int id = Integer.parseInt(source); Drawable d = getResources().getDrawable(id); d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight()); return d; } }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); FaceInputView inputView=(FaceInputView) findViewById(R.id.faceview); inputView.setOnClickListener(new OnFaceClickListener() { @Override public void selectedFace(Face face) { int id=face.faceId; if(id==R.drawable.ic_face_delete_normal)//删除button { int index = content_et.getSelectionStart(); if(index==0)return; Editable editable = content_et.getText(); editable.delete(index-1, index);//删除最后一个字符或表情 }else{ content_et.append(Html.fromHtml("<img src=‘"+ id +"‘/>", imageGetter, null));//加入表情 } } }); content_et=inputView.getEditText(); inputView.getSendButton().setOnClickListener(new OnClickListener() {//为控件中Button加入监听事件 @Override public void onClick(View v) { content_et.setText(""); } }); } }
<RelativeLayout 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:layout_marginBottom="0dp"
android:id="@+id/rel"
>
<cn.com.likeshow.inpututils.FaceInputView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/faceview"
/>
</RelativeLayout>
package cn.com.likeshow.inpututils;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.ViewGroup;
import android.view.View;
import android.view.inputmethod.InputMethodManager;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class FaceInputView extends LinearLayout implements View.OnClickListener {
private OnFaceClickListener clickListener;
private ViewPager viewPager;
private List<View> list;
private ImageView[] page_ivs=new ImageView[6];//6个底部位置标记
private View view;
private Map<Integer,Integer> ivIdToImgId=new HashMap<Integer,Integer>();//由控件id得到里面图片id
private Context context;
public FaceInputView(final Context context, AttributeSet attrs) {
super(context, attrs);
this.context=context;
initView();
}
public FaceInputView(final Context context) {
super(context);
this.context=context;
initView();
}
public EditText getEditText(){
return (EditText) view.findViewById(R.id.content_et);
}
public Button getSendButton(){
return (Button) view.findViewById(R.id.send_but);
}
private void initView() {
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = inflater.inflate(R.layout.face_input_tabs, this);
// ////////////////////////////////////
page_ivs[0]=(ImageView)view.findViewById(R.id.page_iv1);
page_ivs[1]=(ImageView) view.findViewById(R.id.page_iv2);
page_ivs[2]=(ImageView) view.findViewById(R.id.page_iv3);
page_ivs[3]=(ImageView)view.findViewById(R.id.page_iv4);
page_ivs[4]=(ImageView)view.findViewById(R.id.page_iv5);
page_ivs[5]=(ImageView) view.findViewById(R.id.page_iv6);
// ////////////////////////
viewPager=(ViewPager)view. findViewById(R.id.viewpager);
View view1=LayoutInflater.from(context).inflate(R.layout.tab1, null);
View view2=LayoutInflater.from(context).inflate(R.layout.tab2, null);
View view3=LayoutInflater.from(context).inflate(R.layout.tab3, null);
View view4=LayoutInflater.from(context).inflate(R.layout.tab4, null);
View view5=LayoutInflater.from(context).inflate(R.layout.tab5, null);
View view6=LayoutInflater.from(context).inflate(R.layout.tab6, null);
initFaceIv(view1);
initFaceIv(view2);
initFaceIv(view3);
initFaceIv(view4);
initFaceIv(view5);
initFaceIv(view6);
list=new ArrayList<View>();
list.add(view1);
list.add(view2);
list.add(view3);
list.add(view4);
list.add(view5);
list.add(view6);
viewPager.setAdapter(new MyAdapter());
view.findViewById(R.id.add_face_iv).setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
InputMethodManager inputMethodManager= (InputMethodManager)context. getSystemService(FaceInputView.this.context.INPUT_METHOD_SERVICE);
inputMethodManager.hideSoftInputFromWindow(view.findViewById(R.id.content_et).getWindowToken(), 0); //强制隐藏键盘
view.findViewById(R.id.faceline).setVisibility(View.VISIBLE);
}
});
view.findViewById(R.id.keyboard_iv).setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
view.findViewById(R.id.faceline).setVisibility(View.GONE);
InputMethodManager imm = (InputMethodManager)context. getSystemService(FaceInputView.this.context.INPUT_METHOD_SERVICE);
imm.toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS);
}
});
viewPager.setOnPageChangeListener(new OnPageChangeListener(){
int preposiition=0;
@Override
public void onPageSelected( int position) {
page_ivs[preposiition].setImageResource(R.drawable.not_this_page_img);
page_ivs[position].setImageResource(R.drawable.is_this_page_img);
preposiition=position;
}
@Override
public void onPageScrolled( int arg0, float arg1, int arg2) {}
@Override
public void onPageScrollStateChanged( int arg0) {}
});
initMap();
}
private void initMap() {
ivIdToImgId.put(R.id.face0, R.drawable.f000);
ivIdToImgId.put(R.id.face1, R.drawable.f001);
ivIdToImgId.put(R.id.face2, R.drawable.f002);
ivIdToImgId.put(R.id.face3, R.drawable.f003);
ivIdToImgId.put(R.id.face4, R.drawable.f004);
ivIdToImgId.put(R.id.face5, R.drawable.f005);
ivIdToImgId.put(R.id.face6, R.drawable.f006);
ivIdToImgId.put(R.id.face7, R.drawable.f007);
ivIdToImgId.put(R.id.face8, R.drawable.f008);
ivIdToImgId.put(R.id.face9, R.drawable.f009);
ivIdToImgId.put(R.id.face10, R.drawable.f010);
ivIdToImgId.put(R.id.face11, R.drawable.f011);
ivIdToImgId.put(R.id.face12, R.drawable.f012);
ivIdToImgId.put(R.id.face13, R.drawable.f013);
ivIdToImgId.put(R.id.face14, R.drawable.f014);
ivIdToImgId.put(R.id.face15, R.drawable.f015);
ivIdToImgId.put(R.id.face16, R.drawable.f016);
ivIdToImgId.put(R.id.face17, R.drawable.f017);
ivIdToImgId.put(R.id.face18, R.drawable.f018);
ivIdToImgId.put(R.id.face19, R.drawable.f019);
ivIdToImgId.put(R.id.face20, R.drawable.f020);
ivIdToImgId.put(R.id.face21, R.drawable.f021);
ivIdToImgId.put(R.id.face22, R.drawable.f022);
ivIdToImgId.put(R.id.face23, R.drawable.f023);
ivIdToImgId.put(R.id.face24, R.drawable.f024);
ivIdToImgId.put(R.id.face25, R.drawable.f025);
ivIdToImgId.put(R.id.face26, R.drawable.f026);
ivIdToImgId.put(R.id.face27, R.drawable.f027);
ivIdToImgId.put(R.id.face28, R.drawable.f028);
ivIdToImgId.put(R.id.face29, R.drawable.f029);
ivIdToImgId.put(R.id.face30, R.drawable.f030);
ivIdToImgId.put(R.id.face31, R.drawable.f031);
ivIdToImgId.put(R.id.face32, R.drawable.f032);
ivIdToImgId.put(R.id.face33, R.drawable.f033);
ivIdToImgId.put(R.id.face34, R.drawable.f034);
ivIdToImgId.put(R.id.face35, R.drawable.f035);
ivIdToImgId.put(R.id.face36, R.drawable.f036);
ivIdToImgId.put(R.id.face37, R.drawable.f037);
ivIdToImgId.put(R.id.face38, R.drawable.f038);
ivIdToImgId.put(R.id.face39, R.drawable.f039);
ivIdToImgId.put(R.id.face40, R.drawable.f040);
ivIdToImgId.put(R.id.face41, R.drawable.f041);
ivIdToImgId.put(R.id.face42, R.drawable.f042);
ivIdToImgId.put(R.id.face43, R.drawable.f043);
ivIdToImgId.put(R.id.face44, R.drawable.f044);
ivIdToImgId.put(R.id.face45, R.drawable.f045);
ivIdToImgId.put(R.id.face46, R.drawable.f046);
ivIdToImgId.put(R.id.face47, R.drawable.f047);
ivIdToImgId.put(R.id.face48, R.drawable.f048);
ivIdToImgId.put(R.id.face49, R.drawable.f049);
ivIdToImgId.put(R.id.face50, R.drawable.f050);
ivIdToImgId.put(R.id.face51, R.drawable.f051);
ivIdToImgId.put(R.id.face52, R.drawable.f052);
ivIdToImgId.put(R.id.face53, R.drawable.f053);
ivIdToImgId.put(R.id.face54, R.drawable.f054);
ivIdToImgId.put(R.id.face55, R.drawable.f055);
ivIdToImgId.put(R.id.face56, R.drawable.f056);
ivIdToImgId.put(R.id.face57, R.drawable.f057);
ivIdToImgId.put(R.id.face58, R.drawable.f058);
ivIdToImgId.put(R.id.face59, R.drawable.f059);
ivIdToImgId.put(R.id.face60, R.drawable.f060);
ivIdToImgId.put(R.id.face61, R.drawable.f061);
ivIdToImgId.put(R.id.face62, R.drawable.f062);
ivIdToImgId.put(R.id.face63, R.drawable.f063);
ivIdToImgId.put(R.id.face64, R.drawable.f064);
ivIdToImgId.put(R.id.face65, R.drawable.f065);
ivIdToImgId.put(R.id.face66, R.drawable.f066);
ivIdToImgId.put(R.id.face67, R.drawable.f067);
ivIdToImgId.put(R.id.face68, R.drawable.f068);
ivIdToImgId.put(R.id.face69, R.drawable.f069);
ivIdToImgId.put(R.id.face70, R.drawable.f070);
ivIdToImgId.put(R.id.face71, R.drawable.f071);
ivIdToImgId.put(R.id.face72, R.drawable.f072);
ivIdToImgId.put(R.id.face73, R.drawable.f073);
ivIdToImgId.put(R.id.face74, R.drawable.f074);
ivIdToImgId.put(R.id.face75, R.drawable.f075);
ivIdToImgId.put(R.id.face76, R.drawable.f076);
ivIdToImgId.put(R.id.face77, R.drawable.f077);
ivIdToImgId.put(R.id.face78, R.drawable.f078);
ivIdToImgId.put(R.id.face79, R.drawable.f079);
ivIdToImgId.put(R.id.face80, R.drawable.f080);
ivIdToImgId.put(R.id.face81, R.drawable.f081);
ivIdToImgId.put(R.id.face82, R.drawable.f082);
ivIdToImgId.put(R.id.face83, R.drawable.f083);
ivIdToImgId.put(R.id.face84, R.drawable.f084);
ivIdToImgId.put(R.id.face85, R.drawable.f085);
ivIdToImgId.put(R.id.face86, R.drawable.f086);
ivIdToImgId.put(R.id.face87, R.drawable.f087);
ivIdToImgId.put(R.id.face88, R.drawable.f088);
ivIdToImgId.put(R.id.face89, R.drawable.f089);
ivIdToImgId.put(R.id.face90, R.drawable.f090);
ivIdToImgId.put(R.id.face91, R.drawable.f091);
ivIdToImgId.put(R.id.face92, R.drawable.f092);
ivIdToImgId.put(R.id.face93, R.drawable.f093);
ivIdToImgId.put(R.id.face94, R.drawable.f094);
ivIdToImgId.put(R.id.face95, R.drawable.f095);
ivIdToImgId.put(R.id.face96, R.drawable.f096);
ivIdToImgId.put(R.id.face97, R.drawable.f097);
ivIdToImgId.put(R.id.face98, R.drawable.f098);
ivIdToImgId.put(R.id.face99, R.drawable.f099);
ivIdToImgId.put(R.id.face100, R.drawable.f100);
ivIdToImgId.put(R.id.face101, R.drawable.f101);
ivIdToImgId.put(R.id.face102, R.drawable.f102);
ivIdToImgId.put(R.id.face103, R.drawable.f103);
ivIdToImgId.put(R.id.face104, R.drawable.f104);
ivIdToImgId.put(R.id.face105, R.drawable.f105);
ivIdToImgId.put(R.id.face106, R.drawable.f106);
}
private void initFaceIv(View v) {
ViewGroup vg=(ViewGroup)v;
int count=vg.getChildCount();
for(int i=0;i<count;i++){
LinearLayout layout=(LinearLayout) vg.getChildAt(i);
int faceCount=layout.getChildCount();
for(int j=0;j<faceCount;j++){
layout.getChildAt(j).setOnClickListener(this);
}
}
}
public void setOnClickListener(OnFaceClickListener l) {
clickListener=l;
}
public interface OnFaceClickListener{
public void selectedFace(Face face);
}
public class Face{
public final String faceName;
public final int faceId;
public Face(String faceName, int faceId) {
super();
this.faceName = faceName;
this.faceId = faceId;
}
}
@Override
public void onClick(View v) {
if(clickListener!=null){
ImageView iv=(ImageView) v;
Integer i=(Integer) ivIdToImgId.get(v.getId());
if(i==null)
i=R.drawable.ic_face_delete_normal;
clickListener.selectedFace(new Face("", i));
}
}
/////////////////////
private class MyAdapter extends PagerAdapter{
@Override
public int getCount() {
return list.size();
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager)container).removeView(list.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
((ViewPager)container).addView(list.get(position));
return list.get(position);
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0==arg1;
}
}
}
<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="fill_parent"
android:orientation="vertical"
android:gravity="bottom"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#f3f3f3"
android:orientation="horizontal"
android:padding="5dp" >
<Button
android:id="@+id/send_but"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="@drawable/but_seletor"
android:text="发送"
android:textColor="#ffffff" />
<ImageView
android:id="@+id/add_face_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="@drawable/add_face" />
<ImageView
android:id="@+id/keyboard_iv"
android:layout_toRightOf="@id/add_face_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_centerVertical="true"
android:src="@drawable/keyboard_show_iv" />
<EditText
android:id="@+id/content_et"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_toLeftOf="@id/send_but"
android:layout_toRightOf="@id/keyboard_iv"
android:background="@drawable/input_bag"
android:maxLines="3"
android:padding="8dp"
android:textColor="#000000"/>
</RelativeLayout>
<LinearLayout
android:id="@+id/faceline"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#f3f3f3"
android:visibility="gone"
>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="126dp"
android:layout_gravity="center"
>
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="10dp"
android:layout_gravity="center"
android:orientation="horizontal"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
>
<ImageView
android:id="@+id/page_iv1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:src="@drawable/is_this_page_img" />
<ImageView
android:id="@+id/page_iv2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:src="@drawable/not_this_page_img" />
<ImageView
android:id="@+id/page_iv3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:src="@drawable/not_this_page_img" />
<ImageView
android:id="@+id/page_iv4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:src="@drawable/not_this_page_img" />
<ImageView
android:id="@+id/page_iv5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:src="@drawable/not_this_page_img" />
<ImageView
android:id="@+id/page_iv6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:src="@drawable/not_this_page_img" />
</LinearLayout>
</LinearLayout>
</LinearLayout>剩余6个tab类似
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#f3f3f3"
android:orientation="vertical" >
<LinearLayout
android:padding="5dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="@+id/face0"
android:layout_weight="1.0"
android:layout_width="0dp"
android:layout_height="32dp"
android:src="@drawable/f000" />
<ImageView
android:id="@+id/face1"
android:layout_weight="1.0"
android:layout_width="0dp"
android:layout_height="32dp"
android:src="@drawable/f001" />
<ImageView
android:id="@+id/face2"
android:layout_weight="1.0"
android:layout_width="0dp"
android:layout_height="32dp"
android:src="@drawable/f002" />
<ImageView
android:id="@+id/face3"
android:layout_weight="1.0"
android:layout_width="0dp"
android:layout_height="32dp"
android:src="@drawable/f003" />
<ImageView
android:id="@+id/face4"
android:layout_weight="1.0"
android:layout_width="0dp"
android:layout_height="32dp"
android:src="@drawable/f004" />
<ImageView
android:id="@+id/face5"
android:layout_weight="1.0"
android:layout_width="0dp"
android:layout_height="32dp"
android:src="@drawable/f005" />
<ImageView
android:id="@+id/face6"
android:layout_weight="1.0"
android:layout_width="0dp"
android:layout_height="32dp"
android:src="@drawable/f006" />
</LinearLayout>
<LinearLayout
android:padding="5dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="@+id/face7"
android:layout_weight="1.0"
android:layout_width="0dp"
android:layout_height="32dp"
android:src="@drawable/f007" />
<ImageView
android:id="@+id/face8"
android:layout_weight="1.0"
android:layout_width="0dp"
android:layout_height="32dp"
android:src="@drawable/f008" />
<ImageView
android:id="@+id/face9"
android:layout_weight="1.0"
android:layout_width="0dp"
android:layout_height="32dp"
android:src="@drawable/f009" />
<ImageView
android:id="@+id/face10"
android:layout_weight="1.0"
android:layout_width="0dp"
android:layout_height="32dp"
android:src="@drawable/f010" />
<ImageView
android:id="@+id/face11"
android:layout_weight="1.0"
android:layout_width="0dp"
android:layout_height="32dp"
android:src="@drawable/f011" />
<ImageView
android:id="@+id/face12"
android:layout_weight="1.0"
android:layout_width="0dp"
android:layout_height="32dp"
android:src="@drawable/f012" />
<ImageView
android:id="@+id/face13"
android:layout_weight="1.0"
android:layout_width="0dp"
android:layout_height="32dp"
android:src="@drawable/f013" />
</LinearLayout>
<LinearLayout
android:padding="5dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="@+id/face14"
android:layout_weight="1.0"
android:layout_width="0dp"
android:layout_height="32dp"
android:src="@drawable/f014" />
<ImageView
android:id="@+id/face15"
android:layout_weight="1.0"
android:layout_width="0dp"
android:layout_height="32dp"
android:src="@drawable/f015" />
<ImageView
android:id="@+id/face16"
android:layout_weight="1.0"
android:layout_width="0dp"
android:layout_height="32dp"
android:src="@drawable/f016" />
<ImageView
android:id="@+id/face17"
android:layout_weight="1.0"
android:layout_width="0dp"
android:layout_height="32dp"
android:src="@drawable/f017" />
<ImageView
android:id="@+id/face18"
android:layout_weight="1.0"
android:layout_width="0dp"
android:layout_height="32dp"
android:src="@drawable/f018" />
<ImageView
android:id="@+id/face19"
android:layout_weight="1.0"
android:layout_width="0dp"
android:layout_height="32dp"
android:src="@drawable/f019" />
<ImageView
android:id="@+id/face_del1"
android:layout_weight="1.0"
android:layout_width="0dp"
android:layout_height="32dp"
android:src="@drawable/ic_face_delete_normal" />
</LinearLayout>
</LinearLayout>
以上是关于仿qq表情输入框的主要内容，如果未能解决你的问题，请参考以下文章