ViewPager+下拉刷新ListView超强组合

r囧r小猫 2022-08-05 00:53 192阅读 0赞

转载请注明出处：[http://blog.csdn.net/hello\_chillax/article/details/45599215][http_blog.csdn.net_hello_chillax_article_details_45599215]，谢谢~

想必大家都用过360手机助手，效果是不是很绚丽，其实很好实现喽。今天就来说一说怎么去实现喽~（PS：咱们是讲原理和思路，我这里是用的不是360助手的界面，懒得去扒那些图片喽，太懒，见谅~~）

首先，上图：   
![这里写图片描述][20150511153248516]

先看一下工程目录结构：   
![这里写图片描述][20150511153532254]

其中有两个包，第一个里面分别是：   
Data：工程里面的数据，本来想用几个textview填充ListView的，最后感觉这样会效果好一点,米啥用~   
MainActivity：不说了~   
Model：LIstView的每个item我都抽象出一个model，   
RollViewPager：大家也看到了，上面的那个ViewPager是会自己跳动的，为了实现这个效果，这里重写了ViewPager。

另外一个包则是下拉刷新，上拉加载的ListView，是一个开源的东东~GitHub上有~

这里重点说一下整个效果的思路：

其实PullToRefreshListView内部维护了一个普通的ListView，并且实现了上拉加载，下拉刷新效果。然后我们在此基础之上加了一个自动翻滚的ViewPager，就实现了上面的效果。

代码：

MainActivity.java：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">//初始化View
 private void initView() {
 ptrLV = (PullToRefreshListView) findViewById(R.id.ptr_lv);
 // 滚动到底自动加载可用
 ptrLV.setPullRefreshEnabled(true);
 // 下拉刷新可用
 ptrLV.setPullLoadEnabled(false);
 // 滚动到底自动加载可用
 ptrLV.setScrollLoadEnabled(true);
 // 得到实际的ListView并设置监听器：
 ptrLV.getRefreshableView().setOnItemClickListener(
 new OnItemClickListener() {
 
 @Override
 public void onItemClick(AdapterView<?> parent, View view,
 int position, long id) {
 Toast.makeText(MainActivity.this,
 "您点击的是第 " + position + " 个条目~",
 Toast.LENGTH_SHORT).show();
 }
 });
 // 自定义adapter：
 ptrLV.getRefreshableView().setAdapter(new MyAdapter());
 // 获取header的一个视图：
 topView = (ViewGroup) getLayoutInflater().inflate(
 R.layout.layout_roll_view, null);
 // 设置圆点：
 dotsView = (LinearLayout) topView.findViewById(R.id.dots_ll);
 initDot(4);
 // 设置ListView的Header
 viewPager = new RollViewPager(this, dotList, R.drawable.dot_focus,
 R.drawable.dot_normal, new OnPagerClickCallback() {
 
 @Override
 public void onPagerClick(int position) {
 Toast.makeText(MainActivity.this,
 "您点击的是第 " + (position+1) + " 张图片~",
 Toast.LENGTH_SHORT).show();
 }
 });
 
 // 设置图片的路径
 int[] ids = new int[] { R.drawable.news_1, R.drawable.news_2,
 R.drawable.news_3, R.drawable.news_4 };
 viewPager.setResImageIds(ids);
 // 设置图片的标题
 ArrayList<String> list = new ArrayList<String>();
 list.add("我是第1标题~~");
 list.add("我是第2标题~~");
 list.add("我是第3标题~~");
 list.add("我是第4标题~~");
 viewPager.setTitle(
 (TextView) topView.findViewById(R.id.top_news_title), list);
 // 设置ViewPager开始转动
 viewPager.startRoll();
 pagerLy = (LinearLayout) topView.findViewById(R.id.top_news_viewpager);
 pagerLy.removeAllViews();
 pagerLy.addView(viewPager);
 // 添加header
 if (ptrLV.getRefreshableView().getHeaderViewsCount() < 1) {
 ptrLV.getRefreshableView().addHeaderView(topView);
 }
 }
 
 private void initDot(int size) {
 dotList = new ArrayList<View>();
 for (int i = 0; i < size; i++) {
 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
 10, 10);
 params.setMargins(5, 0, 5, 0);
 View dot = new View(this);
 if (i == 0) {
 dot.setBackgroundResource(R.drawable.dot_focus);
 } else {
 dot.setBackgroundResource(R.drawable.dot_normal);
 }
 dot.setLayoutParams(params);
 dotList.add(dot);
 dotsView.addView(dot);
 }
 }
 
 class MyAdapter extends BaseAdapter {
 @Override
 public int getCount() {
 return dataList.size();
 }
 
 @Override
 public Object getItem(int position) {
 return dataList.get(position);
 }
 
 @Override
 public long getItemId(int position) {
 return 0;
 }
 
 @Override
 public View getView(int position, View convertView, ViewGroup parent) {
 ViewHolder holder = new ViewHolder();
 if (convertView == null) {
 convertView = getLayoutInflater().inflate(
 R.layout.list_item_stytle, null);
 convertView.setTag(holder);
 holder.user_image = (ImageView) convertView
 .findViewById(R.id.user_image);
 holder.publish_user = (TextView) convertView
 .findViewById(R.id.publish_user);
 holder.publish_at = (TextView) convertView
 .findViewById(R.id.publish_at);
 holder.title = (TextView) convertView.findViewById(R.id.title);
 holder.body = (TextView) convertView.findViewById(R.id.body);
 holder.mark = (TextView) convertView.findViewById(R.id.mark);
 } else {
 holder = (ViewHolder) convertView.getTag();
 }
 Model post = dataList.get(position);
 holder.user_image.setImageResource(post.image_path);
 holder.publish_user.setText(post.publish_user);
 holder.publish_at.setText(post.publish_at);
 holder.mark.setText(post.mark);
 holder.title.setText(post.title);
 holder.body.setText(post.body);
 return convertView;
 }
 
 }
 
 public final class ViewHolder {
 public ImageView user_image;
 public TextView publish_user;
 public TextView publish_at;
 public TextView mark;
 public TextView title;
 public TextView body;
 }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li><li style="box-sizing: border-box; padding: 0px 5px;">99</li><li style="box-sizing: border-box; padding: 0px 5px;">100</li><li style="box-sizing: border-box; padding: 0px 5px;">101</li><li style="box-sizing: border-box; padding: 0px 5px;">102</li><li style="box-sizing: border-box; padding: 0px 5px;">103</li><li style="box-sizing: border-box; padding: 0px 5px;">104</li><li style="box-sizing: border-box; padding: 0px 5px;">105</li><li style="box-sizing: border-box; padding: 0px 5px;">106</li><li style="box-sizing: border-box; padding: 0px 5px;">107</li><li style="box-sizing: border-box; padding: 0px 5px;">108</li><li style="box-sizing: border-box; padding: 0px 5px;">109</li><li style="box-sizing: border-box; padding: 0px 5px;">110</li><li style="box-sizing: border-box; padding: 0px 5px;">111</li><li style="box-sizing: border-box; padding: 0px 5px;">112</li><li style="box-sizing: border-box; padding: 0px 5px;">113</li><li style="box-sizing: border-box; padding: 0px 5px;">114</li><li style="box-sizing: border-box; padding: 0px 5px;">115</li><li style="box-sizing: border-box; padding: 0px 5px;">116</li><li style="box-sizing: border-box; padding: 0px 5px;">117</li><li style="box-sizing: border-box; padding: 0px 5px;">118</li><li style="box-sizing: border-box; padding: 0px 5px;">119</li><li style="box-sizing: border-box; padding: 0px 5px;">120</li><li style="box-sizing: border-box; padding: 0px 5px;">121</li><li style="box-sizing: border-box; padding: 0px 5px;">122</li><li style="box-sizing: border-box; padding: 0px 5px;">123</li><li style="box-sizing: border-box; padding: 0px 5px;">124</li><li style="box-sizing: border-box; padding: 0px 5px;">125</li><li style="box-sizing: border-box; padding: 0px 5px;">126</li><li style="box-sizing: border-box; padding: 0px 5px;">127</li><li style="box-sizing: border-box; padding: 0px 5px;">128</li><li style="box-sizing: border-box; padding: 0px 5px;">129</li><li style="box-sizing: border-box; padding: 0px 5px;">130</li><li style="box-sizing: border-box; padding: 0px 5px;">131</li><li style="box-sizing: border-box; padding: 0px 5px;">132</li><li style="box-sizing: border-box; padding: 0px 5px;">133</li><li style="box-sizing: border-box; padding: 0px 5px;">134</li><li style="box-sizing: border-box; padding: 0px 5px;">135</li><li style="box-sizing: border-box; padding: 0px 5px;">136</li><li style="box-sizing: border-box; padding: 0px 5px;">137</li></ul>

主要的布局：

恩 简单~

其实不难喽，还是不懂的可以参考本例的代码，我会给出Demo的下载地址

Demo地址：[http://download.csdn.net/detail/hello\_chillax/8686921][http_download.csdn.net_detail_hello_chillax_8686921]

写得比较简单，不懂的地方请留言~

[http_blog.csdn.net_hello_chillax_article_details_45599215]: http://blog.csdn.net/hello_chillax/article/details/45599215
[20150511153248516]: /images/20220805/c4aad870d0384231a12e83b79a0fdad1.png
[20150511153532254]: /images/20220805/22af1691783f4a57a8757fc8e1423e60.png
[http_download.csdn.net_detail_hello_chillax_8686921]: http://download.csdn.net/detail/hello_chillax/8686921