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

<h1>フラグメントとは?</h1>
<p>フラグメントはアクティビティの中で扱う部品です。アクティビティは一つの画面に対応するものでしたが、その中で表示をしたりその切り替えなどの処理をひとまとめに行うことができます。これらを使いこなすことによって下記の図のように部品を共通化することができます。個人的にはwebのSPAに似てる気がしますね。</p>
![AndroidDraw_Fragment1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/c2706fe3-9580-db60-8f5c-026579ce82f3.png)
<h2>実行環境</h2>
<ul>
<li>SDKのバージョン:Android29</li>
<li>エディタ：AndroidStudio</li>
<li>使用言語：kotlin（今回はいじっていないです）</li>
</ul>
<h2>フラグメントファイルの準備</h2>
<p>まず、app→New→Fragment→Fragment(Blank)の順番で新しいFragmentのファイルを作成します。</P>
<img width="1378" alt="スクリーンショット 2019-12-13 11.14.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/35a572ab-10ab-4d7e-6054-21fdd7873fc6.png">
<p>そうすると次の様な確認画面が出てきます。今回は以下の設定にしたいと思います</p>
<img width="847" alt="スクリーンショット 2019-12-13 11.16.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/1dff967a-3900-0a5c-1fae-03ca6d863994.png">
<p>これでフラグメントファイルの準備が終わります</p>
<h2>フラグメントで使用する画像の準備</h2>
<p>画像はdrawableで管理します。挿入したい画像をコピーしてdrawableにペーストしてください。</p>
<img width="626" alt="スクリーンショット 2019-12-13 11.24.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/daded17a-1149-4203-a240-c4dd6ed26e3c.png">
<p>これで画像をアプリ内で利用することができます</p>
<h2>フラグメントファイルの作成</h2>
<p>これからフラグメントの作成をしようと思います。今回作成するフラグメントはアプリ画面上部にある共通タイトルを作成したいと思います。</p>
<p>まず先ほど準備したファイルに余計なテキストがあると思うのでそれを削除、次にFrameLayoutをConstraitLayoutに変換します。FrameLayoutの上で右クリックを押し、"Convert FrameLayout to ConstraitLayout"を選択します。この際確認画面が出ますがOKを押してください。ConstraitLayoutを用いる理由としては制約ハンドラを使うためです。</p>
<img width="1408" alt="スクリーンショット 2019-12-13 11.32.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/079f004e-d420-2592-1c0f-26ddd97b3303.png">
<p>次にWigitsのimageViewをクリッしたまま画面に移動。そこで画像データを選択して画像の挿入を行います。画像の選択はimgageViewを置いたきに表示される画面から、projectを選択すると先ほど準備した画像が選ぶことができます。</p>
<img width="1404" alt="スクリーンショット 2019-12-13 15.05.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/54646f29-0a04-7fc1-a321-3c9221bbbd86.png">
<p>また、下の画像の様に制約ハンドラを用いて、下以外を接続し、widthをmatch_parent,heightを150dpに設定すると上記の画像の様になります。</p>
<img width="1408" alt="スクリーンショット 2019-12-13 11.33.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/b297f565-9e63-b276-9ba2-843cef011659.png">
<p>次にテキストの用意をします。textViewを配置しidをtitleTextとします。textは適当に設置してください。</p>
<img width="914" alt="スクリーンショット 2019-12-13 12.04.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/1237cdd0-da19-3d77-c5a6-0fadb3cbe7df.png">
<p>これでフラグメントは完成しました</p>
<h2>フラグメントの反映</h2>
<p>これから作成したフラグメントを他の画面に反映させたいと思います。まず、res→layoutにあるactivity_main.xmlを開いてください。そこにテキストがあれば削除し、Containersからfragmentを画面にドラックアンドドロップします。フラグメントを入れた後は画面右側のAttirbutesにあるlayoutにある白い縦長のボタンを押し、表示された画面からfragment_titleを選択、OKを押します。</p>
<img width="1419" alt="スクリーンショット 2019-12-13 12.07.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/28bbab68-0814-d267-da7f-d33a649301fa.png">
<p>選択後、フラグメントの画像が表示されるのでwidthをmatch_parent,heightをwrap_contentに設定、制約ハンドラを用いて位置を整えるとタイトル画面をメイン画面に表示することができます。</p>
<img width="939" alt="スクリーンショット 2019-12-13 15.47.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/359164bf-d49d-a478-a21a-2f1f3b406912.png">
<p>同様の手順で他の画面にも表示することができます。</p>
<p>フラグメントでは他にもテキストのみを画面に合わせて切り替えたりできるので今後そちらの方も挑戦してみようかと思います</p>