[英]How to add show/hide password image in a Xamarin.Forms Editor for ios project. (scrolling and UI placement issues)
I am trying to place a button to implement show/hide password in a custom UITextView
in Xamarin.iOS (Editor in Xamarin.Forms ). I am trying to place a button to implement show/hide password in a custom UITextView
in Xamarin.iOS (Editor in Xamarin.Forms ). However I am facing two (2) issues with the UI design.但是,我在 UI 设计方面面临两 (2) 个问题。
I have used this code used for the show/hide password button setup, and it works perfectly:我已将此代码用于显示/隐藏密码按钮设置,并且效果很好:
UITextView vUpdatedEntry = (UITextView)Control;
var buttonRect = UIButton.FromType(UIButtonType.Custom);
buttonRect.SetImage(UIImage.FromBundle("show_black_24"), UIControlState.Normal);
buttonRect.TouchUpInside += (object sender, EventArgs e1) => {
if (vUpdatedEntry.SecureTextEntry)
{
vUpdatedEntry.SecureTextEntry = false;
buttonRect.SetImage(UIImage.FromBundle("hide_black_24"), UIControlState.Normal);
}
else
{
vUpdatedEntry.SecureTextEntry = true;
buttonRect.SetImage(UIImage.FromBundle("show_black_24"), UIControlState.Normal);
}
};
Issue 1 .问题 1 。 I am unable to prevent the button from scrolling away when the UITextView
scrolls.当UITextView
滚动时,我无法阻止按钮滚动。 Whenever scrolling occurs, this happens:每当发生滚动时,都会发生这种情况:
Basically the button scrolls along with the text which is not ideal.基本上,按钮与不理想的文本一起滚动。 Any ideas on how to fix this would be much appreciated.任何有关如何解决此问题的想法将不胜感激。
Issue 2 .问题 2 。 I am trying to get the button which allows the user to select whether they want the password to be visible or not to be on the right side of the UITextView
.我正在尝试获取允许用户 select 的按钮,无论他们是否希望密码显示在UITextView
的右侧。 I have used the code below to do this.我已经使用下面的代码来做到这一点。
buttonRect.Frame = new CoreGraphics.CGRect(10.0f, 0.0f, 15.0f, 15.0f);
buttonRect.ContentMode = UIViewContentMode.ScaleToFill;
buttonRect.BackgroundColor = UIColor.Orange;
UIView paddingViewRight = new UIView(new System.Drawing.RectangleF(0.0f, 0.0f, 30.0f, 18.0f));
paddingViewRight.BackgroundColor = UIColor.Purple;
paddingViewRight.AddSubview(buttonRect);
buttonRect.TranslatesAutoresizingMaskIntoConstraints = false;
buttonRect.CenterYAnchor.ConstraintEqualTo(paddingViewRight.CenterYAnchor).Active = true;
vUpdatedEntry.TextContainerInset = new UIEdgeInsets(8.0f, 0.0f, 8.0f, paddingViewRight.Frame.Width+5.0f);
vUpdatedEntry.AddSubview(paddingViewRight);
paddingViewRight.TranslatesAutoresizingMaskIntoConstraints = false;
paddingViewRight.TrailingAnchor.ConstraintEqualTo(vUpdatedEntry.LayoutMarginsGuide.TrailingAnchor, 9.0f).Active = true;
paddingViewRight.HeightAnchor.ConstraintEqualTo(vUpdatedEntry.HeightAnchor).Active = true;
paddingViewRight.WidthAnchor.ConstraintEqualTo(buttonRect.WidthAnchor,1.0f, 0.0f).Active = true;
Control.Layer.CornerRadius = 4;
Control.Layer.BorderColor = new CoreGraphics.CGColor(255, 255, 255);
Control.Layer.MasksToBounds = true;
vUpdatedEntry.TextAlignment = UITextAlignment.Left;
and it gives me this:它给了我这个:
This is my desired visual outcome, as it looks like the image below when the background colors are removed:这是我想要的视觉效果,当背景 colors 被移除时,它看起来像下图:
However, this solution feels rather hacky with lots of constants used in places where I would expect that using an AutoLayout
anchor property should have worked.然而,这个解决方案感觉相当hacky ,因为在我希望使用AutoLayout
锚属性应该有效的地方使用了很多常量。 I tried using the TrailingAnchor
property with ConstraintEqualTo
to achieve this ( this being stickiness to the right side of UITextView
), but it kept sticking to the left-side instead.我尝试使用带有ConstraintEqualTo
的TrailingAnchor
属性来实现这一点(这是对UITextView
右侧的粘性),但它一直粘在左侧。 A cleaner approach to achieving this would be much appreciated一种更清洁的方法来实现这一点将不胜感激
With Inspiration, from @JackHua-MSFT (the poster of comment on the question) I was able to figure out how to fix Issue 1 which was the more pressing issue in the question, My code below:.有了灵感,来自@JackHua-MSFT(问题的评论者)我能够弄清楚如何解决问题1 ,这是问题中更紧迫的问题,我的代码如下:。
buttonRect.ContentMode = UIViewContentMode.ScaleToFill;
UIView paddingViewRight = new UIView(new System.Drawing.RectangleF(0.0f, 0.0f, 30.0f, 18.0f));
paddingViewRight.AddSubview(buttonRect);
buttonRect.TranslatesAutoresizingMaskIntoConstraints = false;
buttonRect.CenterYAnchor.ConstraintEqualTo(paddingViewRight.CenterYAnchor).Active = true;
vUpdatedEntry.AddSubview(paddingViewRight);
paddingViewRight.TranslatesAutoresizingMaskIntoConstraints = false;
paddingViewRight.TrailingAnchor.ConstraintEqualTo(vUpdatedEntry.LayoutMarginsGuide.TrailingAnchor, 8.0f).Active = true;
paddingViewRight.HeightAnchor.ConstraintEqualTo(vUpdatedEntry.HeightAnchor).Active = true;
paddingViewRight.BottomAnchor.ConstraintEqualTo(vUpdatedEntry.LayoutMarginsGuide.BottomAnchor).Active = true;
paddingViewRight.TopAnchor.ConstraintEqualTo(vUpdatedEntry.LayoutMarginsGuide.TopAnchor, -8.0f).Active = true;
paddingViewRight.WidthAnchor.ConstraintEqualTo(buttonRect.WidthAnchor, 1.0f, 3.0f).Active = true;
vUpdatedEntry.TextContainerInset = new UIEdgeInsets(8.0f, 0.0f, 8.0f, paddingViewRight.Frame.Width + 5.0f);
Control.Layer.CornerRadius = 4;
Control.Layer.BorderColor = new CoreGraphics.CGColor(255, 255, 255);
Control.Layer.MasksToBounds = true;
vUpdatedEntry.TextAlignment = UITextAlignment.Left;
However any suggestions for a cleaner solution (specifically one where I don't need to use constant float values with the LayoutMarginsGuide) would be appreciated.但是,任何有关更清洁解决方案的建议(特别是我不需要在 LayoutMarginsGuide 中使用常量浮点值的建议)都将不胜感激。 Also an explanation on the difference between using .TopAnchor
and .BottomAnchor
(which I tried using but didn't work) vs .LayoutMargins.TopAnchor
and .LayoutMargins.BottomAnchor
would be appreciated.还可以解释使用.TopAnchor
和.BottomAnchor
(我尝试使用但没有用)与.LayoutMargins.TopAnchor
和.LayoutMargins.BottomAnchor
之间的区别。 :) :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.