【Android】Serviceで作成したViewを使う
Activityで立ち上げた時にServiceで作成したViewを使用する時に躓いたところを上げておきます。
■やりたい流れ
1.先にViewを生成しておく(Service)
★Activity起動
2.ActivityとServiceをBindする(Activity)
3.Serviceで先に作っておいたView①を( ゚д゚)クレ(Activity)
4.やったね。なんか少し早くなった気がするよ。
1回目のActivityの起動は成功し、
2回目の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の状態を持っているため。
2回目の起動時にはすでに一度目の起動時の親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
【CSS】縦横中央寄せ
▼中央寄せは簡単だ
CSSの縦横中央寄せに関してその1
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.子要素をインライン要素にする
【CSS3, JavaScript】画面遷移時のアニメーションに関して
ウェブアプリケーションの画面遷移ってどうすればいいんですかね。単なるリンクでもいいんですが、それだと毎回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(); });
これで画面遷移になりました。ポイントとしては読み込んだデータを画面外に配置するところです。そして、データをラップしたタグ自体にアニメーションを行います。
これは、画面遷移ではなくただのDOMの切り替えですのでURLに変更が加わりませんので気をつけるところですね。
この辺りを解消するために、HTML5から導入されたpushState/popStateを絡めてやるのがいいみたいです。
質より量ってことで、これからちゃんとアウトプットしていきたいと思います。
アプリリリースしました~!
タイトルの通りリリースしました。
「アプリ開発者必見!週アス誌面争奪GQアプリコンテスト開催」ってのをタイムラインで見っけたので、急いで作りました。
肝心のアプリのほうですが、勉強会の情報を一覧で表示するアプリです。
残念ながら、それしか出来ません。
ですが、とりあえず以下は出来ます。
・以下のサイトからイベント取得して表示はできます。
・取得したイベントの検索はできます。
・カレンダーにイベント登録はできます。
今後もう少しだけアップデートしていきます。
※androidバージョン 4.x以降でないとまともに動かないっす。
グーグルPlayに先ほどアップロードしたばっかなので、アップロードされたリンクを貼ります。
デベロッパー登録からアプリ登録まで30分も掛からないなんて仕事はやいっす。というわけでリンクです。
リンク:https://play.google.com/store/apps/details?id=com.ginsyama.hatenablog.itcalendar
■IT Calendar
■スクショ
ブログ始めました
自身の知識のアウトプットをしていきたい。