0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Android開発】フラグメントでタイトルを共通化する

Posted at

フラグメントとは?

フラグメントはアクティビティの中で扱う部品です。アクティビティは一つの画面に対応するものでしたが、その中で表示をしたりその切り替えなどの処理をひとまとめに行うことができます。これらを使いこなすことによって下記の図のように部品を共通化することができます。個人的にはwebのSPAに似てる気がしますね。

![AndroidDraw_Fragment1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/c2706fe3-9580-db60-8f5c-026579ce82f3.png)

実行環境

  • SDKのバージョン:Android29
  • エディタ:AndroidStudio
  • 使用言語:kotlin(今回はいじっていないです)

フラグメントファイルの準備

まず、app→New→Fragment→Fragment(Blank)の順番で新しいFragmentのファイルを作成します。

スクリーンショット 2019-12-13 11.14.36.png

そうすると次の様な確認画面が出てきます。今回は以下の設定にしたいと思います

スクリーンショット 2019-12-13 11.16.37.png

これでフラグメントファイルの準備が終わります

フラグメントで使用する画像の準備

画像はdrawableで管理します。挿入したい画像をコピーしてdrawableにペーストしてください。

スクリーンショット 2019-12-13 11.24.46.png

これで画像をアプリ内で利用することができます

フラグメントファイルの作成

これからフラグメントの作成をしようと思います。今回作成するフラグメントはアプリ画面上部にある共通タイトルを作成したいと思います。

まず先ほど準備したファイルに余計なテキストがあると思うのでそれを削除、次にFrameLayoutをConstraitLayoutに変換します。FrameLayoutの上で右クリックを押し、"Convert FrameLayout to ConstraitLayout"を選択します。この際確認画面が出ますがOKを押してください。ConstraitLayoutを用いる理由としては制約ハンドラを使うためです。

スクリーンショット 2019-12-13 11.32.49.png

次にWigitsのimageViewをクリッしたまま画面に移動。そこで画像データを選択して画像の挿入を行います。画像の選択はimgageViewを置いたきに表示される画面から、projectを選択すると先ほど準備した画像が選ぶことができます。

スクリーンショット 2019-12-13 15.05.11.png

また、下の画像の様に制約ハンドラを用いて、下以外を接続し、widthをmatch_parent,heightを150dpに設定すると上記の画像の様になります。

スクリーンショット 2019-12-13 11.33.42.png

次にテキストの用意をします。textViewを配置しidをtitleTextとします。textは適当に設置してください。

スクリーンショット 2019-12-13 12.04.43.png

これでフラグメントは完成しました

フラグメントの反映

これから作成したフラグメントを他の画面に反映させたいと思います。まず、res→layoutにあるactivity_main.xmlを開いてください。そこにテキストがあれば削除し、Containersからfragmentを画面にドラックアンドドロップします。フラグメントを入れた後は画面右側のAttirbutesにあるlayoutにある白い縦長のボタンを押し、表示された画面からfragment_titleを選択、OKを押します。

スクリーンショット 2019-12-13 12.07.05.png

選択後、フラグメントの画像が表示されるのでwidthをmatch_parent,heightをwrap_contentに設定、制約ハンドラを用いて位置を整えるとタイトル画面をメイン画面に表示することができます。

スクリーンショット 2019-12-13 15.47.24.png

同様の手順で他の画面にも表示することができます。

フラグメントでは他にもテキストのみを画面に合わせて切り替えたりできるので今後そちらの方も挑戦してみようかと思います

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?