デスクトップおよびモバイル向けバブルチャットアプリデモ

Q: ソフトウェア開発におけるバブルチャットインターフェイス

A bubble chat interface is a graphical user interface element that allows users to have a conversation with each other. It usually consists of a series of bubble-shaped icons, each of which represents a different person in the conversation. When one user speaks, their bubble appears on the screen, and the other users can see what they are saying. This allows for a more natural conversation than other types of interfaces, such as text-based chat rooms. Bubble chat interfaces are often used in Instant Messaging (IM) applications, video conferencing software, and online games.

エンバカデロ

2年前

If you’re looking for a way to build a chat interface that’s both user-friendly and visually appealing, the Bubble Chat App Demo is just what you need. This cross-platform application, built using Delphi, offers a single code base and UI that can be used on Android、iOS、macOS、Windows、Linuxで使用できる単一コードベースとUIを提供しています。また、WhatsApp、Facebook、Instagramなどの人気アプリに見られるようなバブルチャットインターフェイスを使用しているため、ユーザーはいつもと同じ感覚で利用できます。ということで、今すぐバブルチャットアプリの作成が、いかに簡単で楽しいかをご覧ください。

フルクロスプラットフォームのバブルチャットアプリのソースコードをGithubからダウンロード

このデモは、カメラデモ、絵文字デモ、ペイントデモなど、100以上のクロスプラットフォームデモの一部です。

ソフトウェア開発におけるバブルチャットインターフェイス

バブルチャットインターフェイスは、ユーザーが互いに会話できるようにするグラフィカルユーザーインターフェイスの構成要素です。通常、一連の吹き出しの形をしたアイコンで構成され、それぞれが会話の別の人物を表します。1 人のユーザーが話すと、吹き出しが画面に表示され、他のユーザーはその発言内容を見ることができます。これにより、テキストベースのチャットルームなど、他の種類のインターフェイスよりも自然な会話が可能になります。バブルチャットインターフェイスは、インスタントメッセージング (IM) アプリケーション、ビデオ会議ソフトウェア、オンラインゲームでよく使用されます。

バブルチャットアプリデモの画面ショット

バブルチャットのソースコード

unit Unit1;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.Objects,
  FMX.StdCtrls, FMX.Layouts, FMX.Controls.Presentation, FMX.Effects, FMX.Edit,
  System.Math;

type
  TForm1 = class(TForm)
    VSB: TVertScrollBox;
    Layout1: TLayout;
    Button2: TButton;
    Image1: TImage;
    MaterialOxfordBlueSB: TStyleBook;
    ToolBar1: TToolBar;
    ShadowEffect4: TShadowEffect;
    Label1: TLabel;
    Edit1: TEdit;
    Image2: TImage;
    procedure Button2Click(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
    procedure AddMessage(const AText: String; AAlignLayout: TAlignLayout; ACalloutPosition: TCalloutPosition);
    procedure FriendMessage(const S: String);
    procedure YourMessage(const S: String);
    procedure LabelPaint(Sender: TObject; Canvas: TCanvas;
      const ARect: TRectF);
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

<strong>procedure TForm1.AddMessage(const AText: String; AAlignLayout: TAlignLayout; ACalloutPosition: TCalloutPosition);
var
CR: TCalloutRectangle;
L: TLabel;
TmpImg: TCircle;
begin
  CR := TCalloutRectangle.Create(Self);
  CR.Parent := VSB;
  CR.Align := TAlignLayout.Top;
  CR.CalloutPosition := ACalloutPosition;
  CR.Margins.Top := 10;
  CR.Margins.Bottom := 10;
  CR.Margins.Left := 5;
  CR.Height := 75;
  CR.XRadius := 25;
  CR.YRadius := CR.XRadius;
  CR.Position.Y := 999999;
  CR.Fill.Kind := TBrushKind.None;
  CR.Stroke.Color := TAlphaColorRec.White;

  L := TLabel.Create(Self);
  L.Parent := CR;
  L.Align := TAlignLayout.Client;
  L.Text := AText;
  L.Margins.Right := 15;
  L.Margins.Left := 5;
  L.Width := CR.Width-20;

  L.WordWrap := True;
  L.AutoSize := True;
  L.OnPaint := LabelPaint;

  TmpImg := TCircle.Create(Self);
  TmpImg.Parent := CR;
  TmpImg.Align := AAlignLayout;
  TmpImg.Fill.Kind := TBrushKind.Bitmap;
  case AAlignLayout of
    TAlignLayout.Left: TmpImg.Fill.Bitmap.Bitmap.Assign(Image1.Bitmap);
    TAlignLayout.Right: TmpImg.Fill.Bitmap.Bitmap.Assign(Image2.Bitmap);
  end;
  TmpImg.Fill.Bitmap.WrapMode := TWrapMode.TileStretch;
  TmpImg.Width := 75;
  TmpImg.Margins.Left := 15;
  TmpImg.Margins.Right := 15;
  TmpImg.Margins.Top := 15;
  TmpImg.Margins.Bottom := 15;

  VSB.ScrollBy(0,-95);
end;

procedure TForm1.FriendMessage(const S: String);
begin
  AddMessage(S, TAlignLayout.Left, TCalloutPosition.Left);
end;

procedure TForm1.YourMessage(const S: String);
begin
  AddMessage(S, TAlignLayout.Right, TCalloutPosition.Right);
end;

procedure TForm1.Button2Click(Sender: TObject);
begin
  YourMessage(Edit1.Text);
  //Edit1.Text := '';
  FriendMessage('A quick brown fox jumped over the yellow log running away from the pink dog and ran down the lane.');
end;

procedure TForm1.LabelPaint(Sender: TObject; Canvas: TCanvas;
  const ARect: TRectF);
begin
  {if TLabel(Sender).Tag=0 then
    begin
      TCalloutRectangle(TLabel(Sender).Parent).Height := Max(TLabel(Sender).Height,75);
      TLabel(Sender).Tag := 1;
    end;}
end;</strong>

end.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

unit Unit1;

interface

uses

System.SysUtils, System.Types, System.UITypes, System.クラス, System.Variants,

FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.Objects,

FMX.StdCtrls, FMX.Layouts, FMX.Controls.Presentation, FMX.Effects, FMX.Edit,

System.Math;

type

TForm1 = class(TForm)

VSB: TVertScrollBox;

Layout1: TLayout;

Button2: TButton;

Image1: TImage;

MaterialOxfordBlueSB: TStyleBook;

ToolBar1: TToolBar;

ShadowEffect4: TShadowEffect;

Label1: TLabel;

Edit1: TEdit;

Image2: TImage;

procedure Button2Click(Sender: TObject);

private

{ Private declarations }

public

{ Public declarations }

procedure AddMessage(const AText: String; AAlignLayout: TAlignLayout; ACalloutPosition: TCalloutPosition);

procedure FriendMessage(const S: String);

procedure YourMessage(const S: String);

procedure LabelPaint(Sender: TObject; Canvas: TCanvas;

const ARect: TRectF);

end;

var

Form1: TForm1;

implementation

{$R *.fmx}

<strong>procedure TForm1.AddMessage(const AText: String; AAlignLayout: TAlignLayout; ACalloutPosition: TCalloutPosition);

var

CR: TCalloutRectangle;

L: TLabel;

TmpImg: TCircle;

begin

CR := TCalloutRectangle.Create(Self);

CR.Parent := VSB;

CR.Align := TAlignLayout.Top;

CR.CalloutPosition := ACalloutPosition;

CR.Margins.Top := 10;

CR.Margins.Bottom := 10;

CR.Margins.Left := 5;

CR.Height := 75;

CR.XRadius := 25;

CR.YRadius := CR.XRadius;

CR.Position.Y := 999999;

CR.Fill.Kind := TBrushKind.None;

CR.Stroke.Color := TAlphaColorRec.White;

L := TLabel.Create(Self);

L.Parent := CR;

L.Align := TAlignLayout.Client;

L.Text := AText;

L.Margins.Right := 15;

L.Margins.Left := 5;

L.Width := CR.Width-20;

L.WordWrap := True;

L.AutoSize := True;

L.OnPaint := LabelPaint;

TmpImg := TCircle.Create(Self);

TmpImg.Parent := CR;

TmpImg.Align := AAlignLayout;

TmpImg.Fill.Kind := TBrushKind.Bitmap;

case AAlignLayout of

TAlignLayout.Left: TmpImg.Fill.Bitmap.Bitmap.Assign(Image1.Bitmap);

TAlignLayout.Right: TmpImg.Fill.Bitmap.Bitmap.Assign(Image2.Bitmap);

end;

TmpImg.Fill.Bitmap.WrapMode := TWrapMode.TileStretch;

TmpImg.Width := 75;

TmpImg.Margins.Left := 15;

TmpImg.Margins.Right := 15;

TmpImg.Margins.Top := 15;

TmpImg.Margins.Bottom := 15;

VSB.ScrollBy(0,-95);

end;

procedure TForm1.FriendMessage(const S: String);

begin

AddMessage(S, TAlignLayout.Left, TCalloutPosition.Left);

end;

procedure TForm1.YourMessage(const S: String);

begin

AddMessage(S, TAlignLayout.Right, TCalloutPosition.Right);

end;

procedure TForm1.Button2Click(Sender: TObject);

begin

YourMessage(Edit1.Text);

//Edit1.Text := '';

FriendMessage('A quick brown fox jumped over the yellow log running away from the pink dog and ran down the lane.');

end;

procedure TForm1.LabelPaint(Sender: TObject; Canvas: TCanvas;

const ARect: TRectF);

begin

{if TLabel(Sender).Tag=0 then

begin

TCalloutRectangle(TLabel(Sender).Parent).Height := Max(TLabel(Sender).Height,75);

TLabel(Sender).Tag := 1;

end;}

end;</strong>

end.

クロスプラットフォームアプリのプログラミング手法を学ぶには

今すぐ Coding Boot Camp 2022に登録してください。ゲーム、JavaScript、Web、Python、SQL、データベース、iOS、MacOS、Android、モバイル、Linux、Windows、デスクトップ、サーバー、Arduinoなど、プログラミングに関するさまざまなトピックを学ぶことができます。