Modal View Popover: Always full screen? - xamarin.ios

I've created a view. and show from bottom with height 200
I'm using the following code to present it (in a touch event):
var pvc = Storyboard.InstantiateViewController("demoStoryboard") as ModalViewController;
pvc.View.Frame = new CGRect(0, this.View.Frame.Height - 200, this.View.Frame.Width, 200);
pvc.ModalPresentationStyle = UIModalPresentationStyle.Custom;
pvc.ModalTransitionStyle = UIModalTransitionStyle.CoverVertical;
this.PresentViewController(pvc, true, null);
When it's presented, though, it always fills the screen, instead of having a height of just 200.
I've tried changing the ModalPresentationStyle property, but it makes no difference.
how can i fix it?

Even you set the Frame for the View of ModalViewController as,
pvc.View.Frame = new CGRect(0, this.View.Frame.Height - 200, this.View.Frame.Width, 200);
Inside ModalViewController, between ViewWillAppear and ViewDidAppear methods, the Frame property value is changing. It's because ViewWillLayoutSubviews method is called in between ViewWillAppear and ViewDidAppear methods. This method, ViewWillLayoutSubviews is where the Frame property is actually been set. It sets the default value for the Frame property, that is the full screen size. So this is the method where you should set your custom Frame property value so that the default value is overridden.
That is, inside ModalViewController,
public override void ViewWillLayoutSubviews()
{
base.ViewWillLayoutSubviews();
View.Frame = new CGRect(0, View.Frame.Height - 200, View.Frame.Width, 200);
}
And you can avoid setting the Frame property value in the parent view controller. That is,
pvc.View.Frame = new CGRect(0, this.View.Frame.Height - 200, this.View.Frame.Width, 200);
can be removed.

Related

Does the CTab_Ctrl class require an additional property to draw in its "window"?

I've got a "default looking" dialog box like the following:
And I'm attempting to modify the tabs and insert a RichEditCtrl in the first tab.
InitCommonControlsEx;
CWnd* pTab = GetDlgItem(IDC_TAB1);
if (pTab) {
CRect rect;
m_TabCtrl = (CTabCtrl*)pTab;
m_TabCtrl->GetClientRect(&rect);
m_TabCtrl->InsertItem(0, "Stats");
m_TabCtrl->InsertItem(1, "Settings");
BOOL getRect = m_TabCtrl->GetItemRect(0, &rect);
if (!m_richEditCtrl.Create(WS_VISIBLE | ES_READONLY | ES_MULTILINE | ES_AUTOHSCROLL | WS_HSCROLL | ES_AUTOVSCROLL | WS_VSCROLL, rect, m_TabCtrl, 0))
return FALSE;
m_font.CreateFont(-11, 0, 0, 0, FW_REGULAR, 0, 0, 0, BALTIC_CHARSET, 0, 0, 0, 0, "Courier New");
m_richEditCtrl.SetFont(&m_font);
}
The sample I'm modifying previously had only used the RichTextCtrl and "created" it inside of a "placeholder" text box. It worked great, but I wanted to shove that RichTextCtrl into a tab, and create another tab to display some data. The problem is that I now just get 2 blank tabs. I know that the parent dialog settings "Clip Children" and "Clip Siblings" may matter, but I'm not sure which if I need, if either. I also know that my RichEditCtrl still exists because I'm still sending data to it, but it's certainly not displaying.
This piece of my program isn't even really that urgent, and I am just trying to get this to work on principal at this point...
Tab Controls create the illusion, that the dividers and the display area were part of the same control. That's not the case. The tab control is really just the labels, plus the placeholder display area. Bringing the display area's contents to live is the responsibility of the application.
In general, the following steps are required to implement a fully functional tab control:
Create the tab control plus labels.
Create the display area's child controls. It is common to place the controls comprising a single "page" in a dialog.
Subscribe to the TCN_SELCHANGE message, and dynamically update the visibility of the controls, i.e. hide all controls that aren't part of the current "page" and show all controls that are. Placing all controls for a "page" inside a dialog makes this easier by only requiring to toggle the visibility of the dialogs.
This is a rough overview of how tab controls work. Given your code, there are some things you need to change. Specifically, the following need to be taken care of:
The tab control referenced by IDC_TAB1 needs to have the WS_CLIPCHILDREN style, so that the display area doesn't cover the child controls.
m_richEditCtrl needs to be created with the WS_CHILD style.
Calculate the size of the display area using CTabCtrl::AdjustRect and use that to size the m_richEditCtrl to fill the entire display area (if that is what you want).
With those changes you should see a tab control whose display area is filled by a Rich Edit control. Switching between tabs doesn't change the contents of the display area just yet. That's something you'll need to implement as required by your application.
The following code sample is based on a wizard-generated dialog-based application named MfcTabCtrl. The generated dialog resource (IDD_MFCTABCTRL_DIALOG) had all content removed, leaving just a blank dialog template.
Likewise, the main dialog implementation had most of its functionality stripped, leaving just the vital parts. This is the MfcTabCtrlDlg.h header:
#pragma once
#include "afxdialogex.h"
// Control identifiers
UINT constexpr IDC_TAB{ 100 };
UINT constexpr IDC_RICH_EDIT{ 101 };
class CMfcTabCtrlDlg : public CDialogEx
{
public:
CMfcTabCtrlDlg(CWnd* pParent = nullptr);
protected:
afx_msg void OnSize(UINT nType, int cx, int cy);
afx_msg void OnTabChanged(NMHDR* pNMHDR, LRESULT* pResult);
// Convenience implementation to calculate the display area
RECT GetDisplayArea();
virtual BOOL OnInitDialog();
DECLARE_MESSAGE_MAP()
private:
CTabCtrl m_TabCtrl{};
CRichEditCtrl m_richEditCtrl{};
};
The implementation file MfcTabCtrlDlg.cpp isn't very extensive either:
#include "MfcTabCtrlDlg.h"
CMfcTabCtrlDlg::CMfcTabCtrlDlg(CWnd* pParent /*=nullptr*/)
: CDialogEx(IDD_MFCTABCTRL_DIALOG, pParent)
{
}
void CMfcTabCtrlDlg::OnSize(UINT nType, int cx, int cy)
{
CDialogEx::OnSize(nType, cx, cy);
// Resize tab control only after it has been created
if (IsWindow(m_TabCtrl)) {
m_TabCtrl.MoveWindow(0, 0, cx, cy);
// Determine display area
auto const disp_area{GetDisplayArea()};
// Resize child control(s) to cover entire display area
if (!IsRectEmpty(&disp_area) && IsWindow(m_richEditCtrl)) {
m_richEditCtrl.MoveWindow(&disp_area);
}
};
}
void CMfcTabCtrlDlg::OnTabChanged(NMHDR* /*pNMHDR*/, LRESULT* pResult)
{
auto const cur_sel{ m_TabCtrl.GetCurSel() };
switch (cur_sel) {
// First tab selected
case 0:
m_richEditCtrl.ShowWindow(SW_SHOW);
break;
// Second tab selected
case 1:
m_richEditCtrl.ShowWindow(SW_HIDE);
break;
}
// Allow other subscribers to handle this message
*pResult = FALSE;
}
// Returns the display area in client coordinates relative to the dialog.
// Returns an empty rectangle on failure.
RECT CMfcTabCtrlDlg::GetDisplayArea()
{
RECT disp_area{};
if (IsWindow(m_TabCtrl)) {
m_TabCtrl.GetWindowRect(&disp_area);
m_TabCtrl.AdjustRect(FALSE, &disp_area);
this->ScreenToClient(&disp_area);
}
return disp_area;
}
// The message map registers only required messages
BEGIN_MESSAGE_MAP(CMfcTabCtrlDlg, CDialogEx)
ON_WM_SIZE()
ON_NOTIFY(TCN_SELCHANGE, IDC_TAB, &CMfcTabCtrlDlg::OnTabChanged)
END_MESSAGE_MAP()
BOOL CMfcTabCtrlDlg::OnInitDialog()
{
CDialogEx::OnInitDialog();
// Set up tab control to cover entire client area
RECT client{};
GetClientRect(&client);
m_TabCtrl.Create(WS_VISIBLE | WS_CHILD | WS_CLIPCHILDREN, client, this, IDC_TAB);
m_TabCtrl.InsertItem(0, L"Stats");
m_TabCtrl.InsertItem(1, L"Settings");
// Set up rich edit control.
// The WS_BORDER style is set strictly to make it visible.
auto const disp_area{ GetDisplayArea() };
m_richEditCtrl.Create(WS_BORDER | WS_VISIBLE | WS_CHILD,
disp_area, &m_TabCtrl, IDC_RICH_EDIT);
return TRUE; // Let the system manage focus for this dialog
}
The result is a dialog holding a tab control with two labels. Visibility of the contained rich edit control is toggled in the TCN_SELCHANGE notification handler, showing it only when the first tab is selected. A more complex GUI would update the visibility of all controls based on the currently selected tab here as well.
Note that the controls inside the tab control's display area are never destroyed during the dialog's life time. This is usually desirable to persist user data even when switching between tabs. If necessary it is also possible to destroy and (re-)create some or all of the child controls when switching tabs.

How do I change the background color of a tabbed page in Xamarin iOS?

I need to change the background color of the currently tabbed page in my UITabBarController. I've searched through every stackoverflow post I could find but nothing worked for me. I thought there would be something like UITabBar.Appearance.SelectedImageTintColor, just for the background color but it doesn't seem so.
For example, I want to change the color of that part when I am on the right tab:
Does someone know how to do that?
You could invoked the following code in your UITabBarController
public xxxTabBarController()
{
//...set ViewControllers
this.TabBar.BarTintColor = UIColor.Red;
}
Update
//3.0 here is if you have three child page in tab , set it as the current value in your project
//
var size = new CGSize(TabBar.Frame.Width / 3.0, IsFullScreen());
this.TabBar.SelectionIndicatorImage = ImageWithColor(size,UIColor.Green);
double IsFullScreen()
{
double height = 64;
if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0))
{
if (UIApplication.SharedApplication.Delegate.GetWindow().SafeAreaInsets.Bottom > 0.0)
{
height = 84;
}
}
return height;
}
UIImage ImageWithColor(CGSize size, UIColor color)
{
var rect = new CGRect(0, 0, size.Width, size.Height);
UIGraphics.BeginImageContextWithOptions(size, false, 0);
CGContext context = UIGraphics.GetCurrentContext();
context.SetFillColor(color.CGColor);
context.FillRect(rect);
UIImage image = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
return image;
}
The trick is to use the SelectionIndicatorImage Property of the UITabBar and generate a completely filled image with your desired color using the following method:
private UIImage ImageWithColor(CGSize size)
{
CGRect rect = new CGRect(0, 0, size.Width, size.Height);
UIGraphics.BeginImageContext(size);
using (CGContext context = UIGraphics.GetCurrentContext())
{
context.SetFillColor(UIColor.Green); //change color if necessary
context.FillRect(rect);
}
UIImage image = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
return image;
}
To initialize everything we override ViewWillLayoutSubviews() like this:
public override void ViewWillLayoutSubviews()
{
base.ViewWillLayoutSubviews();
// The tabbar height will always be 49 unless we force it to reevaluate it's size on runtime ...
myTabBar.InvalidateIntrinsicContentSize();
double height = myTabBar.Frame.Height;
CGSize size = new CGSize(new nfloat(myTabBar.Frame.Width / myTabBar.Items.Length, height));
// Now get our all-green image...
UIImage image = ImageWithColor(size);
// And set it as the selection indicator
myTabBar.SelectionIndicatorImage = image;
}
As mentioned in this article (google translating it step by step when necessary lol) calling InvalidateIntrinsicContentSize() will force the UITabBar to reevaluate it's size and will get you the actual runtime height of the tab bar (instead of the constant 49 height value from XCode).

Xamarin iOS : Center UILabel inside UICollectionView Header created programmatically

The solution for centering any subview within a parent is usually simple, however, it doesn't seem to work in my case.
I'm working with a UICollectionView and have added a Header class programmatically. I have this constructor, where I also try to center the label within the screen:
[Export("initWithFrame:")]
public Header(System.Drawing.RectangleF frame) : base(frame)
{
label = new UILabel
{
Frame = new System.Drawing.RectangleF(frame.Size.Width / 2, 50, 200, 50),
BackgroundColor = UIColor.Clear,
TextColor = UIColor.White,
Font = UIFont.FromName("HelveticaNeueLTStd-ThCn", 35f),
Text = DateTime.Now.ToString("Y")
};
AddSubview(label);
}
And I initialize the class inside the UICollectionViewSource 's constructor like this:
public MyCollectionViewDataSource(MainController mainController, DateTime currentDate)
{
try
{
controller = mainController;
new Header(new RectangleF(0, 0, (float)mainController.View.Frame.Size.Width, 200));
}
catch (Exception ex)
{
Console.WriteLine(ex.Message + ex.StackTrace);
}
}
What exactly am I missing because this usually works in other instances but seems to fail here?
This is what it looks like :
I found an explanation here iOS Layout Gotchas by Adam Kemp which helped me resolve this issue.
The first solution
One very common mistake I made was adding the layout definition code in the constructor, instead of doing it in the rightful place : the LayoutSubviews override in this case.
Giving the label the frame size in the constructor assumes a static size set at the time of construction, which may later change depending on the screen size.
The second solution
He explains that :
Frame sets the position of a view within its parent while Bounds is in the coordinate system of the view itself (not its parent).
So, to center the UILabel, I used bounds and center together and this worked for me.
[Export("initWithFrame:")]
public Header(CGRect bounds) : base(bounds)
{
label = new UILabel
{
BackgroundColor = UIColor.Clear,
TextColor = UIColor.White,
Font = UIFont.FromName("HelveticaNeueLTStd-ThCn", 35f),
Text = DateTime.Now.ToString("Y"),
TextAlignment = UITextAlignment.Center
};
rectangle = bounds;
AddSubview(label);
}
public override void LayoutSubviews()
{
base.LayoutSubviews();
label.Bounds = new CGRect (rectangle.Size.Width / 2, 50, 200, 50);
label.Center = new PointF((float)rectangle.Size.Width/2,50);
}

WKWebView not rendering correctly in iOS 10

I have WKWebView inside the UITableViewCell. The web view load request and then after finished loading, I'll resize the web view height to be equal to its content height, then adjust table view cell height to fit accordingly.
What happened was the web view only displays the area that fit the screen size. When I scroll down, everything is white. But I see that the web view rendered with correct height, tap and hold on the white area on the web view still see selection. Zooming with pinch makes the web view area that displaying on the screen visible, but other areas sometimes become white.
It works fine on iOS 8 and 9. I have created a sample project to demonstrate this behaviour here:
https://github.com/pawin/strange-wkwebview
Open Radar:
https://openradar.appspot.com/radar?id=4944718286815232
Update: This issue is resolved in iOS11
You need to force the WKWebView to layout while your UITableView scrolls.
// in the UITableViewDelegate
func scrollViewDidScroll(scrollView: UIScrollView) {
if let tableView = scrollView as? UITableView {
for cell in tableView.visibleCells {
guard let cell = cell as? MyCustomCellClass else { continue }
cell.webView?.setNeedsLayout()
}
}
}
func reloadWKWebViewIfNeeded() {
for cell in self.tableView.visibleCells {
guard let webviewCell = cell as? WebviewCell else { continue }
// guard cell height > screen height
webviewCell.webview.reload()
}
}
override func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {
guard !decelerate else { return }
self.reloadWKWebViewIfNeeded()
}
override func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
self.reloadWKWebViewIfNeeded()
}
Not the best solution though, but at least user can see the rest of the content
I have the same problem - add a WKWebView to a UITableViewCell, and I solved this problem by these steps:
1.Create a UITextView instance and add it to UITableView's superview(UIViewControllew.view)
2.implement codes in scrollViewDidScroll like this:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
[self.xxtextView becomeFirstResponder];
[self.xxtextView resignFirstResponder];
}
These codes may cause increased cpu performance overhead, you can fix it by some way such us use a temp variable as threshold value.
I don't think this is a perfect solve method, but it works for me.
Eventually I realized that textview becomeFirstResponder just led the webview layout again, so you can just fix it like this:
CGFloat tempOffset = 0;
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
if (!tempOffset || ABS(scrollView.contentOffset.y - tempOffset) > ScreenHeight/2)
{
[self.wkWebView setNeedsLayout];
tempOffset = scrollView.contentOffset.y;
}
}
In objective-C this is how I solve the problem.
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
NSArray * visibleCell = [self.tableView visibleCells];
for (CustomUITableViewCell * cell in visibleCell) {
if ([cell isKindOfClass:[CustomUITableViewCell class]]) {
[cell.wkWebView setNeedsLayout];
}
}
}
That code will collect all visible cell and do the setNeedsLayout in fast enumeration during user scroll.
Im also have uitableview with cell with wkWebView. And i stack with same problem. But timely you can fix this with this code. By performance do not worry. I tested this solution on iphone 5s and it was taken 10-15% CPU only when you scrolling uitableView with visible web cell.
func scrollViewDidScroll(_ scrollView: UIScrollView) {
//TODO: Remove this fix when WKWebView will fixed
if let cell = tableView.cellForRow(at: IndexPath(row: 1, section: 0)) as? WKWebViewCell {
// Here we take our cell
cell.wkWebView?.setNeedsLayout()
// here is "magic" (where wkWebView it is WKWebView, which was
// previously added on cell)
}
}

How to keep a drag able object inside the frame of a view

I have a button that can be dragged around on the screen. I was wondering if there is a way to keep the button inside the frame of the view.
I have used this code to make the button drag able:
UIPanGestureRecognizer *buttonPanRecognizer;
buttonPanRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:#selector(setObjectLocation:)];
[NewButton addGestureRecognizer:buttonPanRecognizer];
- (void)setObjectLocation:(UIPanGestureRecognizer *)recognizer {
CGPoint location = [recognizer locationInView:self.view];
if (CGRectContainsPoint([NewButton frame], location)) { // NewButton
NewButton.center = location;
}
else if (CGRectContainsPoint([NewLabel frame], location)) { // NewLabel
NewLabel.center = location;
} }
I also want to be able to keep other kinds of objects inside.
Thansk in advance :)
The problem is that it is possible to drag parts of the UIButton outside the screen.
I have to agree that your problem is not quite clear. What is all the stuff with the label supposed to to. Generally, to keep a button inside a frame, you have everything you need already there:
UIPanGestureRecognizer* buttonPanRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:#selector(setObjectLocation:)];
[NewButton addGestureRecognizer:buttonPanRecognizer];
- (void)setObjectLocation:(UIPanGestureRecognizer *)recognizer {
CGPoint location = [recognizer translationInView:self.view];
if (CGRectContainsPoint(self.view.frame, location)) {
NewButton.center = location;
}
}
What's the problem? Just keep the button's origin within a rect (frame.x,frame.y,frame.width - button.width,frame.height - button.height).

Resources