Xamarin iOS Center TableViewCell Subview - ios

I´m using the NuGet-Package iCarousel as a Subview in UITableViewCell.
Here is my code where I add the iCarousel object (this code is located in the ViewDidLoad method of my parent ViewController):
InvokeOnMainThread(async() =>
{
items = await ppCtrl.GetAllPerpetrationPartIds(masterProject.Id).ConfigureAwait(false);
if (items != null && items.Any())
{
InvokeOnMainThread(() =>
{
var carousel = new iCarousel
{
Bounds = CarouselViewCell.ContentView.Bounds,
ContentMode = UIViewContentMode.Center,
Type = iCarouselType.CoverFlow2,
Frame = CarouselViewCell.ContentView.Frame,
CenterItemWhenSelected = true,
DataSource = new SimpleDataSource(items, CarouselViewCell.ContentView.Bounds.Width, CarouselViewCell.ContentView.Bounds.Height),
Delegate = new SimpleDelegate(this)
};
NSLayoutConstraint centerX = carousel.CenterXAnchor.ConstraintEqualTo(this.CarouselViewCell.ContentView.CenterXAnchor);
NSLayoutConstraint centerY = carousel.CenterYAnchor.ConstraintEqualTo(this.CarouselViewCell.ContentView.CenterYAnchor);
centerX.SetIdentifier("centerXCostraint");
centerY.SetIdentifier("centerYConstraint");
var centerConstraints = new[] {centerX, centerY };
CarouselViewCell.ContentView.TranslatesAutoresizingMaskIntoConstraints = false;
CarouselViewCell.ContentView.AddConstraints(centerConstraints);
//NSLayoutConstraint.ActivateConstraints(centerConstraints);
CarouselViewCell.ContentView.ContentMode = UIViewContentMode.Center;
CarouselViewCell.ContentView.AddSubview(carousel);
ViewDidLayoutSubviews();
});
}
});
Now I want to vertically and horizontally center the iCarousel. So I added this code:
NSLayoutConstraint centerX = carousel.CenterXAnchor.ConstraintEqualTo(this.CarouselViewCell.ContentView.CenterXAnchor);
NSLayoutConstraint centerY = carousel.CenterYAnchor.ConstraintEqualTo(this.CarouselViewCell.ContentView.CenterYAnchor);
centerX.SetIdentifier("centerXCostraint");
centerY.SetIdentifier("centerYConstraint");
var centerConstraints = new[] {centerX, centerY };
CarouselViewCell.ContentView.TranslatesAutoresizingMaskIntoConstraints = false;
CarouselViewCell.ContentView.AddConstraints(centerConstraints);
My problem is now that the app Crashes at this line:
CarouselViewCell.ContentView.AddConstraints(centerConstraints);
I found in a similar post that you need to add the constraints to the assiciated UIView object. I tried several objects but with no success.

CarouselViewCell.ContentView.AddConstraints(centerConstraints);
This code will crash because we need to add the control first, then set its constraints. Or it will crash. Try to adjust the code's order:
//Let this code just lie after the carousel's construction.
CarouselViewCell.ContentView.AddSubview(carousel);
Also if you want to add the carousel's constraints, you should set the carousel's TranslatesAutoresizingMaskIntoConstraints to false not CarouselViewCell.ContentView.
Moreover depending on your description, I think you want to put an iCarousel on UITableViewCell. This configuration should be set in the Cell class not in the parent ViewController class.

Related

How to render a UIButton in Xamarin.iOS

How do I render a UIButton in Xamarin.iOS? See the current Code for the full list.
This is the code I'm using to create and add the button to the Xamarin.Forms.Platform.iOS.CellTableViewCell cell. I cannot get the button to display anything.
With the use of a Foundation.NSMutableAttributedString, it shows a cut-off section of text in the top left corner, regardless of anything I try (alignments, insets, bounds, various constraints, etc). I'm currently trying things from Xamarin.Forms.Platform.iOS.Renderers.ButtonRenderer, but still can't get anything to display at all, no text, no button, or its outline.
If you could fork the repo and fix it or post the solution here, I would be very grateful.
protected override void SetUpContentView()
{
var insets = new UIEdgeInsets(SVConstants.Cell.PADDING.Top.ToNFloat(), SVConstants.Cell.PADDING.Left.ToNFloat(), SVConstants.Cell.PADDING.Bottom.ToNFloat(), SVConstants.Cell.PADDING.Right.ToNFloat());
_Button = new UIButton(UIButtonType.RoundedRect)
{
AutoresizingMask = UIViewAutoresizing.All,
HorizontalAlignment = UIControlContentHorizontalAlignment.Center,
VerticalAlignment = UIControlContentVerticalAlignment.Center,
ContentEdgeInsets = insets,
// TitleEdgeInsets = insets
};
DefaultFontSize = _Button.TitleLabel.ContentScaleFactor;
DefaultTextColor = _Button.TitleLabel.TextColor;
_Recognizer = new UILongPressGestureRecognizer(RunLong);
_Button.TouchUpInside += OnClick; // https://stackoverflow.com/a/51593238/9530917
_Button.AddGestureRecognizer(_Recognizer); // https://stackoverflow.com/a/6179591/9530917
ContentView.AddSubview(_Button);
_Button.CenterXAnchor.ConstraintEqualTo(ContentView.CenterXAnchor).Active = true;
_Button.CenterYAnchor.ConstraintEqualTo(ContentView.CenterYAnchor).Active = true;
_Button.WidthAnchor.ConstraintEqualTo(ContentView.WidthAnchor).Active = true;
_Button.HeightAnchor.ConstraintEqualTo(ContentView.HeightAnchor).Active = true;
UpdateConstraintsIfNeeded();
LayoutIfNeeded();
}
Found out that you can't subclass it. Any button added to the view must be native (UIButton) or custom rendered, such as Xamarin.Forms.Platform.iOS.ButtonRenderer; It doesn't show up otherwise.

Why isn't cell resizing when content is taller than the EstimatedSize (sizeHint)

I ported a table view implementation from Swift with a variable height cell. But in my Xamarin/ReactiveUI implementation, the cell does not resize when the content grows (i.e. when an optional label is displayed). Please note that the cell does resize to fit in the native Swift implementation.
Most answers online focus on the setting of two properties on UITableView: RowHeight and EstimatedHeight as well as using AutoLayout. My row height is set to UITableView.AutomaticDimension and the EstimatedHeight is set to 44f. I am using autolayout constraints which I will show below. I am using the BindTo extensions in ReactiveTableViewSourceExtensions.
I also tried setting the Text property of the optional label right away to test the theory that setting the property up front would provoke a resize.
Here are the pertinent lines of code:
In a ReactiveViewController<T> ctor:
this.WhenActivated(disposables =>
{
//// ...
// This method automatically wires up the cell reuse key to be the nameof my cell class which is what I want.
this.WhenAnyValue(view => view._cells)
.BindTo<IImportedFileViewModel, ImportedFileCell>(TableView, 44f)
.DisposeWith(disposables);
//// ...
});
Below in ViewDidLoad:
//// ...
TableView = new UITableView
{
RowHeight = UITableView.AutomaticDimension,
EstimatedRowHeight = 44f, // Setting or not setting this doesn't matter
SeparatorStyle = UITableViewCellSeparatorStyle.None,
AllowsSelection = false,
TranslatesAutoresizingMaskIntoConstraints = false,
};
//// ...
In the cell implementation:
ClipsToBounds = true;
PreservesSuperviewLayoutMargins = true;
ContentView.ClipsToBounds = true;
ContentView.PreservesSuperviewLayoutMargins = true;
var stackView = new UIStackView
{
TranslatesAutoresizingMaskIntoConstraints = false,
Axis = UILayoutConstraintAxis.Vertical,
Distribution = UIStackViewDistribution.Fill,
Alignment = UIStackViewAlignment.Fill,
Spacing = 4,
};
var fileStackView = new UIStackView
{
TranslatesAutoresizingMaskIntoConstraints = false,
Axis = UILayoutConstraintAxis.Horizontal,
Distribution = UIStackViewDistribution.Fill,
Alignment = UIStackViewAlignment.Top,
};
FilenameLabel = new UILabel
{
TranslatesAutoresizingMaskIntoConstraints = false,
Font = UIFont.SystemFontOfSize(15f, UIFontWeight.Medium),
};
fileStackView.AddArrangedSubview(FilenameLabel);
StatusImage = new UIImageView()
{
TranslatesAutoresizingMaskIntoConstraints = false,
ContentMode = UIViewContentMode.Center,
};
fileStackView.AddArrangedSubview(StatusImage);
stackView.AddArrangedSubview(fileStackView);
var reasonStackView = new UIStackView
{
TranslatesAutoresizingMaskIntoConstraints = false,
Axis = UILayoutConstraintAxis.Horizontal,
Distribution = UIStackViewDistribution.Fill,
Alignment = UIStackViewAlignment.Top,
};
// This is the optional label that, when its Text property is set, should resize the cell.
FailureReasonLabel = new UILabel
{
TranslatesAutoresizingMaskIntoConstraints = false,
Font = UIFont.SystemFontOfSize(13f, UIFontWeight.Medium),
Lines = 0,
};
reasonStackView.AddArrangedSubview(FailureReasonLabel);
stackView.AddArrangedSubview(reasonStackView);
ContentView.AddSubview(stackView);
stackView.BottomAnchor.ConstraintEqualTo(ContentView.LayoutMarginsGuide.BottomAnchor).Active = true;
stackView.TopAnchor.ConstraintEqualTo(ContentView.LayoutMarginsGuide.TopAnchor).Active = true;
stackView.LeadingAnchor.ConstraintEqualTo(ContentView.LayoutMarginsGuide.LeadingAnchor).Active = true;
stackView.TrailingAnchor.ConstraintEqualTo(ContentView.LayoutMarginsGuide.TrailingAnchor).Active = true;
StatusImage.HeightAnchor.ConstraintEqualTo(16f).Active = true;
StatusImage.WidthAnchor.ConstraintEqualTo(16f).Active = true;
I would be happy to get a solution to the problem using the basic structure I have now but I would also accept an example of some other pattern that someone has used (based on ReactiveUI) to get this working. I would prefer that the solution not be based on old manual resizing patterns like in the pre-iOS 8 days or some sort of hack.
So two things had to be adjusted to fix my issue.
The sizeHint parameter in the ReactiveUI BindTo method does not behave like TableView.EstimatedRowHeight, which is what I was assuming. So I ended up setting it to the auto dimension constant like this:
.BindTo<IImportedFileViewModel, ImportedFileCell>(TableView, (float)UITableView.AutomaticDimension)
I was thinking that I could just update the properties of the view models within the IObservableCollection implementation that is passed in to the BindTo method but it wasn't until I started provoking changed events on the collection itself (the collection that the view is bound to) that the cells started resizing themselves. So since I am using DynamicData as part of ReactiveUI, that meant calling SourceCache.AddOrUpdate(updatedViewModel) whenever I knew that the FailureReasonLabel had been set.
I am also going to try and restore the ReactiveUI tag that was removed from this post because I believe it to be a relevant part of this question and its answer.

Weird glitch of UISwitch related to the UIScrollView on iOS with C#

I have ViewContoller, and it is view hierarchy is the following (Cirrious.FluentLayout Library, but It should be understandable):
_scrollView = new UIScrollView()
{
ShowsVerticalScrollIndicator = false
};
View.Add(_scrollView);
_contentView = new UIView();
_scrollView.Add(_contentView);
View.AddConstraints(
_scrollView.Below(VueNavBar),
_scrollView.AtLeftOf(View),
_scrollView.AtRightOf(View),
_scrollView.AtBottomOf(View)
);
_scrollView.AddConstraints(_contentView.SameFrameAs(_scrollView));
Then I add UISwitch in the following way:
var switch = new UISwitch();
_contentView.Add(switch);
After setting up constraints (I have tried many sets of constraints, many of them are definitely not ambiguous) iOS renders me the following:
It is really weird, but after toggling it changes to:
Maybe someone have any ideas why it happens?
P.S.: I have managed to broke switches on other pages by adding scroll view in the same way, however they have been broken in a differently (Other type of glitch).
I tried the code below and the switch displayed normally.
And there is no need for you to define the width and height of a UISwitch.
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Perform any additional setup after loading the view, typically from a nib.
_scrollView = new UIScrollView()
{
ShowsVerticalScrollIndicator = false,
BackgroundColor = UIColor.Blue
};
View.Add(_scrollView);
this.View.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
View.AddConstraints(
_scrollView.AtTopOf(View,20),
_scrollView.AtLeftOf(View,20),
_scrollView.AtRightOf(View, 20),
_scrollView.AtBottomOf(View, 20)
);
_contentView = new UIView();
_contentView.BackgroundColor = UIColor.Orange;
_scrollView.Add(_contentView);
_scrollView.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
_scrollView.AddConstraints(
_contentView.WithSameTop(_scrollView),
_contentView.WithSameLeft(_scrollView),
_contentView.WithSameWidth(_scrollView),
_contentView.WithSameHeight(_scrollView)
);
var switch1 = new UISwitch();
_contentView.Add(switch1);
_contentView.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
_contentView.AddConstraints(
switch1.AtTopOf(_contentView, 80),
switch1.AtLeftOf(_contentView, 20)
);
}

Autolayouts in UIScrollView using Cirrious.FluentLayouts.Touch

I've to do a ViewController with autolayouts in scrollView, but here is few problems:
public SomeVC() : UIViewController
{
_mainScrollView = new UIScrollView {
ShowsHorizontalScrollIndicator = false,
ShowsVerticalScrollIndicator = true,
BackgroundColor = UIColor.Clear,
ScrollEnabled = true,
AutoresizingMask = UIViewAutoresizing.FlexibleHeight,
TranslatesAutoresizingMaskIntoConstraints = true
};
_userDataTableView = new UITableView(CGRect.Empty, UITableViewStyle.Grouped);
_userDataTableView.LayoutIfNeeded();
_saveButton = new UIButton();
_menuTableView = new UITableView(CGRect.Empty, UITableViewStyle.Grouped);
_menuTableView.LayoutIfNeeded();
_logoutButton = new UIButton();
}
public override void LoadView()
{
base.LoadView();
View = _mainScrollView;
}
public override void ViewDidLoad()
{
base.ViewDidLoad();
Add(_userDataTableView);
Add(_saveButton);
Add(_menuTableView);
Add(_logoutButton);
_mainScrollView.AddConstraints(
_userDataTableView.AtTopOf(View),
_userDataTableView.AtLeftOf(View),
_userDataTableView.AtRightOf(View),
_userDataTableView.Height().EqualTo(_userDataTableView.ContentSize.Height),
_saveButton.Below(_userDataTableView, 20),
_saveButton.AtLeftOf(_mainScrollView, 10),
_saveButton.AtRightOf(_mainScrollView, 10),
_saveButton.Height().EqualTo(44),
_menuTableView.Below(_saveButton, 20),
_menuTableView.AtLeftOf(_mainScrollView),
_menuTableView.AtRightOf(_mainScrollView),
_menuTableView.Height().EqualTo(_menuTableView.ContentSize.Height),
_logoutButton.Below(_menuTableView, 20),
_logoutButton.AtLeftOf(_mainScrollView, 10),
_logoutButton.AtRightOf(_mainScrollView, 10),
_logoutButton.Height().EqualTo(44)
);
_mainScrollView.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
}
In fact, it works, but contents width is about half of screen width, and scrolling not working. How to get it works?
As far as I understand, the problem is - _mainScrollView.ContentSize, but how and where should I set it, when using autolayouts?
If your views doesn't exceed the screen you will not be able to do scroll. if you only have something like this :
// Create containers
contentView = new UIView();
scrollView = new UIScrollView { contentView };
Add(scrollView);
contentView.AddSubviews(logo, user, password, loginButton);
// Auto layout
View.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
View.AddConstraints(scrollView.FullWidthOf(View));
View.AddConstraints(scrollView.FullHeightOf(View));
View.AddConstraints(
contentView.WithSameWidth(View),
contentView.WithSameHeight(View).SetPriority(UILayoutPriority.DefaultLow)
);
scrollView.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
scrollView.AddConstraints(contentView.FullWidthOf(scrollView));
scrollView.AddConstraints(contentView.FullHeightOf(scrollView));
// very important to make scrolling work
var bottomViewConstraint = contentView.Subviews.Last()
.AtBottomOf(contentView).Minus(20);
contentView.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
contentView.AddConstraints(
logo.AtTopOf(contentView),
logo.WithRelativeWidth(contentView, 0.8f),
logo.WithSameCenterX(contentView),
logo.WithRelativeHeight(contentView, 0.3f),
user.Below(logo, 50),
user.WithRelativeWidth(logo, 0.8f),
user.WithSameCenterX(logo),
password.Below(user),
password.WithSameWidth(user),
password.WithSameCenterX(user),
loginButton.Below(password, 50),
loginButton.WithRelativeWidth(password, 0.9f),
loginButton.Height().EqualTo(50),
loginButton.WithSameCenterX(password)
);
contentView.AddConstraints(bottomViewConstraint);
}
I'm using this package and it works perfectly like if I was using a stackLayout inside a scrollview in xamarin.forms I think is the perfect behaviour.
Xamarin.IQKeyboardManager from Nuget
Also, if you want to center your content view inside the scrollview you will need to add this:
public override void ViewWillLayoutSubviews()
{
base.ViewWillLayoutSubviews();
var scrollViewBounds = scrollView.Bounds;
var containerViewBounds = contentView.Bounds;
var scrollViewInsets = UIEdgeInsets.Zero;
scrollViewInsets.Top = scrollViewBounds.Size.Height / 2.0f;
scrollViewInsets.Top -= contentView.Bounds.Size.Height / 2.0f;
scrollViewInsets.Bottom = scrollViewBounds.Size.Height / 2.0f;
scrollViewInsets.Bottom -= contentView.Bounds.Size.Height / 2.0f;
scrollViewInsets.Bottom += 1;
scrollView.ContentInset = scrollViewInsets;
}
And thats all, doesn't matter how your contentView is . You will have a centered contetnview inside a scrollview and a manager to capture the keyboard events and adapt your view to this event .
Solution found:
Firstly:
_userDataTableView.AtLeftOf(View),
_userDataTableView.AtRightOf(View),
is not valid, instead of this, we should use:
_userDataTableView.AtLeftOf(View),
_userDataTableView.WithSameWidth(View),
if we want margin, we just add
_userDataTableView.WithSameWidth(View).Minus(MARGIN)
And the last thing we have to do:
_logoutButton.Height().EqualTo(44),
_logoutButton.Bottom().EqualTo().BottomOf(_mainScrollView).Plus(10)
last line is very important. It says to scrollView right content size.

When I move a view's frame it doesn't move: why?

I am trying to pin a bar (amongst other things) to the bottom of the screen. The code is:
var screen = UIScreen.mainScreen()
var bottom_view = view.viewWithTag(bottom_panel_tag)!
var pad = bottom_view.frame.minX // is 0
var screen_h = screen.bounds.maxY
var screen_w = screen.bounds.maxX
var b = CGRectMake( pad, screen_h - ( pad + bottom_view.frame.height ), screen_w - 2*pad, bottom_view.frame.height )
bottom_view.frame = b
bottom_view.setNeedsDisplay()
This called in viewDidLoad and I have stepped it in the debugger so I know it runs. The view doesn't move (or any other I change). There are no constraints. What am I doing wrong?
Try this:
self.view.removeConstraints(self.view.constraints())
bottom_view.setTranslatesAutoresizingMaskIntoConstraints(true)
add this line in viewDidLoad() before you change its frame.
Explanation: Even if you don't add any Autolayout constraint it will
add at runtime if you create views using Storyboard & if you don't
want to use this solution then you should create view programatically
then it will change frame using your code only.

Resources