LoginSignup
73

More than 5 years have passed since last update.

Android のチャットUIライブラリを作ってみた

Last updated at Posted at 2016-08-09

新しくチャット機能のあるアプリを開発しようと思って、iOSだとJSQMessagesViewControllerとかでチャットのUIが作れるライブラリがあって便利なんだけど、Androidでも同じように作ろうと思ったらいい感じのライブラリを見つけられなかったので、ないなら作ろうと思って作ってみた。

ChatMessageView

今回作ったライブラリはChatMessageViewというライブラリで完成形はこんな感じ。

数行のコードで使えます!

レイアウトファイルに追加する。

activity_main.xml

<?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">

    <jp.bassaer.chatmessageview.MessageView
        android:id="@+id/message_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

あとはメッセージクラスに必要なパラメータを設定して

messageView.init(messages);

MesseageViewにセットすればOK!

サンプルコード

MainActivity.java

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Bitmap icon1 = BitmapFactory.decodeResource(getResources(), jp.bassaer.chatmessageview.R.drawable.face_1);

        Message message1 = new Message();
        message1.setUserIcon(icon1);
        message1.setUserName("Michael");
        message1.setMessageText("hey! how are you?");
        message1.setRightMessage(true);

        ArrayList<Message> messages = new ArrayList<>();

        messages.add(message1);

        MessageView messageView  = (MessageView) findViewById(R.id.message_view);

        messageView.init(messages);
    }
}

リポジトリ

最後に

今回作成したライブラリはメッセージ部分のUIを作りましたが、今後はJSQMessagesViewControllerのように、入力部分もセットで実装予定です。
よかったら使ってみてください!
改善の余地が多々あるのでコメント・フィードバック等頂けると幸いです。

追記

コメントでご指摘いただいたスクロールの問題の修正とJSQMessagesViewControllerのような入力部分もセットにしたViewも追加しました。

screens.png

これからもアップデートしていきます!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
73