フラグメントとは
Activityはインターフェイス全体を表示するもので、Activityは複数のFragmentに分割して表示し続けることができます。 Fragmentはもともとタブレットのスペースをフル活用するために設計されたものですが、携帯電話もよく使われ、主な目的は画面の特定の領域を共有することです。例えば以下のインターフェイスのように、上の青いボックスは複数の機能の共有表示領域で、ユーザーが別の機能のページに切り替えると、共有表示領域は対応する機能のFragmentに置き換わります。
単一フラグメントの使用
:
フラグメントの手動作成
- プロジェクト・ディレクトリで右クリックし、"New>Fragment>Fragment(Blank) "を選択します。
- レイアウトファイル名に対応するフラグメント名をウィンドウに設定します。
- デフォルトのFragmentの作成は少し複雑ですが、以下のように簡略化されています。
class BlankFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_blank, container, false)
}
}
<LinearLayout xmlns:android="http://..com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/containerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
アクティビティでフラグメントを読み込む
以下は、ボタン1をクリックすると、MainActivityからMain2Activityにジャンプすることを示しています。
replaceFragment(BlankFragment(), R.id.containerLayout)
完全なコードは以下の通りです。
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
replaceFragment(BlankFragment(), R.id.containerLayout)
}
private fun replaceFragment(fragment: Fragment, containerId: Int) =
supportFragmentManager.beginTransaction().replace(containerId, fragment).commit()
}
複数のフラグメントサンプルを使う
複数のFragmentが同じ領域を使ってコンテンツを表示する場合、一般的にはタブで切り替えることができます。
レンダリング
最初のフラグメントとそれに対応するレイアウトファイルを作成します。
- 最初のフラグメント
class FirstFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_first, container, false)
}
}
- 最初のフラグメントレイアウト:fragment_first.xml
<FrameLayout xmlns:android="http://..com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="ファースト・フラグメント>
</FrameLayout>
つ目のフラグメントとそれに対応するレイアウトファイルを作成します。
- セカンドフラグメント
class SecondFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_second, container, false)
}
}
- 2番目のフラグメントのレイアウト:fragment_second.xml
<FrameLayout xmlns:android="http://..com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="セカンド・フラグメント>
</FrameLayout>
下の2つのラベルを表示するように、対応するアクティビティのレイアウトファイルを修正してください。
次のコードは、レイアウトのbottomLayoutのidで、コンテンツ内のページcontainerLayoutの上部を切り替えるためにクリックするために使用される2つのラベルを配置します。
<RelativeLayout xmlns:android="http://..com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@+id/containerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/bottomLayout" />
<LinearLayout
android:id="@+id/bottomLayout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#F8F8F8">
<TextView
android:id="@+id/page1Tv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="タグページ1" />
<View
android:layout_width="1px"
android:layout_height="match_parent"
android:background="#E7E7E7" />
<TextView
android:id="@+id/page2Tv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="タグ ページ 2" />
</LinearLayout>
</RelativeLayout>
アクティビティコードでのフラグメントのロードと切り替え
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
//デフォルトで最初のフラグメントをロードする
replaceFragment(FirstFragment(), R.id.containerLayout)
//page1Tvコントロールにclickイベントを追加し、クリックされたらFirstFragmentに切り替える。
page1Tv.setOnClickListener { replaceFragment(FirstFragment(), R.id.containerLayout) }
//page2TVコントロールにclickイベントを追加し、クリックされたらSecondFragmentに切り替える。
page2Tv.setOnClickListener { replaceFragment(SecondFragment(), R.id.containerLayout) }
}
private fun replaceFragment(fragment: Fragment, containerId: Int) =
supportFragmentManager.beginTransaction().replace(containerId, fragment).commit()
}
ソースコード
Android開発チュートリアルシリーズまとめ
開発言語学習
UIコントロール学習シリーズ
UIコントロール_テキスト編集
UIコントロール_ボタン
UIコントロール_イメージビュー
UIコントロール_ラジオボタン
UI_チェックボックス
UI_プログレスバー
ヘッドラインをたどって最新記事をご覧ください。
