Android擬微信チャット気泡効果実現構想

14147 ワード
Android
微信チャットウィンドウの情報効果はiphoneのメール効果に似ており、気泡の形で表現されている.Androidでは、ListViewとBaseAdapterを主に使用し、レイアウトや関連素材に合わせて、自分でこの効果を作ることができる.素材は次の微信のAPKに変更し、接尾辞名をzipに変更し、直接解凍することができる.微信の中のすべての素材を手に入れることができます.まず、私が実現した効果を見てみましょう.
以下はプロジェクトディレクトリ構造です.
: 
次に、この効果を実現するコードを示します.
main.xml、これはメインレイアウトファイルで、listviewと上下の2つの部分を表示します.  
 
   
   
   
  android:layout_width="fill_parent"  
   
 android:layout_height="fill_parent"  
   
 android:background="#f0f0e0" >  
   
  android:id="@+id/rl_top"  
   
 android:layout_width="fill_parent"  
   
 android:layout_alignParentTop="true"  
   
 android:layout_height="wrap_content">  
   
  android:layout_width="fill_parent"  
   
 android:layout_height="44dp"  
   
 android:gravity="center"  
   
 android:textSize="18sp"  
   
 android:background="#486a9a"  
   
 android:textColor="@android:color/white"  
   
 android:text="Chat"/>  
   
   
   
  android:id="@+id/rl_bottom"  
   
 android:layout_alignParentBottom="true"  
   
 android:layout_width="fill_parent"  
   
 android:background="#486a9a"  
   
 android:paddingTop="5dp"  
   
 android:layout_height="wrap_content">  
   
   
   
  android:id="@+id/listview"  
   
 android:layout_width="fill_parent"  
   
 android:layout_height="fill_parent"  
   
 android:layout_above="@id/rl_bottom"  
   
 android:layout_below="@id/rl_top"  
   
 android:layout_marginLeft="10dp"  
   
 android:layout_marginRight="10dp"  
   
 android:layout_marginTop="10dp"  
   
 android:cacheColorHint="#00000000"  
   
 android:divider="@null"  
   
 android:listSelector="#00000000"  
   
 android:dividerHeight="3dp"  
   
 android:scrollbars="none"/>  
   
  

次にlistviewの2種類のitemのレイアウトファイルで、それぞれ情報を受信するitem効果と情報を送信するitem効果です
chat_from_item.xmlは情報を受信するitemレイアウトです
:  
 
   
   
   
  android:layout_width="fill_parent"  
   
 android:orientation="vertical"  
   
 android:paddingBottom="5dp"  
   
 android:layout_height="wrap_content" >  
   
  android:id="@+id/tv_time"  
   
 android:layout_width="wrap_content"  
   
 android:layout_height="wrap_content"  
   
 android:layout_gravity="center_horizontal"  
   
 android:background="#bfbfbf"  
   
 android:paddingTop="2dp"  
   
 android:paddingBottom="2dp"  
   
 android:paddingLeft="4dp"  
   
 android:paddingRight="4dp"  
   
 android:textColor="#ffffff"  
   
 android:textSize="12sp" />  
   
  android:layout_width="fill_parent"  
   
 android:layout_height="wrap_content"  
   
 android:layout_marginTop="5dp" >  
   
  android:id="@+id/iv_user_image"  
   
 android:layout_width="50dp"  
   
 android:layout_height="50dp"  
   
 android:layout_alignParentLeft="true"  
   
 android:layout_alignParentTop="true"  
   
 android:background="@drawable/mypic"  
   
 android:focusable="false" />  
   
  android:id="@+id/tv_content"  
   
 android:layout_width="wrap_content"  
   
 android:layout_height="wrap_content"  
   
 android:layout_marginLeft="5dp"  
   
 android:layout_toRightOf="@+id/iv_user_image"  
   
 android:background="@drawable/chatfrom_bg"  
   
 android:gravity="left|center"  
   
 android:clickable="true"  
   
 android:focusable="true"  
   
 android:lineSpacingExtra="2dp"  
   
 android:minHeight="50dp"  
   
 android:textColor="#ff000000"  
   
 android:textSize="14sp" />  
   
   
   
  

chat_to_item.xmlはメッセージitemを送信するレイアウトです
:  
 
   
   
   
  android:layout_width="fill_parent"  
   
 android:orientation="vertical"  
   
 android:paddingBottom="5dp"  
   
 android:layout_height="wrap_content" >  
   
  android:id="@+id/tv_time"  
   
 android:layout_width="wrap_content"  
   
 android:layout_height="wrap_content"  
   
 android:background="#bfbfbf"  
   
 android:layout_gravity="center_horizontal"  
   
 android:paddingTop="2dp"  
   
 android:paddingBottom="2dp"  
   
 android:paddingLeft="4dp"  
   
 android:paddingRight="4dp"  
   
 android:textColor="#ffffff"  
   
 android:textSize="12sp" />  
   
  android:layout_width="fill_parent"  
   
 android:layout_height="wrap_content"  
   
 android:layout_marginTop="5dp" >  
   
  android:id="@+id/iv_user_image"  
   
 android:layout_width="50dp"  
   
 android:layout_height="50dp"  
   
 android:layout_alignParentRight="true"  
   
 android:layout_alignParentTop="true"  
   
 android:background="@drawable/mypic"  
   
 android:focusable="false" />  
   
  android:id="@+id/tv_content"  
   
 android:layout_width="wrap_content"  
   
 android:layout_height="wrap_content"  
   
 android:layout_marginRight="5dp"  
   
 android:layout_toLeftOf="@+id/iv_user_image"  
   
 android:background="@drawable/chatto_bg"  
   
 android:gravity="left|center"  
   
 android:clickable="true"  
   
 android:focusable="true"  
   
 android:lineSpacingExtra="2dp"  
   
 android:textColor="#ff000000"  
   
 android:textSize="14sp" />  
   
   
   
  

レイアウトが完了すると、エンティティクラスChatEntityが新規作成されます.java
:  
 
   
 public class ChatEntity {  
   
 private int userImage;  
   
 private String content;  
   
 private String chatTime;  
   
 private boolean isComeMsg;  
   
 public int getUserImage() {  
   
 return userImage;  
   
 }  
   
 public void setUserImage(int userImage) {  
   
 this.userImage = userImage;  
   
 }  
   
 public String getContent() {  
   
 return content;  
   
 }  
   
 public void setContent(String content) {  
   
 this.content = content;  
   
 }  
   
 public String getChatTime() {  
   
 return chatTime;  
   
 }  
   
 public void setChatTime(String chatTime) {  
   
 this.chatTime = chatTime;  
   
 }  
   
 public boolean isComeMsg() {  
   
 return isComeMsg;  
   
 }  
   
 public void setComeMsg(boolean isComeMsg) {  
   
 this.isComeMsg = isComeMsg;  
   
 }  
   
 } 

最後はメインActivityで、そこには自分が書いたBaseAdapterが含まれています
:  
 
   
 public class ChatDemoActivity extends Activity {  
   
 private Button sendButton = null;  
   
 private EditText contentEditText = null;  
   
 private ListView chatListView = null;  
   
 private List chatList = null;  
   
 private ChatAdapter chatAdapter = null;  
   
 @Override  
   
 public void onCreate(Bundle savedInstanceState) {  
   
 super.onCreate(savedInstanceState);  
   
 requestWindowFeature(Window.FEATURE_NO_TITLE);  
   
 setContentView(R.layout.main);  
   
 contentEditText = (EditText) this.findViewById(R.id.et_content);  
   
 sendButton = (Button) this.findViewById(R.id.btn_send);  
   
 chatListView = (ListView) this.findViewById(R.id.listview);  
   
 chatList = new ArrayList();  
   
 ChatEntity chatEntity = null;  
   
 for (int i = 0; i < 2; i++) {  
   
 chatEntity = new ChatEntity();  
   
 if (i % 2 == 0) {  
   
 chatEntity.setComeMsg(false);  
   
 chatEntity.setContent("Hello");  
   
 chatEntity.setChatTime("2012-09-20 15:12:32");  
   
 }else {  
   
 chatEntity.setComeMsg(true);  
   
 chatEntity.setContent("Hello,nice to meet you!");  
   
 chatEntity.setChatTime("2012-09-20 15:13:32");  
   
 }  
   
 chatList.add(chatEntity);  
   
 }  
   
 chatAdapter = new ChatAdapter(this,chatList);  
   
 chatListView.setAdapter(chatAdapter);  
   
 sendButton.setOnClickListener(new OnClickListener() {  
   
 @Override  
   
 public void onClick(View v) {  
   
 if (!contentEditText.getText().toString().equals("")) {  
   
 //      
   
 send();  
   
 }else {  
   
 Toast.makeText(ChatDemoActivity.this, "Content is empty", Toast.LENGTH_SHORT).show();  
   
 }  
   
 }  
   
 });  
   
 }  
   
 private void send(){  
   
 ChatEntity chatEntity = new ChatEntity();  
   
 chatEntity.setChatTime("2012-09-20 15:16:34");  
   
 chatEntity.setContent(contentEditText.getText().toString());  
   
 chatEntity.setComeMsg(false);  
   
 chatList.add(chatEntity);  
   
 chatAdapter.notifyDataSetChanged();  
   
 chatListView.setSelection(chatList.size() - 1);  
   
 contentEditText.setText("");  
   
 }  
   
 private class ChatAdapter extends BaseAdapter{  
   
 private Context context = null;  
   
 private List chatList = null;  
   
 private LayoutInflater inflater = null;  
   
 private int COME_MSG = 0;  
   
 private int TO_MSG = 1;  
   
 public ChatAdapter(Context context,List chatList){  
   
 this.context = context;  
   
 this.chatList = chatList;  
   
 inflater = LayoutInflater.from(this.context);  
   
 }  
   
 @Override  
   
 public int getCount() {  
   
 return chatList.size();  
   
 }  
   
 @Override  
   
 public Object getItem(int position) {  
   
 return chatList.get(position);  
   
 }  
   
 @Override  
   
 public long getItemId(int position) {  
   
 return position;  
   
 }  
   
 @Override  
   
 public int getItemViewType(int position) {  
   
 //     view   ，                     
   
 ChatEntity entity = chatList.get(position);  
   
 if (entity.isComeMsg())  
   
 {  
   
 return COME_MSG;  
   
 }else{  
   
 return TO_MSG;  
   
 }  
   
 }  
   
 @Override  
   
 public int getViewTypeCount() {  
   
 //         1，    listview item        1，         ，  2 
   
 return 2;  
   
 }  
   
 @Override  
   
 public View getView(int position, View convertView, ViewGroup parent) {  
   
 ChatHolder chatHolder = null;  
   
 if (convertView == null) {  
   
 chatHolder = new ChatHolder();  
   
 if (chatList.get(position).isComeMsg()) {  
   
 convertView = inflater.inflate(R.layout.chat_from_item, null);  
   
 }else {  
   
 convertView = inflater.inflate(R.layout.chat_to_item, null);  
   
 }  
   
 chatHolder.timeTextView = (TextView) convertView.findViewById(R.id.tv_time);  
   
 chatHolder.contentTextView = (TextView) convertView.findViewById(R.id.tv_content);  
   
 chatHolder.userImageView = (ImageView) convertView.findViewById(R.id.iv_user_image);  
   
 convertView.setTag(chatHolder);  
   
 }else {  
   
 chatHolder = (ChatHolder)convertView.getTag();  
   
 }  
   
 chatHolder.timeTextView.setText(chatList.get(position).getChatTime());  
   
 chatHolder.contentTextView.setText(chatList.get(position).getContent());  
   
 chatHolder.userImageView.setImageResource(chatList.get(position).getUserImage());  
   
 return convertView;  
   
 }  
   
 private class ChatHolder{  
   
 private TextView timeTextView;  
   
 private ImageView userImageView;  
   
 private TextView contentTextView;  
   
 }  
   
 }  
   
 } 

  
Android&IOSに興味のある友人は、私たちのディスカッションQQグループに参加することができます.ここでは、乾物だけを議論します.
pandas入門02データ構造
ASブレークポイントデバッグ