第 5 章 Android 控件进阶操作实战 ArrayAdapter 适配器 ListView 的数据渲染都需要借助适配器来完成, 首先看一下结合最简单的 ArrayAdapter 来实现 ListView 主布局文件 (activity_main.xml) 代码如下 : <?

Transcription

1 108 Android 开发入门百战经典 第 5 章 Android 控件进阶操作实战 5.1 控之经典 ListView ListView 是最经典的控件之一, 虽然现在其江山地位不稳, 将要被 RecylerView 取 代, 但设计理念是很经典的, 而且很多程序员还是习惯了 ListView, 因此我们还需要对 ListView 进行深入学习 ListView 内容非常多, 读者要有足够的耐心进行学习, 每一个功 能点都有可能应用到项目中 ListView 经常被用在列表显示上, 每一个列表项都具有相同的布局, 一个 ListView 通 常都有三个要素组成 : ListView 控件 适配器类, 用到了设计模式中的适配器模式, 它是视图和数据之间的桥梁, 负责提供对数据的访问, 生成每一个列表项对应的 View 常用的适配器类有 ArrayAdapter SimpleAdapter 和 SimpleCursorAdapter 数据源 当然最重要 最复杂的部分就是适配器类的编写和设计, 在一些复杂的界面, 常常需要对适配器类进行相关逻辑处理 ListView 的常用属性如表 5.1 所示 表 5.1 ListView 的常用属性 属性说明 android:divider android:dividerheight android:listselector android:scrollbars 子项分割线分割线高度子项单击效果滑动条 ListView 的常用方法如表 5.2 所示 表 5.2 ListView 的常用方法 方法说明 addfooterview(view v) addheaderview(view v) setadapter(listadapter adapter) setdivider(drawable divider) setdividerheight(int height) 在列表尾部加入一个 View 在列表头部加入一个 View 设置适配器设置子项分隔栏设置分隔栏高度

2 第 5 章 Android 控件进阶操作实战 ArrayAdapter 适配器 ListView 的数据渲染都需要借助适配器来完成, 首先看一下结合最简单的 ArrayAdapter 来实现 ListView 主布局文件 (activity_main.xml) 代码如下 : <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_height="match_parent"> <ListView android:id="@+id/lv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:divider="@android:color/holo_red_dark" android:dividerheight="3dp" android:scrollbars="none"/> </RelativeLayout> 上述代码设置了 divider 属性, 在 ListView 的子项之间添加分隔栏 ; 设置了 dividerheight 属性, 决定了分隔栏的高度 ; 将 scrollbars 属性的值设置为 none 表示上下拖动时在右侧没有滑动条 MainActivity.java 代码如下 : public class MainActivity extends Activity { private ListView mlistview; private String mdatas[] = {"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday","Thursday", "Friday", "Saturday";// 准备数据源 private ArrayAdapter<String> madapter; protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); requestwindowfeature(window.feature_no_title);// 隐藏标题栏 setcontentview(r.layout.activity_main); mlistview = (ListView) findviewbyid(r.id.lv); // 实例化 ArrayAdapter madapter = new ArrayAdapter<String>(this, android.r.layout.simple_list_item_1, mdatas); // 设置适配器 mlistview.setadapter(madapter); 创建一个 ArrayAdapter 对象需要传入三个参数 : 上下文对象 子项布局 id( 用到了 Android 内置的 list 布局 ) 数据源 上述代码中 ArrayAdapter 的数据源传入的是字符数组, 最后调用 ListView 的 setadapter 方法为 ListView 设置适配器 运行实例, 如图 5.1 所示 可以看出, 每个子项之间存在分隔栏, 上下拖动 ListView 时最右边也不会有滑动条出现

3 110 Android 开发入门百战经典 SimpleAdapter 适配器 图 5.1 ListView 之 ArrayAdapter ArrayAdapter 适用于信息显示比较单一的场景, 若显示项中包含多种形式的数据, 就 不太适用了 下面介绍可以适配多种数据类型的适配器类 SimpleAdapter 的使用方法 当存在多种数据类型时首先要考虑布局问题, 因此首先要设置子项目布局 (item_ layout.xml) 文件, 代码如下 : <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_height="match_parent" android:orientation="horizontal"> <ImageView android:id="@+id/img" android:layout_width="50dp" android:layout_height="50dp" android:src="@mipmap/ic_launcher" /> <TextView android:id="@+id/tv" android:layout_width="wrap_content" android:layout_height="50dp" android:layout_marginleft="50dp" android:gravity="center" android:text="hello" android:textsize="28sp" /> </LinearLayout> 上述代码采用线性布局, 设置其 orientation 属性为 horizontal( 水平布局 ), 添加了一个 ImageView 控件用于显示图片, 添加了一个 TextView 用于显示文本 主布局文件 (activity_main.xml) 代码如下 :

4 第 5 章 Android 控件进阶操作实战 111 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_height="match_parent"> <ListView android:id="@+id/listview" android:layout_height="match_parent" /> </RelativeLayout> 上述代码在主布局中添加了一个 ListView 控件并设置了 id 属性, 设置宽 高属性的属性值都是 match_parent MainActivity.java 代码如下 : public class MainActivity extends Activity { private ListView mlistview; private SimpleAdapter msimpleadapter; private List<Map<String, Object>> mdatas = new ArrayList<Map<String, Object>>(); protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); mlistview = (ListView) findviewbyid(r.id.listview); // 初始化数据集 initdatas(); // 实例化 SimpleAdapter msimpleadapter = new SimpleAdapter( this, mdatas, R.layout.item_layout, new String[]{"img", "name", new int[]{r.id.img, R.id.tv); // 设置配置器 mlistview.setadapter(msimpleadapter); private void initdatas() { Map map1 = new HashMap(); map1.put("img", R.drawable.fish); map1.put("name", " 小金鱼 "); Map map2 = new HashMap(); map2.put("img", R.drawable.horse); map2.put("name", " 千里马 "); Map map3 = new HashMap(); map3.put("img", R.drawable.mouse); map3.put("name", " 米老鼠 "); mdatas.add(map1); mdatas.add(map2); mdatas.add(map3);

5 112 Android 开发入门百战经典 SimpleAdapter 的构造函数如下 : SimpleAdapter(Context context, List<? extends Map<String,?>> data, int resource, String[] from, int[] to) 实例化 SimpleAdapter 时要传入如下参数 : context: 即上下文对象 ; data : 一个包裹 Map 集合的 List 数据集, 这里传入 datas, 即 initdatas 方法初始化的数据集 ; resource : 子项布局文件, 这里是自定义的 item_ layout.xml 文件, 传入 R.layout.animal_layout; from : 一个字符串数组, 字符串指的是 Map 中的键值, 这里有两个键, 即 img 和 name; to : 一个 int 型数组, 表示子项布局中对应控件的 id, 这里传入 ImageView 的 id(r.id.img) 和 TextView 的 id(r.id.tv) 即可 运行实例, 如图 5.2 所示 图 5.2 ListView 之 SimpleAdapter BaseAdapter 适配器 上面讲解了 SimpleAdapter 作为 ListView 的适配器, 通过源码可以看出 SimpleAdapter 继承自 BaseAdapter, 也就是说这个 SimpleAdapter 可以看作是 Android 帮我们实现的适配器, 下面研究如何通过继承 BaseAdapter 实现自定义的适配器 主布局文件 (activity_main.xml) 代码如下 : <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_height="match_parent"> <ListView android:id="@+id/lv" android:layout_height="match_parent" /> </RelativeLayout> 上述代码在相对布局中添加了一个 ListView 控件, 设置了 id 属性为 lv, 并添加了宽 高属性为 match_parent 子项布局代码如下 : <LinearLayout xmlns:android=" android:layout_height="match_parent" android:orientation="horizontal"> <ImageView

6 第 5 章 Android 控件进阶操作实战 113 android:id="@+id/img" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginleft="20dp" android:src="@mipmap/ic_launcher" /> <TextView android:id="@+id/tv" android:layout_width="wrap_content" android:layout_height="50dp" android:layout_marginleft="50dp" android:gravity="center" android:text="hello" android:textsize="28sp" /> </LinearLayout> 子布局和 SimpleAdapter 的布局一致 BaseAdapter 的数据源可能比较复杂, 因此这里创建一个 JavaBean 类对数据进行封装 : public class Animal { public Animal(String animal, int imgid) { this.animal = animal; this.imgid = imgid; private String animal; private int imgid; public String getanimal() { return animal; public void setanimal(string animal) { this.animal = animal; public int getimgid() { return imgid; public void setimgid(int imgid) { this.imgid = imgid; 这个类中封装了两个属性 :String 型的动物名和 int 型的图片 id, 添加了一个包含这两个属性的构造方法并设置了相应的 Setter 和 Getter 方法 下面看一下自定义的适配器类, 它继承自 BaseAdapter, 代码如下 : public class AnimalAdapter extends BaseAdapter { private Context context; private List<Animal> datas;

7 114 Android 开发入门百战经典 // 构造函数需要传入两个必要的参数 : 上下文对象和数据源 public AnimalAdapter(Context context, List<Animal> datas) { this.context = context; this.datas = datas; // 返回子项的个数 public int getcount() { return datas.size(); // 返回子项对应的对象 public Object getitem(int position) { return datas.get(position); // 返回子项的下标 public long getitemid(int position) { return position; // 返回子项视图 public View getview(int position, View convertview, ViewGroup parent) { Animal animal = (Animal) getitem(position); View view; ViewHolder viewholder; if (convertview == null) { view = LayoutInflater.from(context).inflate(R.layout.item_ layout, null); viewholder = new ViewHolder(); viewholder.animalimage = (ImageView) view.findviewbyid(r. id.img); viewholder.animalname = (TextView) view.findviewbyid(r. id.tv); view.settag(viewholder); else { view = convertview; viewholder = (ViewHolder) view.gettag(); viewholder.animalname.settext(animal.getanimal()); viewholder.animalimage.setimageresource(animal.getimgid()); return view; // 创建 ViewHolder 类 class ViewHolder { ImageView animalimage; TextView animalname;

8 第 5 章 Android 控件进阶操作实战 115 自定义的 AnimalAdapter 类继承自 BaseAdapter 类, 必须要覆写 a 四个方法, 每个 方法的具体含义已经在代码中做了注释 此外, 为了提高加载效率, 这里创建了内部类 ViewHolder, 可以避免每次调用 getview 方法时都要通过 findviewbyid 方法去实例化控件, 可以提高运行效率 MainActivity.java 代码如下 : public class MainActivity extends Activity { private ListView mlistview; private List<Animal> datas = new ArrayList<Animal>(); private AnimalAdapter manimaladapter; protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); // 隐藏标题栏 requestwindowfeature(window.feature_no_title); setcontentview(r.layout.activity_main); // 初始化数据源 initdatas(); mlistview = (ListView) findviewbyid(r.id.lv); manimaladapter = new AnimalAdapter(this, datas); mlistview.setadapter(manimaladapter); mlistview.setonitemclicklistener(new AdapterView. OnItemClickListener() { public void onitemclick(adapterview<?> parent, View view, int position, long id) { Toast.makeText(MainActivity.this, " 您单击了 " + datas.get(position).getanimal(), Toast.LENGTH_SHORT).show(); ); private void initdatas() { Animal animal0 = new Animal(" 兔八哥 ", R.drawable.rabbit); Animal animal1 = new Animal(" 眼镜蛇 ", R.drawable.snack); Animal animal2 = new Animal(" 小金鱼 ", R.drawable.fish); Animal animal3 = new Animal(" 千里马 ", R.drawable.horse); Animal animal4 = new Animal(" 米老鼠 ", R.drawable.mouse); Animal animal5 = new Animal(" 大国宝 ", R.drawable.panda); datas.add(animal0); datas.add(animal1); datas.add(animal2); datas.add(animal3); datas.add(animal4); datas.add(animal5); a 覆写 为 Java 里的术语

9 116 Android 开发入门百战经典 上述代码为 ListView 设置了 setonitemclicklistener 方法监听单项单击事件, 采用匿名内部类的方式实现了 AdapterView.OnItemClickListener 接口并覆写了其 onitemclick 方法, 由参数 positon 通过 List 的 get 方法并传入 Position 来获取 Animal 对象, 再通过对象封装的 getanimal 方法获得对应的动物名, 通过 Toast 显示出来 运行实例, 如图 5.3 所示 查看动态图, 请扫描图 5.4 中的二维码 图 5.3 ListView 之 BaseAdapter 图 5.4 ListView 之 BaseAdapter 二维码 5.2 控之经典 ListView 进阶 如何在 ListView 的上添加滑动监听 实现上拉加载功能, 是面试中和实际工作中经 常会遇到的问题 能否很从容地处理这部分问题, 也反映了程序员的基础能力 因此, 有必要要对这部分知识点进行研究和学习 首先看一下 API 文档中滑动监听的定义, 其继承结构如下 : public static interface AbsListView.OnScrollListener android.widget.abslistview.onscrolllistener 由继承结构可以看出,OnScrollListener 是一个静态接口, 接口中都是未实现需要覆写的方法 OnScrollListener 中有两个需要覆写的方法 : onscroll(abslistview view, int firstvisibleitem, int visibleitemcount, int totalitemcount) : 正在滑动时不断触发, 主要有四个参数, 分别是 ListView 对象 当前可以看见的第一个子项 ( 也就是当前屏幕最上方的子项 ) 可以看到子项的个数 总的子项个数 onscrollstatechanged(abslistview view, int scrollstate) : 顾名思义, 这个是在滑动状态变化的情况下触发, 里面有两个参数, 分别是 ListView 对象和滑动状态 那么滑动状态又分为哪些呢? API 文档中也进行了说明, 共有三个状态 : SCROLL_STATE_FLING: 手指正在拖着滑动 ( 手指没离开屏幕 ) SCROLL_STATE_IDLE: 滑动停止 SCROLL_STATE_TOUCH_SCROLL : 手指使劲在屏幕上滑了一下, 由于惯性屏幕继续滚动 ( 手指离开屏幕 ) 下面通过一个小实例来介绍, 如何通过监听滑动变化实现上拉加载的功能

10 第 5 章 Android 控件进阶操作实战 117 首先要定义一个底部布局, 用于加载时的提示, 代码如下 : <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:id="@+id/ll_footer" android:layout_height="wrap_content" android:orientation="vertical"> <ProgressBar android:id="@+id/progress" style="?android:attr/progressbarstylesmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" /> <TextView android:id="@+id/tv_wait" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text=" 正在加载..." android:textsize="10sp" /> </LinearLayout> 上述代码中布局采用线性布局, 添加了一个 ProgressBar 在 TextView 的上方, 设置了 ProgressBar 的 style 属性, 其值为?android:attr/progressBarStyleSmall, 也就是小圆形的进度条形式, 设置了 layout_gravity 属性, 其值为 center, 居中显示 添加了一个 TextView 显示提示信息, 同样也设置其 layout_gravity 属性为 center 为了实现上拉加载的功能, 这里自定义了一个控件继承自 ListView, 并实现了 OnScrollListener 接口 : public class UpAddListView extends ListView implements AbsListView. OnScrollListener { private View footer; // 标志位是否正在加载 private Boolean isadding = false; private int totalitems, totalitemcount; private IUpAddListener iupaddlistener; public UpAddListView(Context context) { super(context); initview(context); public UpAddListView(Context context, AttributeSet attrs) { super(context, attrs); initview(context);

11 118 Android 开发入门百战经典 public UpAddListView(Context context, AttributeSet attrs, int defstyleattr) { super(context, attrs, defstyleattr); initview(context); public void onscrollstatechanged(abslistview view, int scrollstate) { // 当前可见第一项和当前屏幕可见性个数之和等于总的子项个数 && 滑动停止状态 if ((totalitemcount == totalitems) && scrollstate == SCROLL_ STATE_IDLE) { if (!isadding) { footer.findviewbyid(r.id.ll_footer).setvisibility(view. VISIBLE); // 回调方法 iupaddlistener.onadd(); isadding = true; public void onscroll(abslistview view, int firstvisibleitem, int visibleitemcount, int totalitemcount) { // 当前看到第一个子项 + 可以看到的子项个数 totalitems = firstvisibleitem + visibleitemcount; // 总的子项个数 this.totalitemcount = totalitemcount; private void initview(context context) { footer = LayoutInflater.from(context).inflate(R.layout.footer_ layout, null); // 初始状态底部布局不显示 footer.findviewbyid(r.id.ll_footer).setvisibility(view.gone); // 添加底部布局 this.addfooterview(footer); // 设置滑动监听 this.setonscrolllistener(this); public interface IUpAddListener { void onadd(); public void setinterface(iupaddlistener iupaddlistener) { this.iupaddlistener = iupaddlistener;

12 第 5 章 Android 控件进阶操作实战 119 // 加载完毕 public void addcompleted() { isadding = false; footer.findviewbyid(r.id.ll_footer).setvisibility(view.gone); 实现 OnScrollListener 接口要覆写其两个方法 : onscroll : 滚动时会触发 为了在 onscrollstatechanged 中使用这个方法中的参数, 我们定义了两个 int 型的全局变量, 将这个方法中的参数传递给全局变量以便在 onscrollstatechanged 中使用 onscrollstatechanged : 滚动状态改变时会触发 这里思考一下, 怎么才能判断滚动到最底部了呢? 首先滚动到底部, 不能再继续滑动了, 滑动状态 scrollstate 必须是停止状态了, 即 scrollstate==scroll_state_idle 滑动停止了就滑动到底了吗? 显然不是, 还必须要满足一个条件, 这个条件就要借助 onscroll 中传递的三个参数了, 当满足当前屏幕中第一个可见项 + 当前屏幕可以看到的子项个数 = 总体子项个数时, 就说明滚动到底了 这里使用了回调方法用于数据传递, 定义了一个内部接口, 里面有一个 onadd 的抽象方法 此外, 设置了 setinterface 方法, 进行接口注册 addcompleted 方法, 在加载完成后调用, 将加载标志位设置成 false 并将底部栏隐藏 下面将自定义控件引入到主布局 (activity_main.xml) 文件 : <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_height="match_parent"> <ad.listviewonscrolllistenerdemo.upaddlistview android:id="@+id/lv" android:layout_height="match_parent" /> </RelativeLayout> 引入自定义控件需要在标签中加入完整的包. 类名, 这里是 ad.listviewonscrolllistenerd emo. UpAddListView, 设置了宽 高属性为 match_parent, 占据整个界面 MainActivity.java 代码如下 : public class MainActivity extends Activity implements UpAddListView. IUpAddListener { private UpAddListView mupaddlistview; private List datas = new ArrayList<String>(); private ArrayAdapter marrayadapter; protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); initviews();

13 120 Android 开发入门百战经典 initdatas(); private void initviews() { mupaddlistview = (UpAddListView) findviewbyid(r.id.lv); mupaddlistview.setinterface(this); marrayadapter = new ArrayAdapter(this, android.r.layout.simple_list_item_1, datas); mupaddlistview.setadapter(marrayadapter); private void initdatas() { for (int i = 0; i < 10; i++) { datas.add(" 测试数据 " + i); private void addmoredatas() { for (int i = 0; i < 2; i++) { datas.add(" 新数据 " + i); public void onadd() { // 为了便于观察, 并模仿请求操作时间, 这里采用延迟执行的方法 Handler handler = new Handler(); handler.postdelayed(new Runnable() { public void run() { // 添加更多数据 addmoredatas(); // 通知刷新 marrayadapter.notifydatasetchanged(); // 完成加载 mupaddlistview.addcompleted();, 2000); 为了方便, 这里采用了 ArrayAdapter 作为适配器类, 初始时添加了 10 条测试数据, 每次上拉加载时调用 addmoredatas 方法添加两条新数据 Activity 实现了在 UpAddListView 中定义的 IUpAddListener 接口, 覆写了其 onadd 方法, 此处为了模拟数据加载的时间, 采用了延迟 Handler 类的 postdelayed 方法, 延迟 2000ms 再进行加载和加载完成的操作 加载完成后记得调用 notifydatasetchanged 方法, 刷新 ListView 显示 运行实例, 如图 5.5 所示 滑动到底部然后上拉, 如图 5.6 所示 查看动态图, 请扫描图 5.7 中的二维码

14 第 5 章 Android 控件进阶操作实战 121 图 5.5 ListView 上拉加载一图 5.6 ListView 上拉加载二图 5.7 ListView 上拉加载二维码 5.3 控之经典 GridView 上面的章节中, 介绍了 ListView 的方法, 本节将对 GridView( 网格视图 ) 的属性和 方法进行讲解, 与 ListView 一般用于列表项的展示相比,GridView 是按照行列的方式来 显示内容的, 一般用于显示图片 图文等内容, 例如实现九宫格图, 用 GridView 是首选, 也是最简单的 首先我们来看一下 GridView 有哪些常用属性和相关方法, 如表 5.3 所示 表 5.3 ListView 的常用属性和相关方法 属性相关方法说明 android:columnwidth setcolumnwidth(int) 设置列的宽度 android:horizontalspacing sethorizontalspacing(int) 定义列之间水平间距 android:numcolumns setnumcolumns(int) 设置列数 android:stretchmode setstretchmode(int) 缩放模式 android:verticalspacing setverticalspacing(int) 定义行之间默认垂直间距 下面通过一个简单实例看一下如何使用 GridView 控件 主布局文件代码如下 : <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_height="match_parent"> <GridView android:id="@+id/gv" android:layout_height="match_parent" android:horizontalspacing="5dp" android:numcolumns="3" android:stretchmode="columnwidth"

15 122 Android 开发入门百战经典 android:verticalspacing="5dp" /> </RelativeLayout> 在 RelativeLayout 布局中引入了一个 GridView 控件, 设置了宽 高属性为 match_ parent, 控件占据整个界面 ; 设置了 numcolumns 属性, 显示 3 列 ; 设置了 stretchmode 属性为 columnwidth, 表示图片的缩放与列宽的大小一致 子项布局文件代码如下 : <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/iv" android:layout_width="100dp" android:layout_height="100dp" /> <TextView android:id="@+id/tv" android:layout_width="100dp" android:layout_height="wrap_content" android:gravity="center" android:textsize="20sp" /> </LinearLayout> 子项布局文件中包括一个 ImageView 控件和一个 TextView 控件, 采用线性布局并设置 orientation 属性为 vertical 为了数据操作方便, 同样这里也设置了一个 JavaBean 类对数据进行封装, 代码如下 : public class Animal { // 和上一节 JavaBean 类一样 其中主要包含 animal( 即动物名 ) 和 imgid( 即图片 ID) 这两个属性, 并设置了相应的 setter 和 getter 方法 这里自定义了 GridView 的适配器类, 这个类继承自 BaseAdapter, 代码如下 : public class GridAdapter extends BaseAdapter { private Context context; private List<Animal> datas; public GridAdapter(Context context, List<Animal> datas) { this.context = context; this.datas = datas; // 返回子项的个数 public int getcount() {

16 第 5 章 Android 控件进阶操作实战 123 return datas.size(); // 返回子项对应的对象 public Object getitem(int position) { return datas.get(position); // 返回子项的下标 public long getitemid(int position) { return position; // 返回子项视图 public View getview(int position, View convertview, ViewGroup parent) { Animal animal = (Animal) getitem(position); View view; ViewHolder viewholder; if (convertview == null) { view = LayoutInflater.from(context).inflate(R.layout.item_ layout, null); viewholder = new ViewHolder(); viewholder.animalimage = (ImageView) view.findviewbyid(r. id.iv); viewholder.animalname = (TextView) view.findviewbyid(r. id.tv); view.settag(viewholder); else { view = convertview; viewholder = (ViewHolder) view.gettag(); viewholder.animalname.settext(animal.getanimal()); viewholder.animalimage.setimageresource(animal.getimgid()); return view; // 创建 ViewHolder 类 class ViewHolder { ImageView animalimage; TextView animalname; 细心的读者可以看到, 这里的适配器类除了名字和 ListView 的适配器类不同之外, 其余都相同,GridView 和 ListView 都是继承自 AbsListView, 用法也有很多相似之处 学习要有举一反三的能力, 找出控件使用时的共性, 可以提高学习速度并能加深理解 这里就不再重复解释上面的代码, 不清楚的同学可以翻看前面的 ListView 部分 MainActivity.java 代码如下 :

17 124 Android 开发入门百战经典 public class MainActivity extends AppCompatActivity { private GridView mgridview; private GridAdapter mgridadapter; private List<Animal> mdatas = new ArrayList<Animal>(); protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); mgridview = (GridView) findviewbyid(r.id.gv); // 初始化数据 initdatas(); // 实例化适配器 mgridadapter = new GridAdapter(this, mdatas); // 设置适配器 mgridview.setadapter(mgridadapter); mgridview.setonitemclicklistener(new AdapterView. OnItemClickListener() {// 设置子项单击监听 public void onitemclick(adapterview<?> parent, View view, int position, long id) { String name = mdatas.get(position).getanimal(); ImageView imageview = new ImageView(MainActivity.this); imageview.setscaletype(imageview.scaletype.center); imageview.setlayoutparams(new LinearLayout. LayoutParams( ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)); imageview.setimageresource(mdatas.get(position). getimgid()); Dialog dialog = new AlertDialog.Builder(MainActivity. this).seticon(android.r.drawable.ic_btn_speak_now).settitle(" 您选择的动物是 :" + name).setview(imageview).setnegativebutton(" 取消 ", new DialogInterface. OnClickListener() { public void onclick(dialoginterface dialog, int which) { ).create(); dialog.show(); ); private void initdatas() { Animal animal0 = new Animal(" 兔八哥 ", R.drawable.rabbit);

18 第 5 章 Android 控件进阶操作实战 125 Animal animal1 = new Animal(" 眼镜蛇 ", R.drawable.snack); Animal animal2 = new Animal(" 小金鱼 ", R.drawable.fish); Animal animal3 = new Animal(" 千里马 ", R.drawable.horse); Animal animal4 = new Animal(" 米老鼠 ", R.drawable.mouse); Animal animal5 = new Animal(" 大国宝 ", R.drawable.panda); Animal animal6 = new Animal(" 千里马 ", R.drawable.horse); Animal animal7 = new Animal(" 米老鼠 ", R.drawable.mouse); Animal animal8 = new Animal(" 大国宝 ", R.drawable.panda); mdatas.add(animal0); mdatas.add(animal1); mdatas.add(animal2); mdatas.add(animal3); mdatas.add(animal4); mdatas.add(animal5); mdatas.add(animal6); mdatas.add(animal7); mdatas.add(animal8); 总的来讲, 实现 GridView 需要三个步骤 : 准备数据源 (initdatas()); 新建适配器 (GridAdapter extends BaseAdapter); 加载适配器 (setadapter()) 这里我们还实现了 GridView 的子项单击监听 (setonitemclicklistener), 单击某个子项时, 弹出 Dialog 对话框, 通过 List 的 get 方法获取单击子项对应的 Animal 对象, 然后再通过 Animal 类的 getanimal 方法获取对应的动物名 同理, 根据上面的方法获得图片资源对象, 调用 Dialog 的 setview 方法, 将资源图片对象传入, 可以把对应子项的图片显示在 Dialog 对话框中 运行实例, 结果如图 5.8 所示, 单击任意子项 ( 这里单击眼镜蛇 ), 结果如图 5.9 所示 查看动态图, 请扫描图 5.10 中的二维码 图 5.8 GridView 实例图 5.9 GridView 单击效果图 5.10 GridView 单击效果二维码

19 126 Android 开发入门百战经典 5.4 控之经典 GridView 进阶 GridView 动态图删除子项 用过 UC 浏览器的人相信都不会对图 5.11 所示的功能陌生 长按图标时会在左上角显示出一个删除的图片, 单击这个图片就可以删除与之对应的子项, 下面介绍如何借助 GridView 来实现这个功能 主布局文件代码如下 : 图 5.11 UC 浏览器单击删除 Tab <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_height="match_parent"> <GridView android:id="@+id/gv" android:layout_height="match_parent" android:horizontalspacing="5dp" android:numcolumns="3" android:stretchmode="columnwidth" android:verticalspacing="5dp" /> </RelativeLayout> 其功能和上一小节的布局文件一致, 这里就不再介绍 子项布局文件代码如下 : <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android=" android:layout_height="match_parent"> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginright="4dip" android:layout_margintop="4dip" android:gravity="center" android:orientation="vertical"> <ImageView android:id="@+id/iv" android:layout_width="60dip" android:layout_height="55dip" /> <TextView android:id="@+id/tv" android:layout_width="70dip"

20 第 5 章 Android 控件进阶操作实战 127 android:layout_height="wrap_content" android:layout_margintop="10dip" android:gravity="center" android:textcolor="@android:color/black" android:textsize="15sp" android:textstyle="bold" /> </LinearLayout> <ImageView android:id="@+id/delete_markview" android:layout_width="20dip" android:layout_height="20dip" android:layout_gravity="right top" android:adjustviewbounds="true" android:src="@drawable/delete" android:visibility="gone" /> </FrameLayout> 上述代码中子项布局采用 FrameLayout 帧布局模式, 设置删除图片的 layout_ gravity 属性为 right top, 即布局在右上角并设置其 visibility 属性为 gone, 即初始时不显示该图片 JavaBean 类 Animal 和上一节一样, 这里就不再进行介绍 下面看一下自定义的适配器类 : public class GridAdapter extends BaseAdapter { private Context context; private List<Animal> datas; final int position = 0; private boolean misshowdelete; public GridAdapter(Context context, List<Animal> datas) { this.context = context; this.datas = datas; // 返回子项的个数 public int getcount() { return datas.size(); // 返回子项对应的对象 public Object getitem(int position) { return datas.get(position); // 返回子项的下标 public long getitemid(int position) { return position; // 返回子项视图

21 128 Android 开发入门百战经典 public View getview(final int position, View convertview, final ViewGroup parent) { Animal animal = (Animal) getitem(position); View view; ViewHolder viewholder; if (convertview == null) { view = LayoutInflater.from(context).inflate(R.layout.item_ layout, null); viewholder = new ViewHolder(); viewholder.animalimage = (ImageView) view.findviewbyid(r. id.iv); viewholder.animalname = (TextView) view.findviewbyid(r. id.tv); viewholder.deleteimage = (ImageView) view.findviewbyid(r. id.delete_markview); view.settag(viewholder); else { view = convertview; viewholder = (ViewHolder) view.gettag(); viewholder.animalname.settext(animal.getanimal()); viewholder.animalimage.setimageresource(animal.getimgid()); viewholder.deleteimage.setvisibility(misshowdelete? View. VISIBLE : View.GONE); if (misshowdelete) { viewholder.deleteimage.setonclicklistener(new View. OnClickListener() { public void onclick(view v) { datas.remove(position); setmisshowdelete(false); ); return view; // 创建 ViewHolder 类 class ViewHolder { ImageView animalimage, deleteimage; TextView animalname; public void setmisshowdelete(boolean misshowdelete) { this.misshowdelete = misshowdelete; notifydatasetchanged(); 这里设置了一个全局变量 misshowdelete 作为 DeleteImage 是否显示的标志位, 并添加了一个 setisshowdelete 方法用于改变 misshowdelete 的值, 在这个方法中还调用了 notifydatasetchanged 方法刷新 GridView 显示

22 第 5 章 Android 控件进阶操作实战 129 这里还为 DeleteImage 添加了一个单击事件的监听, 覆写了 onclick 方法, 在这个方 法中调用 List 集合的 remove 方法去除这个子项的数据并调用 setmisshowdelete 传入 false 隐藏 删除图片 MainActivity.java 代码如下 : public class MainActivity extends Activity { private GridView mgridview; private GridAdapter mgridadapter; private boolean isshowdelete; private List<Animal> datas = new ArrayList<Animal>(); protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); mgridview = (GridView) findviewbyid(r.id.gv); // 初始化数据 initdatas(); // 实例化适配器类 mgridadapter = new GridAdapter(this, datas); // 设置适配器类 mgridview.setadapter(mgridadapter); // 设置长按事件监听 mgridview.setonitemlongclicklistener(newadapterview. OnItemLongClickListener() { public boolean onitemlongclick(adapterview<?> parent, View view, int position, long id) { if (isshowdelete) { // 删除图片显示时长按隐藏 isshowdelete = false; mgridadapter.setmisshowdelete(isshowdelete); else { // 删除图片隐藏时长按显示 isshowdelete = true; mgridadapter.setmisshowdelete(isshowdelete); return false; ); private void initdatas() { Animal animal0 = new Animal(" 兔八哥 ", R.drawable.rabbit); Animal animal1 = new Animal(" 眼镜蛇 ", R.drawable.snack); Animal animal2 = new Animal(" 小金鱼 ", R.drawable.fish); Animal animal3 = new Animal(" 千里马 ", R.drawable.horse); Animal animal4 = new Animal(" 米老鼠 ", R.drawable.mouse); Animal animal5 = new Animal(" 大国宝 ", R.drawable.panda); datas.add(animal0); datas.add(animal1);

23 130 Android 开发入门百战经典 datas.add(animal2); datas.add(animal3); datas.add(animal4); datas.add(animal5); 这里设置了 GridView 的长按事件监听, 当 删除图片 显示时, 将 isshowdelete 标志位设置成 false, 然后调用 GridAdapter 适配器类的 setmisshowdelete 方法隐藏右上角的 删除图片 反之, 当 删除图片 隐藏时, 则调用 setmisshowdelete 方法传入 true 参数显示右上角的 删除图片 运行实例并长按任一子项, 如图 5.12 所示 单击右上角的 删除图片 则删除当前子项, 右上角的 删除图片 也随之隐藏 查看动态图, 请扫描图 5.13 中的二维码 图 5.12 GridView 单击删除子项 图 5.13 GridView 单击删除子项二维码 GridView 动态图增加子项 下面研究如何实现动态增加子项, 在上述基础上动态增加子项的功能 布局文件不做调整, 因此, 这里就不再介绍代码 在 GridAdapter 适配器类中动态增加子项的功能, 参考代码如下 : public class GridAdapter extends BaseAdapter { // 和上一节一样, 省略部分相同代码 // 返回子项视图 public View getview(final int position, View convertview, final ViewGroup parent) { View view; ViewHolder viewholder; if (convertview == null) { view = LayoutInflater.from(context).inflate(R.layout.item_layout, null); viewholder = new ViewHolder(); viewholder.animalimage = (ImageView) view.findviewbyid(r.id.iv);

24 第 5 章 Android 控件进阶操作实战 131 viewholder.animalname = (TextView) view.findviewbyid(r.id.tv); viewholder.deleteimage = (ImageView) view.findviewbyid(r.id.delete_ markview); // 设置 tag view.settag(viewholder); else { view = convertview; // 由 tag 获取对象 viewholder = (ViewHolder) view.gettag(); if (position < datas.size()) { Animal animal = (Animal) getitem(position); viewholder.animalname.settext(animal.getanimal()); viewholder.animalimage.setimageresource(animal.getimgid()); // 根据标志位 isshowdelete 决定是否显示删除图片按钮 viewholder.deleteimage.setvisibility(isshowdelete? View.VISIBLE: View.GONE); if (isshowdelete) { viewholder.deleteimage.setonclicklistener(new View. OnClickListener() { public void onclick(view v) { datas.remove(position); setisshowdelete(false); ); else { viewholder.animalname.settext(" 单击添加 "); viewholder.animalimage.setimageresource(r.drawable.add); viewholder.deleteimage.setvisibility(view.gone); return view; // 和上一节一样, 省略部分相同代码 注意, 因为这里多了最后一个子项用来作为 添加项, 所以在 getcount 方法的返回中要返回 datas.size()+1 在 getview 方法中添加了判断, 在 position<datas.size 时, 加载 datas 里面的数据, 而在 position=datas.size() 的地方加载 添加项 MainActivity 中也做了一些调整, 代码如下 : public class MainActivity extends Activity { // 和上一节一样, 省略部分相同代码 mgridview.setonitemclicklistener(new AdapterView. OnItemClickListener() { public void onitemclick(adapterview<?> parent, View view, int position, long id) { // 单击了最后一张 "+" 图片

25 132 Android 开发入门百战经典 if (position == parent.getchildcount() - 1) { adddatas(); ); mgridview.setonitemlongclicklistener(new AdapterView. OnItemLongClickListener() { // 和上一节一样, 省略部分相同代码 ); private void adddatas() { Animal animaladd = new Animal(" 大国宝 ", R.drawable.panda); datas.add(animaladd); mgridadapter.notifydatasetchanged(); private void initdatas() { // 和上一节一样, 省略部分相同代码 这里添加了子项单击事件监听 (OnItemClickListener), 判断当 position==parent. getchildcount-1 时, 即单击最后一个 添加项 时调用 adddatas 方法, 添加一条记录到 datas 里面 注意, 添加完成数据后, 要调用 notifydatasetchanged 方法刷新列表 运行项目实例并单击最后一个 单击添加 图片, 如图 5.14 所示, 单击最后一个子项 ( 单击添加 ), 将会新插入一个子项 查看动态图, 请扫描图 5.15 中的二维码 图 5.14 GridView 单击增加子项 图 5.15 GridView 单击增加子项二维码 5.5 新控件 RecyclerView 控件 Android 5.0 引入了一个全新的列表控件 RecyclerView, 说它新, 是相对于其他控件而言 它更为灵活, 同时也拥有比 ListView 和 GridView 控件较多的优点, 例如子项 View 的

26 第 5 章 Android 控件进阶操作实战 133 创建 View 的回收以及重用等机制 为了使用 RecyclerView 控件, 需要创建一个 Adapter 和一个 LayoutManager 类 Adapter 继承自 RecyclerView.Adapetr 类, 主要用来将数据和布局子项进行绑定 LayoutManager, 布局管理器, 设置每一项 View 在 RecyclerView 中的位置布局以及控件 子项 View 的显示或者隐藏 当 View 重用或者回收时,LayoutManger 都会向 Adapter 请求 新的数据进行替换原来数据的内容 这种回收重用的机制可以提高性能, 避免创建很多的 View 或者是频繁地调用 findviewbyid 方法 RecyclerView 提供了三种内置的 LayoutManager: LinearLayoutManager: 线性布局, 横向或者纵向滑动列表 GridLayoutManager: 网格布局 StaggeredGridLayoutManager: 流式布局 ( 瀑布流效果 ) 当然除了上面的三种内部布局之外, 还可以继承 RecyclerView.LayoutManager 来实现一个自定义的 LayoutManager 下面通过一个简单实例对 RecyclerView 有一个简单的理解 RecyclerView 控件需要引入 RecyclerView 兼容包, 选中项目并右击, 在弹出的快捷菜单中选择 Open Module Settings, 如图 5.16 所示 图 5.16 Open Module Settings 切换到 Dependencies 标签, 单击右上角的 + 并选择第一项 Library dependency 选项, 如图 5.17 所示 图 5.17 添加 Library dependency 在弹出的界面中输入 recyclerview, 然后单击右边的搜索按钮, 如图 5.18 所示 图 5.18 搜索 Library

27 134 Android 开发入门百战经典 选中兼容包, 然后单击 OK 按钮, 如图 5.19 所示 图 5.19 添加 Library dependency 成功 再次选中兼容包, 然后单击 OK 按钮, 等待 Gradle 编译完成就可以使用 RecyclerView 了 RecyclerView 线性布局 主布局文件 (activity_main.xml) 中引入一个 RecyclerView, 代码如下 : <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_height="match_parent"> <android.support.v7.widget.recyclerview android:id="@+id/recyclerview" android:layout_height="match_parent" android:scrollbars="vertical" /> </RelativeLayout> 上述代码在相对布局中添加了一个 RecyclerView 控件, 引入时要输入完整的 包. 类 名, 可以看出 RecyclerView 在 V7 包中 为 RecyclerView 添加一个子项布局文件 (item.xml), 代码如下 : <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_height="50dp"> <TextView

28 第 5 章 Android 控件进阶操作实战 135 android:id="@+id/id_num" android:layout_height="50dp" android:gravity="center" android:text="1" /> </RelativeLayout> 和 ListView 相似,RecyclerView 同样需要创建一个适配器, 代码如下 : public class MyAdapter extends RecyclerView.Adapter<MyAdapter. MyViewHolder> { private Context mcontext; private List<String> mdatas; public MyAdapter(Context context, List<String> datas) { mcontext = context; mdatas = datas; public MyViewHolder oncreateviewholder(viewgroup parent, int viewtype) { MyViewHolder holder = new MyViewHolder(LayoutInflater.from( mcontext).inflate(r.layout.item, parent, false)); return holder; public void onbindviewholder(myviewholder holder, int position) { holder.tv.settext(mdatas.get(position)); public int getitemcount() { return mdatas.size(); class MyViewHolder extends RecyclerView.ViewHolder { TextView tv; public MyViewHolder(View view) { super(view); tv = (TextView) view.findviewbyid(r.id.id_num); 适配器类继承自 RecyclerView.Adapter, 这里有几个方法需要解释一下 : 构造方法 MyAdapter: 传入了 Context 对象和数据集合, 这点和 ListView 一样 OnCreateViewHolder 方法 : 这是必须要覆写的方法, 返回一个 ViewHolder 对象 创建这个内部类需要传入一个 View 对象,View 对象的获得同样是使用

29 136 Android 开发入门百战经典 LayoutInflator 类的相关方法 onbindviewholder 方法 : 绑定控件数据 getitemcount 方法 : 返回数据项个数 MainActivity.java 代码如下 : public class MainActivity extends Activity { private RecyclerView mrecyclerview; private List<String> mdatas; protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); initdata(); mrecyclerview = (RecyclerView) findviewbyid(r.id.recyclerview); mrecyclerview.setlayoutmanager(new LinearLayoutManager(this)); mrecyclerview.setadapter( new MyAdapter(this, mdatas)); protected void initdata() { mdatas = new ArrayList<String>(); for (int i = 1; i < 20; i++) { mdatas.add("" + i); 上述代码在 oncreate 方法中通过 findviewbyid 方法得到布局中添加的 RecyclerView 对象, 调用 RecyclerView 类的 setlayoutmanager 方法设置布局类型, 这里传入的是 Android 提供的 LinearLayoutManager 对象 ( 线性布局 ) 调用 setadapter 方法为 RecyclerView 添加自定义的适配器 运行实例, 如图 5.20 所示 图 5.20 RecyclerView 线性布局

30 第 5 章 Android 控件进阶操作实战 137 可以看出子项自上而下显示在屏幕中, 可以向下滑动查看下面的内容, 和 ListView 的效果基本一致 RecyclerView 网格布局修改 MainActivity.java 代码如下 : // 省略部分相同代码 protected void oncreate(bundle savedinstancestate) { // 省略部分相同代码 mrecyclerview.setlayoutmanager(new GridLayoutManager(this,4)); mrecyclerview.setadapter( new MyAdapter(this, mdatas)); // 省略部分相同代码 这时 setlayoutmanager 方法传入了一个 GridLayoutManager 对象, 这个对象需要传入两个参数 : 上下文对象和列数 再次运行实例, 如图 5.21 所示 RecyclerView 瀑布流布局 图 5.21 RecyclerView 网格布局 上面讲解了两种基本的用法, 下面讲解瀑布流布局的用法 为了提高演示效果, 这里修改了子项布局的代码, 添加了 ImageView 控件用来显示图片, 代码如下 : <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:id="@+id/id_num" android:layout_width="wrap_content"

31 138 Android 开发入门百战经典 android:layout_height="wrap_content" android:gravity="center" android:text="1" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> 瀑布流布局需要随机调整子项的高, 修改自定义的适配器代码如下 : public class MyAdapter extends RecyclerView.Adapter<MyAdapter. MyViewHolder> { private Context mcontext; private List<String> mdatas; private List<Integer> mhights; public MyAdapter(Context context, List<String> datas) { mcontext = context; mdatas = datas; mhights = new ArrayList<>(); initheights(); // 省略部分相同代码 public void onbindviewholder(myviewholder holder, int position) { ViewGroup.LayoutParams layoutparams = holder.itemview. getlayoutparams(); layoutparams.height = mhights.get(position); holder.itemview.setlayoutparams(layoutparams); holder.tv.settext(mdatas.get(position)); // 省略部分相同代码 private void initheights(){ for (int i = 0; i < mdatas.size(); i++) { mhights.add((int) (50 + Math.random() * 300)); 在构造方法中调用了 initheights 方法初始化了一个高度的 List 集合, 在 onbindviewholder 方法中为子项设置了随机的高, 调用 View 的 getlayoutparams 方法得到布局参数对象 layoutparams, 将高度集合 List 中的值赋给这个对象的高 修改 MainActivity.java 代码如下 : // 省略部分相同代码 protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate);

32 第 5 章 Android 控件进阶操作实战 139 // 省略部分相同代码 mrecyclerview.setlayoutmanager(new StaggeredGridLayoutManager(4, StaggeredGridLayoutManager.VERTICAL)); mrecyclerview.setadapter( new MyAdapter(this, mdatas)); // 省略部分相同代码 上述代码修改 setlayoutmanager 方法中的参数为 StaggeredGridLayoutManager 对象, 创建这个对象需要传入两个参数 : 第一个参数为每行列数, 第二个参数为布局的方向, 这里传入 StaggeredGridLayoutManager.VERTICAL 常量 ( 垂直布局 ) 运行实例, 结果如图 5.22 所示 图 5.22 RecyclerView 瀑布流布局 5.6 多页面切换器 ViewPager 控件 一般 APP 都是由多个页面组成, 页面的切换是开发中比较重要的部分,Android 提供了封装好的页面切换控件 ViewPager 供开发者使用, 其继承结构如下 : public class ViewPager extends ViewGroup java.lang.object a android.view.view android.view.viewgroup android.support.v4.view.viewpager ViewPager 继承自 ViewGroup, 可以看出来它是一个容器类, 类前包名是 android. support.v4, 这是一个兼容包 注意, 在布局文件中引入该控件时, 标签要写全, 即 : < android.support.v4.view.viewpager > API 文档中对 ViewPager 进行了描述, 总结如下 : ViewPager 类直接继承自 ViewGroup 类, 作为一个容器类, 可以向其中添加 View 类 a 方框 代表继承, 继承是 Java 三大特性之一

33 140 Android 开发入门百战经典 数据源和显示之间需要一个适配器类 PagerAdapter 进行适配 ViewPager 经常和 Fragemnet 一起使用, 并且提供专门的适配器类 FragmentPagerAdapter 和 FragmentStatePagerAdapter 类供开发者调用 实现 PageAdapter 必须覆写四个方法 : public Object instantiateitem(viewgroup container, int position): 初始化一个子项 public void destroyitem(viewgroup container, int position,object object) : 销毁一个 子项 public int getcount(): 返回子项的个数 public boolean isviewfromobject(view arg0, Object arg1): 返回一个布尔型变量, 判 断子项是否来自 Object ViewPager 的基本用法 下面通过一个实例看一下 ViewPager 的基本用法 主布局文件 (activity_main.xml) 代码如下 : <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_height="match_parent"> <android.support.v4.view.viewpager android:id="@+id/viewpager" android:layout_height="match_parent" /> </RelativeLayout> 这里引入了一个 ViewPager 控件, 通过包. 类名的方式引入, 设置了宽高属性为 match_parent ViewPager 是布局容器类, 这里添加了三个子布局用来切换页面 子布局一 (layout1.xml) 代码如下 : <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_height="match_parent"> <TextView android:layout_height="match_parent" android:gravity="center" android:text=" 页面 1" android:textsize="30sp" /> </LinearLayout> 上述子布局中仅添加了一个 TextView 用于区别不同的页面, 其余两个子布局同样也是只包含一个 TextView, 不同的仅是 text 的属性值不同, 这里就不再介绍代码 ViewPager 同样需要适配器类, 代码如下 :

34 第 5 章 Android 控件进阶操作实战 141 public class MyViewPagerAdapter extends PagerAdapter { private List<View> datas; public MyViewPagerAdapter(List<View> datas) { this.datas = datas; // 返回页卡数量 public int getcount() { return datas.size(); // 判断 View 是否来自 Object public boolean isviewfromobject(view view, Object object) { return view == object; // 初始化一个页卡 public Object instantiateitem(viewgroup container, int position) { container.addview(datas.get(position)); return datas.get(position); // 销毁一个页卡 public void destroyitem(viewgroup container, int position, Object object) { container.removeview(datas.get(position)); 自定义适配器类 MyViewPagerAdapter 继承自 PagerAdapter, 创建了构造函数, 用于在初始化时传入 datas 数据集 PagerAdapter 是抽象类, 继承这个类需要覆写它的四个抽象方法, 这四个方法的说明请参考代码中的注释 MainActivity.java 代码如下 : public class MainActivity extends Activity { private ViewPager mviewpager; private List<View> mdatas; private MyViewPagerAdapter myviewpageradapter; protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); mviewpager = (ViewPager) findviewbyid(r.id.viewpager); // 初始化数据集 initdatas(); myviewpageradapter = new MyViewPagerAdapter(mDatas); // 设置适配器 mviewpager.setadapter(myviewpageradapter);

35 142 Android 开发入门百战经典 private void initdatas() { mdatas = new ArrayList<>(); View view1 = LayoutInflater.from(this).inflate(R.layout.layout1, null); View view2 = LayoutInflater.from(this).inflate(R.layout.layout2, null); View view3 = LayoutInflater.from(this).inflate(R.layout.layout3, null); mdatas.add(view1); mdatas.add(view2); mdatas.add(view3); 总结以下,ViewPager 的实现可以分为三个步骤 : 准备数据源 (initdatas), 这里是调用 LayoutInflater 的静态方法 from 并传入上下文对象获得一个 LayoutInflater 对象, 和前面获取 LayoutInflater 对象的方式稍有不同, 但查看源码可以看出, 它们其实调用的方法是一致的, 是 Android 封装好的方法 参考如下源码 : public static LayoutInflater from(context context) { LayoutInflater LayoutInflater = (LayoutInflater) context. getsystemservice(context.layout_inflater_service); if (LayoutInflater == null) { throw new AssertionError("LayoutInflater not found."); return LayoutInflater; 可以看出,from 是一个静态方法, 这个方法内部也是通过 getsystemservice 方法并传入 Context.LAYOUT_INFLATER_SERVICE 常量来获取 LayoutInflater 对象, 然后返回这个对象 准备适配器类并初始化 (MyViewPagerAdapter), 传入布局数据源 设置适配器, 调用 ViewPager 的 setadapter 方法传入初始化的自定义适配器 运行实例后并向右滑动即可切换到第二个页面, 如图 5.23 所示 查看动态图, 请扫描图 5.24 中的二维码 图 5.23 ViewPager 基本用法第二个页面 图 5.24 ViewPager 基本用法二维码

36 第 5 章 Android 控件进阶操作实战 143 可以看出, 左右滑动屏幕就可以切换不同的 View 了 ViewPager 导航条 上面的是通过页面中的内容来区别不同的页面, 其实 ViewPager 还提供了导航条来区 别不同页面和切换页面 下面介绍如何添加顶部或底部导航 Android 提供了两种方式供 开发者选择, 即 PagerTitleStrip 和 PagerTabStrip, 下面分别介绍 1. PagerTitleStrip API 中这么定义 :PagerTitleStrip 是一个非交互的页面指示器, 一般指示 ViewPager 中的前一页 当前页和下一页三个页面 可以通过 PagerTitleStrip 标签添加到 xml 布局中 我们可以设置 layout_gravity 属性为 TOP 或者 BOTTOM 来决定在页面顶部或者底部显示, 添加 PagerTitleStrip 要在适配器中覆写 getpagetitle 方法 上面是抽象的理论描述, 下面通过实例来看一下如何在 ViewPager 中添加 PagerTitleStrip 控件 主布局文件代码如下 : <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_height="match_parent"> <android.support.v4.view.viewpager android:id="@+id/viewpager" android:layout_height="match_parent"> <android.support.v4.view.pagertitlestrip android:id="@+id/pagertitlestrip" android:layout_height="wrap_content"> </android.support.v4.view.pagertitlestrip> </android.support.v4.view.viewpager> </RelativeLayout> PagerTitleStrip 标签也要设置全路径并放在 ViewPager 标签内, 默认没有添加 layout_gravity 属性, 标签显示在页面顶部, 若想设置在底部, 添加这一属性设置其值为 BOTTOM 即可 修改适配器类如下 : public class MyViewPagerAdapter extends PagerAdapter { private List<View> datas; private List<String> titles; public MyViewPagerAdapter(List<View> datas, List<String> titles) { this.datas = datas; this.titles = titles;

37 144 Android 开发入门百战经典 // 省略部分相同代码 public CharSequence getpagetitle(int position) { return titles.get(position); 为了方便观察, 对上一个实例增加或修改的代码部分进行了加粗 首先修改了构造方法, 多传入了一个标题的数据集 ; 然后覆写了一个 getpagertitle 的方法, 这个方法可以根据 position 参数返回对应的 title MainActivity.java 代码如下 : public class MainActivity extends Activity { private ViewPager mviewpager; private PagerTitleStrip mpagertitlestrip; private List<View> mdatas; private List<String> mtitles; private MyViewPagerAdapter myviewpageradapter; protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); mviewpager = (ViewPager) findviewbyid(r.id.viewpager); mpagertitlestrip = (PagerTitleStrip) findviewbyid(r. id.pagertitlestrip); initdatas(); myviewpageradapter = new MyViewPagerAdapter(mDatas, mtitles); mviewpager.setadapter(myviewpageradapter); private void initdatas() { mdatas = new ArrayList<>(); mtitles = new ArrayList<>(); View view1 = LayoutInflater.from(this).inflate(R.layout.layout1, null); View view2 = LayoutInflater.from(this).inflate(R.layout.layout2, null); View view3 = LayoutInflater.from(this).inflate(R.layout.layout3, null); mdatas.add(view1); mdatas.add(view2); mdatas.add(view3); mtitles.add(" 第一页 "); mtitles.add(" 第二页 "); mtitles.add(" 第三页 "); 与上一个实例相比, 这里添加了一个标题的数据集 titles, 初始化 MyViewPagerAdapter 时传入了两个参数 : 页面布局数据集 (mdatas) 和标题数据集 (mtitles), 标题数据集数据将传到自定义的适配器中 运行实例并向右滑动屏幕, 如图 5.25 所示 可以看出页面切换到第二个页面, 同时

38 第 5 章 Android 控件进阶操作实战 145 顶部的页面标签也切换到了 第二页 查看动态图, 请扫描图 5.26 中的二维码 图 5.25 ViewPager 之 PagerTitleStrip 用法 图 5.26 ViewPager 之 PagerTitleStrip 用法二维码 单击顶部的标题栏, 不会进行页面切换, 正如 API 文档中所描述的,non-interactive indicator 只能作为一个页面指示器, 不具有交互作用 下面介绍具有交互效果的 Pager TabStrip 2. PagerTabStrip API 中这么描述 PagerTabStrip: PagerTabStrip is an interactive indicator of the current, next, and previous pages of a ViewPager. It is intended to be used as a child view of a ViewPager widget in your XML layout. Add it as a child of a ViewPager in your layout file and set its android:layout_gravity to TOP or BOTTOM to pin it to the top or bottom of the ViewPager. The title from each page is supplied by the method getpagetitle(int) in the adapter supplied to the ViewPager. For a non-interactive indicator, see PagerTitleStrip. 大致含义如下 :PagerTabStrip 是一个关于当前页 下一页和上一页可交互的页面指示器, 作为一个子项布局在 ViewPager 控件内部 同时, 也可以通过设置 layout_gravity 属性为 TOP 或 BOTTOM 来决定显示在页面顶部或底部 每个页面标题是通过适配器类中覆写 getpagetitle 方法提供给 ViewPager 的 最后一句也点明了, 若要使用一个非交互指示器, 可以参考 PagerTitleStrip 从 API 文档可以看出, 两个方式使用方法一样, 因此, 这里只要在布局文件中更换一下标签, 代码如下 : <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_height="match_parent"> <android.support.v4.view.viewpager android:id="@+id/viewpager" android:layout_height="match_parent"> <android.support.v4.view.pagertabstrip android:id="@+id/pagertabstrip"

39 146 Android 开发入门百战经典 android:layout_height="wrap_content"> </android.support.v4.view.pagertabstrip> </android.support.v4.view.viewpager> </RelativeLayout> 上述代码将标签换成 android.support.v4.view.pagertabstrip MainActivity.java 中, 将 PagerTitleStrip 换成 PagerTabStrip 即可, 其余代码不变 : private PagerTabStrip pagertabstrip= (PagerTabStrip)findViewById(R. id.pagertabstrip); 运行实例并单击顶部 Tab 第二页, 结果如图 5.27 所示 图 5.27 ViewPager 之 PagerTabStrip 用法第二个页面 单击顶部指示页, 可以进行页面切换, 还有动画效果 除此之外, 相对 PagerTitleStrip 而言,PagerTabStrip 当前页的下面还多了一个小横标 以上功能基本实现了, 下面来研究如何让外观变得更漂亮 Android 提供了一些方法用于改变指示栏的样式 常用方法如表 5.4 所示 表 5.4 PagerTabStrip 的常用方法 方 法 说 明 setbackgroundcolor(int color) 设置背景颜色 setbackgroundresource(int resid) 设置背景图片 setdrawfullunderline(boolean drawfull) 设置是否显示分隔栏 settabindicatorcolor(int color) 设置指示器颜色 settextcolor(int color) 设置指示器文字颜色 在 MainActivity.java 的 oncreate 方法中加入如下代码 : mpagertabstrip = (PagerTabStrip) findviewbyid(r.id.pagertabstrip); // 取消标题栏子 View 之间的分割线 mpagertabstrip.setdrawfullunderline(false); // 改变指示器颜色为白色 mpagertabstrip.settabindicatorcolor(color.yellow); // 该变字体颜色为白色 mpagertabstrip.settextcolor(color.green);

40 第 5 章 Android 控件进阶操作实战 147 // 设置字体大小 mpagertabstrip.settextsize(1,24); // 设置标题栏背景图片 mpagertabstrip.setbackgroundresource( android.r.drawable.screen_background_light_transparent); 再次运行实例并向右滑动切换界面, 如图 5.28 所示 查看动态图, 请扫描图 5.29 中的二维码 图 5.28 PagerTabStrip 自定义标题栏 图 5.29 PagerTabStrip 自定义标题栏二维码 可以看出, 除了通过左右滑动切换页面之外, 还可以单击顶部标题来切换页面