Android之IM聊天界面的搭建以及gradient渐变色的设置

概述

gradient：
gradient startColor=”” centerColor=”” endColor=”“;
type=”“;其中type可以是：radiu圆形渐变，圆形渐变需要设置gradientRadius；sweep扇形渐变；linear线性渐变(默认)，线性渐变可以通过angle设置渐变的角度。
弧形：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="sweep"
        android:startColor="#e6e6fa"
              android:centerColor="#ffdab9"
              android:endColor="#ffedad"
              android:angle="-90"></gradient>
</shape>

结果：

圆形渐变，由圆心向外渐变

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:gradientRadius="360dp"
    android:type="radial"
    android:startColor="#e6e6fa"
    android:centerColor="#ffdab9"
    android:endColor="#ffedad"

    android:angle="-90"></gradient>
</shape>

结果：

程序

布局layout_chat

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
                android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:background="#87ceeb">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="15dp"
            android:textSize="20dp"
            android:text="无聊的聊天室"/>
    </LinearLayout>
    <ListView
        android:id="@+id/list_view_chat"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:divider="@null"
        android:cacheColorHint="#000000"
        android:background="@drawable/main_chat_bg">
    </ListView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#f3dff8">
        <ImageView
            android:id="@+id/image_view_chat"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:src="@mipmap/photo_bg"/>

        <EditText
            android:id="@+id/edit_input"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="5"
            android:layout_margin="7dp"
            android:background="@mipmap/user_input"/>
        <Button
            android:id="@+id/button_input"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:background="@drawable/btn_bg"
            android:layout_margin="5dp"
            android:text="send"/>
    </LinearLayout>
</LinearLayout>

item_chat

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">
    <TextView
        android:id="@+id/textview_time"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:gravity="center"
        android:text="星期六 10:24"/>

    <RelativeLayout
        android:paddingTop="2dp"
        android:paddingBottom="2dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/image_user1"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_alignParentLeft="true"
            android:background="@mipmap/personal_normal"/>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/image_user1"
            android:layout_marginRight="60dp"
            android:gravity="center"
            android:orientation="vertical">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
                <TextView
                    android:id="@+id/textview_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="@dimen/text_size"
                    android:layout_margin="5dp"
                    android:background="@drawable/label_bg"
                    android:text="叨客"/>
                <TextView
                    android:id="@+id/textview_nickname"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="@dimen/text_size"
                    android:layout_marginTop="5dp"
                    android:text="二毛"/>
            </LinearLayout>
            <TextView
                android:id="@+id/textview_message"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/image_user1"
                android:background="@mipmap/technician_chat_bg"
                android:padding="15dp"
                android:text="nihao"/>
        </LinearLayout>

    </RelativeLayout>

    <RelativeLayout
        android:paddingTop="2dp"
        android:paddingBottom="2dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/image_user2"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_alignParentRight="true"
            android:background="@mipmap/personal_checked"/>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="60dp"
            android:layout_toLeftOf="@id/image_user2"
            android:gravity="center"
            android:orientation="vertical">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="@dimen/text_size"
                    android:layout_marginTop="5dp"
                    android:text="二蛋"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="@dimen/text_size"
                    android:layout_margin="5dp"
                    android:background="@drawable/label_bg"
                    android:text="贱客"/>
            </LinearLayout>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toLeftOf="@+id/image_user2"
                android:background="@mipmap/user_chat_bg"
                android:padding="15dp"
                android:text="干嘛"/>
        </LinearLayout>

    </RelativeLayout>

</LinearLayout>

drawable文件夹下需要建立的文件
聊天室背景渐变色设置main_chat_bg

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:startColor="#e6e6fa"
              android:centerColor="#ffdab9"
              android:endColor="#ffedad"
              android:angle="-90"></gradient>
</shape>

lable_bg

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#addc46"></solid>
    <corners android:radius="6dp"></corners>
    <padding android:left="10dp" android:right="10dp"></padding>
</shape>

java代码部分
新建一个ChatMessage类,用于存储信息的model

public class ChatMessage {
    private String textTitle;
    private String nickName;
    private long textTime;
    private String message;
    private int imageId;

    public ChatMessage() {
    }

    public ChatMessage(String textTitle, String nickName, long textTime, String message, int imageId) {
        this.textTitle = textTitle;
        this.nickName = nickName;
        this.textTime = textTime;
        this.message = message;
        this.imageId = imageId;
    }

    public String getTextTitle() {
        return textTitle;
    }

    public void setTextTitle(String textTitle) {
        this.textTitle = textTitle;
    }

    public String getNickName() {
        return nickName;
    }

    public void setNickName(String nickName) {
        this.nickName = nickName;
    }

    public long getTextTime() {
        return textTime;
    }

    public void setTextTime(long textTime) {
        this.textTime = textTime;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public int getImageId() {
        return imageId;
    }

    public void setImageId(int imageId) {
        this.imageId = imageId;
    }
}

建一个ListView的自定义adapter——ChatListAdapter

public class ChatListAdapter extends BaseAdapter {
    private List<ChatMessage> mData;
    private LayoutInflater mInflater;
    private Html.ImageGetter mImageGetter;
    private DateFormat mDateFormat;

    public ChatListAdapter(List<ChatMessage> mData, LayoutInflater mInflater,Html.ImageGetter mImageGetter) {
        this.mData = mData;
        this.mInflater = mInflater;
        this.mImageGetter = mImageGetter;
        mDateFormat = new SimpleDateFormat("EEE HH:mm");
    }

    @Override
    public int getCount() {
        return mData.size();
    }

    @Override
    public Object getItem(int position) {
        return position;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder vh = null;
        if(convertView==null){
            convertView = mInflater.inflate(R.layout.item_chat,null);
            vh = new ViewHolder();
            vh.imageViewHead = (ImageView) convertView.findViewById(R.id.image_user1);
            vh.textViewTitle = (TextView)convertView.findViewById(R.id.textview_title);
            vh.textViewNickName = (TextView) convertView.findViewById(R.id.textview_nickname);
            vh.textViewTime = (TextView) convertView.findViewById(R.id.textview_time);
            vh.textViewMessage = (TextView) convertView.findViewById(R.id.textview_message);
            convertView.setTag(vh);
        }else{
            vh = (ViewHolder) convertView.getTag();
        }
        ChatMessage chatMessage = mData.get(position);
        vh.imageViewHead.setImageResource(chatMessage.getImageId());
        vh.textViewTitle.setText(chatMessage.getTextTitle());
        vh.textViewNickName.setText(chatMessage.getNickName());
        //将getMessage()的到的文本转换成富文本
        Spanned spanned = Html.fromHtml(chatMessage.getMessage(),mImageGetter,null);
        vh.textViewMessage.setText(spanned);
        //得到日期 星期 HH：mm
        vh.textViewTime.setText(mDateFormat.format(new Date(chatMessage.getTextTime())));
        return convertView;
    }

    class ViewHolder{
        ImageView imageViewHead;
        TextView textViewTitle;
        TextView textViewNickName;
        TextView textViewTime;
        TextView textViewMessage;
    }
}

主活动MyChatActivity

public class MyChatActivity extends Activity implements View.OnClickListener{
    private Button mInputButton;
    private ImageView mImageView;
    private EditText mEditInput;
    private ListView mListView;

    private Html.ImageGetter mImageGetter;

    private LayoutInflater mInflater;
    private ChatListAdapter mAdapter;
    private List<ChatMessage> mData;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.layout_chat);

        mInputButton = (Button)findViewById(R.id.button_input);
        mImageView = (ImageView)findViewById(R.id.image_view_chat);
        mEditInput = (EditText)findViewById(R.id.edit_input);
        mListView = (ListView) findViewById(R.id.list_view_chat);

        mImageView.setOnClickListener(this);
        mInputButton.setOnClickListener(this);

        mImageGetter = new Html.ImageGetter() {
            @Override
            public Drawable getDrawable(String source) {
                Drawable drawable = getResources().getDrawable(R.mipmap.ic_launcher);
                drawable.setBounds(0,0,drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight());
                return drawable;
            }
        };

        mInflater = getLayoutInflater();
        mData = new ArrayList<>();
        mAdapter = new ChatListAdapter(mData,mInflater,mImageGetter);
        mListView.setAdapter(mAdapter);

    }


    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.image_view_chat:
                //生成表情的spanned
                Spanned spanned = Html.fromHtml("<img src=''/>",mImageGetter,null);
                //TextView里的insert方法，可以在任意位置插入文本，此处将图片插入到输入光标位置
                mEditInput.getText().insert(mEditInput.getSelectionStart(), spanned);
                break;
            case R.id.button_input:
//如果EditText中的内容为空，则不能继续执行                if(mEditInput.getText().toString().equals("")){
                    return;
                }
                ChatMessage message = new ChatMessage();
                //头像 昵称 信息 时间
                message.setImageId(R.id.image_user1);
                message.setTextTitle("叨客");
                message.setNickName("五毛");
                message.setTextTime(System.currentTimeMillis());
                message.setMessage(filterHtml(Html.toHtml(mEditInput.getText())));
                mEditInput.setText("");
                mData.add(message);//将生成的数据添加到mData中
                mAdapter.notifyDataSetChanged();//通知listview数据发生改变，更新数据
                mListView.setSelection(mData.size()-1);//每次让最新的数据都显示在ListView上（ListView的最后一项）
                break;
            default:
                break;
        }
    }
    //将普通文本转换成富文本
    public String filterHtml(String str){
        str = str.replaceAll("<(?!br|img)[^>]+>","").trim();
        return  str;
    }
}

结果演示：