主要内容:
Fragment的简单使用
Fragment中动态添加
案例最终效果:
- Fragment的简单使用.
新建项目FragmentDemo, 将一个屏幕分成两部分. 左边是按钮, 右边显示文本.
页面部分:
left_fragment.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/button"/>
</LinearLayout>
right_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00ff00"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textSize="20sp"
android:text="This is right fragment"/>
</LinearLayout>
Java代码:
LeftFragment.java
public class LeftFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.left_fragment,container,false);
return view;
}
}
RightFragment.java
public class RightFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.right_fragment,container,false);
return view;
}
}
两份代码基本相似, LayoutInflater 的inflate方法将定义好的布局动态加载进来.
接下来在activity_main.xml中将刚才写好的fragment.xml加载进来.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<fragment
android:id="@+id/left_fragment"
android:name="com.junzaivip.fragmentdemo.LeftFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<fragment
android:id="@+id/right_fragment"
android:name="com.junzaivip.fragmentdemo.RightFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
android:name 属性来显示指明要添加的Fragment类名, 注意这里一定是包的全名.
运行效果图:
动态添加Fragment
真正开发中, 很多的Fragment是需要被动态添加进去的. 我们现在就实现一个简单的加载, 点击左侧按钮, 替换右边的Fragment
现在我们新建另外一套右边的Fragment.
right2_fragment.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffff00"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textSize="20sp"
android:text="This is another right fragment"/>
</LinearLayout>
Right2Fragment.java
public class Right2Fragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.right2_fragment,container,false);
return view;
}
}
好了, 接下来我们又需要修改我们的activity_main.xml中的代码了. 如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<fragment
android:id="@+id/left_fragment"
android:name="com.junzaivip.fragmentdemo.LeftFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<FrameLayout
android:id="@+id/right_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
</FrameLayout>
</LinearLayout>
简单说明: 看到改变是将之间的fragment替换成现在的FrameLayout,为什么呢? 由于这里仅需要在布局中放入一个Fragment, 所以适合最简单的FramLayout布局.
下面我们来给FrameLayout里添加内容, 实现动态效果.
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = (Button) findViewById(R.id.button_left);
button.setOnClickListener(this);
replaceFragment(new RightFragment());
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.button_left:
replaceFragment(new Right2Fragment());
break;
default:
break;
}
}
private void replaceFragment(Fragment fragment){
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.replace(R.id.right_layout, fragment);
transaction.commit();
}
}
解读: 首先给左侧按钮添加点击事件, 默认启动onCreate()之后, 首先replaceFragment()方法动态添加RightFragment. 当点击按钮之后, 再次调用replaceFragment()方法动态添加Right2Fragment.
完成动态添加总结:
创建待添加的fragment实例
获取FragmentManager, 在活动中调用getSupportFragmentManager()方法;
开启一个事务, 通过beginTransaction()方法开启;
向容器内添加或者替换fragment, 一般使用replace()方法实现, 需要传入容器的id和待添加的fragment实例.
提交事务, 调用commit()方法来完成.
运行效果:
做到这里, 当我们替换掉之前的fragment, 但是我们还希望通过返回按钮返回, 但是目前我们点击返回按钮, 发现是直接退出程序, 那么怎么优化呢?
修改代码:
解读:FragmentTransaction提供的addToBackStack()方法, 可以用于将一个事务添加到返回栈中, 可以接受一个名字用于描述返回栈的状态, 一般传入null即可. 所以只需要添加这句代码.
transaction.addToBackStack(null);
