编写精美的聊天页面

首先是主页面activity_main.xml

ListView用于显示消息,然后EditText用于输入消息,还有一个Button用于发送消息

<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="match_parent"
    android:background="#d8e0e8"
    android:orientation="vertical"
    >
<ListView 
    android:id="@+id/msg_list_view"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:divider="#0000"
    ></ListView> 
<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
<EditText
    android:id="@+id/input_text"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:hint="Type something here"
    android:maxLines="2"/>

<Button
    android:id="@+id/send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Send"
    ></Button>
    
</LinearLayout>  
</LinearLayout>

接下来定义消息的实体类Msg

content用来传送内容,Type是Int类型的用来标志当前是发送状态还是接受状态

public class Msg {
    //这是一条收到的消息
     public static final int TYPE_RECEIVED=0;
    //这是一条发出的消息
     public static final int TYPE_SENT=1;
     private String content;
     private int type;
     public Msg(String content,int type) {
        this.content=content;
        this.type=type;

    }
     public String getContent() {
        return content;
    }
     public int getType() {
        return type;
    }
}

接下来是ListView的子项布局 msg_item.xml

让收到的消息左对齐,发出的消息右对齐

<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="match_parent"
    android:background="#d8e0e8"
    android:orientation="vertical"
    >
<LinearLayout 
    android:id="@+id/left_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="left"
    android:background="@drawable/left"
    >
<TextView 
    android:id="@+id/left_msg"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="10dp"
    android:textColor="#fff"
    />
</LinearLayout> 
<LinearLayout
    android:id="@+id/right_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right"
    android:background="@drawable/le"
    >
<TextView 
    android:id="@+id/right_msg"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="10dp"
    />
    
</LinearLayout>
</LinearLayout>

接下来创建ListView的适配器类,继承自ArrayAdater,并且泛型指定为Msg类

public class MsgAdapter extends ArrayAdapter<Msg>{
        private int resourceId;
        public MsgAdapter(Context context,int textViewResourceId,List<Msg>objects) {
            // TODO Auto-generated constructor stub
            super(context, textViewResourceId, objects);
            resourceId=textViewResourceId;
        }
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            // TODO Auto-generated method stub
            Msg msg=getItem(position);
            View view;
            ViewHolder viewHolder;
            if (convertView==null) {
                view=LayoutInflater.from(getContext()).inflate(resourceId, null);
                viewHolder=new ViewHolder();
                viewHolder.leftLayout=(LinearLayout)view.findViewById(R.id.left_layout);
                viewHolder.rightLayout=(LinearLayout)view.findViewById(R.id.right_layout);
                viewHolder.leftMsg=(TextView)view.findViewById(R.id.left_msg);
                viewHolder.rightMsg=(TextView)view.findViewById(R.id.right_msg);
                view.setTag(viewHolder);
            }else {
                view=convertView;
                viewHolder=(ViewHolder)view.getTag();
            }
            if (msg.getType()==Msg.TYPE_RECEIVED) {
                viewHolder.leftLayout.setVisibility(View.VISIBLE);
                viewHolder.rightLayout.setVisibility(View.GONE);
                viewHolder.leftMsg.setText(msg.getContent());
            }else if (msg.getType()==Msg.TYPE_SENT) {
                viewHolder.rightLayout.setVisibility(View.VISIBLE);
                viewHolder.leftLayout.setVisibility(View.GONE);
                viewHolder.rightMsg.setText(msg.getContent());
            }
            return view;
        }
        class ViewHolder{
            LinearLayout leftLayout;
            LinearLayout rightLayout;
            TextView leftMsg;
            TextView rightMsg;
        }
        
}

最后在MainActivity中为ListView初始化一些数据,并且为发送按钮增加事件响应

public class MainActivity extends Activity {
    private ListView msgListView;
    private EditText inputText;
    private Button send;
    private MsgAdapter adapter;
    private List<Msg>msgList=new ArrayList<Msg>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initMsgs();
        adapter=new MsgAdapter(MainActivity.this, R.layout.msg_item, msgList);
        inputText=(EditText)findViewById(R.id.input_text);
        send=(Button)findViewById(R.id.send);
        msgListView=(ListView)findViewById(R.id.msg_list_view);
        msgListView.setAdapter(adapter);
        send.setOnClickListener(new OnClickListener() {
            
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                String content=inputText.getText().toString();
                if (!"".equals(content)) {
                    Msg msg=new Msg(content, Msg.TYPE_SENT);
                    msgList.add(msg);
                    //当有新消息时刷新显示
                    adapter.notifyDataSetChanged();
                    msgListView.setSelection(msgList.size());
                    inputText.setText("");//清空输入框中的内容
                }
            }
        });
    }

    private void initMsgs() {
        // TODO Auto-generated method stub
        Msg msg1=new Msg("Hello guy", Msg.TYPE_RECEIVED);
        msgList.add(msg1);
        Msg msg2=new Msg("Hello who is that", Msg.TYPE_SENT);
        msgList.add(msg2);
        Msg msg3=new Msg("This is tom Nice talking to you", Msg.TYPE_RECEIVED);
        msgList.add(msg3);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}


转载于:https://my.oschina.net/253563059/blog/493208

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值