I want to create the following UIView in my app. Please give the suggestion... I can create the UITextView and UIImageView separately. But In that image, Text is placed under the image. How to create this type of UI. Please guide me.. !
Thanks All
You have 2 options:
1) Using a UIWebView. That will allow you to easily achieve this but you might have problems on autorotation since UIWebView automatically scales your text when you make it's frame larger (which you would when you move to landscape) .
2) Or you can place 2 textViews - one of them on the left side of the picture and the other beneath the picture. In order to calculate what string fits in the first textView and what string is left for the second one you should take a look at this.
I recently tried the second way and although there's a small bug in those methods ( doesn't care for words , it splits the words by characters ) , the results were pretty good.
A possible solution could be using a Webview to show text as html and embed an image properly placed on right side.
If you want to use UIImageView separately (for other reasons, for example - with gesture recognizer, or easy image updating) - then you can create an empty floating space , and add imageview as a subview to webview.
for example:
[webView loadHTMLString:
[NSString stringWithFormat:"<style type=\"text/css\"><font face=\"Helvetica\" color=\"white\">"
"<style> #buttons {float: right; width: 150px; height:100px;}</style>"
"<div style=\"float:right;5px;top:1px;display:inline-table; position:relative; "
"width: 150px; height: 100px;\"><div style=\"float:right;right:170px;top:4px;display:inline-table; "
"position:relative; left:-8px; color: #fff; font-size: 13px;\"><p></p></div></p></div>"
"%#</font><div></body>", #"text that will show up around image" baseURL:nil];
will fill webview with text (#"text that will show up around image") and leave an empty space for UIImageView.
If it is the same piece of text that should flow around the image you can use CoreText to create a custom shaped TextView. When trying something similar myself I found this StackOverflow post to be a good starting point: https://stackoverflow.com/a/5284707/785716
Related
I've got an app which leverages a WKWebView for most of the content. In a few screens we have buttons in a div which leverages position: fixed; so that they're always in the same place as a long form scrolls underneath. When the virtual keyboard is shown I add a class to the document body that can be used to adjust other things, for example, tweaking the bottom property on the div containing these buttons so they move above the keyboard.
So far, so good, they're always visible. The problem arises when the form is then scrolled, the buttons visibly move up with the rest of the page (which they shouldn't), but the browser actually acts as if they're still position where they're supposed to be. The screen shot shows where the browser believes the buttons are, and if you touch those areas then the buttons get activated.
I'm happy to chalk this up as a bug with WebKit or specifically WKWebView, but is there a known workaround for this so that they render in the correct place? I read that adding a translation to trigger hardware rendering could help, but it doesn't seem to have done the job here. I also read that changing the position to absolute could solve this issue, but for me it just results in them being rendered off screen somewhere altogether.
You can add fixed position to button wrapper
.btn-bar-fixed {
position: fixed;
bottom: 0px;
right: 0px;
}
On my jQuery Mobile page, i'm using a horizontal control group for some buttons.
But in some languages the text within these buttons is too long.
Instead of wrapping the text within each button, the buttons themselves wrap onto the next line.
this is the base code:
<div data-role="controlgroup" data-type="horizontal">
short button
really really really insanely long button is really really insanely long. No really, who makes buttons this big?
</div>
and with this css, we convince it to wrap inside the buttons. Otherwise the text is truncated with an ellipsis
.ui-btn-inner{
white-space: normal !important;
}
On the third page of this fiddle the problem is demonstrated
http://jsfiddle.net/koesper/R8Kwe/
Anyone have any ideas how I might tackle this?
Thanks in advance,
Casper
ps. Inspiration for the original fix came from Tosh in Jquery Mobile Multiline Button
You could set widths for the links in your control-group:
.ui-page .ui-content .ui-controlgroup a {
width : 49%;
}
This will keep them on the same line. Here is a demo: http://jsfiddle.net/R8Kwe/6/
Also, just to be thorough, the white-space : normal actually needs to be applied to the .ui-btn-text element which is a child of the .ui-btn-inner element (so it still receives the inherited value).
Trim your long buttons - that's a usability issue. If you have action buttons named that long seems like that just defeats the purpose of an action? Other than that I wouldn't use controlgroups for something like this. I would use a custom data theme & some grids to house my buttons inline.
http://www.flickr.com/photos/fraserspeirs/4329430635/in/set-72157623224262135/
The above is a link basically showing the form fill view of the numbers app on the iPad. Any idea as to how to achieve such a functionality which sort of looks like our vanilla tabs on Chrome?
You could do it with just buttons set to Custom type and using an image for the background. Then when they are clicked, bring the specific UIView to the front.
To create the tabs from a single image use UIImage's stretchableImageWithLeftCapWidth: topCapHeight:
http://tcninja.blogspot.com/2010/09/ios-adding-stretchable-uiimage-as.html
This will let you dynamically set the image's width in a way that will use the middle of it to fill the new area rather than stretching (and warping) the outer edges.
I would have implemented this with simple UIButtons. All you need to do is to style them (pngs or whatever), and track which one is the current.
I know about css sprites.. Now i want some examples of css sprites....
How did you manage to get css sprites work?
I usaully use the CSS background property. This property allows you to set a scroll argument of top and left as you can see in the example below. So the idea is to create one image with all states and simply position it based on the event like hover or other custom event in which you alter the elements CSS. I hope this helps.
.mySprite a
{
background: transparent url(/images/spriteButton.gif) no-repeat scroll 0 0
}
.mySprite a:hover
{
background: transparent url(/images/spriteButton.gif) no-repeat scroll 30 0
}
http://stylemeltdown.com/2007/10/22/image-sprite-navigation-with-css/
http://www.w3schools.com/css/css_positioning.asp
http://template.joomlart.com/ja_iris/index.php?option=com_content&view=section&layout=blog&id=4&Itemid=29
If you are using Firefox here is a simple way to get an idea of what a sprite is. Go to yahoo.com, right-click and View Page Info, click Media. Look for a file name having "sprite" in it.
This is one of the links:
http://d.yimg.com/a/i/ww/met/gsprite_071309.gif
You will see many background gradient images. You can use this file to play with. Now you have to adjust background position in your CSS depending on which background you want to use, like this:
background-image: url('http://d.yimg.com/a/i/ww/met/gsprite_071309.gif') left -30px repeat-x;
This should give you an idea of how to manage sprites.
If you are looking to create a CSS sprite - you can check out the site spriteme.org, which is very cool and shows you how to easily create a CSS sprite.
For a nice example you can check out this page:
http://www.programmerinterview.com/index.php/general-miscellaneous/css-sprite-example-and-tutorial/
Gives a good explanation and shows how the website owner uses a sprite.
I use them for button images. I use the top half of an image for the normal button state and the bottom half for the mouse-over state. That way the mouse over image is loaded when the page loads and there's no delay which just looks bad and slow. CSS code is here.
Check out this page:
http://www.tutorialrepublic.com/css-tutorial/css-sprites.php
It has a great interactive example and everything you need to know about CSS Sprite.
At the example of YouTube.
Their logo comes in fact from a big master image containing other graphical elements. However one can click on the logo which point to the root of the site. I'm researching their HTML but still not quite sure how they achieved that.
Could anyone please look at it and maybe explain it?
It's basically just a button inside link with a background image, but with it's width and height constrained to only show the portion of the background image / sprite with the YouTube logo.
From their CSS:
#masthead #logo button {
background-position:0 0;
height:33px;
width:84px;
}
If you load it up in Firebug and change the height you will see more / less of the background image appear.
From their HTML source:
<button onclick="window.top.location.href='/'; return false;" class="master-sprite" title=""></button>