How to create news feed UI in swift

Question

I have create a news feed app. I get a news data from server. In my data news available on text OR image with text(same as Facebook feed). I have successfully create before in UITableviewCell images with text content, but I am trying to many time in UITableViewCell text or images with text, Both multiple cell first cell is only text and second cell is image with text. How to create, I know i am not explain proper way but i want to create a same as Facebook feed(TimeLine).

And Which type of array or dictionary create this view. some cells in text view and some cells image and text view. How to create dynamic cell. I am so confused. How to create news feed ui and in which type of array create this news feed. Please help. I am new in IOS. Thank you.

Please find the attachment and see ones. I want to like this.

Only text view

Image and text view

score 0 · Answer 1 · edited May 23 '17 at 12:01

0

Create a custom tableViewCell which will contain textView and imageView according to your requirements. And go through the Link

And for the different type of datatypes you have to create a dictionary(or array of dictionary) of key value pair. Please visit the Link

If you have two types of feeds one with image and another without it, then you may create two different custom cells and use them accordingly.

Another option is to make imageView's height as zero by creating an outlet of constraint.But I won't support this, this should be used sparingly.

It's better to create an array which contains dictionary. where you dont have image just set value of "image" to empty string.

    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)

while placing them in uitableviewcell just check the dictionary value for the key "image". If it's not empty then load the first custom cell(with imageView and textView) else load the second custom cell(without imageView)

edited May 23 '17 at 12:01

Community

1
1

answered Nov 08 '16 at 07:27

kalpa

488
9
16

Thanks for reply, I also create custom tableviewCell, but array of dictionary reload in tableview that time some cells image not available only text available. This condition how will manage image view hide or not – Divank Kumawat Nov 08 '16 at 07:31
It's not compulsory all cells available in image. both condition how will manage – Divank Kumawat Nov 08 '16 at 07:32
1

Put an placeholder image and replace it with your image later after its downloaded. – kalpa Nov 08 '16 at 08:36
NO NO I want to image is not available in my some feeds so that condition how to hide image view – Divank Kumawat Nov 08 '16 at 08:43
I want a facebook timeline view, some cell onle text show and some cell image with text show – Divank Kumawat Nov 08 '16 at 08:44
Suppose i created two custom cell, But how to decide which cell image load and which cell only text load . please explain cellForRowAtIndexPath method and code – Divank Kumawat Nov 08 '16 at 09:10
how to create dictionary this type of view – Divank Kumawat Nov 08 '16 at 09:11
@DivankKumawat added some code snippet. May it will help – kalpa Nov 08 '16 at 09:52

Rikh · Accepted Answer · 2016-11-08T08:52:07.887

0

Add a UILabel and UIImageView as you normally would in a cell. (I would suggest a UILabel instead of a UITextView if you are only displaying the text, correct me if I'm wrong). Setup your constraints for the label to have a leading, top and trailing. Set its numberOfLines to be 0 and content mode to word wrap. Now for your UIImageView, add a top to the UILabel. Leading, trailing and bottom to superView. Now also setup a height constraint for your UIImageView that will be a minimum value. Create an IBOutlet for this constraint inside your cell.

Now, in your UIViewController set the tableView.estimatedRowHeight property and also tableView.rowHeight = UITableViewAutomaticDimensions. Soo now, inside your cellForRowAtIndexPath, whenever your cell contains an image set the height constraint to be the minimum value otherwise set it to 0.

Edit:

-(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;
  }
}

edited Nov 08 '16 at 08:52

answered Nov 08 '16 at 08:20

Rikh

3,710
2
12
33

I understand all points please explain only [cellForRowAtIndexPath] how to image set the height constraint to be the minimum value otherwise set it to 0. Please explain some code – Divank Kumawat Nov 08 '16 at 08:35
I'm familiar with Objective - C, soo I have added that, maybe it will help you figure it out in swift. – Rikh Nov 08 '16 at 08:57
one more thing please solve my last problem. It's a big confusion in my mind. Normally create a array 'var products: [String] = ["ponds", "lakme", "milk"] and image array var images: [String] = ["logoimg.png", "logoimg.png"]. image array object only two. so my question is how to decide image load in which cell. otherwise how to create dictionary in this define pair. the news text of the same image. – Divank Kumawat Nov 08 '16 at 09:03
I think i am not explain proper. please try to understand and please support – Divank Kumawat Nov 08 '16 at 09:04
how to decide which cell image load and which cell only text load – Divank Kumawat Nov 08 '16 at 09:09
Please create a normal array include a text and images OR only text – Divank Kumawat Nov 08 '16 at 09:15
your edited answer CustomModel *model = array[indexPath.row] is a text array and second line NSString *imageUrlString = model.imageUrl in this imageUrl is a array? – Divank Kumawat Nov 08 '16 at 09:22

How to create news feed UI in swift

2 Answers2