自動流動的佈局，嵌入式控制和自動文本斷

Question

我想創造我的iPhone和iPad應用程序的佈局自動重排基於動態數據。 更具體些，這意味着我有幾個對象。每個對象都有一個特定的類型和相關的數據。 數據是應該顯示什麼，類型決定了它應該如何顯示。一種類型可能是文本，這意味着它應該顯示爲簡單的文本而沒有交互的可能性。另一種類型可能是日期，這意味着它應該顯示爲一個控件，用戶可以在點擊時選擇一個日期。

現在，問題是，我想要顯示的對象是在數量和相關聯的數據的動態，所以無法在靜態位置定位控制。

This jsfiddle顯示我的意思是什麼樣的佈局。根據div的寬度，內容會自動重新流動，日期輸入控件將顯示在文本的中間。

我找不到任何支持這種場景的控件 - 那麼我該如何去實現這個？

Answer 1

Here是使用CoreText解決部分類似問題的示例。也許這會讓你指向這個方向。

- (CFArrayRef)copyRectangularPathsForPath:(CGPathRef)path 
            height:(CGFloat)height { 
    CFMutableArrayRef paths = CFArrayCreateMutable(NULL, 0, 
                &kCFTypeArrayCallBacks); 

    // First, check if we're a rectangle. If so, we can skip the hard parts. 
    CGRect rect; 
    if (CGPathIsRect(path, &rect)) { 
     CFArrayAppendValue(paths, path); 
    } 
    else { 
     // Build up the boxes one line at a time. If two boxes have the 
     // same width and offset, then merge them. 
     CGRect boundingBox = CGPathGetPathBoundingBox(path); 
     CGRect frameRect = CGRectZero; 
     for (CGFloat y = CGRectGetMaxY(boundingBox) - height; 
        y > height; y -= height) { 
      CGRect lineRect = 
        CGRectMake(CGRectGetMinX(boundingBox), y, 
           CGRectGetWidth(boundingBox), height); 
      CGContextAddRect(UIGraphicsGetCurrentContext(), lineRect); 

      // Do the math with full precision so we don't drift, 
      // but do final render on pixel boundaries. 
      lineRect = CGRectIntegral(clipRectToPath(lineRect, path)); 
      CGContextAddRect(UIGraphicsGetCurrentContext(), lineRect); 

      if (! CGRectIsEmpty(lineRect)) { 
       if (CGRectIsEmpty(frameRect)) { 
        frameRect = lineRect; 
       } 
       else if (frameRect.origin.x == lineRect.origin.x && 
         frameRect.size.width == lineRect.size.width) { 
        frameRect = CGRectMake(lineRect.origin.x,                                  lineRect.origin.y,                                  lineRect.size.width, 
           CGRectGetMaxY(frameRect) - CGRectGetMinY(lineRect)); 
       } 
       else { 
        CGMutablePathRef framePath = 
             CGPathCreateMutable(); 
        CGPathAddRect(framePath, NULL, frameRect); 
        CFArrayAppendValue(paths, framePath); 

        CFRelease(framePath); 
        frameRect = lineRect; 
       } 
      } 
     } 

     if (! CGRectIsEmpty(frameRect)) { 
      CGMutablePathRef framePath = CGPathCreateMutable(); 
      CGPathAddRect(framePath, NULL, frameRect); 
      CFArrayAppendValue(paths, framePath); 
      CFRelease(framePath); 
     }   
    } 

    return paths; 
}