What is best text container for multiline text in IOS

Question

I try to make Android/IOS app with chat in Visual Studio with Xamarin. And I have a problem with chat baloons. For Android it's ok, I use Text View as message container. But in IOS I met a problem - If I use TextView I got only white rectangles. To implement list of messages I use UITableView with this code

public override void ViewDidLoad(){
  _chatsMessagesListAdapter = new MessagesTableSourceClass(chatData._messages);
  messagesList.Source = _chatsMessagesListAdapter;
}

public class MessagesTableSourceClass : UITableViewSource
    {
        readonly List<MessageData> _dataList;
        public MessagesTableSourceClass(List<MessageData> dataList)
        {
            _dataList = dataList;
        }
        public override nint RowsInSection(UITableView tableview, nint section)
        {
            return _dataList.Count;
        }
        public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
        {
OwnerMessageTableViewCell cell = tableView.DequeueReusableCell(MessageTableViewCell.Key) as OwnerMessageTableViewCell ?? OwnerMessageTableViewCell.Create();
cell.BindData(_dataList[indexPath.Row]._message, _dataList[indexPath.Row]._image);
return cell;
        }
        public override void RowSelected(UITableView tableView, NSIndexPath indexPath)
        {
            tableView.DeselectRow(indexPath, true);
        }
        public override UIView GetViewForFooter(UITableView tableView, nint section)
        {
            return new UIView();
        }
    }

OwnerMessageTableViewCell.xib is simple structure TableViewCell -> View -> TextView

But in result TableView messagesList is shown like white rectangle. Can anybody help me with this problem?

UPDATED Here the implementation of OwnerMessageTableViewCell

public partial class OwnerMessageTableViewCell : UITableViewCell
    {
        public static readonly UINib Nib = UINib.FromName("OwnerMessageTableViewCell", NSBundle.MainBundle);
        public static readonly NSString Key = new NSString("OwnerMessageTableViewCell");
        public OwnerMessageTableViewCell (IntPtr handle) : base (handle)
        {
        }
        public static OwnerMessageTableViewCell Create()
        {
            return (OwnerMessageTableViewCell)Nib.Instantiate(null, null)[0];
        }
        internal void BindData(string message, UIImage avatar)
        {
            messageIcon.Image = avatar;
            workerIcon.Hidden = false;
            messageText.Text = message;
        }
    }

Here xib file content

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="13529" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
    <dependencies>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13527"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <objects>
        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <tableViewCell clipsSubviews="YES" contentMode="scaleToFill" selectionStyle="default" indentationWidth="10" id="252" customClass="OwnerMessageTableViewCell" rowHeight="44">
            <rect key="frame" x="0.0" y="0.0" width="240" height="44"/>
            <autoresizingMask key="autoresizingMask"/>
            <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="252" id="253">
                <rect key="frame" x="0.0" y="0.0" width="240" height="43"/>
                <autoresizingMask key="autoresizingMask"/>
                <subviews>
                    <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" id="280" translatesAutoresizingMaskIntoConstraints="NO" fixedFrame="YES" clipsSubviews="YES" image="Images/worker_icon.png">
                        <rect key="frame" x="190" y="0.0" width="50" height="50"/>
                        <autoresizingMask key="autoresizingMask" flexibleMinX="YES" flexibleMinY="YES"/>
                        <userDefinedRuntimeAttributes>
                            <userDefinedRuntimeAttribute keyPath="layer.cornerRadius" type="number">
                                <real key="value" value="25"/>
                            </userDefinedRuntimeAttribute>
                        </userDefinedRuntimeAttributes>
                    </imageView>
                    <textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" textAlignment="justified" id="307" translatesAutoresizingMaskIntoConstraints="NO" fixedFrame="YES" text="Message Text here..." editable="NO" selectable="NO">
                        <rect key="frame" x="0.0" y="0.0" width="182" height="50"/>
                        <autoresizingMask key="autoresizingMask"/>
                        <color key="backgroundColor" colorSpace="calibratedRGB" red="0.094117647058823528" green="0.31372549019607843" blue="0.63921568627450975" alpha="1"/>
                        <fontDescription key="fontDescription" type="system" pointSize="14"/>
                        <textInputTraits key="textInputTraits" autocapitalizationType="sentences"/>
                        <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
                        <inset key="scrollIndicatorInsets" minX="5" minY="5" maxX="5" maxY="5"/>
                        <userDefinedRuntimeAttributes>
                            <userDefinedRuntimeAttribute keyPath="layer.cornerRadius" type="number">
                                <real key="value" value="15"/>
                            </userDefinedRuntimeAttribute>
                        </userDefinedRuntimeAttributes>
                    </textView>
                    <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" id="384" translatesAutoresizingMaskIntoConstraints="NO" fixedFrame="YES" image="Images/worker_icon.png">
                        <rect key="frame" x="220" y="30" width="20" height="20"/>
                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                    </imageView>
                </subviews>
            </tableViewCellContentView>
            <point key="canvasLocation" x="-132.5" y="-317"/>
            <connections>
                <outlet property="messageIcon" destination="280" id="name-outlet-280"/>
                <outlet property="messageText" destination="307" id="name-outlet-307"/>
                <outlet property="workerIcon" destination="384" id="name-outlet-384"/>
            </connections>
            <color key="backgroundColor" colorSpace="calibratedRGB" red="0.54117647058823526" green="0.54117647058823526" blue="0.54117647058823526" alpha="1"/>
        </tableViewCell>
    </objects>
    <resources>
        <image name="chat_bg.jpg" width="414" height="648"/>
    </resources>
</document>

UPDATED

Here a screens of VS designer window

;

I can't see you set the rowHeight , and how you set the textView in your cell, did you give it a frame or constrain? — ColeX, Dec 07 '17 at 05:52
@ColeXia I added some screens. I think it all about TextView, because I use same model for sliding menu (but use Label instead TextView), and it works without problem. — Adeptus Mechanicus, Dec 07 '17 at 08:13
refer to https://stackoverflow.com/questions/32652612/change-cell-height-by-the-content-of-the-textview-inside-the-cell — ColeX, Dec 07 '17 at 08:29

score 1 · Accepted Answer · answered Dec 07 '17 at 08:06

1

You need to adjust the cell height depending on the text .

There are several solutions in native ios, I recommend you to have a look at Auto-Sizing Row Height.

Steps:

modify the Content Hugging Priority and Content Compression Resistance Priority on the UITextView to operate the cell layout
set Estimated RowHeight to enable the Auto-Resizing.

answered Dec 07 '17 at 08:06

ColeX

14,062
5
43
240

Thank you. That's just what I need. Now all works fine. – Adeptus Mechanicus Dec 07 '17 at 11:27

score 0 · Answer 2 · answered Dec 07 '17 at 06:48

0

Create a uiview that will act as the container for the text view. Add the textview inside the uiview. Then set the colour of the text view to transparent. Set the constraints so that the text view is positioned correctly inside the uiview. Apply a corner radius to the uiview to make it appear like a bubble. You will need to adjust the height of the cell depending on the containing text.

answered Dec 07 '17 at 06:48

Abishek Gokal

186
2
13

I do right like this except last part - I don't know how to adjust the height of the cell depending on the containing text. – Adeptus Mechanicus Dec 07 '17 at 06:53

What is best text container for multiline text in IOS

2 Answers2