I am a beginner in iOS and swift.
I used to write Android and I think the R.java is a good idea to manage ids, drawables, strings and other resources.
So I'm surprised that iOS does't provide a good function to access resources.
If I want to get a Image from assets, I call UIImage(named: "img_name"), but I don't think this is the best way to access img_name, I may use a wrong name and I can't get the image.
I found some open source project like Shark and SwiftGen, but Shark only support images and SwiftGen it seems need to run a command not automatically.
Do you have any better solution? Thank you!
I have a open source project R.swift-plugin it provides features as you mentioned. You just need to install the Xcode Plugin via Alcatraz and search R.swift
The plugin will automatically generate a resource file to manage your images, localizable strings and colors, and you can access them like using R.java
Usage:
Sincerely recommend you to try it. And feel free to give me any suggestion to improve it :)
If you are using InterfaceBuilder (also called Storyboard, xib), there is no need to define id for each view. You can bind outlets in code.
If you want to retrieve views using their ids (like R.java as you asked), you can set tag to each view and manipulate them in code.
Unlike AndroidStudio, Xcode will not generate any file.
func viewDidLoad() {
let labelView = self.view.viewWithTag(0) as? UILabel
}
There is no such function in Xcode itself, but there is an open source project that does just this: R.swift
It automatically updates the generated file and supports a lot of different resource types such as images, fonts, segues and more.
You can have similar functionality by using extensions and enums.
Using enums allows you to avoid typos and benefit from Xcode's autosuggest/autocomplete.
Example for UIImage:
extension UIImage {
enum ImageId: String {
// These are your images NAMES,
// as in "SpriteMonster.jpg"
case SpriteMonster, SpriteHero, BaseLandscape
}
convenience init!(id: ImageId) {
self.init(named: id.rawValue)
}
}
Usage:
let monster = UIImage(id: .SpriteMonster) // the "SpriteMonster.jpg" image
For this example I'm force-unwrapping the convenience init, so be careful to actually have the image with the correct name in your bundle.
For String:
extension String {
enum StringId: String {
case Welcome = "Welcome to the game!"
case GameOver = "You loose! Game over!"
}
init(id: StringId) {
self = id.rawValue
}
}
Usage:
let label = String(id: .Welcome) // "Welcome to the game!"
For fonts:
extension UIFont {
enum FontId {
case HelveticaNeueLarge
case HelveticaNeueMedium
case HelveticaNeueSmall
func font() -> UIFont {
switch self {
case .HelveticaNeueLarge:
return UIFont(name: "HelveticaNeue", size: 18)!
case .HelveticaNeueSmall:
return UIFont(name: "HelveticaNeue", size: 12)!
default:
return UIFont(name: "HelveticaNeue", size: 14)!
}
}
}
class func get(id: FontId) -> UIFont {
return id.font()
}
}
Usage:
let font = UIFont.get(.HelveticaNeueLarge) // <UICTFont: 0x7ffd38f09180> font-family: "Helvetica Neue"; font-weight: normal; font-style: normal; font-size: 18.00pt
These are only examples to demonstrate the concept, you can go much further with this.
If you use Tuist is has SwiftGen inside. It allows to use it out of the box without adding third-party solutions. The disadvantage is that you have to run it every time when you change resource
Related
In Android, we can import SVG as Vector XML,
Use this as Drawable,
Change colors of SVG Icons and add to button
void setSvgIcnForBtnFnc(Button setBtnVar, int setSvgVar, int setClrVar, String PosVar)
{
Drawable DevDmjVar = getDrawable(setSvgVar);
DevDmjVar.setBounds(0,0,Dpx24,Dpx24);
DevDmjVar.setColorFilter(new PorterDuffColorFilter(setClrVar, PorterDuff.Mode.SRC_IN));
switch (PosVar)
{
case "Tit" : setBtnVar.setCompoundDrawables(null, DevDmjVar, null, null); break;
case "Rit" : setBtnVar.setCompoundDrawables(null, null, DevDmjVar, null); break;
case "Pit" : setBtnVar.setCompoundDrawables(null, null, null, DevDmjVar); break;
default: setBtnVar.setCompoundDrawables(DevDmjVar, null, null, null); break;
}
}
How do I do this in swift for iphones ?
setBtnVar.setImage(<image: UIImage?>, forState: <UIControlState>)
UPD: Also see this UseYourLoaf blog post
Just found on Erica Sadun blog post that on iOS 11 you could use Vector Assets.
What "Vector Assets" mean:
If you click that box, the vector data will be shipped with your
application. Which, on the one hand, makes your application a little
bit larger, because the vector data takes up some space. But on the
other hand, will give you the opportunity to scale these images, which
might be useful in a number of different situations. So, one is, if
you know that this particular image is going to be used at multiple
sizes. But that might be less obvious. So, one case is a symbolic
glyph that should resize with dynamic type. Since we're thinking about
dynamic type, you should also be thinking about having glyphs that are
appearing next to type resize appropriately. Another case that's
really not obvious, is tab bar images.
... there's a really great accessibility feature that we strongly
recommend supporting, that allows for user that have turned their
dynamic type size up. ... So, we really recommend doing that to increase the usability of your app across all users
How to use:
Convert your SVG file into PDF, e.g. on ZamZar.com
Add your pdf to Assets.xcassets
Click "Preserve Vector Data" for the imported pdf.
Create UIImageView in your UIViewController and assign pdf file like UIImage.
or Asset Catalog Creator available in the Mac App Store will do steps 1 and 2 with a simple drag and drop.
iOS < 11
There is no native way to use SVG image.
Take a look at Macaw
Import framework via Cocoapod
pod "Macaw", "0.8.2"
Check their example project: this is how you render tiger.svg (located in project directory, not in an Assets.xcassets file)
import UIKit
import Macaw
class SVGExampleView: MacawView {
required init?(coder aDecoder: NSCoder) {
super.init(node: SVGParser.parse(path: "tiger"), coder: aDecoder)
}
}
There are some other third-party libraries of course:
SwiftSVG
Snowflake
SVGKit Objective-C framework
After a nightmare I came up with this solution for using SVG in button using Swift.
This is for all who dont wish to struggle like me
I used the simple SwiftSVG library for getting UIView from SVG File
Usage :
namBtnVar.setSvgImgFnc("ikn_sev", ClrVar: UIColor.cyanColor())
Install SwiftSVG Library
1) Use pod to install :
// For Swift 3
pod 'SwiftSVG'
// For Swift 2.3
pod 'SwiftSVG', '1.1.5'
2) Add framework
Goto AppSettings
-> General Tab
-> Scroll down to Linked Frameworks and Libraries
-> Click on plus icon
-> Select SVG.framework
3) Add below code anywhere in your project
extension UIButton
{
func setSvgImgFnc(svgImjFileNameVar: String, ClrVar: UIColor)
{
setImage((getSvgImgFnc(svgImjFileNameVar, ClrVar : ClrVar)), forState: .Normal)
}
}
func getSvgImgFnc(svgImjFileNameVar: String, ClrVar: UIColor) -> UIImage
{
let svgURL = NSBundle.mainBundle().URLForResource(svgImjFileNameVar, withExtension: "svg")
let svgVyuVar = UIView(SVGURL: svgURL!)
/* The width, height and viewPort are set to 100
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%"
viewBox="0 0 100 100">
So we need to set UIView Rect also same
*/
svgVyuVar.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
for svgVyuLyrIdx in svgVyuVar.layer.sublayers!
{
for subSvgVyuLyrIdx in svgVyuLyrIdx.sublayers!
{
if(subSvgVyuLyrIdx.isKindOfClass(CAShapeLayer))
{
let SvgShpLyrIdx = subSvgVyuLyrIdx as? CAShapeLayer
SvgShpLyrIdx!.fillColor = ClrVar.CGColor
}
}
}
return svgVyuVar.getImgFromVyuFnc()
}
extension UIView
{
func getImgFromVyuFnc() -> UIImage
{
UIGraphicsBeginImageContext(self.frame.size)
self.layer.renderInContext(UIGraphicsGetCurrentContext()!)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image!
}
}
You can use vector-based PDFs natively if you select Single Scale for Scale Factors after importing.
The dimensions of the PDF will be the 1x dimensions for the asset.
Xcode will generate the rasterized image for every scale. You can then use it like any other image.
I used Aleksey Potapov's answer. The conversion and everything is perfect!
However I had an issue where my image was too large for my application.
So use this to resize it to a good size for ios development:
<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 0 1000 1000" xmlns:xlink="http://www.w3.org/1999/xlink">
Check out my app: Speculid
It will automatically convert SVGs into PDFs or PNGs depending on how your asset library is setup.
I am trying to use icon font FontAwesome in Nativescript application, which is possible according to this article https://www.nativescript.org/blog/mobile-app-best-practices---use-font-instead-of-image-to-show-an-icon
I did everything that is described in that article:
Added .ttf in app/fonts
Added class in app.css
.fa{
font-family: "FontAwesome";
}
Used it in XML like so
text="" class="fa"
But result is rather disappointing:
I also tried the "\uf230" syntax, but that renders as plain text.
What am I doing wrong?
Could be a few things. Does it work on iOS? As your CSS definition is iOS compatible, not Android as Android needs the actual filename (without extension) whereas iOS needs the font name. So I have this to be xplatform-ready (the file is 'fontawesome-webfont.ttf'):
.fa {
font-family: 'FontAwesome', fontawesome-webfont;
}
The \f005 syntax is OK (<Label class="fa" [text]="'\uf005'"></Label>), but I'm using the splendid nativescript-ngx-fonticon plugin (there's also a non-Angular one) to be able to do this instead:
<Label class="fa" [text]="'fa-shopping-basket' | fonticon"></Label>
To make it work, you must make sure that the "fonts" directory is inside the "app" folder and that the following files exist:
font-awesome.eot
font-awesome.ttf
I opted to adopt this font as the default of my application, so I do not have to worry about where I'm going to use it and how much to enter the right class, everything is getting very good and the result is perfect.
In CSS, you only have to define a selector according to your interest for the source to be used, so just use the directive:
page {
font-family: 'FontAwesome'
}
Then where you want an icon, just use an html entity that represents it as it searches the site: http://fontawesome.io/icons/
See images:
You can see this video where I was based to start. It corrects in the video the extension used to be attentive.
I'm using Cordova 3.5 to build an app which contains a menu with pretty standard items in the list (home, contacts, etc.), and I want to use the native menu icons whenever possible. I believe those icons are already on the device as part of the OS, but I don't know if Cordova gives me a way to reference them.
I suppose I'd need to write a Javascript function to choose the right file name based on the platform, e.g.:
// this is pseudocode
var icon = '';
if (platform === 'android') {
icon = 'some/path/home.png';
} else {
icon = 'other/path/icon.home.png';
// or maybe a function such as the following exists:
// icon = cordova.getNativeIcon('icon.home.png');
}
$('.selector').css('background-image', icon);
Alternatively, I may be able to make do by referencing the files in CSS, e.g.:
.android .home-icon {
background-image: url('some/path/home.png');
}
.ios .home-icon {
background-image: url('other/path/icon.home.png');
}
So, how do folks handle this sort of thing in Cordova? Is there a function I can use to access native icons? Are folks just copying them into their projects? What's the best practice?
If you're working with Cordova, then you'll be working inside a web view provided by the host OS and you won't have direct access to any artwork. I've found that using icon fonts and CSS "themes" to work well enough, but that approach will replicate artwork already provided. There's extra work involved with theming for iOS 6 vs iOS 7 or 8, for example, but it's not as bad as it sounds.
IBM does have an article on partitioning your view between native and web controls, but it sounds a bit cumbersome. More details here: https://www.ibm.com/developerworks/community/blogs/worklight/entry/ios_combining_native_and_web_controls_in_cordova_based_applications
I have a webview in an ios app that basically has no id or class. (I know, right?)
But it does have a textContent field that I would like to use to select elements.
This is the element I want to find:
{"rect"=>
{"center_x"=>307.5,
"left"=>295,
"bottom"=>136,
"right"=>320,
"top"=>93,
"width"=>25,
"height"=>43,
"center_y"=>178.5},
"nodeName"=>"LI",
"id"=>"",
"textContent"=>"!!! I WANT TO FIND IT BY THIS !!!",
"center"=>{"X"=>307.5, "Y"=>178.5},
"nodeType"=>"ELEMENT_NODE",
"webView"=>
"<UIWebView: 0xe2e1400; frame = (0 0; 320 504); clipsToBounds = YES; autoresize = W+H
"class"=>"arrow",
"html"=>"<div class=\"arrow\"></div>"}
So I was able to find this using css pseudo-selectors alá
query("webView css:'el:first-child'")
I can find it by using the hashes in the results array alá
query("webView css:'li'").select {|element| element["textContent"] == "!!! I WANT TO FIND IT BY THIS !!!}
And I can refactor it a bit to use a regex alá
query("webView css:'li'").select {|element| element["textContent"] =~ /I WANT/}
But all this feels really dirty. Very un-Calabashy. Is there a better way to write this?
I have not tried your exact setup. But I do often use queries with the LIKE comparison on label.
Would that solve your problem?
ex.
element_exists("label {text LIKE 'I WANT TO FIND'}")
I wound up going with this:
query("webView css:'TITLE'{textContent CONTAINS ’I WANT’}")
It tends to work more consistently with these particular webviews (given a lack of accessibility labels in the code).
I'm porting a simple tetris-like XNA app to Android, using Mono For Android and MonoGame; I have followed the suggested steps in this link and so far, everything compiles well, and no relevant warnings fire up. However, upon loading the contents, a null parameter exception breaks the program at the point below in my program:
protected override void LoadContent() {
// ...
_font = Content.Load<Microsoft.Xna.Framework.Graphics.SpriteFont>("SpriteFont1");
// ...
}
The content root directory is set in the game constructor class:
public Game2 (){
Content.RootDirectory = "Content";
Content.RootDirectory = "Assets/Content"; // TEST.
//...}
And I have tried several combinations, all to no avail.
I have also tried setting the xnb files as Content as well as Android Assets in the Build Action property; having the linked, copied always, copied only if newer... etc.
Either way, my problem is that I don't really understand WHY and HOW should I do this. I'm rather new to the platform and to XNA as well, so this may very well be a newbie question, but the truth is after several hours banging my head and fists against the monitor/keyboard I feel stuck and need your help.
I have a library that supports variable-width fonts (generated by BMFont) on MonoGame. Unfortunately it is a renderer and so has other code around it. However, the basic idea is very simple. You can take a look at the loader here and the mesh builder (given a string) here. This builder supports fonts that spread characters across multiple pages, too.
Hope this helps!
MonoGame (2.5.1) throws NotImplementedException in ContentManager.Load for SpriteFont type. Have the same not resolved problem. I'm trying not to use DrawString.
For loading textures in Win32 application I use:
Content.RootDirectory = #"../../Content";
var sampleTexture = Content.Load<Texture2D>("Sample.png");
You even must not add it to solution.
For Andoind (MonoDroid) application you must add "Content" folder to your solution and set "Andtoid Asset" in "Sample.png" properties.
Content.RootDirectory = "Content";
var sampleTexture = Content.Load<Texture2D>("Sample.png");
See also:
http://monogame.codeplex.com/discussions/360468
http://monogame.codeplex.com/discussions/267900