在移动App里,有几种常见的界面形式:
手机上:一个列表界面A,点击某个条目后进入详情界面B,左右滑动可以切换到上/下条的详情界面;
平板上:由于屏幕足够大,列表界面A和详情界面B可以同时显示在屏幕上,分列两侧;
顶/底部若干标签,点击或者左右滑动可以显示不同的界面。
在Android上的解决方案之一是ViewPager + FragmentPagerAdapter + Fragment
,在iOS上的解决方案之一是UICollectionView + UICollectionViewCell
.
《安卓权威编程指南 Android Programming - The Big Nerd Ranch Guide》这本书的第7~12章、16~22章完成了一个功能复杂的APP开发,对于学习M(mode)V(view)C(controller)模式开发非常有益处,并且涉及非常多的主题:
如何创建并添加一个Fragment到Activity;
xml:样式style、主题theme、dp/sp、布局参数layout parameter、边距和内边距margin,padding;
使用ListFragment显示列表(介绍了如何使用单例构建数据模型,如何抽象类、ListView是如何从ArrayAdapter获取数据并呈现视图);
如何创建ArrayAdapter来管理ListView的数据;
如何响应ListView条目的点击事件;
如何定制化ListView条目的布局(默认的布局仅是一个textview);
如何从Fragment中启动并把参数传递给另一个Activity;
如何从Activity传递参数给它托管的Fragment(直接获取Activity extra,通过fragment argument bundle);
如何通知Fragment的Hosting Activity返回结果;
如何在Fragment内获取返回结果;
如何通过ViewPager托管Fragment,以实现屏幕滑动的效果;
如何在同一个Activity托管的两个Fragment之间传递数据;
如何根据屏幕大小选择布局;
贰跟着这些章节顺序完整地实现了这个App,对于理解上述主题,非常有帮助。并且通过GitHub记录了实现的过程:Learning_Android_Criminal_Intent
下面gif展示的内容涉及到Fragment和ViewPager:
这篇笔记主要是整理总结与Fragment相关的部分,整理自上述提到的章节。
Fragment是什么 & Activity如何管理一个Fragment
UI Fragment可以管理界面,整屏或部分。有自己的布局文件,包含了用户可以交互的可视化UI元素。
用UI Fragment将应用的UI分解成块,利用一个个构建块,很容易做到构建分页界面、动画侧边栏界面等更多其他定制界面。
Fragment不具有在屏幕上显示视图的能力。因此,只有将它的视图放置在activity的视图层级结构中(称之为托管Hosting UI Fragment),fragment视图才能显示在屏幕上。在activity代码中添加fragment, 可以在运行时控制fragment,我们可以决定何时将fragment添加到activity中以及随后可以完成何种具体任务;也可以移除fragment,用其他fragment代替当前fragment,然后再重新添加已移除的fragment。
需要在activity视图层级结构中为fragment视图安排位置,创建fragment容器布局:
step1/3 创建Fragment容器布局
activity_crime.xml
step2/3 创建UI Fragment
但此时,activity还未托管fragment,所以代码运行后UI看不到任何内容。接下来需要编写代码,创建UI Fragment,覆写fragment的生命周期函数(几乎对应到activity的声明周期函数)。
创建fragment和创建activity步骤相同:定义布局文件、创建fragment子类、在代码中关联布局文件声明的组件。
public class CrimeFragment extends Fragment {
private Crime mCrime;
private EditText mTitleField;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mCrime = new Crime();
}
@Override
// 由onCreateView方法生成fragment的视图
public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragment_crime, parent, false);
// 调用View.findViewById(int)
mTitleField = (EditText)v.findViewById(R.id.crime_title);
// 监听器方法设置和activity一样
mTitleField.addTextChangedListener(new TextWathcer() {
public void onTextChanged(...) {}
public void beforeTextChanged(...) {}
public void afterTextChanged(...) {}
});
return v;
}
}
step3/3 添加UI Fragment到FragmentManager
但此时运行,仍然看不到fragment,还需要将fragment的视图放置到FrameLayout容器中,以添加给activity。所以并没有“start fragment”这个概念。
FragmentManager类负责管理fragment并将它们的视图添加到activity的视图层级结构中。fragment transactions(事务)被用来添加、移除、附加、分离或替换fragment队列中的fragment。这是使用fragment在运行时组装和重新组装用户界面的核心方式。FragmentManager管理着fragment transactions的回退栈。
import android.support.v4.app.Fragment
public class CrimeActivity extends FragmentActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_crime);
FragmentManager fm = getSupportFragmentManager();
// 使用R.id.fragmentContainer的容器视图资源ID,向FragmentManager请求获取fragment。如要获取的fragment在队列中已经存在,FragmentManager随即会将之返还。
Fragment fragment = fm.findFragmentById(R.id.fragmentContainer);
// 如指定容器视图资源ID的fragment不存在,则fragment变量为空值。
// 这时应创建一个新的CrimeFragment,并创建一个新的fragment transaction用来把新建的fragment添加到队列中。
if (fragment == null) {
fragment = new CrimeFragment();
fm.beginTransaction()
.add(R.id.fragmentContainer, fragment)
.commit();
}
}
}
FragmentManager保持fragment与activity的状态一致,但fragment方法究竟是在activity方法之前还是之后调用的这一点是无法保证的。
使用ListFragment显示列表
ListView只有在需要显示某些列表项(list item是listview的一个child view object,可以是简单地 view,可以是复杂的view)时,它才会去申请可用的视图对象;如果为所有的列表项数据创建视图对象,会浪费内存;
ListView找谁去申请视图对象呢? 答案是adapter。adapter是一个控制器对象,负责从模型层获取数据,创建并填充必要的视图对象,将准备好的视图对象返回给ListView;
首先,通过调用adapter的getCount()方法,ListView询问数组列表中包含多少个对象(为避免出现数组越界的错误);紧接着ListView就调用adapter的getView(int, View, ViewGroup)方法。
创建默认的列表项
public class CrimeListFragment extends ListFragment{
private static final String TAG = "CrimeListFragment";
private ArrayList mCrimes;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getActivity().setTitle(R.string.crimes_title);
mCrimes = CrimeLab.get(getActivity()).getCrimes();
// android.R.layout.simple_list_item_1)是Android SDK提供的列表项的布局资源,仅包含一个TextView;
// 默认的ArrayAdapter.getView(...)方法依赖于toString()方法。
// toString()方法等价于getClass().getName() + '@' + Integer.toHexString(hashCode()) ,返回了混和对象类名和内存地址的字符串信息。
ArrayAdapter adapter =
new ArrayAdapter(getActivity(), android.R.layout.simple_list_item_1, mCrimes);
setListAdapter(adapter);
}
@Override
public void onListItemClick(ListView l, View v, int position, long id) {
Crime c = (Crime) l.getAdapter().getItem(position);
Log.d(TAG, c.getTitle() + " was clicked");
}
}
定制列表项
创建定义列表项视图的XML布局文件,替代默认的列表项布局文件;
创建ArrayAdapter的子类,并override
public View getView(int position, View convertView, ViewGroup parent)
Get a View that displays the data at the specified position in the data set. 而默认的getView方法调用的是toString方法;
getView执行时,首先检查是否有复用对象converView,没有则从定制的布局文件中inflate一个新的视图;然后调用Adapter.getItem()方法获取position位置的对象;再然后引用视图对象中的组件,赋予对象的信息;
然后在CrimeListFragment中绑定定制的adapter,更新onCreate(...)和onListItemClick(...)
由于CheckBox默认是focusable的,点击列表项时会被解读为切换checkbox状态,然后就无法触发onListItemClick(),所以出现在列表项布局内的任何可聚焦组件(如CheckBox或Button)都应设置为非聚焦状态,从而保证用户在点击列表项后能够获得预期效果。
public class CrimeListFragment extends ListFragment{
- ArrayAdapter adapter =
- new ArrayAdapter(getActivity(), android.R.layout.simple_list_item_1, mCrimes);
+ CrimeAdapter adapter = new CrimeAdapter(mCrimes);
+ private class CrimeAdapter extends ArrayAdapter {
+ public CrimeAdapter(ArrayList crimes) {
+ super(getActivity(), 0, crimes);
+ }
+
+ @Override
+ public View getView(int position, View convertView, ViewGroup parent) {
+ // If we weren't given a view, inflate one
+ if (convertView == null) {
+ convertView = getActivity().getLayoutInflater().inflate(R.layout.list_item_crime, null);
+ }
+
+ // Configure the view for this crime
+ Crime c = getItem(position);
+ TextView titleTextView = (TextView) convertView.findViewById(R.id.crime_list_item_titleTextView);
+ ……
+ return convertView;
+ }
+ }
}
重新加载显示列表项
如模型层保存的数据发生改变(或可能发生改变),应通知列表视图的adapter,以便其及时获取最新数据并重新加载显示列表项。在适当的时点,与系统的ActivityManager回退栈协同运作,可以完成列表项的刷新。
CrimeListActivity恢复运行状态后,操作系统会向它发出调用onResume()生命周期方法的指令。CrimeListActivity接到指令后,它的FragmentManager会调用当前被activity托管的fragment的onResume()方法。
一般来说,要保证fragment视图得到刷新,在onResume()方法内更新代码是最安全的选择。(因为可能只是暂停,而不是停止onStart方法不会被调用到)
public class CrimeListFragment extends ListFragment{
+ @Override
+ public void onResume() {
+ super.onResume();
+ ((CrimeAdapter)getListAdapter()).notifyDataSetChanged();
+ }
Fragment和Activity之间数据传递
典型的应用场景:ActivityA及其托管的FragmentA,ActivityB及其托管的FragmentB。现在需要从FragmentA中启动并传递数据给ActivityB,ActivityB再把数据传递给FragmentB。
从Fragment启动Activity
从fragment中启动activity的实现方式,基本等同于从activity中启动另一activity的实现方式。调用Fragment.startActivity(Intent)方法,该方法在后台会调用对应的Activity方法;
附加extra信息;
fragment如何从托管它的activity获取extra信息?简单的方法是getActivity().getIntent(),但牺牲了fragment的封装性,因为它总是需要由某个具体activity托管着。
weiyiWorkCell:Learning-Android-CriminalIntent weiyi$ git diff a31d00d 9d3ebdb
public class CrimeListFragment extends ListFragment{
@Override
public void onListItemClick(ListView l, View v, int position, long id) {
Crime c = ((CrimeAdapter) l.getAdapter()).getItem(position);
- Log.d(TAG, c.getTitle() + " was clicked");
+ // Start Activity
+ Intent i = new Intent(getActivity(), CrimeActivity.class);
+ i.putExtra(CrimeFragment.EXTRA_CRIME_ID, c.getId());
+ startActivity(i);
}
diff --git a/src/me/li2/android/criminalintent/CrimeFragment.java b/src/me/li2/android/criminalintent/CrimeFragment.java
public class CrimeFragment extends Fragment {
+ public static final String EXTRA_CRIME_ID = "me.li2.android.criminalintent.crime_id";
// Configure the fragment instance.
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
- mCrime = new Crime();
+ UUID crimeId = (UUID) getActivity().getIntent().getSerializableExtra(EXTRA_CRIME_ID);
+ mCrime = CrimeLab.get(getActivity()).getCrime(crimeId);
}
附加arguments给Fragment,获取arguments
每个fragment实例都可附带一个Bundle对象。该bundle包含有key-value对,我们可以如同附加extra到Activity的intent中那样使用它们。一个key-value对即一个argument.
首先需创建Bundle对象;然后使用Bundle限定类型的“put”方法(类似于Intent的方法),将argument添加到bundle中。
附加argument bundle给fragment,必须在fragment创建后、添加给activity前完成。所以习惯做法是添加名为newInstance()的静态方法给Fragment类。
使用该方法,完成fragment实例及bundle对象的创建,然后将argument放入bundle中,最后再附加给fragment。托管activity需要fragment实例时,需调用newInstance()方法,而非直接调用其构造方法。
托管activity就应该知道有关托管fragment方法的细节,但fragment则不必知道其托管activity的细节问题。至少在需要保持fragment通用独立性的时候是如此。
weiyiWorkCell:Learning-Android-CriminalIntent weiyi$ git diff 9d3ebdb acc17af
diff --git a/src/me/li2/android/criminalintent/CrimeActivity.java b/src/me/li2/android/criminalintent/CrimeActivity.java
public class CrimeActivity extends SingleFragmentActivity {
@Override
protected Fragment createFragment() {
- return new CrimeFragment();
+ UUID crimeId = (UUID) getIntent().getSerializableExtra(CrimeFragment.EXTRA_CRIME_ID);
+ return new CrimeFragment().newInstance(crimeId);
}
}
public class CrimeFragment extends Fragment {
+ public static CrimeFragment newInstance(UUID crimeId) {
+ Bundle args = new Bundle();
+ args.putSerializable(EXTRA_CRIME_ID, crimeId);
+
+ CrimeFragment fragment = new CrimeFragment();
+ fragment.setArguments(args);
+ return fragment;
+ }
+
@Override
// Configure the fragment instance.
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
- UUID crimeId = (UUID) getActivity().getIntent().getSerializableExtra(EXTRA_CRIME_ID);
+ UUID crimeId = (UUID) getArguments().getSerializable(EXTRA_CRIME_ID);
}
在Fragment内获取返回结果
fragment有自己的
Fragment.startActivityForResult(Intent,int)
和onActivityResult(...)
,但却不具有setResult(...)
方法,但可以先取得托管它的activity,然后再返回数据。
weiyiWorkCell:Learning-Android-CriminalIntent weiyi$ git diff 8d87138 155c5d8
diff --git a/src/me/li2/android/criminalintent/CrimeFragment.java b/src/me/li2/android/criminalintent/CrimeFragment.java
public class CrimeFragment extends Fragment {
+ public void returnResult() {
+ getActivity().setResult(Activity.RESULT_OK, null);
+ }
}
diff --git a/src/me/li2/android/criminalintent/CrimeListFragment.java b/src/me/li2/android/criminalintent/CrimeListFragment.java
public class CrimeListFragment extends ListFragment{
+ private static final int REQUEST_CRIME = 1;
- startActivity(i);
+ startActivityForResult(i, REQUEST_CRIME);
+ @Override
+ public void onActivityResult(int requestCode, int resultCode, Intent data) {
+ if (requestCode == REQUEST_CRIME) {
+ // Handle result
+ }
}
ViewPager和Fragment
创建CrimePagerActivity类来管理ViewPager;
定义包含ViewPager的视图层级结构:以代码的方式构建ViewPager:创建资源id,创建实例,设置实例的id,设置为activity的内容视图content view。
在CrimePagerActivity类中关联使用ViewPager及其PagerAdapter(包括FragmentStatePagerAdapter和FragmentPagerAdapter),二者间的配合支持实际归结为两个简单方法的使用,即getCount()和getItem(int)。调用getItem(int)方法获取crime数组指定位置的Crime时,它会返回一个已配置的用于显示指定位置crime信息的CrimeFragment。
修改CrimeListFragment.onListItemClick(...)方法,启动CrimePagerActivity,而非CrimeActivity.
ViewPager.setCurrentItem()方法设置当前显示的page;
使用OnPageChangeListener监听ViewPager当前显示页面的状态变化。onPageScrolled(...)方法可告知我们页面将会滑向哪里;onPageScrollStateChanged(...)方法可告知我们当前页面所处的行为状态,如正在被用户滑动、页面滑动入位到完全静止以及页面切换完成后的闲置状态。
public class CrimePagerActivity extends FragmentActivity {
private ViewPager mViewPager;
private ArrayListmCrimes;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mViewPager = new ViewPager(this);
mViewPager.setId(R.id.viewPager);
setContentView(mViewPager);
mCrimes = CrimeLab.get(this).getCrimes();
FragmentManager fm = getSupportFragmentManager();
mViewPager.setAdapter(new FragmentStatePagerAdapter(fm) {
@Override
public int getCount() {
return mCrimes.size();
}
@Override
// 因为需要返回Fragment(用于构建activity),所以在构建adapter时,还需传入FragmentManager给它的构造方法。
public Fragment getItem(int pos) {
Crime crime = mCrimes.get(pos);
return CrimeFragment.newInstance(crime.getId());
}
});
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int pos) {
Crime crime = mCrimes.get(pos);
if (crime.getTitle() != null) {
setTitle(crime.getTitle());
}
}
@Override
public void onPageScrolled(int pos, float posOffset, int posOffsetPixels) { }
@Override
public void onPageScrollStateChanged(int state) {}
});
UUID crimeId = (UUID) getIntent().getSerializableExtra(CrimeFragment.EXTRA_CRIME_ID);
for (int i=0; i
创建并显示日期选择的对话框(把AlertDialog视图封装在DialogFragment实例中)
不使用DialogFragment,也可显示AlertDialog视图,但Android开发原则不推荐这种做法。使用FragmentManager管理对话框,可使用更多配置选项来显示对话框,比如:gravity, match_parent.
要将DialogFragment添加给FragmentManager管理并放置到屏幕上,可调用DialogFragment.show(FragmentManager fm, String tag)方法。
res/layout/dialog_date.xml
src/me/li2/android/criminalintent/DatePickerFragment.java
public class DatePickerFragment extends DialogFragment {
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
// 虽然DatePicker可以直接生成视图,但使用布局文件容易修改对话框的显示内容
// DatePicker v = new DatePicker(getActivity());
View v = getActivity().getLayoutInflater().inflate(R.layout.dialog_date, null);
return new AlertDialog.Builder(getActivity())
.setView(v)
.setTitle(R.string.date_picker_title)
.setPositiveButton(android.R.string.ok, null)
.create();
}
}
src/me/li2/android/criminalintent/CrimeFragment.java
public static CrimeFragment newInstance(UUID crimeId) {
mDateButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
FragmentManager fm = getActivity().getSupportFragmentManager();
DatePickerFragment dialog = new DatePickerFragment();
dialog.show(fm, DIALOG_DATE);
}
});
同一个Activity托管的两个Fragment如何发送数据
到现在为止,CrimeActivity已经包含了2个Fragment:CrimeFragment(继承自Fragment)和DatePickerFragment(继承自DialogFragment)。
问题是,当用户点击CrimeFragment的日期按钮时,怎么把日期传递给DatePickerFragment?
类似从activity传递数据到fragment,替代fragment的构造方法,创建和设置fragment argument通常是在一个newInstance()方法中完成。
weiyiWorkCell:Learning-Android-CriminalIntent weiyi$ git diff 62a68ee 0c6fe64
diff --git a/src/me/li2/android/criminalintent/CrimeFragment.java b/src/me/li2/android/criminalintent/CrimeFragment.java
public class CrimeFragment extends Fragment {
@Override
public void onClick(View v) {
FragmentManager fm = getActivity().getSupportFragmentManager();
- DatePickerFragment dialog = new DatePickerFragment();
+ DatePickerFragment dialog = DatePickerFragment.newInstance(mCrime.getDate());
dialog.show(fm, DIALOG_DATE);
}
});
diff --git a/src/me/li2/android/criminalintent/DatePickerFragment.java b/src/me/li2/android/criminalintent/DatePickerFragment.java
public class DatePickerFragment extends DialogFragment {
+ public static final String EXTRA_DATE = "me.li2.android.criminalintent.date";
+
+ private Date mDate;
+
+ public static DatePickerFragment newInstance(Date date) {
+ Bundle args = new Bundle();
+ args.putSerializable(EXTRA_DATE, date);
+
+ DatePickerFragment fragment = new DatePickerFragment();
+ fragment.setArguments(args);
+
+ return fragment;
+ }
+
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
+ mDate = (Date) getArguments().getSerializable(EXTRA_DATE);
……
// 虽然DatePicker可以直接生成视图,但使用布局文件容易修改对话框的显示内容
// DatePicker v = new DatePicker(getActivity());
View v = getActivity().getLayoutInflater().inflate(R.layout.dialog_date, null);
return new AlertDialog.Builder(getActivity())
.setView(v)
.setTitle(R.string.date_picker_title)
同一个Activity托管的两个Fragment如何回传结果
现在用户选择完了日期,点击确定按钮后,如何把这个日期数据从DatePickerFragment回传到CrimeFragment呢?
Fragment提供来了另外一种绑定方式:为fragment设置数据返回的目标fragment和请求码:调用Fragment.setTargetFragment(Fragment fragment, int requestCode)。
然后通过getTargetFragment().onActivityResult(getTargetRequestCode(), int resultCode, Intent data)方法实现数据的回传。
weiyiWorkCell:Learning-Android-CriminalIntent weiyi$ git diff 0c6fe64 5a572dc
diff --git a/src/me/li2/android/criminalintent/CrimeFragment.java b/src/me/li2/android/criminalintent/CrimeFragment.java
public class CrimeFragment extends Fragment {
+ private static final int REQUEST_DATE = 0;
mDateButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
FragmentManager fm = getActivity().getSupportFragmentManager();
DatePickerFragment dialog = DatePickerFragment.newInstance(mCrime.getDate());
+ dialog.setTargetFragment(CrimeFragment.this, REQUEST_DATE);
dialog.show(fm, DIALOG_DATE);
}
});
+ @Override
+ public void onActivityResult(int requestCode, int resultCode, Intent data) {
+ if (resultCode != Activity.RESULT_OK) {
+ return;
+ }
+ if (requestCode == REQUEST_DATE) {
+ Date date = (Date) data.getSerializableExtra(DatePickerFragment.EXTRA_DATE);
+ }
+ }
}
diff --git a/src/me/li2/android/criminalintent/DatePickerFragment.java b/src/me/li2/android/criminalintent/DatePickerFragment.java
public class DatePickerFragment extends DialogFragment {
+ private void sendResult(int resultCode) {
+ if (getTargetFragment() == null) {
+ return;
+ }
+
+ Intent i = new Intent();
+ i.putExtra(EXTRA_DATE, mDate);
+ getTargetFragment().onActivityResult(getTargetRequestCode(), resultCode, i);
+ }
+
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
return new AlertDialog.Builder(getActivity())
.setView(v)
.setTitle(R.string.date_picker_title)
- .setPositiveButton(android.R.string.ok, null)
+ .setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
+ @Override
+ public void onClick(DialogInterface dialog, int which) {
+ sendResult(Activity.RESULT_OK);
+ }
+ })
.create();
}
+
}
整理自《安卓权威编程指南 Android Programming - The Big Nerd Ranch Guide》第7~12章、16~22章。
你可以从这里获取源码 Learning_Android_Criminal_Intent
版权声明:《如何使用Android UI Fragment开发“列表-详情”界面?》由 WeiYi.Li 在 2015年09月05日写作。著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
文章链接:http://li2.me/2015/09/how-to-develop-lis...