下面通过一个实例介绍Fragment的使用。实例中的Activity通过两个Fragment将屏幕分为两个部分,左侧为一个显示标题的Fragment,右侧为一个显示内容的Fragment。当点击左侧某个标题时,高亮该标题并在右侧显示该标题对应的内容。具体效果如下:
主Activity
布局文件
为了使主Activity适用屏幕的变化,在横屏时将标题和内容在同一页面显示,而当处于竖屏时,采用两个页面分别显示标题和内容,下面为该Activity设置了两个同名的布局文件。res/layout/activity_train.xml(竖屏模式的布局文件)
下面这个布局中只有一个用于显示标题的Fragment,也就是说,当屏幕处于竖屏模式时,只哟标题是可见的,当某一标题被选中时,需要开启另一个activity显示相应的内容。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="@+id/train_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
class="com.main.TrainTitleFragment"/>
</LinearLayout>
res/layout-land/activity_train.xml(横屏模式时的布局文件)
通过使用下面的布局文件,系统可以在Activity加载布局时立即实例化TrainTitleFragment(标题部分),而右侧的FrameLayout最开始只是一个空白的布局,需要等具体的内容加载后才会被实例化,每次用户选择一个标题时,也会进行实例化。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--显示标题的Fragment,该Fragmetn是通过xml文件直接添加的-->
<fragment
android:id="@+id/train_title"
android:layout_width="0px"
android:layout_weight="1"
android:layout_height="match_parent"
class="com.main.TrainTitleFragment"/>
<!--显示内容的Fragment,该Fragment需要通过Java代码动态添加-->
<FrameLayout
android:id="@+id/train_content"
android:layout_width="0px"
android:layout_weight="2"
android:layout_height="match_parent"/>
</LinearLayout>
代码
主Activity的代码非常简单,只需要在onCreate方法中添加布局文件即可。
public class TrainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_train);
}
}
标题Fragment
标题Fragment用于显示一个标题列表,继承自ListFragment。当列表中某一项被点击后,会根据屏幕状况而决定是实例化一个新的片段用于显示具体内容,还是开启一个新的Activity。
public class TrainTitleFragment extends ListFragment {
public static final String ARG_INTENT_INDEX = "arg_intent_index"; // 开启新的Activity时传递的参数
private static final String ARG_CUR_INDEX = "arg_cur_index"; // 设置当前位置的参数
private static boolean mDualPane = false; // 判断是否为横屏模式的标识,true:横屏,false:竖屏
private int curIndex = 0; //记录当前位置的变量,默认为0
private static String[] trainTitles; // 标题数组
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); // 从资源文件中获取标题数组
trainTitles = getResources().getStringArray(R.array.title_fragment);
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState); // 设置列表的适配器
setListAdapter(new ArrayAdapter<String>(getActivity(),
android.R.layout.simple_list_item_activated_1, trainTitles)); // 因为系统会自动根据屏幕模式而选择相应的布局文件,所以可以通过如下方式判断屏幕是否处于横屏模式
View desView = getActivity().findViewById(R.id.train_content);
mDualPane = desView != null && desView.getVisibility() == View.VISIBLE;
if (savedInstanceState != null) {
curIndex = savedInstanceState.getInt(ARG_CUR_INDEX, 0);
}
if (mDualPane) {
getListView().setChoiceMode(AbsListView.CHOICE_MODE_SINGLE);
showDes(curIndex); // 自定义的一个用于显示内容的函数
}
}
@Override
public void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
outState.putInt(ARG_CUR_INDEX, curIndex);
}
@Override
public void onListItemClick(ListView l, View v, int position, long id) {
showDes(position);
}
/**
* 显示内容
* @param index:当前选中的标题位置
*/
private void showDes(int index) {
curIndex = index;
if (mDualPane) {
getListView().setItemChecked(curIndex, true);
TrainDesFragment tdf = (TrainDesFragment)
getFragmentManager().findFragmentById(R.id.train_content);
if (tdf == null || tdf.getCurIndex() != curIndex) {
tdf = TrainDesFragment.newInstance(curIndex);
FragmentTransaction ft = getFragmentManager().beginTransaction();
ft.replace(R.id.train_content, tdf);
ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE); // 切换效果
ft.commit();
}
} else {
// 竖屏模式时开启TrainDesActivity,通过该Activity显示内容
Intent intent = new Intent(getActivity(), TrainDesActivity.class);
intent.putExtra(ARG_INTENT_INDEX, curIndex);
startActivity(intent);
}
}
}
内容Fragment
布局文件
布局文件很简单,只有一个用于显示内容的TextView。
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/light_blue">
<TextView
android:id="@+id/train_des"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="32dp"
android:textAppearance="?android:textAppearanceLarge"
android:textColor="@color/colorAccent"
android:textAlignment="textStart" />
</FrameLayout>
Java代码
public class TrainDesFragment extends Fragment {
private static final String ARG_CURINDEX = "current_index";
private int curIndex; // 记录当前位置
private static String[] desList; // 保存内容列表
/**
* 创建一个TrainDesFragment实例,显示index位置的标题对应的内容
*/
public static TrainDesFragment newInstance(int index){
TrainDesFragment tdf = new TrainDesFragment();
Bundle args = new Bundle();
args.putInt(ARG_CURINDEX, index);
tdf.setArguments(args);
return tdf;
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState); // 从资源文件中加载内容列表
desList = getResources().getStringArray(R.array.content_fragment);
if (savedInstanceState != null){
curIndex = savedInstanceState.getInt(ARG_CURINDEX);
}
}
@Override
public void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
outState.putInt(ARG_CURINDEX, curIndex);
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
if (container == null) return null; //当container为空时,意味着此时处于竖屏模式,则没必要实例化该Fragment
View view = inflater.inflate(R.layout.fragment_traindes, container, false);
TextView des = (TextView)view.findViewById(R.id.train_des);
des.setText(desList[getCurIndex()]);
return view;
}
public int getCurIndex(){
return getArguments().getInt(ARG_CURINDEX, 0);
}
}
TrainDesActivity
当屏幕处于竖屏模式时,通过该Activity显示内容,在该Activity内部实例化一个显示内容的片段实例以显示内容信息。
public class TrainDesActivity extends FragmentActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); // 当屏幕处于横屏模式时,无需显示该Activity
if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE){
finish();
return;
}
if (savedInstanceState == null){// 当无已保存的状态信息时,加载显示内容的片段TrainDesFragment
TrainDesFragment fragment = TrainDesFragment.newInstance(getIntent().
getExtras().getInt(TrainTitleFragment.ARG_INTENT_INDEX));
getFragmentManager().beginTransaction().add(android.R.id.content, fragment).commit();
}
}
}