Sencha Touch - Titlebar to be multi-line text (2 lines) - sencha-touch

I'm trying to have a titlebar with two lines of text in the middle rather than the 1 big text.
So it will look something like:
<Back] Registration [Support]
Step 1/5
Basically, instead of the one big text. I want the top line to be small and the bottom line to be bigger. I know frameworks are about making you work faster but it looks like I'm falling at the very first hurdle and I can't see any way of doing something that I could have done in minutes with standard JS/CSS.
I'm guessing I'm going to have to extend this functionality somewhat? I'm using Sencha Architect to try and speed up my work-flow.
Cheers, Dom

Just use the most simple way, like:
title: '<span class="first-line">first line</span><br><span class="second-line">second line</span>'
then increase the height your titlebar or toolbar, let's say about 200px. I guess you cannot see the second line because the bar's height is not enough.

Related

How could I create a horizontal UIPickerView style control?

I want to create a custom UIView that would be equivalent to a horizontal UIPickerView. The data elements, such as "Mountain View, Sunnyvale, Cupertino, Santa Clara, San Jose" would move left to right. The view would be long and thin. 50px in height, 350x in width sort of thing.
I will need to use protocols to obtain my datasource elements likely, but what I'm more interested in figuring out is the visual aspect of this.
How would I animate things left and right? Should I just make one incredibly long view (off screen), and change the frame left and right. This seems like a bad idea, as likely only 3-5 options need to be visible in the control at one time. If the datasource is 100 elements, there is no point in loading the other 95 off screen in a long view.
So perhaps I should load ~9 or something. The 3-5 on screen, plus an additional ~3 left and right. Each time the control is triggered to move left and right, it will load up another element on the view(?).
Is this a good way to achieve this? A long thin view with ~9 UILabel's. As the control moves to the right, I would shift the further left UILabel to move hidden to the far right, and change the UILabel to be the next in the data source.
I also likely want to change the text size based on its position. If it's currently selected, I either want to bold it and possibly increase the font size. How can I gradually achieve this as the view is moved? It would be weird if the text only changed once it was moved perfectly center inside the view. It should likely gradually grow as it gets closer to the middle.
How can I achieve this?
A collection view would do the trick, obviously there's some coding involved.
I'd suggest you to take a look at the code of, or use, the following library.
I've used it once,does almost exactly what you need and works very well:
AKPickerView

Having troubles fitting the UIImageView and Label into Scroll View

I want to fit the Image + Label into Scrollable View.
It looks like so My setup
So trouble here is that width of the picture and the label did not match the screen width.
I tried to change the UIImageView width from 400 to 300 or so, BUT those changes either wont take the effect(if above 300), OR those changes make label disappear (with width setted up on 300 or below). Observe.
Funny thing is - label actually appears when you see view hierarchy, even though it looks kinda distorted. But no label on the iOS screen for you, sir.
I also tried to set equal width and height from the superview, but this option just disabling scroll, making view strictly fit the screen (label appears to be cropped)
I want the label to be nice and scrollable, but I also want to see it on the screen. Too much to ask?
EDIT: I just tried removing Auto-layout and got the same as with auto-layout. (click "Observe" link to take a look again, exact same situation) Could somebody explain why?
This is quite a simple fix. For the image, you should use equal width & center horizontally; however, make sure you use a fixed width. For the image to look nice, play with the scale modes - I find Aspect Fit/Fill work best.
The label should also be equal width & centered horizontally. You may need to calculate the height of the label programmatically if the text isn't always going to be the same size.
So the answer to my particular question was - shortening the actual text that is passed to the label.
Apparently UIScrollView can't handle stuff with crazy abnormal heights (I was passing a huuuge text to it) So in my particular situation solution was - shorten the text. Now it works like a charm (even though I still need to play a little with constraints to get rid of the warnings and stuff)

Is there a straightforward way to specifically position bootstrap elements

I'd like to position bootstrap elements - buttons or other, at a given horizontal start position on my page. The exact horizontal position should vary dynamically. It seems html (and to some extent bootstrap) wasn't exactly cut out for this but is there a good way to reliably accomplish that?
My best shot is fiddling with its horizontal margin. Is there something even more straightforward, that will bypass the need to consider all other elements in its column and can directly use the desired height regardless of what's else in the column?

How to create rotating wheel control in iOS?

I want to create a rotating widget for iPhone application. Something similar here. But in this selected section is at left (0 degrees). It starts populating sections form left (0 degrees). I want selected section at top (90 degrees).
Please note number of sections are odd in my case. So adjusting top section must be properly adjusted at top center.
Any help would be appreciated.
Thanks in advance
Sayali
You can use the iCarousel library for that. It is very customizable.
Or maybe you want to try out the new UICollectionView, you can customize its layout as well so that it looks like a wheel.
If you look carefully at the source you cite, it explains exactly where it sets the starting point. When filling in first the labels and then the images, it is really irrelevant where you start.
The only difference is the graphic surrounding the wheel with the indicator on the left. Simply rotate that and you are done.

A UITabBar like this

I wondering how I can make a UITabBat like this:
The height of this is more than the stand UITabBar and also the icons are larger. Also the arrow on top.
I tried changing the height but it looks really bad. The icons aren't centred vertically. Also I couldn't change the background.
Thanks.
I'd suggest several things;
Check out the core animation videos from this years wwdc, you can use it to create effects like the triangle and move it back and forth. Then write your own tab bar controller class.
you could also consider a third party library like http://cocoacontrols.com/platforms/ios/controls/tabbarkit