第2章 创造出丰富多彩的UI—View与动画
Android开发进阶：从小工到专家
在第一章中，我们说到Android的用户界面构成，实际上就是Activity由一个搭载着视图树的Window构成。作为与用户直接交互的元素，UI控件变得尤为重要。本章将介绍部分常用且重要的控件、自定义控件、动画等内容，使我们进一步认识View，进入更丰富多彩的视图世界。
2.1 重要的View控件
通常来说用户界面都是由Activity组成，Activity中关联了一个PhoneWindow创建，在这个窗口下则管理了一颗视图树。这颗视图树的顶级视图就是一个ViewGroup类型的DecorView，DecorView下就是各个视图控件。这样一来就组成了Android丰富多彩的UI元素。如图2-1所示。
本章我们并不会从TextView、Button等最基本控件谈起，正如我们前文所说的，会介绍部分重要的UI控件以及它们的基本原理，本章的重点是掌握自定义View以及动画。通过了解重要控件的基本原理以及自定义View，使我们能够深入了解View系统，并且能够有能力创建出自己所需的View。
2.1.1 ListView与GridView
对于用Android开发来说，最重要的控件应该非ListView莫属。它以列表的形式展示具体内容，并且能够根据数据的长度自适应显示。如图2-2和图2-3所示。
列表数据的显示需要4个元素，分别为：
（1）用来展示列表的ListView；
（2）用来把数据映射到ListView上的Adapter；
（3）需要展示的数据集；
（4）数据展示的View模板。
首先自然是ListView控件，但是该控件只负责加载、管理视图（每项数据称为Item View），至于有多少项数据、每一项数据是如何显示的它并不关心。而这一切都是交给Adapter类实现，通过Adapter模式，用户只需覆写特定的几个函数就可以将ListView的每项数据构建出来。需要实现的Adapter函数为：
（1）getCount()函数——获取数据的个数；
（2）getItem（int）函数——获取position位置的数据；
（3）getItemId（int）函数——获取position位置的数据id，一般直接返回position即可；
（4）getView（int, View,ViewGroup）函数——获取position位置上的Item View视图。
因为Adapter中含有要显示的数据集合，数据集合中的元素个数也就是要展示的Item View的个数，通过Adapter的getCount()函数返回；而每个数据的获取则通过Adapter的getItem(int)函数实现，根据索引直接访问集合中的元素即可；每个Item View则是通过getView函数实现，在这个函数中用户必须构建Item View，然后将该position位置上数据绑定到Item View上。这样一来，数据就和视图结合在一起了。
当ListView加载时会根据数据的个数来创建Item View，然后根据该View的索引从数据集合中获取数据，调用getView获取具体的视图，并且与数据绑定。但是，并不是有多少数据项就会产生多少Item View，Android采用了视图复用的形式来避免创建过多的Item View，这样能够非常有效地提升性能和降低内存占用率。具体的设计如图2-4所示。
在处理数据量较大时，ListView会构建铺满屏幕所需的Item View个数，当屏幕向下滚动时，第一项数据将会滚出屏幕的可见范围之内，并且进入ListView的一个Recycler中，Recycler会将该视图缓存，如图2-4中的item 1。而此时第8项也需要加载，ListView首先会从Recycler中获取视图，如果视图存在，那么用户可以直接使用该缓存视图，或者重新创建新的视图。当然，这些步骤都是在Adapter中完成的，一个典型的getView函数大致如下：
public View getView(int position, View convertView, ViewGroup parent) {
View view = null;
// 有视图缓存，复用属兔
if (convertView != null) {
view = convertView;
} else {
// 重新加载视图
}
// 进行数据绑定
// 返回Item View
return view;
}getView函数的position就表示该视图是第几项数据，convertView就表示缓存的Item View，parent表示该Item View的父视图，对于ListView来说这个parent就代表ListView本身。这里最重要的就是convertView参数，如果有缓存那么该参数不为空，此时直接复用该视图；否则需要重新创建一个新的视图，最后绑定数据并且将该Item View返回。
我们说到ListView只会展示有限数量的Item View，例如8个Item View就能够铺满屏幕，那么即使数据项有1000个，通过复用机制Item View可以只产生8个，这样既节约内存又能很大程度上提高运行效率。复用Item View机制也是优化ListView等集合组件最重要的手段。
那么当某个数据源发生变化之后如何更新ListView呢？
我们知道ListView运用了Adapter模式，但是，在Adapter类中却还运用了观察者模式，Adapter内部有一个可观察者类，ListView则作为它的其中一个观察者。在将Adapter设置给ListView时，ListView会被注册到这个观察者对象中。代码如下：
@Override
public void setAdapter(ListAdapter adapter) {
resetList();
// 清空视图缓存mRecycler
mRecycler.clear();
if (mAdapter != null) {
mDataSetObserver = new AdapterDataSetObserver();
// 将mDataSetObserver注册到adapter中
mAdapter.registerDataSetObserver(mDataSetObserver);
} else {
// 代码省略
}
requestLayout();
}从以上程序中我们看到，设置Adapter时创建了一个AdapterDataSetObserver对象，然后注册到mAdapter中。刚才不是说ListView是观察者吗？这会儿怎么成了AdapterDataSetObserver对象？我们先放下这个疑问，继续往下看。
首先看我们常用的Adapter基类-BaseAdapter，部分代码如下：
public abstract class BaseAdapter implements ListAdapter, SpinnerAdapter {
private final DataSetObservable mDataSetObservable = new DataSetObservable();
public void registerDataSetObserver(DataSetObserver observer) {
mDataSetObservable.registerObserver(observer);
}
public void notifyDataSetChanged() {
mDataSetObservable.notifyChanged();
}
// 代码省略
}从以上程序中可以看到，注册观察者实际上是调用了DataSetObservable对应的函数。DataSetObservable拥有一个观察者集合，当可观察者发生变更时，就会通知观察者做出相应的处理。代码如下：
public abstract class Observable<T> {
// 观察者列表
protected final ArrayList<T> mObservers = new ArrayList<T>();
public void registerObserver(T observer) {
if (observer == null) {
throw new IllegalArgumentException("The observer is null.");
}
synchronized(mObservers) {
// 代码省略
// 注册观察者
mObservers.add(observer);
}
}
}当Adapter的数据源发生变化时，我们会调用Adapter的notifyDataSetChanged函数，在该函数中又会调用DataSetObservable对象的notifyChanged函数通知所有观察者数据发生了变化，使观察者进行相应的操作。代码如下：
public class DataSetObservable extends Observable<DataSetObserver> {
public void notifyChanged() {
synchronized(mObservers) {
for (int i = mObservers.size() - 1; i >= 0; i--) {
// 调用观察者的onChanged函数
mObservers.get(i).onChanged();
}
}
}
}对于ListView来说，这个观察者就是AdapterDataSetObserver对象，该类声明在AdapterView类中，也是ListView中的一个父类。AdapterDataSetObserver的代码如下：
// AdapterView的内部类AdapterDataSetObserver中
class AdapterDataSetObserver extends DataSetObserver {
private Parcelable mInstanceState = null;
@Override
public void onChanged() {
mDataChanged = true;
mOldItemCount = mItemCount;
// 获取元素个数
mItemCount = getAdapter().getCount();
// 代码省略
checkFocus();
// 重新布局
requestLayout();
}
// 代码省略
}从以上程序中可以看到，在AdapterDataSetObserver的onChanged函数中会调用ViewGroup的requestLayout()函数进行重新策略、布局、绘制整个ListView的Item View，执行完这个过程之后ListView的元素就发生了变化，因此，此时会根据新的数据来加载Item View。
现在我们回到上面提到的问题，也就是ListView并不是观察者，而AdapterDataSetObserver对象才是观察者的问题。在AdapterData SetObserver的onChanged函数中，实际上调用的却是AdapterView或者ViewGroup类中的属性或者函数完成功能，因此，AdapterDataSet Observer只是在外层做了一下包装，真正核心的功能应该是ListView，确切地说应该是AdapterView。ListView就是通过Adapter模式、观察者模式、Item View复用机制实现了高效的列表显示。
与ListView 相似，GridView 同样继承自 AbsListView，而AbsListView 又是 AdapterView 的子类。GridView因此同样集成了AbsListView的Adapter模式、观察者模式、Item View复用机制等特性，它与ListView不同的就是布局方式。ListView以列表形式展示，而GridView与它的名字一样则是通过网格布局形式展示。如图2-5所示。
本是同根生使得ListView和GridView拥有了很好的兼容性，同一个Adapter可以设置给ListView或者GridView，不需要半点修改。当然也可以同时设置给这两个视图，这样一来，两个视图都作为该Adapter的观察者，数据会同时显示到这两个视图上。我想这就是为什么要运用观察者模式的缘由吧。
2.1.2 数据展示更好的实现——RecyclerView
观察者模式、Adapter模式赋予了ListView、GridView等视图良好的可扩展性，但是从另一个角度看，它们似乎太过于相似了，以至于让我们不禁思考，这样做真的是最好的吗?
从上文中我们知道，ListView、GridView基本上只有布局方式不一样而已，其他的机制基本一致。那么有没有更好的实现方式呢？答案是肯定的。
RecyclerView就是作为ListView、GridView的替代者出现的。它的设计与ListView、GridView类似，也使用了Adapter，不过该Adapter并不是ListView中的Adapter，而是RecyclerView的一个静态内部类。该Adapter有一个泛型参数VH，代表的就是ViewHolder。RecyclerView还封装了一个ViewHolder类型，该类型中有一个itemView字段，代表的就是每一项数据的根视图，需要在构造函数中传递给ViewHolder对象。RecyclerView这么设计相当于Android团队将ListView的Adapter进行了再次封装，把getView函数中判断是否含有缓存的代码段封装到RecyclerView内部，使这部分逻辑对用户不可见。用户只需要告诉RecyclerView每项数据是怎么样的以及将数据绑定到每项数据上，分别对应的函数为onCreateViewHolder函数、onBindViewHolder函数，当然还需要通过getItemCount告诉RecyclerView有多少项数据，以往适用于ListView的 Adapter中的getView函数中的逻辑就不需要用户来处理了。一个RecyclerView的Adapter大致如下：
public class RecyclerAdapter extends Adapter<RecyclerViewHolder> {
List<String> mDataSet = new ArrayList<String>() ;
@Override
public int getItemCount() {
return mDataSet.size();
}
@Override
public void onBindViewHolder(RecyclerViewHolder viewHolder, int position) {
// 绑定数据
viewHolder.nameTv.setText(mDataSet.get(position));
}
@Override
public RecyclerViewHolder onCreateViewHolder(ViewGroup parant, int viewType) {
// 创建ViewHolder
return new RecyclerViewHolder(new TextView(parant.getContext()));
}
// 自定义的ViewHolder
static class RecyclerViewHolder extends ViewHolder {
TextView nameTv ;
public RecyclerViewHolder(View itemView) {
super(itemView) ;
nameTv = (TextView)itemView.findViewById(R.id.username_tv);
}
}
}从RecyclerAdapter中可以看到代码量比ListView的Adapter要少了很多，尤其是不需要用户判断是否使用Item View缓存，用户只需要完成具体的ViewHolder构造以及数据绑定即可。
光这点改进还不足以让RecyclerView如此光芒四射，它的另一大特点就是将布局方式抽象为LayoutManager，默认提供了LinearLayoutManager、GridLayoutManager、StaggeredGridLayoutManager 3种布局，对应为线性布局、网格布局、交错网格布局，如果这些都无法满足你的需求，你还可以定制布局管理器实现特定的布局方式。如图2-6所示分别为线性布局、网格布局、自定义布局。
RecyclerView通过桥接的方式将布局职责抽离出去，使得RecyclerView变得更灵活。例如，如果用户只需要修改RecyclerView的布局方式，只需要修改LayoutManager即可，而不需要操作复杂的RecyclerView类型。而ListView、GridView正好是相反的，它们只是布局方式不一样，但却是两个类型，它们覆写了基类AbsListView的layoutChildren函数来实现不同的布局。显然，通过组合的形式要好于通过继承，因此，RecyclerView在设计上也要好于AbsListView类族。
除此之外，RecyclerView对于Item View的控制也更为精细，可以通过ItemDecotation为Item View添加装饰，也就是在Item View上进行二次加工；又可以用过ItemAnimator为Item View添加动画。职责分明、结构清晰使得RecyclerView具有了非常好的扩展性，这也是它成为未来几年最重要控件的重要原因。
2.1.3 让页面显示更流畅——ViewPager
一个应用中通常都会有页面导航，用户根据页面导航进入到不同的功能界面，这几乎是每个应用的必备功能。由于Android设备都是触摸屏，因此，通过滑动来进行页面导航再适合不过。ViewPager就是为这种场景而生的，尤其是它与Fragment结合在一起使用时简直可称为“黑白双煞”，Android也深知其的重要性，因此，提供了几个适用于Fragment的Adapter。
没错，又是Adapter！通常来说，定制含有Item View类型的控件都应该使用Adapter模式，因为你不知道用户的Item View是怎样的，你只能通过一个Adapter来进行抽象，让用户将具体的视图、数据通过Adapter进行操作。例如，通过getItem获取某个数据、通过getView获取每个Item View，这样一来变化的部分就交给用户来实现，控件只需关注自身的逻辑，然后通过Adapter的getView来获取每个Item View即可。
ViewPager内部同样也是维护了一个视图集合，这些视图集合横向布局，用户可以通过左右滑动来进行页面切换。如图2-7所示。
如前文所说，ViewPager通常都用于显示Fragment，而ViewPager与Fragment组合时通常会有一个指示器（ViewPagerIndicator）表明当前显示的是哪个页面。如图2-8所示。
指示器与ViewPager实际上是两个视图，指示器根据ViewPager的页面数量以及提供的数据生成特定的指示器项，当ViewPager进行滑动时，指示器上的当前页面标识会随之变化。
图2-8的视图布局程序如下：
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.viewpagerindicator.TabPageIndicator
android:id="@+id/indicator"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
/>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
</LinearLayout>
在代码中我们需要进行设置，示例如下：
public class MainActivity extends FragmentActivity {
// Tab标题
private static final String[] TITLE = new String[] { "页面1", "页面2", "页面3"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//ViewPager的adapter
FragmentPagerAdapter adapter
= new TabPageIndicatorAdapter(getSupportFragmentManager());
ViewPager pager = (ViewPager)findViewById(R.id.pager);
// 将Adapter设置给ViewPager
pager.setAdapter(adapter);
//实例化TabPageIndicator后与ViewPager进行关联
TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);
indicator.setViewPager(pager);
}
// ViewPager适配器
class TabPageIndicatorAdapter extends FragmentPagerAdapter {
public TabPageIndicatorAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
//新建一个Fragment来展示ViewPager item的内容，并传递参数
Fragment fragment = new ItemFragment();
Bundle args = new Bundle();
args.putString("arg", TITLE[position]);
fragment.setArguments(args);
return fragment;
}
@Override
public CharSequence getPageTitle(int position) {
return TITLE[position % TITLE.length];
}
@Override
public int getCount() {
return TITLE.length;
}
}
}ViewPagerIndicator会与ViewPager进行管理，并且通过ViewPager的Adapter获取到页面数量、每个页面的标题等信息，然后绘制出指示器视图。当ViewPager滚动时，指示器视图也会发生相应的变化，以此达到指示页面切换的效果。