센차터치(Sench Touch 2) 하단의 탭바(Ext.tab.Panel)와 같이 아이콘 있는 상단 탭바 만들기.(_tabs.scss 및 compass 사용)
네이버 카페 : http://cafe.naver.com/mobilewebapp
- 센차터치의 하단의 탭바를 상단으로 포지션을 변경 하면 아이콘이 없는 상태로 변경이 된다.
상단의 탭바 상태를 다음과 같이 변경 하고자 한다.
그림 1) 과 같은 탭바를 그림 2)와 같은 탭바로 구성 하기 위한 것이 이번 프로젝트 진행의 목적이 있다.
그림 1) | 그림 2) |
- 프로젝트 개발 환경.
- Mac OSX Lion.
- sencha touch 2.0.1 framework, sench sdk tools 2.0.0 beta3
- Sublime Text2. - 프로젝트 생성을 한다.
프로젝트명은 “TabsTop”으로 한다. - 도스 프롬프트 창이나 맥 OSX 터미널에서 다음과 같이 sencha 명령어로 신규 프로젝트를 생성한다.
yaio:sencha-touch-2.0.1-commercial yaioyaio$ sencha app create TabsTop ../TabsTop - 첫 실행 화면은 다음과 같다.
- 위의 내용에서 하단의 탭바를 상단으로 똑 같이 나타나게 scss 파일을 수정 작업을 진행할 것이다.
다음 차례부터는 _tabs.scss 파일을 수정 하고, app.scss 파일에 한 줄만 추가 하면 하단 탭바를 상단으로 옮기고 같은 형태를 유지 할 수 있다.
본격적으로 코딩을 해 보도록 합시다. - _tabs.scss 내용 수정한다. - $include-top-tabs-user 변수를 추가.
상단에 $include-top-tabs-user 변수를 추가 선언한다.
/** * @var {boolean} $include-top-tabs * Optionally exclude top tab styles by setting to false. */ $include-top-tabs: true !default; /** * @var {boolean} $include-bottom-tabs * Optionally exclude bottom tab styles by setting to false. */ $include-bottom-tabs: true !default; /** * @var {boolean} $include-top-tabs-user * Optionally exclude top tab styles by setting to false. */ $include-top-tabs-user: true !default; |
- _tabs.scss 내용 수정한다. - $tabs-top-icon-size 변수를 추가.
상단 탭바에 사용할 아이콘 사이즈 $tabs-top-icon-size 변수를 추가 선언 한다.
/** * @var {string} $tabs-bottom-radius * Border-radius for bottom tabs. */ $tabs-bottom-radius: .25em !default; /** * @var {string} $tabs-top-icon-size * Icon size for bottom tabs */ $tabs-top-icon-size: 1.65em !default; /** * @var {string} $tabs-bottom-icon-size * Icon size for bottom tabs */ $tabs-bottom-icon-size: 1.65em !default; |
- _tabs.scss 내용 수정한다. - 상단 탭바을 위한 전용 mixin을 추가
@mixin sencha-tabs { } 이 부분에 상단 탭바을 위한 전용 mixin을 추가 정의 한다.
다음과 같이 2군데를 추가 하면 된다.
@if $include-top-tabs { @include sencha-top-tabs; } @if $include-bottom-tabs { @include sencha-bottom-tabs; } // $include-top-tabs-user 이것이 true 이면 sencha-top-tabs-user mixin을 사용 @if $include-top-tabs-user { @include sencha-top-tabs-user; } // sencha-top-tabs-user mixin 정의. .x-tabbar.x-docked-top { border-top-width: .1em; border-top-style: solid; height: 3em; padding: 0; .x-tab { @if $include-border-radius { @include border-radius($tabs-bottom-radius); } min-width: 3.3em; position: relative; padding-top: .2em; .x-button-icon { -webkit-mask-size: $tabs-top-icon-size; width: $tabs-top-icon-size; height: $tabs-top-icon-size; display: block; margin: 0 auto; position: relative; } .x-button-label { margin: 0; padding: .1em 0 .2em 0; font-size: 9px; line-height: 12px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } } } @if $include-default-icons { @include pictos-iconmask('bookmarks'); @include pictos-iconmask('download'); @include pictos-iconmask('favorites'); @include pictos-iconmask('info'); @include pictos-iconmask('more'); @include pictos-iconmask('time'); @include pictos-iconmask('user'); @include pictos-iconmask('team'); } } |
- _tabs.scss 내용 수정한다. - @mixin sencha-tabbar-ui() mixin 수정.
다음은 @mixin sencha-tabbar-ui() mixin 내부 맨 끝에 다음 항목을 추가할 차례이다.
@if $include-top-tabs-user { .x-tabbar-#{$ui-label}.x-docked-top { .x-inner.x-tabbar-inner.x-layout-hbox { // 탭바의 아이콘이 중앙으로 오도록 설정. -webkit-box-pack: center !important; } .x-tab { @include bevel-by-background($bar-color); .x-button-icon { @include mask-by-background($bar-color, 20%, $tabs-bar-gradient); } } .x-tab-active { @include background-gradient(darken($bar-color, 5%), recessed); @include bevel-by-background(lighten($bar-color, 10%)); @if ($include-tab-highlights) { @include box-shadow(darken($bar-color, 10%) 0 0 .25em inset); } .x-button-icon { @include background-gradient($tab-active-color, $tabs-bottom-active-gradient); } } } } |
- 이제는 실제 사용 하고 있는 app.scss 파일에 다음과 같이 한 줄만 첫 줄에 추가 하면 된다.
$include-top-tabs: false; - 마지막으로 compass로 scss 파일을 compile 하면 된다.
- 터미널이나 도스 창에서 해당 프로젝트의 resources/sass 로 이동한다.
- compass watch 하면 자동으로 scss 파일을 컴파일 하여 실제 사용 하는 app.css 파일을 생성해 준다. - 다음은 실제 실행한 화면의 모습이다.
지금 보는 화면은 상단에 그대로 탭바와 툴바가 같이 위치 하는 모습이다.
지금 보는 화면은 상단에 탭바 하단에 툴바가 위치한 모습이다. - 위의 내용을 다른 방법으로 만들어 좀더 세밀하게 할 수 있을 것이다.
프로필.
소속: (주)애드웹커뮤니케이션
부서 : 개발팀
직위: 팀장
이름 : 안병도(꼬장)
메일 : yaio@naver.com,
yaioyaio@gmail.com,
program@adweb.co.kr
네이버카페 : http://cafe.naver.com/mobilewebapp
트위터 : @yaioyaio
페이스북 : http://www.facebook.com/byoungdo.ahn
페이스북그룹 : http://www.facebook.com/groups/korea.sencha/
워드프레스: http://yaioyaio.wordpress.com/
티스토리 : http://senchatouch.tistory.com/
