読者です 読者をやめる 読者になる 読者になる

Zinc #35 タブの切り替え

新しいタブを追加できるようにしたので、今度はタブを切り替える機能を実装する・・・。

f:id:BG1:20161016101943p:plain

Fragmentを追加・・・。

f:id:BG1:20161016101448p:plain

タブを切り替えるUIなのでTabsFragmentとする・・・。

f:id:BG1:20161016102030p:plain

Classを追加・・・。

f:id:BG1:20161016101625p:plain

タブ一覧はGridViewで表示する・・・。
そのGridViewのアイテムとして持っておく要素をTabsGridItemクラスに定義する・・・。

f:id:BG1:20161016102121p:plain

さらにresourceを追加・・・。

f:id:BG1:20161016102137p:plain

grid_item_tabsは、GridViewのアイテムのレイアウト・・・。

f:id:BG1:20161016102238p:plain

GridViewのアダプタ、TabsGridAdapterクラスも追加しておく・・・。

まず、fragment_tabs.xmlは、

GridViewのtabsGridViewを配置・・・。
GridViewのアイテムのレイアウトは、grid_item_tabs.xmlに・・・。

ImageViewでタブが現在ロードしているWebページのサムネイルを表示するようにしている・・・。
その下にWebページのタイトルを表示・・・。

TabsGridItem.javaにアイテムの要素を定義・・・。

dispNameはWebページのタイトルだが、サムネイルの定義はない・・・。
サムネイルのファイル名はタブ名tabNameを使うので、サムネイルのファイル名の要素は不要・・・。

続いて、アダプタを定義・・・。

getViewでアイテムの表示を要求された時、キャッシュディレクトリの下のタブ名 + ".jpg"がサムネイルのパスなので、setImageURIでImageViewにセット・・・。
setAdjustViewBoundsを呼ぶと、縦横比を維持してきっちり表示される・・・。
表示名はTextViewに・・・。

TabsFragment.javaは、

tabsGridItemList、adapterなどを生成し、tabsGridViewにadapterをセット・・・。
mainActivity.getFragmentMapでfragmentMapを取り寄せる・・・。

fragmentMapを返すだけなのだが・・・。

そのあとは、addTabsGridItemでGridViewにアイテムを追加していく・・・。

for文で、fragmentMapからキーのタブ名tabNameを取り出して、"web"が含まれている場合、値のwebFragmentを取り出す・・・。
TabsGridItemのitemを生成し、item.tabNameはtabName、item.dispNameはwebFragment.getTitleでタイトルを入れる・・・。
でadapterに追加・・・。

webFragment.getTitleは、もっているwebViewのgetTitleを呼んでタイトルを取得しているだけ・・・。

アイテムが選択された時の動作は、AdapterView.OnItemClickListenerをimplementsしたので、

選択されたアイテムのタブ名gridItem.tabNameで、mainActivity.changeFragmentと、mainActivity.changeUrlを呼ぶ・・・。
そして"tabs"のFragmentは、mainActivity.removeFragmentで削除・・・。

fragmentMapからfragmentを取得していき、指定されたタブ名なら表示、それ以外は非表示にし、表示にしたタブ名をcurrentFragmentTagに入れる・・・。
これで表示するフラグメントが切り替わる・・・。

changeUrlはちょっとややこしいが、指定されたタブ名のWebFragmentが持っているwebViewのURLをmenuUrlBarに反映するというもの・・・。
フラグメントは切り替わっても、URLは変わらないので、ここでURLを切り替えている・・・。

指定されたタブ名のfragmentを削除・・・。
この時にfragmentMapからも削除するのを忘れずに・・・。

MainActivity.javaでは、

Fragmentの追加の処理をaddFragmentにまとめて整理・・・。

指定されたタブ名以外のフラグメントを非表示、指定されたタブ名のフラグメントを追加、表示、fragmentMapへの追加、currentFragmentTagの更新を一つにまとめている・・・。

メニューアイテムの選択も、これで少しすっきりした・・・。
新しいタブの追加ではwebFragment、タブ一覧の表示ではtabsFragmentをaddFragmentで追加する・・・。
webFragmentの追加ではwebFragmentNoをインクリメントする必要があるが、tabsFragmentの追加ではURLバーを非表示にする必要がある・・・。

さて、それぞれのフラグメント追加の前にやっていることがある・・・。
それは、現在表示しているフラグメントのキャプチャ(スクリーンショット)撮影である・・・。
ここで撮影し、保存したキャプチャをタブ一覧で表示するサムネイルとするのである・・・。
pathはImageViewにサムネイルをセットする時に書いたものと同じ・・・。
webFragment.getViewでviewを取得し、それもcaptureViewに渡す・・・。

viewの大きさのbitmapを作って、それをもとにcanvasを作成・・・。
view.drawでcanvasにviewのキャプチャを描画・・・。
bitmapにcanvasの画像が描かれているので、bitmap.compressでJPEGにしたら、FileOutputStreamでpathの場所に書き込み・・・。

これで現在のフラグメントキャプチャを保存しておいて、新しく追加したフラグメントに切り替わったり、タブ一覧のフラグメントに切り替わったりする・・・。
当然、切り替わった先のタブ一覧にもこの保存したキャプチャサムネイルは表示されている・・・。

f:id:BG1:20161016115050p:plain

最初にYahoo!トップ・・・。

f:id:BG1:20161016115121p:plain

スポナビ・・・。

f:id:BG1:20161016115140p:plain

野球・・・。

f:id:BG1:20161016115201p:plain

ここで新しいタブを追加・・・。

f:id:BG1:20161016115235p:plain
真っ白いページが追加されるので、このブログのURL・・・。

f:id:BG1:20161016115314p:plain

トップページ・・・。
DownloadManagerを選択してみようか・・・。

f:id:BG1:20161016115341p:plain

選択したページが表示される・・・。
さて、ここでURLバーの右にあるタブ切り替えボタンを押すと、

f:id:BG1:20161016115716p:plain

こんな感じでタブ一覧が表示される・・・。
左のプロ野球の方を押すと、

f:id:BG1:20161016115746p:plain

プロ野球を表示しているタブに切り替わる・・・。
バックキーを押すと、

f:id:BG1:20161016120132p:plain

一つ前のスポナビに戻る・・・。
ちゃんとバックフォワードリストの状態も保持されている・・・。
さらにバックキーで、

f:id:BG1:20161016120238p:plain

Yahoo!トップにも戻れる・・・。
さてここで、もう一度タブ切り替えを押すと、

f:id:BG1:20161016120312p:plain

左のサムネイルはYahoo!トップに上書きされている・・・。
右を選択しよう・・・。

f:id:BG1:20161016120347p:plain

DownloadManagerに切り替わった・・・。
バックキーで、

f:id:BG1:20161016120423p:plain

ブログトップに・・・。
もう一度バックキーを押すと、アクティビティを閉じる・・・。

こんな感じでWebViewの状態を保持したまま、タブを切り替えることができる・・・。

https://github.com/bg1bgst333/Zinc/tree/develop/android/empty_activity/android_studio/src/Zinc