타이타늄 벡터 아이콘 사용하기

안녕하세요?

타이타늄 입문 개발자 입니다.

앱을 만드는 도중에 일반 텍스트 처럼 아이콘을 사용할 수 있다고 하던데

실제로 어떻게 사용해야할지가 감이 도저히 잡히지 않네요 ㅜㅠ

  • 하고 싶은것

아래 그림처럼 버튼 하나에 아이콘(이미지 아님)과 텍스트를 함께 넣고 싶습니다.

이미지는 아이콘은 http://ticons.fokkezb.nl 사이트를 통해 생성했습니다.

  • 궁금한 사항은 다음과 같습니다.
  1. 작업하는 프로젝트의 어느 곳에 어떤 파일을 두어야 하는지?
  2. js 에서 혹은 xml에서 사용하려면 어떤 코드로 작성을 해야 하는지?

이곳 게시판도 찾아보려 했는데 이런 초보(?)적인 내용은 없는것 같습니다. ㅜ

도움을 부탁드립니다.

쉬운 방법으로 소개해드릴께요.
저는 fontawesome을 사용합니다.

  1. 위에 링크에서 폰트어썸 위젯 Download 받기. (1.4.1 버젼)

  2. 프로젝트의 widgets 폴더에 다운받은 파일들을 붙여넣기

  3. 프로젝트 config.json 파일 dependencies에 위젯을 추가해주기.

아래 첨부된 사진을 보면 쉽게 이해가 가실 것 같네요.

이렇게 해주시면 벡터아이콘 준비는 끝났습니다.

//xml 파일에 아래처럼 해주시고 폰트 사이즈등 디테일한 것은 tss에서 하시면 끝입니다. 
<Label icon="fa-pencil-square-o" id="iconWrite" > Hello</Label>
<Widget id="fa" src="com.mattmcfarland.fontawesome" />

이렇게 되면 아이콘 뒤에 Hello 가 오게 됩니다.
원하는 답이 되었는지 모르겠네요.

1개의 좋아요

완전 감사합니다 ㅜㅠ

친절한 설명덕에 한번에 떡하니 되었습니다!!!

한가지 더 문의 드리고자 합니다.

말씀해주신 방법으로 아이콘이 나오는 듯하다가 무언가 오류(?)가 발생한것 같습니다.

아이콘이 한번은 정상적으로 보이다가 아이콘을 찾지 못하는 듯한 증상이 보입니다.

먼저 config.json에는 다음과 같이 작업했습니다.

위젯 아래에는 다음과 같이 위젯을 추가했고요.

xml 파일의 하단부에 알려주신 코드를 추가했습니다.

보여지는 결과는 물음표가 박스에 쌓여진 채로 보이는 증상이 있습니다.

무엇때문에 이렇게 되는지 알수 있을까요??

잘나오다가 안나온다니 … 음. 스타일에서 폰트를 지정하신건 아니세요?
그리고 tishadow를 사용하는 경우에는 폰트 추가후에 다시 build를 해보세요.

저는 위젯을 사용하진 않고 아래 iconfont라는 도구를 이용하여 webfont의 css를 tss 로 변경하고 이를 사용합니다. 위 위젯도 유용하겠네요.

위에 코드스샷에서

<Label icon="fa-pencil-square-o" id="iconWrite" > Hello </Label>
.... 중략....
<Widget id="fa" src="com.mattmcfarland.fontawesome"/>
</Window>

의 형식으로 하고 tss에서는 바깥에 버튼에 대한 스타일만 적용했습니다.
닫는 윈도우의 태그전에 위젯을 추가하는 코드를 xml에만 넣었고요.

studio에서 프로젝트 클린과 tishadow를 사용해서 재 build를 해도 같은 현상이 일어납니다.

혹시 SDK 버전이 문제 일까 싶어서 SDK버전도 3.5.1.GA와 3.2.2.GA 버전을 두개다 해보았는데 마찬가지라서요(매번 프로젝트 클린을 했습니다.)

코드를 보니 별다른 문제가 없는 것 같은데요.
widgets 폴더가 app폴더 안에 있는거 맞겠지요?

그리고 tss는 어떤 property 지정하셨는지요?

집에 개발환경이 집에 구축이 안되어 있어서 snv으로 집에서 확인중입니다.

우선 위젯의 위치와 해당 tss 부분을 함께 보여드릴께요

tss 속성은 아이콘을 감싸고 있는 버튼에 속성을 적용했습니다.

왜 안보였는지 알겠네요.
버튼 안에 Label을 넣지마시고 버튼을 뷰로 만드시고 해보시면 될 거예요 :smile:
예)

<View id="viewFB">
     <Label icon="fa-car"> SIGN UP VIA FACEBOOK</Label>
</View>

한 가지 팁으로는 안드로이드의 경우는 폰트어썸의 fonts 폴더를 카피하셔서 프로젝트 assets 폴더 안에 넣으시면 됩니다.

답변 감사드립니다~

말씀해주신 방법도 이전에 해보긴 했었는데 같은 현상이 발생했었어요 ㅎ

혹시나 싶어 아예 새로운 프로젝트를 생성해서 아이콘만 테스트 해보려 했는데 같은 이슈가 발생하더라고요 ^^;;

새로운 프로젝트의 index.xml 을 아래와 같이 생성했었고.

<Alloy>
  <Window class="container">
	<View>
	     <Label icon="fa-car"> SIGN UP VIA FACEBOOK</Label>
	</View>
	<Widget id="fa" src="com.mattmcfarland.fontawesome"/>
  </Window>
</Alloy>

config.json 에는 다음과 같이 세팅했습니다.

{
  "global": {},
  "env:development": {},
  "env:test": {},
  "env:production": {},
  "os:android": {},
  "os:ios": {},
  "os:mobileweb": {},
  "os:windows": {},
  "dependencies": {
	"com.mattmcfarland.fontawesome": "1.4.1"
  }
}

위젯을 복사한 위치입니다.

실행한 결과는 다음과 같습니다.

sdk버전은 3.5.1.GA이고 테스트 대상은 IOS만 테스트 하고 있습니다.

아이콘 폰트 사용하는게 이렇게 고생할 이슈가 아닌데 뭔가 잘 안풀리시나 보군요.

저는 위에서 사용하는 위젯을 사용해보진 않았습니다. 그냥 기본적인 방법으로 사용합니다. css의 class로 아이콘을 지정하듯 tss에 해당 스타일을 생성(iconfont 툴로 자동생성)하여 사용합니다.

가장 기본적인 방법으로 한번 해보세요.
http://docs.appcelerator.com/platform/latest/#!/guide/Custom_Fonts

아래처럼 속성을 넣어보셔도 달라지는 것이 없나요?
그리고 그래도 문제가 있다면 프로젝트의 Resources 폴더를 지우고 Clean 한 후 Run해보시길 권해드립니다.
만약 그래도 안된다면 이유를 잘 모르겠네요. yomybaby님 말처럼 어려운 것이 아닌데 이상하네요. yomybaby님의 소개해주신 기본적인 방법으로 해보시는 것도 좋을 듯 합니다.

//xml
 <Label icon="fa-car" id="iconFB"> SIGN UP VIA FACEBOOK</Label>

//tss
"#iconFB" :{
    width : Ti.UI.SIZE,
    height : Ti.UI.SIZE,
    font : {fontSize:"25dp"},
    color : "white"
}

네 속성과는 상관없이 같은 현상이 발생합니다.

Resource 폴더를 지우고 프로젝트 Clean후 빌드해도 계속 같은 증상이 나기도 합니다.

처음 질문 올리고 한번은 되었던것이 어떻게 했을때 되었는지를 곰곰히 되짚어 보다가.

오늘 우연히 Titanium Studio에서 시뮬레이터를 실행시켜 보았는데

이때는 정상적으로 아이콘이 보여지는걸 발견 했습니다.

그동안은 계속 tishadow를 사용해서 빌드를 했었거든요… ㅜ

스튜디오에서 빌드할 땐 아이콘이 정상적으로 보이니 그냥 무시해도 될지 좀 걱정이 됩니다.

이종은님께서 알려주신 방법도 시도해 보겠습니다

다들 도움주셔서 너무 감사합니다~ ^^

1개의 좋아요

사실 저도 조금 의야했던부분이 위에서 언급한 위젯이 폰트파일을 widget/assets/fonts 들어있는데 이게 원래 alloy spec이 아니걸로알고 있습니다. fonts 파일은 app/assets/fonts에 넣어야합니다.

tishadow 상에서도 위 widget을 사용하고 싶다면 fontAwesome.ttfapp/assets/fonts에 넣고 tishadow로 다시 빌드해보세요.

아니나 다를까 저 widget의 readme 파일을 보니 아래와 같이 설명이 나와있네요.

ANDROID: Copy fontAwesome.ttf from com.mattmcfarland.fontawesome/assets/fonts to app/assets/fonts

android 뿐만 아니라 ios도 alloy 설명에 따르면 app/assets/fonts에 넣으라고 나와있습니다. (좀 더 정확히 말하자면 가이드에서는 app/assets/iphone/fonts 나 app/assets/android/fonts 와 같이 플랫폼 폴더에 넣으라고 되어 있는데 둘다 쓰는 경우는 app/assets/fonts에만 넣는 것과 동일합니다.)

http://docs.appcelerator.com/platform/latest/#!/guide/Custom_Fonts-section-29004935_CustomFonts-Usingacustomfont(Alloyapplication)

2개의 좋아요

희두님 종은님 두분께 너무 감사드립니다.

말씀해주신 방법으로 적용하니 이제는 tishadow에서도 아이콘이 예쁘게 잘 보이네요 ^^

깃허브에 설명글은 저도 보았었는데 IOS가 대상 타겟이라 무시했던 부분이었어요ㅎ

장시간 동안 도움주신 두분께 다시한번 더 감사드립니다^^ ㅎ

1개의 좋아요