UIslider and UI progress view embedded - ios

I'm trying to build a slider embedded in a progress bar, so that slider's minimum image settles with the progress bar 'progress image' and the user can slide only inside the 'progress track image'.
Something like image below:
As in the image,
green section is a progress view
section right to the red (minimum slider value image) is a slider &
should dynamically adjust to the 'progress image' and should hide the
'progress track'
I hav tried to set the
minimumvalueimage
of slider programatically as below:
override func trackRectForBounds(bounds: CGRect) -> CGRect {
// keeps original origin and width, changes height, you get the idea
let customBounds = CGRectMake(7, 0, 180, 15)
super.trackRectForBounds(customBounds)
return customBounds
}
Is this a correct way to do this task, please suggest me something. I'm stuck here, and not in the right track..
if I'm not clear about anything please let me know...Any process are appreciated as long as within swift.

I was stuck because of the logic to implement this. Finally I got an way to set the progress bar and slider with the percentage i.e multiplier.
Firstly, I set the progress bar to 100%,
Then, I set the multiplier, which will set the percentage of progress-bar UI limit and set it to its position right next to the
slider.
And finally, The red icon is minimum value image for slider which sticks to the progress-bar trailing margin, (programmatically constraints).
Or, via Storyboard You could just position it to the view in-between first(i.e. ProgressView) and second(i.e. SliderView) view.
So, the UISlider will get its position from 100% of the view width - % covered by the progress-bar
EDIT: - I may provide the code sample, if required.. just let me know. :)
Happy Coding: )

Related

Slider - incorrect color at the beginning and in the end

I have a custom slider where i have to increase slider's height (thickness). The code looks like this:
class CustomSlider: UISlider
{
override open func trackRect(forBounds bounds: CGRect) -> CGRect {
var defaultBounds = super.trackRect(forBounds: bounds)
let newHeight: CGFloat = 20
return CGRect(x: defaultBounds.origin.x,
y: defaultBounds.origin.y + defaultBounds.size.height/2 - newHeight/2,
width: defaultBounds.size.width,
height: newHeight)
}
}
The height is increased, but the problem now is that slider is not colored properly at the beginning and in the end. For example, at the beginning it now looks like this:
wrong color at the beginning
After some point the color becomes correct and fills blue: correct color after some point
In the end there is the same problem, at first everything works as expected: normal behavior
But then after some point the color becomes updated to blue too soon: wrong color in the end
Has anyone experienced anything similar before? Is there any solution for this?
I have tried using setMinimumTrackImage and setMaximumTrackImage instead of minimumTrackTintColor and maximumTrackTintColor, it works, but i cannot use it because when i rotate screen - slider stretches and the image which i am using stretches as well, so slider's corner radius looks stretched and not the same as it has to be.
Also an interesting fact is that the more I increase slider height - the later the correct color appears at the beginning.
Since setting track images is working and the only issue is stretched corners, the latter can be solved by using resizableImage(withCapInsets:) on your track images, so only the middle part of the image will be stretched and the rest will remain untouched.
These articles cover the topic in great details:
https://www.natashatherobot.com/ios-stretchable-button-uiedgeinsetsmake/
https://www.hackingwithswift.com/example-code/media/how-to-make-resizable-images-using-resizableimagewithcapinsets

Xamarin - Button with text and image in absolute layout results in mis-aligned elements

I am trying to create a button in a Xamarin Forms cross-platform app (iOS and Android), where the button has both text and an image. The XAML is pretty straightforward:
<AbsoluteLayout ...>
<Labels and backgrounds and such>
<Button x:Name="HomeButton2" TranslationX="6" TranslationY="100"
BackgroundColor="#efeff4" TextColor="#4a4a4a"
WidthRequest="58" HeightRequest="76"
ContentLayout="Top,5"
Image="TaskBar_Assets_HomeButtonIcon.png" Text="Home"
Clicked="HomeButton_Clicked" />
</AbsoluteLayout>
but what I get on the iPad is a button where both the image and the text are strangely pushed over to the side:
(the source image "TaskBar_Assets_HomeButtonIcon.png" is 47 x 44 so it should fit fine in the overall button area)
The only way I can find to make this look better, is to make a custom control based on Button, and then I can see that several of the properties of the underlying UIButton seem wonky:
The Control.ImageView.Frame is all zeroes:
Control.ImageView = <UIImageView: 0x12df52940; frame = (0 0; 0 0);
clipsToBounds = YES; opaque = NO; userInteractionEnabled = NO;
layer = <CALayer: 0x173623180>>
The Control.ImageEdgeInsets and .TitleEdgeInsets look odd (the right + left seem like they leave no space for the image or text):
Control.ImageEdgeInsets = {-8.9501953125, 20.33935546875, 8.9501953125, -20.33935546875}
Control.TitleEdgeInsets = {22, -23.5, -22, 23.5}
What I'm doing, is adjusting the Control.ImageEdgeInsets so that Control.ImageEdgeInsets.Left is equal to the half of the (button width minus the image width) and setting Control.ImageEdgeInsets.Right to zero (for no particular reason except that it works)
and then figuring out what to set Control.TitleEdgeInsets was done with trial & error, I ended up with values related to the width of the "Home" text (41 pixels):
Control.ImageEdgeInsets updated to {-8.9501953125, 5.5, 8.9501953125, 0}
Control.TitleEdgeInsets updated to {22, -50, -22, -9}
That results in a reasonable button look:
although it looks like I need to do more trial & error to get the text "Home" actually centered.
But why do I need to go through all this? Why doesn't the button just display text & image correctly in the first place?
And if I do have to go through all this, why are the values for Left & Right for ImageEdgeInsets and TitleEdgeInsets so different?
Most of the articles I have read about images on buttons suggest constructing your own using an Image and a Label in a grid using a gesture recognizer to handle the tap.
You could also try a button and an image in a grid.
Use Margin to adjust placement.
I try and stay clear of absolute layout.
Here's the ButtonRenderer source code from Xamarin.Froms.If you set the ContentLayout to Top, the below codes will be run:
void ComputeEdgeInsets(UIButton button, Button.ButtonContentLayout layout)
{
...
var horizontalImageOffset = labelWidth / 2;
var horizontalTitleOffset = imageWidth / 2;
...
button.ImageEdgeInsets = new UIEdgeInsets(-imageVertOffset, horizontalImageOffset, imageVertOffset, -horizontalImageOffset);
button.TitleEdgeInsets = new UIEdgeInsets(titleVertOffset, -horizontalTitleOffset, -titleVertOffset, horizontalTitleOffset);
}
As the codes show, the Left offset of image is horizontalImageOffset which is labelWidth / 2. The Left offset of title is horizontalTitleOffset which is imageWidth / 2.
So, when the text is wider, the left offset of image will be bigger. When the image is wider, the left offset of text will be bigger.
Edit:
In native iOS, the default layout is like the left image: Image is at left and Label is at right. In Xamarin for Top setting, Xamarin moves the Image up and right, moves the Label down and left to makes them like the right image. I paint this illustration, hope it clear.

How to limit iOS button title with 0 lines in background area?

As above picture, the blue area is the button, but the title with 0 lines is out of the area, also I tried that set the titleLabel frame with the frame with the button, but still it does not work, so any tips here??
Clip the content to bounds:
myButton.clipsToBounds = true
may be this will help:
1) add a button
2) set line break (see screen)
3) set multimple lines in text (use alt+enter to new line )
4) Set constraints for leading and for top - so width and height can be calculated by autolayout
5) set background color if you need

How to create a UiTableView of balloons like iOS widgets - Swift 3/Xcode 8

I want to create a list of events in my application and I think this would be a perfect look, but I have no idea how to do it. Can anybody help me?
Thanks!!
Check out the following method
1) in the interface builder drag a new UITableViewCell
2) Set the contentView and background of tableview to UIColor.clear / UIColor.clearColor();
2) dragIn a view and adjust the size as per requirement
(This will act as container View i.e the bigger balloon)
3) now select background colour to white and change opacity to 85 - 90 %
this will give you the desired color
4) Add Label o top and select the same background colour and the opacity as 50 % as main view and as there is a difference in opacity of 2 containers you will get the desired effect
5) Connect an outlet connection of the mainView and Label
6) set corner radius to view and and label
self.mainView.layer.cornerRadius = 10; // or anything as per requirement
AND
self.label.layer.cornerRadius = 10; // run it now to adjust the corner radius

How to align data points in shinobichart based on bars frame in iOS

I'm developing an iOS application and using shinobichart for iOS to display data. But I'm stuck with positioning the datapoints outside or inside the bar based on the bar frame.
I'm stuck in positioning the data point labels inside the bar or outside the bar based on bar frame. If bar is big enough to accommodate the data point I need to position the data point inside bar or else outside the bar as in the below image
In - (void)sChart:(ShinobiChart *)chart alterDataPointLabel:(SChartDataPointLabel *)label forDataPoint:(SChartDataPoint *)dataPoint inSeries:(SChartSeries *)series we need to update data points if we wish as per shinobi documentation. But what logic can help to solve such an alignment of data points.
Also I tried to with the following official shinobi example to align data point aside https://www.shinobicontrols.com/blog/customizable-datapoint-labels
But unable to modify for the requirement.
Please help to solve this riddle.
The best way for you to achieve this is to use the alterDataPointLabel method as you have mentioned. I would do something like this:
func sChart(chart: ShinobiChart!, alterDataPointLabel label: SChartDataPointLabel!, forDataPoint dataPoint: SChartDataPoint!, inSeries series: SChartSeries!) {
if Int(label.text!) > [YOUR CUT OFF VALUE]
{
label.frame.origin.y += 15
label.textColor = UIColor.whiteColor()
}
else
{
label.frame.origin.y -= 15
label.textColor = UIColor.blackColor()
}
}
This works best if you know the values your chart is going to be displayed. However as a more generic way of achieving it I would recommend comparing the y value of the data label's origin against y value of the chart canvas. Then for example you could set the it so it appears within the column if it the series was 90% of the canvas?

Resources