什么是Fragment
Activity是整个看到的界面,而Activity则可以继续分割出多个Fragment. Fragment最初是为了在平板电脑充分利用空间,但是手机端也经常使用,主要目的是共用屏幕上某一块区域.
如下面一种界面,上面蓝色框是几个功能(推荐、应用、游戏等)共用的显示区域,当用户切换到不同的功能页时,就将共用显示区域内容替换为对应的功能Fragment.
使用单个Fragment样例
效果图:
手动创建Fragment
-
在工程目录中单击右键,选择“New>Fragment>Fragment(Blank)”
-
在窗口中设置Fragment名称,对应布局文件名称.
- 默认创建的Fragment有点复杂,简化后如下:
class BlankFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_blank, container, false)
}
}
- 在Activity对应布局文件中增加用于容纳Fragment布局容器
修改activity_main.xml,添加一个FrameLayout,命名为containerLayout.
<LinearLayout xmlns:android="http://schemas.android.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>
在Activity中加载该Fragment
下面演示点击button1按钮时,从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样例
多个Fragment利用同一块区域进行内容展示,一般可以通过标签页进行切换.
效果图
加载第一个Fragment
加载第二个Fragment
创建第一个Fragment及对应布局文件
- 第一个Fragment
class FirstFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_first, container, false)
}
}
- 第一个Fragment对应布局:fragment_first.xml
<FrameLayout xmlns:android="http://schemas.android.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="第一个Fragment" />
</FrameLayout>
创建第二个Fragment及对应布局文件
- 第二个Fragment
class SecondFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_second, container, false)
}
}
- 第二个Fragment对应布局:fragment_second.xml
<FrameLayout xmlns:android="http://schemas.android.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="第二个Fragment" />
</FrameLayout>
修改Activity对应的布局文件,展示两个底部标签.
下面代码中id为bottomLayout的布局,里面放了两个标签,用来点击切换页面上部containerLayout中的内容.
<RelativeLayout xmlns:android="http://schemas.android.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>
Activity代码中做Fragment加载及切换
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
//默认加载第一个Fragment
replaceFragment(FirstFragment(), R.id.containerLayout)
//对page1Tv控件添加点击事件，点击后切换至FirstFragment
page1Tv.setOnClickListener { replaceFragment(FirstFragment(), R.id.containerLayout) }
//对page2Tv控件添加点击事件，点击后切换至SecondFragment
page2Tv.setOnClickListener { replaceFragment(SecondFragment(), R.id.containerLayout) }
}
private fun replaceFragment(fragment: Fragment, containerId: Int) =
supportFragmentManager.beginTransaction().replace(containerId, fragment).commit()
}
