2014-04-26

【Android】Serviceで作成したViewを使う

Activityで立ち上げた時にServiceで作成したViewを使用する時に躓いたところを上げておきます。

■やりたい流れ
１．先にViewを生成しておく（Service）
　★Activity起動
２．ActivityとServiceをBindする（Activity）
３．Serviceで先に作っておいたView①を( ﾟдﾟ)ｸﾚ（Activity）
４．やったね。なんか少し早くなった気がするよ。

１回目のActivityの起動は成功し、
２回目のActivityの起動時に下記のようなエラーが出ました。。。

04-25 23:34:12.393: E/AndroidRuntime(24746): Process: com.example.serviceview, PID: 24746
04-25 23:34:12.393: E/AndroidRuntime(24746): java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.

これはServiceで生成したView自身が親Viewの状態を持っているため。
２回目の起動時にはすでに一度目の起動時の親Viewを持ってしまっているためにエラーが出てたようです。
なので、Serviceで作ったViewのデータをActivityに渡す際には一度Service側で親Viewを削除してから、Activityに渡すことで上記のエラーを解決することが出来ました。

    public View getSetUpView(){
        ViewGroup view = (ViewGroup) mView.getParent();
        if(view != null) view.removeView(mView);
        return mView;
    }

プロジェクトのサンプル
https://github.com/ginsyama/ServiceView

2013-11-18

【CSS】縦横中央寄せ

CSS3

▼中央寄せは簡単だ
CSSの縦横中央寄せに関してその１

index.html

<div class="btn-test">
   <a href="">ほげ</div>
</div>

.btn-test{
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    width: 100px;
    height: 100px;
    background: #000;
}

上記のとおりに記述することにより、btn-testの子要素であるaタグが縦横中央寄せ出来ます。
気をつけるのは、
1.親の縦横を固定値にしておかないと、子要素の中央寄せが効かない
2.子要素をインライン要素にする

参考URL：http://qiita.com/prinum/items/4ef7ea02f0ffd72ec940

2013-11-17

【CSS3, JavaScript】画面遷移時のアニメーションに関して

プログラミング JavaScript CSS3

　ウェブアプリケーションの画面遷移ってどうすればいいんですかね。単なるリンクでもいいんですが、それだと毎回css, jsの読込が走るのも馬鹿らしい気がします。今回はajaxを使って画面の一部を切り替えることで右から左へのアニメーションを含んだ画面遷移（風）の実現をしたいと思います。　

index.html

<div class="container">
  <div id="chageContent" class="contents page-top">
     <div class="wrap">
       <a class="btn pjax" href="html/page1.html">NEXT</a>
     </div>
  </div>
</div>

page1.html

<div class="container">
  <div id="pjaxContent" class="contents">
    <div class="page-1"></div>
  </div>
</div>

ざっくりとした流れはこんな感じを想定します。

1.CSSでアニメーション開始
2.アニメーション完了後、ajaxで通信開始（次ページ読込）
3.成功時に取得したページの要素に切り替え
4.切り替えたDOMにアニメーションに実行する

残念ながらこの方法だと、最初のアニメーションと次のアニメーションとの間に白いページが見えるのが気になりますよね。

それを回避したのが次の方法です。

1.ajaxで通信開始（次ページ読込）
2.成功時に取得したページを追加
3.CSS3のアニメーションを実行
4.アニメーション完了後に切り替え前のDOMを削除

こんな感じでしょうか。

main.css

@-webkit-keyframes right-to-left {
  from {
    margin-left: 0%;
    opacity: 1;
  }
  to {
    margin-left: -100%;
    opacity: 1;
  }
}

main.js

function nextPage ( nextPage, tdata) {
  $.ajax({
    type:'GET',
    url: nextPage,
    dataType:"html",
    success:function(data){
      $('#changeContent').after($(data).find('.page-1').css({
        "position": "absolute",
        "margin-left": "100%",
        "top" : "0"}));
      $('.container').css({
        "-webkit-animation": "right-to-left 0.3s",
        "-webkit-animation-fill-mode" : "forwards"});
    }
  });

  $(document).on( "webkitAnimationEnd", ".container", function(){
    $("#changeContent").remove();
});