SwiftUIでさらに表示するのUIを作る

# はじめに
SwiftUIで以下のようなX(Twitter)とかでよくある一定の文字数を超えると末尾に「... さらに表示する」と表示され一部文字が省略されるUIを実装してみようと思ったのですが、これが結構難しかったので実装方法を記事にしました。

省略時のUI
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/800f01de-5a2d-3ed4-9ed1-05bbe1219597.png)

さらに表示押下後のUI
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/e034724d-4027-48b0-7012-13a127e0c666.png)

# 実装方法
今回実装した方法としては、flowlayout(※)を作成して、文字を一文字のTextに分解してレイアウトしていき、最大文字数に達したら「... さらに表示」のボタンを配置するというものです。

※flowlayoutとは
>FlowLayout は、左上から右下に向けて、部品を流し込むようにレイアウトします。HTML で文字や画像を流し込むのに似ています。

https://www.tohoho-web.com/java/layout.htm

# 実装内容

### 1. flowlayoutの実装
```swift
struct FlowLayout: Layout {
    
    var alignment: Alignment = .center
    var spacing: CGFloat?
    
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache _: inout Void) -> CGSize {
        
        let result = FlowResult(
            in: proposal.replacingUnspecifiedDimensions().width,
            subviews: subviews,
            spacing: spacing
        )
        
        return result.bounds
    }
    
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache _: inout Void) {
        
        let result = FlowResult(
            in: proposal.replacingUnspecifiedDimensions().width,
            subviews: subviews,
            spacing: spacing
        )
        
        for row in result.rows {
            
            let rowXOffset = (bounds.width - row.frame.width) * alignment.horizontal.percent
            for index in row.range {
                
                let xPos = rowXOffset + row.frame.minX + row.xOffsets[index - row.range.lowerBound] + bounds.minX
                let rowYAlignment = (row.frame.height - subviews[index].sizeThatFits(.unspecified).height) *
                alignment.vertical.percent
                let yPos = row.frame.minY + rowYAlignment + bounds.minY
                subviews[index].place(at: CGPoint(x: xPos, y: yPos), anchor: .topLeading, proposal: .unspecified)
            }
        }
    }
    
    struct FlowResult {
        
        var bounds = CGSize.zero
        var rows = [Row]()
        
        struct Row {
            
            var range: Range<Int>
            var xOffsets: [Double]
            var frame: CGRect
        }
        
        init(in maxPossibleWidth: Double, subviews: Subviews, spacing: CGFloat?) {
            
            var itemsInRow = 0
            var remainingWidth = maxPossibleWidth.isFinite ? maxPossibleWidth : .greatestFiniteMagnitude
            var rowMinY = 0.0
            var rowHeight = 0.0
            var xOffsets: [Double] = []
            for (index, subview) in zip(subviews.indices, subviews) {
                
                let idealSize = subview.sizeThatFits(.unspecified)
                if index != 0 && widthInRow(index: index, idealWidth: idealSize.width) > remainingWidth {
                    
                    // Finish the current row without this subview.
                    finalizeRow(index: max(index - 1, 0))
                }
                addToRow(index: index, idealSize: idealSize)
                
                if index == subviews.count - 1 {
                    
                    // Finish this row; it's either full or we're on the last view anyway.
                    finalizeRow(index: index)
                }
            }
            
            func spacingBefore(index: Int) -> Double {
                
                guard itemsInRow > 0 else { return 0 }
                return spacing ?? subviews[index - 1].spacing.distance(to: subviews[index].spacing, along: .horizontal)
            }
            
            func widthInRow(index: Int, idealWidth: Double) -> Double {
                
                idealWidth + spacingBefore(index: index)
            }
            
            func addToRow(index: Int, idealSize: CGSize) {
                
                let width = widthInRow(index: index, idealWidth: idealSize.width)
                
                xOffsets.append(maxPossibleWidth - remainingWidth + spacingBefore(index: index))
                // Allocate width to this item (and spacing).
                remainingWidth -= width
                // Ensure the row height is as tall as the tallest item.
                rowHeight = max(rowHeight, idealSize.height)
                // Can fit in this row, add it.
                itemsInRow += 1
            }
            
            func finalizeRow(index: Int) {
                
                let rowWidth = maxPossibleWidth - remainingWidth
                rows.append(
                    Row(range: index - max(itemsInRow - 1, 0) ..< index + 1,
                        xOffsets: xOffsets,
                        frame: CGRect(x: 0, y: rowMinY, width: rowWidth, height: rowHeight))
                )
                bounds.width = max(bounds.width, rowWidth)
                let ySpacing = spacing ?? ViewSpacing().distance(to: ViewSpacing(), along: .vertical)
                bounds.height += rowHeight + (rows.count > 1 ? ySpacing : 0)
                rowMinY += rowHeight + ySpacing
                itemsInRow = 0
                rowHeight = 0
                xOffsets.removeAll()
                remainingWidth = maxPossibleWidth
            }
        }
    }
}

private extension HorizontalAlignment {
    
    var percent: Double {
        
        switch self {
            
        case .leading:
            return 0
            
        case .trailing:
            return 1
            
        default:
            return 0.5
        }
    }
}

private extension VerticalAlignment {
    
    var percent: Double {
        
        switch self {
            
        case .top:
            return 0
            
        case .bottom:
            return 1
            
        default:
            return 0.5
        }
    }
}
```

こちらはAppleのサンプルアプリの実装を参考にしたものです。

https://developer.apple.com/documentation/swiftui/food_truck_building_a_swiftui_multiplatform_app/

この実装の詳細な説明に入ると、主題から逸れそうなのでここでは詳細な説明は省略します！(カスタムLayoutについては別記事として作りたい！)

とりあえず上記実装で、以下のようなflowlayoutが組めるようになったと思っていただければ良いと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/942e3431-51fa-b600-03ca-7617553a8535.png)


```swift
#Preview {
    FlowLayout {
        ForEach((1...10).map { _ in Int.random(in: 1...10) }, id: \.self) { num in
            Text(String(num))
                .frame(width: 30 * CGFloat(num))
                .background(Color(Color(red: CGFloat(num) * 0.1, green: CGFloat(num) * 0.02, blue: CGFloat(num) * 0.3)))
                .clipShape(RoundedRectangle(cornerRadius: 10))
        }
    }
}
```

### 文字を分解してflowlayoutに詰めていく実装
まずは実装を全て載せておきます。

```swift
struct OmittableMessageView: View {
    
    // MARK: - private property
    
    @State private var isShowing: Bool
    
    private let text: String
    private let fontSize: CGFloat
    private let maxLength: Int
    
    private static let threePointLeader = "..."
    
    // MARK: - initialize method
    
    init(text: String,
         fontSize: CGFloat = 14,
         maxLength: Int = 200) {
        
        let isShowing = text.count <= maxLength
        
        self.text = text
        
        self.fontSize = fontSize
        self.maxLength = maxLength
        self.isShowing = isShowing
    }
    
    // MARK: - view build definition
    
    var body: some View {
        if isShowing {
            Text(text)
                .font(.system(size: fontSize))
                .multilineTextAlignment(.leading)
                .frame(maxWidth: .infinity, alignment: .leading)
        }
        else {
            VStack(alignment: .leading) {
                ForEach(getSeparateMessageByNewLine(text: getMaxLengthText(text: text, maxLength: maxLength)), id: \.self) { lineText in
                    FlowLayout(alignment: .leading, spacing: .zero) {
                        let separateChars = getSeparateChar(text: lineText)
                        ForEach(separateChars, id: \.self) {
                            Text($0)
                                .font(.system(size: fontSize))
                        }
                        if let lastString = separateChars.last,
                           lastString == Self.threePointLeader {
                            createShowMoreButton()
                        }
                    }
                }
            }
            .frame(maxWidth: .infinity)
        }
    }
}

private extension OmittableMessageView {
    
    func createShowMoreButton() -> some View {
        Button {
            isShowing.toggle()
        } label: {
            Text("さらに表示")
                .font(.system(size: fontSize))
        }
        .frameButtonStyle(backgroundColor: .clear,
                          frameWidth: .zero)
    }
}

// MARK: - utility

private extension OmittableMessageView {
    
    func getMaxLengthText(text: String, maxLength: Int) -> String {
        
        return Array(text).prefix(maxLength).map { String($0) }.joined() + Self.threePointLeader
    }
    
    func getSeparateMessageByNewLine(text: String) -> [String] {
        
        return text.components(separatedBy: "\n")
    }
    
    func getSeparateChar(text: String) -> [String] {
        
        var arrayText = Array(text).map { String($0) }
        if text.suffix(Self.threePointLeader.count) == Self.threePointLeader {
            
            // 3点リーダーが末尾にある場合は、文字の配列で分割されている
            // "."を"..."に結合させて設定する
            arrayText = arrayText.dropLast(Self.threePointLeader.count)
            arrayText.append(Self.threePointLeader)
        }
        return arrayText
    }
}

```

#### 以降が実装の詳細です

まずテキストを1文字ずつ分解してTextを生成する前に、元テキストの改行を表現するために改行ごとの配列に変換します。
その配列をForEachで回してVStackで囲み改行を表現します。

```swift
var body: some View {
        VStack(alignment: .leading) {
            // 改行ごとの文字列でForEachを回す
            ForEach(getSeparateMessageByNewLine(text: getMaxLengthText(text: text, maxLength: maxLength)), id: \.self) { lineText in
                ...
            }
        }
        .frame(maxWidth: .infinity)
}
    
func getSeparateMessageByNewLine(text: String) -> [String] {
        
    return text.components(separatedBy: "\n")
}
```

また`getMaxLengthText`では最大文字数を超えた文字を消して末尾に3点リーダーを付与しています。

```swift
func getMaxLengthText(text: String, maxLength: Int) -> String {

    // 前から最大文字数分取得して、３点リーダーを末尾に付与する
    return Array(text).prefix(maxLength).map { String($0) }.joined() + Self.threePointLeader
}
```

ここまでで改行ごとのテキスト取得はできたので、これを一文字ずつに分解してTextとして表示していきます。
そして省略されている行の末尾にさらに表示ボタンを設定します。

```swift
var body: some View {
    VStack(alignment: .leading) {
        ForEach(getSeparateMessageByNewLine(text: getMaxLengthText(text: text, maxLength: maxLength)), id: \.self) { lineText in
            let separateChars = getSeparateChar(text: lineText)
            ForEach(separateChars, id: \.self) { // 一文字に分割した文字をTextにする
                Text($0)
                    .font(.system(size: fontSize))
            }
            if let lastString = separateChars.last,
               lastString == Self.threePointLeader {
                createShowMoreButton() // 現在の行の最後に"..."があればさらに表示ボタンを配置する
            }
        }
    }
    .frame(maxWidth: .infinity)
}

// 一文字ずつの配列に変換する
func getSeparateChar(text: String) -> [String] {
    
    var arrayText = Array(text).map { String($0) }
    if text.suffix(Self.threePointLeader.count) == Self.threePointLeader {
        
        // 3点リーダーが末尾にある場合は、文字の配列で分割されている
        // "."を"..."に結合させて設定する
        arrayText = arrayText.dropLast(Self.threePointLeader.count)
        arrayText.append(Self.threePointLeader)
    }
    return arrayText
}
```

ここまでで一文字毎のTextを表示することができたので、作成したflowlayoutでTextを囲んでやればさらに表示するのUIが完成です。

```swift
var body: some View {
    VStack(alignment: .leading) {
        ForEach(getSeparateMessageByNewLine(text: getMaxLengthText(text: text, maxLength: maxLength)), id: \.self) { lineText in
            FlowLayout(alignment: .leading, spacing: .zero) { // 一文字毎のTextをflowlayoutで表示する
                let separateChars = getSeparateChar(text: lineText)
                ForEach(separateChars, id: \.self) {
                    Text($0)
                        .font(.system(size: fontSize))
                }
                if let lastString = separateChars.last,
                   lastString == Self.threePointLeader {
                    createShowMoreButton()
                }
            }
        }
    }
    .frame(maxWidth: .infinity)
}
```

最後に`isShowing`の内容で省略するしないを切り替えるようにすれば完成です。

```swift
var body: some View {
        if isShowing {
            Text(text)
                .font(.system(size: fontSize))
                .multilineTextAlignment(.leading)
                .frame(maxWidth: .infinity, alignment: .leading)
        }
        else {
            VStack(alignment: .leading) {
                ForEach(getSeparateMessageByNewLine(text: getMaxLengthText(text: text, maxLength: maxLength)), id: \.self) { lineText in
                    FlowLayout(alignment: .leading, spacing: .zero) {
                        let separateChars = getSeparateChar(text: lineText)
                        ForEach(separateChars, id: \.self) {
                            Text($0)
                                .font(.system(size: fontSize))
                        }
                        if let lastString = separateChars.last,
                           lastString == Self.threePointLeader {
                            createShowMoreButton()
                        }
                    }
                }
            }
            .frame(maxWidth: .infinity)
        }
    }
```

以上で、さらに表示するのUIが完成しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/6c7498a7-f0de-ac38-9522-b321ad905a70.png)

```swift
#Preview {
    VStack {
        Text("Hello")
        OmittableMessageView(text: "lsjfljslfjsiejflsjelfiasjfsfsd"
                    + "\n"
                    + "fsfsfsfsefsefasefasefasefsfsfefasefasefaselsaleifjlsesjeflesjlsijfseljfsifjelsjilsjfjelsijfselfijsliefjlsejjl"
                    + "\n"
                    + "jslejfiljsefljaslejfilsjefjlasjefljsleifjlsjflaisjfleijsaeljflsiejflisjelfiajslefjlasjeflsiejflsajeflijselfjilasejfliajseljflisejflasjlefjlsejfi")
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
}
```

# おわり
振り返ってみると結構ごちゃごちゃした実装になってしまいました。
もっとスマートに実装できるのではという思いもあるので、もし他にいい方法ご存知の方はコメントいただけますと幸いです。