蓝牙聊天App设计1：Android Studio制作蓝牙聊天通讯软件（UI界面设计）

前言：蓝牙聊天App设计全部有三篇文章（一、UI界面设计，二、蓝牙搜索配对连接实现，三、蓝牙连接聊天），这篇文章是一、UI界面设计

课程1：Android Studio小白安装教程，以及第一个Android项目案例“Hello World”的调试运行
课程2：蓝牙聊天App设计1：Android Studio制作蓝牙聊天通讯软件（UI界面设计）
课程3：蓝牙聊天App设计2：Android Studio制作蓝牙聊天通讯软件（蓝牙搜索配对连接）
课程4：蓝牙聊天App设计3：Android Studio制作蓝牙聊天通讯软件（完结，蓝牙连接聊天，结合生活情景进行蓝牙通信的通俗讲解，以及代码功能实现，内容详细，讲解通俗易懂）

本次项目任务效果图

共有两个界面，一个是蓝牙搜索界面，另一个是聊天界面，效果界面分别如下，文末附有工程源码分享

一、创建空项目

创建一个新项目并运行成功第一个程序“Hello World!”
Android Studio小白安装教程，以及第一个Android项目案例“Hello World”的调试运行

二、实现第一个界面（蓝牙搜索界面）

1、新建包“MyClass”，然后在包里添加新类“DeviceClass.java”和“DeviceAdapter.java”，用于存储和显示蓝牙内容

（1）新建包“MyClass”

（2）新建类“DeviceClass.java”且完整代码如下

package MyClass;public class DeviceClass {    private String bName; //蓝牙名称    private String bAdress; //蓝牙地址    public DeviceClass(String bName,String bAdress){        this.bName = bName;        this.bAdress = bAdress;    }    public String getbName(){        return bName;    }    public String getbAdress(){        return bAdress;    }}

（3）新建类“DeviceAdapter.java”且完整代码如下

ppackage MyClass;import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ArrayAdapter;import android.widget.TextView;import com.example.wyb.bluetoothchatui.R;import java.util.List;public class DeviceAdapter extends ArrayAdapter {    private int resourceId;    public DeviceAdapter(Context context, int textViewResourceId, List objects) {        super(context, textViewResourceId, objects);        resourceId = textViewResourceId;    }    @Override    public View getView(int position, View convertView, ViewGroup parent) {        DeviceClass device = getItem(position);        View view = convertView;        if (view == null) {            view = LayoutInflater.from(getContext()).inflate(resourceId, parent, false);        }        TextView textView1 = (TextView) view.findViewById(R.id.textView1);        TextView textView2 = (TextView) view.findViewById(R.id.textView2);        textView1.setText(device.getbName());        textView2.setText(device.getbAdress());        return view;    }}

2、由于原有Button（发送按键）和ListView（蓝牙展示菜单）比较呆板，这里对这两个控件进行自定义样式

（1）新建“button_style.xml”，且完整代码如下：

      //设置长和宽      //设置外边框厚度和颜色      //设置内色      //设置圆弧形状的弧度

（2）新建“listview_style1.xml”，且完整代码如下：

3、界面一设计主要代码

（1）在“layout”中新建“device_item.xml”，且完整代码如下：

（2）“activity_main.xml”的完整代码如下：

（3）“MainActivity.java”的完整代码如下

package com.example.wyb.bluetoothchatui;import android.bluetooth.BluetoothDevice;import android.content.Intent;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.util.Log;import android.view.View;import android.widget.AdapterView;import android.widget.ListView;import java.util.ArrayList;import java.util.List;import MyClass.DeviceAdapter;import MyClass.DeviceClass;public class MainActivity extends AppCompatActivity {    private DeviceAdapter mAdapter1,mAdapter2;    private List mbondDeviceList = new ArrayList<>();//搜索到的所有已绑定设备保存为列表    private List mfindDeviceList = new ArrayList<>();//搜索到的所有未绑定设备保存为列表    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        Show_listView();//显示搜索内容    }    public void Show_listView(){        DeviceClass bondDevice;        DeviceClass findDevice;        //显示已绑定设备        for(int i=1;i<3;i++){            bondDevice = new DeviceClass("蓝牙"+i,"98:EF:22:8A:15:25");            mbondDeviceList.add(bondDevice);        }        mAdapter1 = new DeviceAdapter(MainActivity.this, R.layout.device_item, mbondDeviceList);        ListView listView1 = (ListView)findViewById(R.id.listview1);        listView1.setAdapter(mAdapter1);        mAdapter1.notifyDataSetChanged();        listView1.setOnItemClickListener(toMainActivity2);//设备点击事件，点击设备名称后执行toMainActivity2        //显示未绑定设备        for(int i=1;i<5;i++){            findDevice = new DeviceClass("蓝牙"+i,"98:EF:22:8A:15:25");            mfindDeviceList.add(findDevice);        }        mAdapter2 = new DeviceAdapter(MainActivity.this, R.layout.device_item, mfindDeviceList);        ListView listView2 = (ListView)findViewById(R.id.listview2);        listView2.setAdapter(mAdapter2);        mAdapter2.notifyDataSetChanged();    }    //点击设备后执行的函数    private AdapterView.OnItemClickListener toMainActivity2 =new AdapterView.OnItemClickListener(){        @Override        public void onItemClick(AdapterView adapterView, View view, int i, long l){                }    };}

4、运行界面效果如下

5、界面色彩微调

我们可以看到，界面的上方颜色在软件中可能不是很协调，那么如果需要，接下来就对颜色进行修改

（1）打开“colors.xml"文件，并修改为如下代码

    #75b9e6    #75b9e6    #75b9e6

（2）到这里，恭喜你已经完成了第一个界面的设计，

三、实现第二个界面（聊天界面）

1、新建“Main2Activity”

2、添加新类“Msg.java”和“MsgAdapter.java”，用于存储和显示消息内容

（1）新建“Msg.java”且完整代码如下

package MyClass;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;    }}

（2）新建“MsgAdapter.java”且完整代码如下

package MyClass;import android.support.v7.widget.RecyclerView;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.LinearLayout;import android.widget.TextView;import com.example.wyb.bluetoothchatui.R;import java.util.List;public class MsgAdapter extends RecyclerView.Adapter{    private List mMsgList;    static class ViewHolder extends RecyclerView.ViewHolder{        LinearLayout leftLayout;        LinearLayout rightLayout;        TextView leftMsg;        TextView rightMsg;        public ViewHolder(View view){            super(view);            leftLayout = (LinearLayout) view.findViewById(R.id.left_layout);            rightLayout = (LinearLayout) view.findViewById(R.id.right_layout);            leftMsg = (TextView) view.findViewById(R.id.left_msg);            rightMsg = (TextView) view.findViewById(R.id.right_msg);        }    }    public MsgAdapter(List msgList){        mMsgList = msgList;    }    @Override    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType){        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.msg_item,parent,false);        return new ViewHolder(view);    }    @Override    public void onBindViewHolder(ViewHolder holder,int position){        Msg msg = mMsgList.get(position);        if(msg.getType() == Msg.TYPE_RECEIVED){            holder.leftLayout.setVisibility(View.VISIBLE);            holder.rightLayout.setVisibility(View.GONE);            holder.leftMsg.setText(msg.getContent());        }        else {            holder.leftLayout.setVisibility(View.GONE);            holder.rightLayout.setVisibility(View.VISIBLE);            holder.rightMsg.setText(msg.getContent());        }    }    @Override    public int getItemCount(){        return mMsgList.size();    }}

3、添加相关依赖

在build.gradle中添加“compile ‘com.android.support:recyclerview-v7:26.+’”依赖，注意版本号与上面一致，然后点击右上角“Sync Now”重新加载资源

dependencies {    compile fileTree(dir: 'libs', include: ['*.jar'])    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {        exclude group: 'com.android.support', module: 'support-annotations'    })    compile 'com.android.support:appcompat-v7:26.+'    compile 'com.android.support:recyclerview-v7:26.+'//注意版本号与上面一致    testCompile 'junit:junit:4.12'}

4、对发送按键和输入框进行自定义样式，不至于看起来呆板

（1）新建“send_text.xml”且完整代码如下

          //设置圆弧形状的弧度

（2）新建“send_btn.xml”且完整代码如下

          //设置圆弧形状的弧度

5、界面一设计主要代码

（1）“activity_main2”完整代码如下

（2）在drawable中添加图片

（3）在“layout”中新建“msg_item.xml”且完整代码如下

（4）“Main2Activity ”的完整代码如下

package com.example.wyb.bluetoothchatui;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.support.v7.widget.LinearLayoutManager;import android.support.v7.widget.RecyclerView;import android.view.View;import android.widget.Button;import android.widget.EditText;import java.util.ArrayList;import java.util.List;import MyClass.Msg;import MyClass.MsgAdapter;import static com.example.wyb.bluetoothchatui.R.id.send;public class Main2Activity extends AppCompatActivity {    private EditText inputText;    private Button send;    private RecyclerView msgRecyclerView;    private MsgAdapter adapter;    private List msgList = new ArrayList<>();//聊天信息列表    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main2);        inputText = (EditText) findViewById(R.id.input_text);        send = (Button) findViewById(R.id.send);        msgRecyclerView = (RecyclerView) findViewById(R.id.msg_recycler_view);        //适配器匹配        LinearLayoutManager layoutManager = new LinearLayoutManager(this);        msgRecyclerView.setLayoutManager(layoutManager);        adapter = new MsgAdapter(msgList);        msgRecyclerView.setAdapter(adapter);        Show_msgRecyclerView();//聊天信息初始化        //输入发送内容        send.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                String content = inputText.getText().toString();                if(!"".equals(content)){                    Msg msg = new Msg(content, Msg.TYPE_SENT);                    msgList.add(msg);                    adapter.notifyItemInserted(msgList.size()-1);                    msgRecyclerView.scrollToPosition(msgList.size()-1);                    inputText.setText("");                }            }        });    }    //聊天信息初始化    public void Show_msgRecyclerView(){        Msg msg1 = new Msg("通道已连接，我们可以开始聊天了",Msg.TYPE_RECEIVED);        msgList.add(msg1);        Msg msg2 = new Msg("你好，收得到消息不？",Msg.TYPE_SENT);        msgList.add(msg2);        Msg msg3 = new Msg("你好，我收到了",Msg.TYPE_RECEIVED);        msgList.add(msg3);        adapter.notifyDataSetChanged();    }}

6、运行界面效果如下

7、界面效果微调

我们发现上图的消息框变形拉扯了，不美观，接下来就进行修改完善

（1）选择图片，打开“Create 9-Patch…”，然后点击“OK”

（2）点击鼠标拖动，画黑线，如果要取消黑线，按住“Shift”按键并点击鼠标拖动。黑线的作用代表这范围内的可以拉长，效果如下


（3）画完黑线后会生成图片“message_left.9.png”和“message_right.9.png”，记得把原来的图片“message_left.png”和“message_right.png”删除，否则运行出错

（4）修改完的效果如下

四、项目效果视频

到这里，本项目就已经完成了，你已经完成了蓝牙聊天软件的界面设计部分，运行效果视频如下

五、完整项目分享

项目链接：https://pan.baidu.com/s/1SpgNVe72GqEa8b9bixboKg 提取码：2osc

六、蓝牙聊天功能实现

可以看课程蓝牙聊天App设计3：Android Studio制作蓝牙聊天通讯软件（完结，蓝牙连接聊天，结合生活情景进行蓝牙通信的通俗讲解，以及代码功能实现，内容详细，讲解通俗易懂）

来源地址：https://blog.csdn.net/weiybin/article/details/130403706