如何在swift中创建新闻Feed UI

时间:2016-11-08 07:12:40

标签: ios iphone swift uitableview uicollectionview

我创建了一个新闻Feed应用。我从服务器获取新闻数据。在我的数据新闻可用文本或图像与文本(与Facebook提要相同)。 我已经在UITableviewCell图像中成功创建了带有文本内容的图像,但是我在UITableViewCell文本或带有文本的图像中尝试很多次,多个单元格第一个单元格只是文本而第二个单元格是带有文本的图像。如何创建,我知道我不是解释正确的方式,但我想创建一个与Facebook feed(TimeLine)相同的。

哪种类型的数组或字典创建此视图。文本视图中的一些单元格和一些单元格图像和文本视图。如何创建动态单元格。我感到很困惑。如何创建新闻源ui以及在哪种类型的阵列中创建此新闻源。请帮忙。我是IOS的新手。谢谢。

请找到附件并查看附件。我想要这样。

仅文字视图 enter image description here

图片和文字视图

enter image description here

2 个答案:

答案 0 :(得分:0)

创建一个自定义tableViewCell,它将根据您的要求包含textView和imageView。并浏览Link

对于不同类型的数据类型,您必须创建键值对的字典(或字典数组)。请访问Link

如果您有两种类型的Feed,一种是带有图像,另一种是没有它,那么您可以创建两个不同的自定义单元格并相应地使用它们。

另一个选择是通过创建约束出口使imageView的高度为零。但我不支持这个,这应该谨慎使用。

最好创建一个包含字典的数组。 你没有图像的地方只需将“image”的值设置为空字符串。

    var dict1:[String:String] = ["text":"my text....","image":"imagename.png"]
    var dict2: [String:String] = ["text": "my text...", "image":""]
    var myDictArray = [[String:String]]()
    myDictArray.append(dict1)
    myDictArray.append(dict2)

将它们放在uitableviewcell中时,只需检查键“image”的字典值。如果它不为空,则加载第一个自定义单元格(使用imageView和textView),否则加载第二个自定义单元格(不带imageView)

答案 1 :(得分:0)

像往常一样在单元格中添加UIImageViewUILabel。 (如果您只显示文字,我建议使用UITextView代替numberOfLines,如果我错了,请更正我。设置标签的约束以具有前导,顶部和尾部。将其word wrap设置为0,将内容模式设置为UIImageView。现在为您的UILabel添加一个顶部superViewUIImageView的前导,尾随和底部。现在还为IBOutlet设置一个最小值的高度约束。在单元格内为此约束创建UIViewController

现在,在tableView.estimatedRowHeight设置tableView.rowHeight = UITableViewAutomaticDimensions属性以及cellForRowAtIndexPath。现在,在-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ CustomCell *cell = [tableView dequeueReusableCellWithReuseIdentifier:@"cell"]; //select your model from the array corresponding to your indexPath.row CustomModel *model = array[indexPath.row] // I am assuming you are fetching image from server NSString *imageUrlString = model.imageUrl //check your model if it contains an image if(imageUrlString){ cell.imageHeightConstraint = 250.0f; }else{ cell.imageHeightConstraint = 0.0f; } } 内,每当您的单元格包含图像时,将高度约束设置为最小值,否则将其设置为0.

编辑:

const PatientCard = (props) => {
        return (
            <div className={props.cardContainer}>
                {props.item.result.map( id =>
                    <div className={props.itemClass} value={id} key={id}>
                        <h5>{props.item.entities.artboards[id].name}</h5>

                        <span className={props.lastArtClass}>
                            {props.item.entities.artboards[id].last_art !== null &&
                            <span>
                                <span>{props.item.entities.artists[props.item.entities.lastArt[props.item.entities.artboards[id].last_art].performed_by].name}, </span>
                                <FormattedRelative value={props.item.entities.lastArt[props.item.entities.artboards[id].last_art].date} />
                            </span>
                            }
                            {props.item.entities.artboards[id].last_art === null &&
                            <p>N/A</p>
                            }
                        </span>

                        {props.item.entities.artboards[id].collaborated_by.map( id =>
                            <Avatar key={id} name={props.item.entities.artists[id].name} size={40} round={true}/>
                        )}
                        <button className="btn btn-primary" style={{cursor: 'pointer'}} onClick={() => {
                            props.onSubmit()
                        }
                        }>Details</button>
                    </div>
                )}
            </div>
        );
    };