addSubview causing another UIImageView to refresh - ios

I have a UIView in which I placed a UIImageView which the user would be dragging around. Other UIImageView objects are created periodically using NSTimer and move around the view automatically using another NStimer. Each time a new UIImageView is added using addSubView, the user controlled UIImageView flickers back and forth it's original position. How do I deal with this?
Below is the code for the dynamically generated UIImageView. Circle is a subclass of UIImageView.
int x = arc4random() % 300;
Circle *tmpImg = [[Circle alloc] initWithImage:[UIImage imageNamed:#"blackCircle.png"]];
[tmpImg setFrame:CGRectMake(x , 0, 8, 8)];
[self.view addSubview:tmpImg];
[self.view bringSubviewToFront:tmpImg];

Related

Adding a UILabel on a UIImageView inside a for loop

All the similar questions on SO and on the net are regarding placing a UILabel on a UIImageView, which is something i am familiar with, however i have to place multiple UILabel's on multiple UIImageView's. One on each UIImageView. I have a for loop like this:
for(int i=0;i < [arrURL count] ;i++)
{
UIImageView *view_Image = [[UIImageView alloc]initWithFrame:CGRectMake(x, y, 400, 180)];
y = y + 182;
view_Image.image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:arrURL[i]]]];
UILabel *lblName = [[UILabel alloc] initWithFrame:CGRectMake(view_Image.frame.origin.x, view_Image.frame.origin.y, view_Image.frame.size.width, view_Image.frame.size.height)];
[lblName setText:arrNames[i]];
[view_Image addSubview:lblName];
[mainScroll addSubview:view_Image];
}
When i run the code, the UILabel appears on only the first UIImageView, for the rest the UIImageView appears on the top of the UILabel. (I found this by adding background color to the UILabel). How can i make the UILabel's appear on the UIImageView. Thanks in advance.
A view's frame is in it's superview's coordinate system. So each image view's frame is in mainScroll's coordinate system.
Since each of your labels is a subview of a separate image view, each label's frame is in the coordinate system of its parent image view. But you are acting as though the label's frame is in the coordinates of mainScroll.
UILabel *lblName = [[UILabel alloc] initWithFrame:view_Image.bounds];

UIButton background image used for animation not aligned across devices

I have a UIButton backgroundImage that I use to display a weather condition image when the loading is complete. I also create a UIImageView that replaces the UIButton to animate a series of images as a progress indicator.
My question: How can fix this animated UIImageView x-axis misalignment across multiple screen sizes?
Here's what the sequence looks like on 4.7" iPhone, the red box indicates the image I'm talking about:
First, the UIImageView animating as a progress indicator (imagine it spinning, alignment is correct)
Second, the download complete, the progress indicator replaced by a UIButton with a backgroundImage:
Third, the UIImageView animating on 4" iPhone (note misalignment on x-axis):
Fourth, the download complete, UIButton replaces it, aligned correctly:
Here's how the UIImageView *progressIndicator is configured.
Note that conditionButton is the UIButton with backgroundImage of the weather condition:
self.progressIndicator = [[UIImageView alloc] initWithFrame:self.conditionButton.frame];
self.progressIndicator.contentMode = UIViewContentModeCenter;
self.progressIndicator.animationImages = #[...long series of images...];
self.progressIndicator.animationDuration = 0.5f;
[self.conditionButton setBackgroundImage:[UIImage imageNamed:#"empty.png"] forState:UIControlStateNormal];
[self.progressIndicator startAnimating];
[self.view addSubview:self.progressIndicator];
I'm pretty sure the issue is with
self.progressIndicator = [[UIImageView alloc] initWithFrame:self.conditionButton.frame];
But I'm not sure how to resolve this.
The same problem occurs when I switch to 5.5" iPhone. I have no Auto Layout warnings, and the constraints that apply to the conditionButton are:
Align Center X to superview
Width = 94
Height = 94
Bottom and Top space to nearest neighbor = default
Any help would be greatly appreciated!

Custom MPVolumeView Thumb Image not vertically centered since iOS 5.1

I'm building an application that needs an MPVolumeView to control the volume. It worked perfectly before iOS 5.1 but since the 5.1 update the thumb image is no longer vertically centered. I tried a few things like changing imagine dimensions, resizing my views (and slider) but nothing seems to work, the thumb is just not vertically centered anymore. The only way i get a centered thumb is if i use the default iOS one.
I tried adding a UISlider to another view with the exact min, max and thumb image and that one is centered fine.
Here is the code for the MPVolumeView:
MPVolumeView *volumeView;
volumeView = [[[MPVolumeView alloc] initWithFrame:volumeViewHolder.bounds] autorelease];
[volumeViewHolder addSubview:volumeView];
UIView *volumeViewSlider;
for (UIView *view in [volumeView subviews])
{
if ([[[view class] description] isEqualToString:#"MPVolumeSlider"])
{
volumeViewSlider = view;
}
}
[(UISlider *)volumeViewSlider setThumbImage:sliderHandleIcon forState:UIControlStateNormal];
[(UISlider *)volumeViewSlider setMinimumTrackImage:leftTrackImage forState:UIControlStateNormal];
[(UISlider *)volumeViewSlider setMaximumTrackImage:rightTrackImage forState:UIControlStateNormal];
volumeViewHolder is just a UIView thats 153x33. I put the thumb in green in the screenshot.
Maybe a better solution:
User a bigger image with a transparent border on the bottom. Should be around 10px for Retina Displays.
the same problem i resolved in one project. Must be set color of left part and right part with alpha = 0 -it means transparent all slider without thumb (without moovable part of it). After we must create custom view for line of slider, without thumb. In this view any colored part may be shifted as you want, upper or below, left or right. It obtained using the defined y for your ocassion:
UIView *v = [[UIView alloc] initWithFrame:CGRectMake(x,y,width, height)];
And add the slider to this line as subview. Resulted view will be slider. For example:
UISlider *ourSlider = ...;
//initialise UISlider
ourSlider.minimumTrackTintColor = [UIColor colorWithRed:0 green:122.0f/255.0f blue:1 alpha:0];
ourSlider.minimumTrackTintColor = [UIColor colorWithRed:0 green:122.0f/255.0f blue:1 alpha:0];
UIView *lineOfSliderWithoutThumb = ... ;
// creation it
[lineOfSliderWithoutThumb addSubview:ourSlider];
//after this lineOfSliderWithoutThumb is the our custom uislider.
Note: colors there are used as default slider colors of left and right sides of UISlider.

iPhone Custom UISlider preload and rounded edges issues

I'm trying to implement a custom UISlider, I've extended it with a class called UISliderCustom which has the following code:
#implementation UISliderCustom
- (id)initWithCoder:(NSCoder *)aDecoder{
if(self == [super initWithCoder:aDecoder]){
self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, 200, 13);
UIImage *slideMin = [[UIImage imageNamed:#"slideMinimum.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
UIImage *slideMax = [[UIImage imageNamed:#"slideMaximum.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
[self setThumbImage:[UIImage imageNamed:#"slideThumb.png"] forState:UIControlStateNormal];
[self setThumbImage:[UIImage imageNamed:#"slideThumb.png"] forState:UIControlStateHighlighted];
[self setMinimumTrackImage:slideMin forState:UIControlStateNormal];
[self setMaximumTrackImage:slideMax forState:UIControlStateNormal];
}
return self;
}
#end
I ran into two small problems
When I slide over the slider to one of the edges (progress = 0.0 / progress = 1.0), I can clearly see "left overs" in the sides, im not sure how to handle that as well, unfortunately :)
Slider images:
Problem:
I see the regular UISlider (blue and silver) for a couple of seconds, and only then the custom graphics is loaded, or when i actually move the slider. I'm not sure why this is happening.. EDIT: This only happens in the simulator, works fine now.
Thanks in advance for any assistance :)
Shai.
You have no need to subclass UISlider to achieve this effect, and if you did you certainly wouldn't set the track images in the drawRect method. drawRect should contain drawing code only, it is called whenever any part of the control needs redrawing.
Set the thumb and track images in a separate method, either within your subclass (called from initWithFrame and initWithCoder) or in the object that creates the slider in the first place. This only needs to be done once, when the slider is first created. Don't override drawRect.
You don't need to call awakeFromNib manually either, unless you have some specific code in there as well? That would be a common place to set custom images in a subclass, if you only ever used the slider from IB.
For the square ends, the problem is that the extreme edge of your track image is square, so it is showing around the thumb. Make both ends of the track image rounded, with a 1px stretchable area in the middle, like this:
I just had a very similar problem myself. It turned out that the size (width x height) of the slider that I added in interface builder didn't match the sizes of the images I was using to customize the slider. Once I made them match, those "leftovers" at the ends of the slider went away.

UIView subview placement

I have a UIView that I am placing UIImageView's into, with each UIImageView being 16 pixels wide.
The query is if I add say 5 of the UIImageViews using addSubView, and the UIView is spec'd at 16 tall by 300 wide, is there any way to have the images in the view 'stack up' so to speak, so that the images are not on top of each other? Like adding image tags to a web page.
The easiest way I see of doing this is to keep a running tally of where you last placed an image, then increment by width, something like this:
-(void) addImage:(UIImage*)img toView:(UIView*)view
{
static CGRect curFrame = CGRectMake (0,0,16,16);
UIImageView* imgView = [[UIImageView alloc] initWithFrame:curFrame];
imgView.image = img;
[view addSubview:imgView];
curFrame.origin.x += 16;
}
This will have the images appear within your view from left to right
I think I understand your question correctly. You want all the images to line up in a row correct? You would need to set the frame of the UIImageView's view. The orgin will be where the top left of your image is(x,y coordinates inside the UIView that contains it) - so you would move that over 16 each time you add another image.

Resources