Android에서 소프트웨어 키보드를 표시하면 View 객체가 올라갑니다.

Titanium에는 훌륭한 서포트 사이트( ht tp // 스푼 rt. 치타니 m-모비. jp/ )가 있기 때문에, 지금까지 Qiita에는 아무것도 투고하고 있지 않았습니다만, 요전날의 유저회에서 이대로는 너무 수수하고 세상으로부터 잊혀져 버릴 것 같은 우려가 제출되었으므로 게시해 보겠습니다.

그래서, 표제의 건입니다만. 글쎄, 고마워. 예를 들어 WebView를 표시하고 뒤로 버튼과 같은 컨트롤에 대한 View를 바닥글 부분에 표시한다고 가정합니다.

<Alloy>
  <Window>
    <WebView id="webview" url="http://www.google.com/" />
    <View id="footer">
      <Button>戻る</Button>
      <Button>進む</Button>
      <Button>再読込</Button>
    </View>
  </Window>
</Alloy>

footer 객체를 화면 하단에 표시하고 싶기 때문에 tss는 이런 느낌입니까? Button 객체는 생략하네요.

"#webview":{
  top: 0,
  left: 0,
  right: 0,
  bottom: 60
},
"#footer":{
  bottom: 0,
  height: 60,
  left: 0,
  right: 0
}

그래서, 이 상태로 동작시키면, 보기 정상적으로 움직이고 있는 것 같은 느낌이 듭니다.



하지만 WebView에서 텍스트 필드를 탭하면 ...



This Is What You Want... This Is What You Get!

footer 객체가 올라가 키보드 위에 표시됩니다. 이것은 우울하다.

사실 이것은 footer 객체가 bottom: 0으로 지정되어 있기 때문입니다. 그래서 같은 레이아웃을 재현하고 싶다면 bottom: 0을 지워서 단말기에 맞추어 WebView의 높이를 조정하고 footer의 View를 배치하면 됩니다.

끝났어.

더 이상 아무것도 없기 때문에.

자 돌아왔다 돌아왔다.

정말이라면, 너도 끈질긴다. 움직였지?

움직이지 않니?

아, 그래.

맞습니다. WebView의 높이를 지정하는 것은 이 경우 어떻게 하면 좋을까요.

Titanium의 API에서 화면 높이를 얻으려면 "Ti.Platform.displayCaps.platformHeight"를 사용할 수 있습니다. 하지만 이것, 실은 안드로이드의 경우는 값을 픽셀로 돌려주지요. iOS는 DIP이므로 단말의 해상도를 의식하지 않아도 됩니다만, Android라고 위의 tss에서는 디폴트의 dp를 지정하고 있기 때문에, WebView의 높이를 조정하려고 하면, footer의 View의 높이를 픽셀로 변환하여 계산해야합니다.

거기서, JS측을 이런 식으로 해 봅니다. 72는 헤더의 ActionBar의 Portrait시의 높이이므로 별로 신경 쓰지 마십시오.

function pixelToDp(px){
  return (px / (Titanium.Platform.displayCaps.dpi / 160));
}

$.index.addEventListener('open', function(e){
  var actionBarHeight = 72;
  var footerHeight = 60;
  var height = pixelToDp(Ti.Platform.displayCaps.platformHeight) - actionBarHeight - footerHeight;
  //$.webview.applyProperties({height: height}); // -> これがあると不具合が*1
  $.footer.applyProperties({top: height});
});

그래서 tss에서 footer의 bottom 지정을 지웁시다.

"#footer":{
  layout: 'absolute',
  top: 0,
  height: 60,
  left: 0,
  right: 0
},
"WebView":{
  top: 0,
  left: 0,
  right: 0,
  bottom: 60
},

결과는 이쪽:



Qiita는, 「Q」의 뒤가 「U」가 되어 있지 않은 단어에 알레르기가 있기 때문에 사용하지 않았습니다만, 상당히 검색등에서 활용되고 있는 분도 계시는 것 같기 때문에, 앞으로도 가끔 무엇 글을 씁니다.

*1 height를 변경하면 키보드가 표시되었을 때의 거동이 바뀌어 버리는 것 같습니다.