Slider Bar should appear as it moves towards its right - iphone

Im my app, i need a slider with no bar initially. And as the user changes it, it should be visible.
As the user slides the thumb of the slider to the right the slider bar should start appearing on the left side.
Please share anything you have in your mind.
Thanks,

I've never tried this but I suppose it's possible. It sounds like a bad idea from a user-experience perspective, but that's outside the scope of this answer.
You can change the min and max images for a slider using the code below. You could add in some logic to hide these images initially (or set these images to transparent PNGs). Add a method called - (void)sliderAction:(id)sender which will be called when the slider is changed. Add logic there to change the images to something visible, or un-hide the images.
UIImage *minImage = [UIImage imageNamed:#"min.png"];
UIImage *maxImage = [UIImage imageNamed:#"max.png"];
UIImage *thumbImage= [UIImage imageNamed:#"thumb.png"];
minImage=[minImage stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
maxImage=[maxImage stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
UISlider* customSlider = [[UISlider alloc] initWithFrame:CGRectMake(30, 100, 200, 50)];
[customSlider setMinimumTrackImage:minImage forState:UIControlStateNormal];
[customSlider setMaximumTrackImage:maxImage forState:UIControlStateNormal];
[customSlider setThumbImage:thumbImage forState:UIControlStateNormal];
customSlider.minimumValue = 0.0;
customSlider.maximumValue = 100.0;
customSlider.continuous = YES;
customSlider.value = 50.0;
[customSlider addTarget:self action:#selector(sliderAction:) forControlEvents:UIControlEventValueChanged];
[self.view addSubview:customSlider];
[customSlider release];

Related

Make UIButton Stay Attached to Footer During Rotation

I want my UIButton to always stay on bottom of screen without adjusting the X all the time. Here is my code that hides my button in horizontal mode.
UIImage *greenBtnImage = [[UIImage imageNamed:#"green-btn-iphone.png"]stretchableImageWithLeftCapWidth:5.0 topCapHeight:0.0];
bt = [UIButton buttonWithType:UIButtonTypeCustom];
[bt setBackgroundImage:greenBtnImage forState:UIControlStateNormal];
bt.frame = CGRectMake(14.0f,406.0f,292.0f,41.0f);
[bt addTarget:self action:#selector(didClickButton:)
forControlEvents:UIControlEventTouchUpInside];
[bt setTitle:#"OK" forState:UIControlStateNormal];
bt.autoresizingMask = (UIViewAutoresizingFlexibleWidth);
bt.autoresizesSubviews = YES;
[self.view addSubview:bt];
I have trouble finding answer how to do it programmatically. Thank you.
If I understood you well, this should help:
bt.autorezisingMask = UIViewAutoresizingFlexibleTopMargin;
Disclaimer: I never did that myself programmatically so far, used autorezising only in conjunction with the Interface Builder.

Create highlighted state background image programmatically for UIButton

I created a UIBarButton programmatically with the following code:
UIButton * rightButton = [UIButton buttonWithType:UIButtonTypeCustom];
[rightButton setFrame:CGRectMake(0, 0, 81, 30)];
[rightButton setBackgroundColor:[UIColor clearColor]];
rightButton.layer.borderColor = [UIColor blackColor].CGColor;
rightButton.layer.borderWidth = 0.5f;
rightButton.layer.cornerRadius = 5.0f;
rightButton.titleLabel.font = [UIFont fontWithName:#"HelveticaNeue-Bold" size:12];
[rightButton setTitleShadowColor:[UIColor blackColor] forState:UIControlStateNormal];
[rightButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
//set text according to sign in status
if (signIn) {
[rightButton setTitle:#"5 votes left" forState:UIControlStateNormal];
} else {
[rightButton setTitle:#"Sign in" forState:UIControlStateNormal];
}
UIBarButtonItem * rightBarButton = [[UIBarButtonItem alloc] initWithCustomView:rightButton];
self.navigationItem.rightBarButtonItem = rightBarButton;
The obtained button has the desired aspect but now what I need is that when the status of the button is highlighted there should be a gradient effect fading to black to let the user know that he has pressed the button, because right now when I pressed the button, nothing happens to the view so the user has no way to know that he has pressed the button.
I want to explore a choice that does NOT involve setting the background images for the desired states because the text of the button can change dynamically according to the app configurations so I need to do this entirely by code.
Although this won't directly answer your question, it may help. I had to create some graphics for a button dynamically and came up with a method using core graphics to create my button image. It gives me the flexibility to change to appearance parametrically in the code.It draws the button image in an abstract graphics context and then converts the result into an image that I can use for my button. YOu might get enough out of my explanation that you can try it yourself for your needs.
Subclass UIButton and add a CALayer or CAGradientLayer to achieve the highlight effect that you want. Set the initial state of the highlight layer to hidden. Override setHighlighted: with something like:
- (void) setHighlighted:(BOOL)highlight {
highlightLayer.hidden = !highlight;
[super setHighlighted:highlight];
}

how to customised slider?

I have Created my customized slider like this
UIImage *image = [UIImage imageNamed:#"thumb.png"];
CGRect frame = CGRectMake(22.5, 220.0, 280.0, 20.0);
UISlider *myslider = [[UISlider alloc] initWithFrame:frame];
[myslider addTarget:self action:#selector(sliderChanged:) forControlEvents:UIControlEventValueChanged];
[myslider setBackgroundColor:[UIColor clearColor]];
[myslider setThumbImage:image forState:UIControlStateNormal];
UIImage *stetchLeftTrack = [[UIImage imageNamed:#"leftLineImage.png"]
stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
UIImage *stetchRightTrack = [[UIImage imageNamed:#"SlideRight.png"]
stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
[myslider setMinimumTrackImage:stetchLeftTrack forState:UIControlStateNormal];
[myslider setMaximumTrackImage:stetchRightTrack forState:UIControlStateNormal];
myslider.minimumValue = 0.0;
myslider.maximumValue = 100.0;
myslider.continuous = YES;
myslider.value = 5.0;
[self.view addSubview:myslider];
In this slider i have taken slider left track image and slider right track image the size of both images are same i have done this by adjust size of preview but still I am getting my left track image is bigger how can I solve this problem.
and my second question
i have call the event on slider value change but i need to call a event when the slider get slide-fully or slider value get 100 how can I do this also.
Hi for your first question refer UICatalog app example provided in developer.
http://developer.apple.com/library/ios/#samplecode/UICatalog/Introduction/Intro.html
For second answer you can try this:-
- (void)sliderChanged:(id)sender
{
if (sender.value==100) {
//do your code
}
else {
//do nothing
}
}

how to change the slider thumb image?

I have to create my own customized slider. I am trying to change the thumb image,background of the slider and in the some test like slide to unlock.
I have tried like this but its not working
CGRect frame = CGRectMake(0.0, 219.0, 323.0, 20.0);
UISlider *myslider = [[UISlider alloc] initWithFrame:frame];
[myslider addTarget:self action:#selector(sliderAction:) forControlEvents:UIControlEventValueChanged];
[myslider setBackgroundColor:[UIColor clearColor]];
[myslider setThumbImage: [UIImage imageNamed:#"sliderThumb#2x.png"] forState:UIControlStateNormal];
myslider.minimumValue = 0.0;
myslider.maximumValue = 50.0;
myslider.continuous = YES;
myslider.value = 15.0;
[self.view addSubview:myslider];
But in this the size of thumb pic is very big.How to reduce the thumb pic size....and how to give the slider background and text.Please help me out
[[UISlider appearance] setThumbImage:[UIImage imageNamed:#"ball.png"] forState:UIControlStateNormal];
[slider setMinimumTrackImage:[[UIImage imageNamed:#"volume_slider_oragne.png"] stretchableImageWithLeftCapWidth:0.3 topCapHeight:0.0] forState:UIControlStateNormal];
[slider setMaximumTrackImage:[[UIImage imageNamed:#"volume_strap_gry.png"] stretchableImageWithLeftCapWidth:0.3 topCapHeight:0.0] forState:UIControlStateNormal];
To set the background colour of the slider, I would presume that you can set the property backgroundColor to [UIColor colorWithPatternImage:[UIImage imageNamed:#"slider background"]];
Also, images that have the appending ending of #2x, mean that they are twice the size of the standard copy. This is for retina displays only, you should not use it in a UIImage on a standard (legacy) device. Try setting the image name to #"sliderThumb.png" instead, as long as you have the legacy copy of the image.
Just provide a different size of sliderThumb#2x.png and all we work itself out.

Custom Button not showing my images for pushed state

In code, I set the following:
btnLogo.SetImage(UIImage.FromBundle("images/Zouak_logo_button.png"), UIControlState.Normal);
btnLogo.SetImage(UIImage.FromBundle("images/Zouak_logo_button_pushed.png"), UIControlState.Selected);
I couldn't find a UIControlState.Pressed or Pushed or anything along those lines. When the button is pushed of course it isn't showing the version of the image that I want. Do I need to do this in the Click event manually?
I think your syntax is kind of strange, but I guess that you want to do:
UIButton *btn = [[UIButton alloc] init];
[btn setImage:uiimg forState:UIControlStateHighlighted];
Do this for all states:
UIImage *newNormalImage = [UIImage imageNamed:#"images/Zouak_logo_button.png"];
[btnLogo setBackgroundImage:newNormalImage forState:UIControlStateNormal];
// Image for highlighted state
UIImage *newHighlightedImage = [UIImage imageNamed:#"mages/Zouak_logo_button_pushed.png"];
[btnLogo setBackgroundImage:newHighlightedImage forState:UIControlStateHighlighted];
// Image for selected state
UIImage *newSelectedImage = [UIImage imageNamed:#"mages/Zouak_logo_button_pushed.png"];
[btnLogo setBackgroundImage:newSelectedImage forState:UIControlStateSelected];