iOSアプリケーションでチャットを行う最も簡単な方法

みなさんこんにちは！ チャットの設計とレイアウトのたびに、「これをどうにかして単純化できますか？」という質問がありました。 来週、私はアプリケーションのために大きなチャットをする必要があるので、レイアウトを容易にすることについての考えが頭に浮かび始めました。 少し座ってAutoLayout機能を試した後、レイアウトプロセスを簡素化し、最大限に作業を進める方法を見つけました。 そのような問題を解決するとき、彼らはしばしばUICollectionViewを使用しますが、今回はUITableViewを使用します。

ステップ1：UITableViewを準備する

最初に、UITableViewを作成して適切に構成する必要があります。 私はコードでこれを行うことを好みます：

tableView = UITableView() tableView.delegate = self tableView.dataSource = self tableView.rowHeight = UITableView.automaticDimension tableView.estimatedRowHeight = 44.0 tableView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(tableView) tableView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true tableView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true tableView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで重要な点は、rowHeightを設定し、estimatedRowHeightを定義することです。

ステップ2：セルを作成する

次に、最も興味深い部分であるセルレイアウトに移りましょう。 新しいファイルを作成します。UITableViewCellのサブクラスである必要があります。「XIBファイルも作成する」にチェックを入れることを忘れないでください。 レイアウトプロセスをステップに分割して、簡単にしましょう。



新しいUIViewをセルにドラッグし、任意のbackgroundColorを配置してから、このビューに新しいUILabelをドラッグします。 このUILabelの属性インスペクターで、Linesフィールドに0を設定する必要があります。 これにより、セルに複数行のテキストを含めることができます。 次のようになります。







次に、ラベルの端をスーパービューの端にわずかにインデントして添付する必要があります。







今、純粋な魔法！ グレービューの左、上、下の端をセルの対応する端に引っ掛け、別の手順で、グレービューの右端からセルビューの右端までの定数を作成します。 次に、新しく作成した定数を選択し、その属性インスペクターを開きます。 「関係」フィールドで「より大きい」または「等しい」を設定し、「定数」フィールドで、たとえば60などの数値を挿入します。この制約により、メッセージ「バブル」の最大幅が制限されます。







最後の部分に進みます。 メッセージバブルの高さ定数を作成し、[より大きい]または[等しい]を[関係]および[定数]フィールドの値に設定します。 Constantの値は、高さの「バブル」の最小サイズになり、フォントサイズとインデントに依存します。 次に、セルクラスのラベルとバブルのIBOutletを作成します。

ステップ3および最後：すべてをまとめる

UITableViewDataSourceメソッドに入力してセルを登録するだけです。

 tableView.register(UINib(nibName: "ExampleCell", bundle: nil), forCellReuseIdentifier: "incomingMessage")
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、セルを作成して返すだけです。

 let cell = tableView.dequeueReusableCell(withIdentifier: "incomingMessage", for: indexPath) cell.messageLabel.text = "This is a test message" return cell
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おわりに

送信メッセージ用に同じセルを作成し、「バブル」の角を丸めるだけです。 同意する、メソッドは可能な限り単純です。 この「バブル」の高さと幅を計算する必要はありません。この作業をAutoLayoutに委任するだけです。 完成したプロジェクトのプラスまたはマイナスは次のとおりです。







それだけです！ 楽しんでいただけましたでしょうか！