Xamarin Forms: ImageSource.FromUri not display - ios

I have a list of items, each item has an image (download from a remote server) like this:
var image = new Image
{
WidthRequest = 44,
HeightRequest = 44,
};
image.SetBinding(Image.SourceProperty, new Binding("ImageUrl"));
Almost all images are displayed fine in iPhone 5S and 6+ (simulator/real device).
However, there is an image which is not displayed on iPhone 6+ (simulator/read device). I tried not setting Width and Height Request but it didn't solve the problem.
This is the info of the exceptional image:
Size: 9KB (12KB on disk)
Dimension: 608 x 369
Color Space: RGB
Color Profile: Generic RGB Profile
Alpha Channel: Yes
Thank you for helping!
EDIT 1: After some experiments, it is a very intermittent problem and NOT specific to iPhone 6+. Sometimes the image appears, sometimes it does not. At the time being I cannot reproduce the bug.
I am pretty sure it is not an layout/ordering issue (I replaced the odd item with another one and it was good). It is not an image size/dimension issue (I replaced the odd image with another image and it was NOT displayed either).
My conclusion up to this point is the URL is causing problem. Anybody experiencing the same issue can try the answer from Kowalski.

I've faced with same issue. It's about encoding the URL. You can fix it either common(PCL) project or iOS project via custom renderers.
All to do is:
string encodedURL = Uri.EscapeDataString(yourUrl);
and use encodedURL as image source.

Related

Random UIImage artefacts

I have a very strange bug which appears randomly amongst users. In most cases, the same image loaded into a UIImageView shows perfectly, but occasionally has an artefact line running through it as in the pic attached. We cannot reproduce during testing on either the simulator or device. The image loaded is a simple png:
groupAvatarIV = [[UIImageView alloc] initWithFrame:CGRectMake(horizontalMargin, 5, 70, 70)];
groupAvatarIV.clipsToBounds = YES;
groupAvatarIV.layer.cornerRadius = 70 /2;
groupAvatarIV.image = [UIImage imageNamed:#"avatar"];
[contentV addSubview:groupAvatarIV];
I am really out of ideas how to debug this - any tips would be appreciated please.
It looks like the image contains data for a width greater than itself, so it keeps writing data in an address that becomes the next line down etc... (evidenced by the fact that it starts at the widest part of the circle)
maybe there is something wrong with the params on the image, or it might just be an apple bug...
if it is an apple bug, I would expect it to be with the behavior of clipToBounds
try to collect OS info from the users that experience it... also you could try to re-save the images using a different program, like use ffmpeg to save them as a tiff, then convert back to png (which should be a lossless route), so you know it had to re-interpret it...
Turned out the project which we took over contained multiple image files with the same name, which is what caused the artefacts.
You have mentioned that you have added the imageView in another view as a subview. It seems that the image view is not fit to the superview. You need to check the frame size of both views. Then you need to set the frame of the image view equal to or less than the superview.

Image looks bad when testing, but original image file is looking just fine

Why does my image look awful when I'm testing the app on my 5s. It also looks awful when testing it on the simulator. My image has the same width as the 5s: 640px. It is saved as #2x. The UIImageView has the exact same size as the image: 640. The UIImageView is also keeping the view in ratio.
My result
I'm trying to archive the same quality result as shown in the second image, which is screenshotted from a random relevant app.
The quality I want
I can't add the original image file because I need 10 reputation for another link. But I can assure you that the original image file looks just fine. So somewhere in Xcode there is going something wrong?
Deleting the line below fixed it:
self.Aktau1?.layer.shouldRasterize = true
Without that line, my code now looks like this (to apply a shadow):
self.Aktau1?.layer.shadowColor = UIColor.blackColor().CGColor
self.Aktau1?.layer.shadowOpacity = 0.15
self.Aktau1?.layer.shadowOffset = CGSizeMake(0, 45
self.Aktau1?.layer.shadowRadius = 25

CLKComplicationTemplateUtilitarianSmallRingImage not showing image

I'm having issues using CLKComplicationTemplateUtilitarianSmallRingImage with a central image.
I'm pretty sure that at one point the image I choose was showing up within the progress ring, but after relauncing a few times, the image disappeared. Oddly, when I've tried to use it in CLKComplicationTemplateUtilitarianSmallSquare and CLKComplicationTemplateUtilitarianSmallFlat the image shows up just fine.
For the life of me I cannot figure out what is going on.
Here is the code I'm using:
let smallRing = CLKComplicationTemplateUtilitarianSmallRingImage()
smallRing.imageProvider = CLKImageProvider(onePieceImage: UIImage(named: "Complication/Utilitarian")!)
smallRing.ringStyle = .Closed
smallRing.fillFraction = 5 / 9
handler(CLKComplicationTimelineEntry(date: NSDate(), complicationTemplate: smallRing))
A few more details:
Not working on device or simulator.
My image is 14pt (28px), I have tried with PDF (single vector) and PNGs (non-interlaced).
Works as expected with any CLKComplicationTemplateUtilitarianSmall* that accepts images except CLKComplicationTemplateUtilitarianSmallRingImage.
Have tried using a Complication Image Set, just an image in the Catalog both Apple Watch and Universal...
Have tried not setting other properties on CLKComplicationTemplateUtilitarianSmallRingImage.
Crashes on targetting the incorrect image name, so I know it's loading the image when the name is accurate.
Tried with tint color and just changing around the image's default color to see if that's it. Nope. Would think it's the image if it wasn't working in other Templates!
I have to be doing something unusual though.
Looks like this was a bug with WatchOS 2.2.1!
Thankfully fixed in 2.2.2!

iOS - jagged edges on text and image. Why? and how to fix?

Why are there jagged edges on some of the texts and images in the app i am developping?
I have tried to go through the frames, and i have not used a division to set a frame (so the 1.134234 is not an issue), and I have tried different antialiasing methods.
Does anybody have an idea?
See attached for an example.
EDIT:
The images become jagged, when downscaled. So either resize them to fit the size directly in the actual file, OR via code as suggested in other StackOverflow questions.
Now trying to figure out how to fix the text also! :)
EDIT EDIT EDIT EDIT
Answer will posted tomorrow (after 24 hours).
1) Image problem: Make sure the actual image size you are using is close to the size you are actually using it... (Feks 100 points with an image at #1x that is 100, #2x that is 200, and #3x that is 300, where 100,200, and 300 are the actual image file pixels). Or resize using code in the correct way to match.
When iOS is downscaling (as well as upscaling) an image, the pixels get disorted.
The problem in my case was using a too big an image.
2) As to the button, I don't know exactly why, but it got solved using attributedText for the title instead of the usual text. Method used is:
[button setAttributedTitle: forState:];
Solved it :D
1) Image problem: Make sure the actual image size you are using is close to the size you are actually using it... (Feks 100 points with an image at #1x that is 100, #2x that is 200, and #3x that is 300, where 100,200, and 300 are the actual image file pixels). Or resize using code in the correct way to match.
When iOS is downscaling (as well as upscaling) an image, the pixels get disorted.
The problem in my case was using a too big an image.
2) As to the button, I don't know exactly why, but it got solved using attributedText for the title instead of the usual text. Method used is:
[button setAttributedTitle: forState:];

iphone ios 7 homescreen mask isn't applied correctly to my icon

My problem is that my application's icon seems to be resized to fit the rounded-corner mask applied when displayed on the home screen.
EDIT: Here's the image:
My image follows the guidelines in these locations (mainly that it is 120x120, and doesn't have pre-rounded corners):
https://developer.apple.com/library/ios/qa/qa1686/_index.html
https://developer.apple.com/library/ios/documentation/iphone/conceptual/iphoneosprogrammingguide/App-RelatedResources/App-RelatedResources.html#//apple_ref/doc/uid/TP40007072-CH6-SW4
I've tried:
1) Using an image catalog
2) Searching for the issue on this site. I looked through the first 5 paginations sorted by newest and can't find anyone who's had the issue...
3) Making sure that the image is specified in the info.plist
4) Checking the troubleshooting app icon issues on the apple developer site.
The icon always ends up drawn with the black edges.
Is there a way to programmatically make sure the mask is applied correctly?
Has someone else encountered the same issue?
It sounds like you might have the wrong DPI set in the icon PNG—if it’s something other than 72 (the screen’s nominal DPI in points), the system may be trying to scale it to match.
It looks like the DPI was correct. The problem was that there was a transparent background layer, wider than the image that Android Studio seemed to have added when it was run through that deployment process. The layer went unnoticed in preview because it doesn't highlight the transparency. Noticed it when I opened it in GIMP.
So it was a silly oversight on my part.

Resources