Onsen UI 2 + Monaca에서 옷 관리 앱을 만든 메모

17995 단어 온 등봉 monaca

매우 편리한 UI 프레임 워크 Onsen UI를 사용하여 옷 관리 앱을 만들어 보았으므로, 감상이나 빠져 포인트 등을 써 보려고 생각합니다.

Onsen UI란?

자신의 태그를 채우는 것만으로 네이티브 앱 같은 UI를 만들 수 있는 라이브러리입니다.
나는 디자인을 전혀 할 수 없기 때문에 태그 조합만으로 멋지게 보이는 UI를 만들 수 있다는 것은 매우 도움이됩니다.

사용법은 공식 사이트 의, 튜토리얼 페이지가 제일 알기 쉽습니다.

최근 출시된 Onsen UI 2부터는 OS에 맞게 자동으로 스타일이 변화하는 기능이 추가되어 있어 이것이 대단하다!

이런 느낌이 듭니다.

iOS(플랫 디자인)

Android(머티리얼 디자인)

(Onsen UI로 만든 소스 코드를 Monaca로 스마트 폰 앱화하고 있습니다.)

이것 전부 원 소스로 만들어져 있습니다.
다만 등록 버튼(⊕버튼)은 iOS의 경우 툴바상의 팝오버, Android의 경우 플로팅 액션 버튼의 스피드 다이얼로서 구현하고 있으므로,
거기만은 OS의 종류를 보고 분리할 수 있도록 하고 있습니다.

iOS

<ons-if platform="ios">
  <ons-toolbar-button onclick="getElementById('popover').show(this)">
    <ons-icon icon="ion-ios-plus-outline"></ons-icon>
  </ons-toolbar-button>
</ons-if>

<ons-popover id="popover" cancelable direction="down">
 <ons-row>
  <ons-col class="menu-item-col">
    <span class="icon-item"></span>
    <div class="menu-item-label">アイテム登録</div>
  </ons-col>
  <ons-col class="menu-item-col">
    <span class="icon-coordinate"></span>
    <div class="menu-item-label">コーデ登録</div>
  </ons-col>
 </ons-row>
</ons-popover>

안드로이드

<ons-if platform="android">
  <ons-speed-dial position="bottom center" direction="up">
    <ons-fab>
      <ons-icon icon="plus" size="20px"></ons-icon>
    </ons-fab>
    <ons-speed-dial-item>
      <span class="icon-item"></span>        
      <div class="fab-label">アイテム登録</div>
    </ons-speed-dial-item>        
    <ons-speed-dial-item>
      <span class="icon-coordinate"></span>      
      <div class="fab-label">コーデ登録</div>
    </ons-speed-dial-item>
  </ons-speed-dial>
</ons-if>

빠진 포인트

튜토리얼 페이지를 보면, 각 컴퍼넌트의 사용법은 곧바로 알 수 있습니다.
다만, 복수의 컴퍼넌트를 조합하는 방법을 잘 모르고 고민했습니다.
이번에 만든 앱은 다음과 같은 구조로 되어 있습니다만, 이것이 좀처럼 만들 수 없다!

우선은 간단하게, 이하와 같이 <ons-toolbar> 와 <ons-tabbar> 를 양쪽 모두 index.html내에 써 보았습니다.

index.html

<body>
  <ons-toolbar>
    <div class="center">Onsen Closet</div>
    <div class="right">
      <ons-if platform="ios">
        <ons-toolbar-button onclick="getElementById('popover').show(this)">
          <ons-icon icon="ion-ios-plus-outline"></ons-icon>
        </ons-toolbar-button>
      </ons-if>
    </div>
  </ons-toolbar>

  <ons-tabbar position="top" id="tabbar">
    <ons-tab page="top.html" active>
      <span>Top</span>
    </ons-tab>
    <ons-tab page="my_item.html">
      <span>Myアイテム</span>
    </ons-tab>
    <ons-tab page="my_coordinate.html">
      <span>Myコーデ</span>
    </ons-tab>
  </ons-tabbar>
</body>

결과 1

무무…… 탭 바 위에 툴바가 겹쳐서 그려져 버렸습니다…

튜토리얼 페이지를 확인했을 때, 최초로 로드되는 HTML 파일에 <ons-tabbar> 를 배치해, <ons-tab> 의 참조처 HTML 파일에 <ons-toolbar> 가 배치되고 있었습니다.

우선 튜토리얼을 모방해 보겠습니다.

index.html

<body>
  <ons-tabbar position="bottom" id="tabbar">
    <ons-tab page="top.html" active>
      <span>Top</span>
    </ons-tab>
    <ons-tab page="my_item.html">
      <span>Myアイテム</span>
    </ons-tab>
    <ons-tab page="my_coordinate.html">
      <span>Myコーデ</span>
    </ons-tab>
  </ons-tabbar>
</body>

top.html

<ons-page>
  <ons-toolbar>
    <div class="center">Onsen Closet</div>
    <div class="right">
      <ons-if platform="ios">
        <ons-toolbar-button onclick="getElementById('popover').show(this)">
          <ons-icon icon="ion-ios-plus-outline"></ons-icon>
        </ons-toolbar-button>
      </ons-if>
    </div>
  </ons-toolbar>

  <h1>今日のおすすめ<br>コーディネート</h1>
  <!-- 以下省略 -->
</ons-page>

결과 2

오, 둘 다 그렸습니다. 탭 바는 상단에 놓고 싶으므로 <ons-tabbar> 의 position 속성을 top 로 변경합니다.

  <ons-tabbar position="top" id="tabbar">

결과 3

툴바를 올려 놓고 싶다!

그래서, 여러가지 고민한 결과, 이하와 같이 하면 실현할 수 있었습니다.

index.html

<body>
  <ons-navigator id="navi" page="tabbar.html">
  </ons-navigator>
</body>

tabbar.html

<ons-page>
  <ons-toolbar>
    <div class="center">Onsen Closet</div>
    <div class="right">
      <ons-if platform="ios">
        <ons-toolbar-button onclick="getElementById('popover').show(this)">
          <ons-icon icon="ion-ios-plus-outline"></ons-icon>
        </ons-toolbar-button>
      </ons-if>
    </div>
  </ons-toolbar>

  <ons-tabbar position="top" id="tabbar">
    <ons-tab page="top.html" active>
      <span>Top</span>
    </ons-tab>
    <ons-tab page="my_item.html">
      <span>Myアイテム</span>
    </ons-tab>
    <ons-tab page="my_coordinate.html">
      <span>Myコーデ</span>
    </ons-tab>
  </ons-tabbar>
</ons-page>

top.html

<ons-page>
  <h1>今日のおすすめ<br>コーディネート</h1>
  <!-- 以下省略 -->
</ons-page>

결과 4

<ons-navigator> 라는 것은 복수의 페이지를 관리하는 역할을 가지는 컴퍼넌트로, 이것을 최상위에 배치하는 것으로 실현할 수 있었습니다.

2016/12/20 추가

실은 다음과 같이, <ons-page> 안에 <ons-toolbar> 와 <ons-tabbar> 를 포함하는 것만으로 의도한 대로 툴바와 탭 바를 그릴 수가 있습니다.
(GIF 애니메이션을 보면 알겠지만, 이 앱에서는 다음 페이지로 전환한 경우에는 탭을 지우고 싶었으므로 최상위에 <ons-navigator>를 배치하고 있습니다.)

index.html

<body>
 <ons-page>
  <ons-toolbar>
    <div class="center">Onsen Closet</div>
    <div class="right">
      <ons-if platform="ios">
        <ons-toolbar-button onclick="getElementById('popover').show(this)">
          <ons-icon icon="ion-ios-plus-outline"></ons-icon>
        </ons-toolbar-button>
      </ons-if>
    </div>
  </ons-toolbar>

  <ons-tabbar position="top" id="tabbar">
    <ons-tab page="top.html" active>
      <span>Top</span>
    </ons-tab>
    <ons-tab page="my_item.html">
      <span>Myアイテム</span>
    </ons-tab>
    <ons-tab page="my_coordinate.html">
      <span>Myコーデ</span>
    </ons-tab>
  </ons-tabbar>
 </ons-page>
</body>

요약

Onsen UI를 다루기 위해서는 각 컴포넌트의 특성을 깊이 이해할 필요가 있지만, 어쨌든 간편하게 UI를 만들 수 있기 때문에 감동했습니다!
HTML5 모바일 앱/모바일 사이트를 신속하게 구현하고 싶다면 Onsen UI를 사용하지 않는 손은 없습니다!
여러분도 꼭 시험해보세요.

이 기사는 Onsen UI Advent Calendar 2016의 2 일째 기사로 작성되었습니다.
그럼, Have a Merry Christmas☆
　

Reference

이 문제에 관하여(Onsen UI 2 + Monaca에서 옷 관리 앱을 만든 메모), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/coboco/items/61b36355b2b72d8225ee

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

NCMB와 MONACA를 사용하여 앱 개발 (그룹별로 로그인 정보를 볼 수 있음)

OnsenUI 메뉴와 탭 바를 결합하여 사용하는 샘플

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다