[iOS·Android]Alloy에서 타이틀바를 템플릿화하여 작업량 감소

제목 표시 줄의 코드가 각 화면의 코드에 기록되면,
화면수가 3화면이라면 좋지만, 5화면이나 10화면 등 화면수가 늘어난 경우에,
제목 표시 줄의 사양을 변경하면 모든 화면의 코드를 변경하는 것이 매우 어렵습니다.
그리고 절대로 고쳐 잊어버리거나 해서 동기 부여다 하락입니다.

그렇게하지 않으려면 제목 표시 줄을 각 화면의 코드와 분리하여 즐겁게하십시오.

타이틀 바의 뷰를 다음과 같이 작성합니다. 미리 백 버튼의 이미지를 assets 폴더 이하에 두고 있습니다.

app/views/titlebar.xml

<Alloy>
  <View id="titlebar">
    <ImageView id="backBtn" image="/backbtn_arrow.png" onClick="doWinBack" />
    <Label id="title" text="notTitle" />
  </View>
</Alloy>

다음으로 제목 표시 줄의 스타일을 정의합니다. iOS의 경우 네비게이션 바에 닿지 않도록 top의 위치를 ​​지정합니다.

app/styles/titlebar.tss

"#backBtn":{
  height:"50dp",
  width:"50dp",
  left:0
}

"#titlebar": {
  top:"0dp",
  height: "50dp",
  width: Ti.UI.FILL,
  backgroundColor: "red"
}

"#titlebar[platform=ios]": {
  top: "20dp",
}

마지막으로 타이틀명을 부모로부터 받았을 경우, 타이틀명을 부여하는 처리와, 백 버튼의 함수를 작성합니다.

app/controllers/titlebar.js

var titleName = arguments[0].title || {};

if (titleName) {
  $.title.setText(titleName); //タイトル名を追加
}

function doWinBack(e) {
  e.source.getParent().getParent().close(); //親ウィンドウを閉じる
}

이번에는 아무래도 titlebar.js에 쓰고 싶었으므로, 부모 윈도우를 취득하기 위해서 getParent를 사용하고 있습니다만, 공식 문서가 없기 때문에 동작이 불안합니다.
게다가 view의 계층이 바뀌면 올바르게 동작하지 않을 가능성도 있습니다.
이 경우, alloy.js에 현재 윈도우를 유지시켜, alloy.js 측에 백 버튼의 처리를 쓰는 것도 손이라고 생각합니다.

이제 타이틀 바를 템플리화 할 수 있었으므로 타이틀 바를 사용하는 화면의 뷰에서이 타이틀 바를 호출하여 사용할 수 있습니다. Require 태그에 title 속성을 부여하고 제목 이름을 전달합니다.

app/views/index.xml

<Alloy>
  <Window class="container">
    <Require src="titlebar" title="win1" type="view" />
    <Label id="label" onClick="doClick">Window1</Label>
  </Window>
</Alloy>

본심을 말하면, 제대로 iOS, Android에서 제대로 된 타이틀 바 사용해야 하는 것이겠지만・・・