Width of UITableView Cell not changed when constraints are applied xcode storyboard

Question

I'm using a custom tableview cell and auto layout but I'm facing the following error, i tried applying different constraints so that the width is stretched but found no success. Could someone please help me on how to adjust the constraints so that the cell fills up the entire width of the screen?

I've tried adding trailing constraints and equal width constraints but didn't get any success

---

Edit 1:

I tried this based on the suggestions and got this

And in the preview it's showing me this

---

Edit 2:

The same error occurs in another layout too

Here it is

The constraints added are

And the preview of smaller screen size

All elements outside of tableview are getting scaled properly, the error is occurring for elements inside tableview, the error being that the width of the cell is not getting adjusted according to the screen size

Could you please help me with this?

---

Edit 3:

Here's the constraints and output with colored background for better understanding, I still found no solution and can't understand why it is not working, could some one please help

Constraints:

Output in preview window:

---

Edit 4:

I created a simple layout to make it easier to solve the problem

And the output

The main problem is that the width is not scaling, can't seem to understand why...

---

Edit 5:

When I did the same layout on iPhone SE then these were the results, I've used the same constraints as above in Edit 4

Constraints don't seem to work inside the table view cell. Could some one tell me how this issue could be resolved? Thanks

Answer 1

From your Edit5, I believe you are want something like this.

Edit5 SE Edit5 XR

These are the screenshots from XR and SE.
1. Let your cell calculate the height automatically. You just need to apply constraints on the items inside the cell.
2. In the UITableViewCell, add a UIView(background color: Yellow) with constraints top,bottom, leading, trailing equal to 0. Give a fixed height to this view if you dont want it to be equal to default row height.
3. In this yellow UIView, add another UIView(background color: Green) with constraints leading=10, trailing =10. Mark this green UIView "center vertically in container" to it's parent i.e yellow UIView. Now, give green UIView equal height constraint to it's parent i.e yellow UIView. You can change it's multiplier according to your needs.

Constraints on Edit5: Edit5 Constraints

Moreover, for your Edit1, according to my understanding, you are not applying Content Hugging priority to Time label. Content hugging priority comes into play when available content is more than the total size of the content. Here, available content = width of the screen and total size of the content = Title+Time. So, you need to set Time's Content Hugging priority high and Title's Content Hugging priority low for Title label to expand on your screen. The one with higher priority gets squeezed i.e hugs tightly it's content.

I have attached the screenshot of the screens XR and SE.
Edit1 SE Edit1 XR

Constraints on Edit1: Edit1 Constr

Answer 2

First take a UIView on tableviewCell and give leading,trailing,Top,Bottom to 0. and then design your upper view. and don't give any leading to Time Label.

Answer 3

If added the views in this hierarchy for the cell, it works fine with all devices.

Please check the constraints added.