devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

安卓之Gallery实现刷新加载和分页加载_gradio 怎么创建的网页怎么动态刷新空间

作者：不正经 | 2024-04-28 05:48:02

赞

踩

gradio 怎么创建的网页怎么动态刷新空间

   在项目的进展中使用了Gallery控件展示相册，由于Gallery控件已经被谷歌弃用，所以建议大家考虑使用新的控件来代替，及时跟上潮流。不过本篇的重点不是讨论被弃用的Gallery控件，而是来讨论怎么使用Gallery控件实现类似ListView控件的刷新和加载功能，因为项目里面使用的是PullToRefresh的库，但是该库好像并不支持Gallery的刷新和加载功能，所以只得自己参考别人的写法来实现该功能了。本文提供一种实现思路，希望可以帮到大家。（源码附在文后，欢迎大家下载，不要分！！）

  先看下效果图(用的是在线GIF生成工具)：

 

下面开始正文。首先讲一下实现的思路：Gallery是横向滑动的控件，我们类似ListView实现刷新一样，当滑动到第0项时候，开始刷新操作，滑动到最后一项的时候进行分页加载的操作。

顺着这个思路，我们开始编码了：首先是一头一尾两个界面，刷新界面和加载更多的界面，两个界面布局类似，就只贴一个布局文件了。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="vertical" android:layout_width="match_parent"
  4.     android:layout_height="match_parent">
  5.  
  6.     <ProgressBar
  7.         style="?android:attr/progressBarStyleLarge"
  8.         android:layout_width="wrap_content"
  9.         android:layout_height="wrap_content"
  10.         android:layout_alignParentTop="true"
  11.         android:layout_centerHorizontal="true"
  12.         android:layout_marginTop="124dp"
  13.         android:id="@+id/progressBarLoadMore" />
  14.  
  15.     <TextView
  16.         android:text="@string/loadMore"
  17.         android:layout_width="wrap_content"
  18.         android:layout_height="wrap_content"
  19.         android:layout_centerVertical="true"
  20.         android:layout_below="@+id/progressBarLoadMore"
  21.         android:layout_marginTop="30dp"
  22.         android:textSize="24sp"
  23.         android:layout_centerHorizontal="true"
  24.         android:id="@+id/textView2" />
  25. </RelativeLayout>

写完之后大概长这个样子，当然你可以根据自己的喜好去定制


     原来的Gallery控件肯定不能实现我们想要的效果，所以下面我们来定制自己的Gallery，对原来的Galley稍稍动一些手脚改造一下。接着上代码：

  1. public class MyGallery extends Gallery implements android.widget.AdapterView.OnItemSelectedListener{
  2.  
  3.     private IGalleryEventListener mIGalleryEventListener; // 监听Gallery滑动
  4.     private View refreshView ; // 刷新的缓冲界面
  5.     private View loadMoreView ; // 加载更多缓冲的界面
  6.  
  7.     private int startIndex = 0 ; // 记录首项的索引
  8.     private int endIndex = 0 ; // 记录最后一项的索引
  9.  
  10.     public MyGallery(Context context) {
  11.         super(context);
  12.         this.setOnItemSelectedListener(this); // 设置监听器
  13.     }
  14.  
  15.     public MyGallery(Context context, AttributeSet attrs) {
  16.         super(context, attrs);
  17.         this.setOnItemSelectedListener(this); // 设置监听器
  18.     }
  19.  
  20.     public MyGallery(Context context, AttributeSet attrs, int defStyleAttr) {
  21.         super(context, attrs, defStyleAttr);
  22.         this.setOnItemSelectedListener(this); // 设置监听器
  23.     }
  24.  
  25.     /**
  26.      * 对外提供设置监听器的方法
  27.      * @param iGalleryEventListener Gallery的滑动监听器
  28.      */
  29.     public void setGalleryEventListerner(IGalleryEventListener iGalleryEventListener){
  30.         this.mIGalleryEventListener = iGalleryEventListener;
  31.     }
  32.  
  33.     /**
  34.      * 刷新或加载结束的回调方法
  35.      */
  36.     public void onCompleted(){
  37.         if(refreshView != null && refreshView.isShown()){
  38.             refreshView.setVisibility(View.GONE); // 刷新页面不可见
  39.             this.setSelection(startIndex+1); // 选中刷新页面的后一项
  40.         }
  41.  
  42.         if(loadMoreView != null && loadMoreView.isShown()){
  43.             loadMoreView.setVisibility(View.GONE); // 加载更多页面不可见
  44.             if(this.getChildAt(endIndex) != null ) this.setSelection(endIndex) ; // 有数据就选中刚刚加载的一项
  45.             else this.setSelection(endIndex-1); // 否则就选中加载更多页面的前面一项
  46.         }
  47.     }
  48.  
  49.     @Override
  50.     public void onItemSelected(AdapterView<?> adapterView, View view, int position, long id) {
  51.         startIndex = 0 ; // 首项
  52.         endIndex = adapterView.getCount() - 1 ; // 最后一项
  53.  
  54.         if(position == startIndex ){ // 表示滑动到了最前面一页，刷新操作
  55.             refreshView = view ; // 刷新页面保存
  56.             if(!refreshView.isShown()) refreshView.setVisibility(View.VISIBLE);
  57.             mIGalleryEventListener.onRefresh(); // 回调刷新的方法
  58.         }
  59.  
  60.         if(position == endIndex){ // 表示滑动到了最后一页，加载操作
  61.             loadMoreView = view ;
  62.             if(!loadMoreView.isShown()) loadMoreView.setVisibility(View.VISIBLE);
  63.             mIGalleryEventListener.onLoadMore(); // 回调加载的方法
  64.         }
  65.     }
  66.  
  67.     @Override
  68.     public void onNothingSelected(AdapterView<?> adapterView) {
  69.  
  70.     }
  71. }

注释已经写得很清楚了， 红色部分是我们自己定义的一个接口，有两个待实现的方法（加载更多和刷新）， 红色部分的方法给当前的Gallery提供设置这个接口的方法，后面要用到。 蓝色部分是结束时候的回调方法， 紫色部分是当前的Gallery实现了 OnItemSelectedListener接口的一些处理，当滑动到最前面一页的时候让刷新界面出现，当滑动到最后一页的时候让加载更多的界面出现。 

  1. public interface IGalleryEventListener {
  2.     public void onLoadMore(); // 加载更多的回调函数
  3.     public void onRefresh(); // 刷新的回调函数
  4. }
上面是监听的接口，包含两个待实现的方法，后面再要使用的地方实现该接口即可。下面写一下Gallery的适配器 

  1. public class MyGalleryAdapter extends BaseAdapter {
  2.  
  3.     private Context mContext ; // 运行的上下文
  4.     private List<PictureBean> mPictureList ; // 实体类数据集合
  5.     private LayoutInflater mInfalter ; //  界面渲染器
  6.     private View refreshView, loadMoreView; // 一头一尾
  7.  
  8.     public MyGalleryAdapter(){
  9.     }
  10.  
  11.     /**
  12.      * 构造方法
  13.      * @param context 上下文
  14.      * @param pictureList  实体类数据集合
  15.      */
  16.     public MyGalleryAdapter(Context context , List<PictureBean> pictureList){
  17.         this.mContext = context ;
  18.         this.mPictureList = pictureList ;
  19.     }
  20.  
  21.     @Override
  22.     public int getCount() {
  23.         return mPictureList.size() + 2; // 这里多加了两个是因为我们多加了两个界面，分别是加载和刷新的界面，在数据集合中一头一尾
  24.     }
  25.  
  26.     @Override
  27.     public PictureBean getItem(int position) {
  28.         if(position==0 || position== getCount()-1) return null;
  29.         return mPictureList.get(position-1) ;
  30.     }
  31.  
  32.     @Override
  33.     public long getItemId(int i) {
  34.         return i;
  35.     }
  36.  
  37.  
  38.     @Override
  39.     public View getView(int position, View view, ViewGroup viewGroup) {
  40.         mInfalter = LayoutInflater.from(mContext);
  41.         if(position == 0 ){ // 第一页
  42.             refreshView = mInfalter.inflate(R.layout.refresh_layout ,null);
  43.             refreshView.setVisibility(View.GONE); // 默认设置刷新页面不可见
  44.             return refreshView; // 返回刷新页面
  45.         }else if(position == this.getCount() - 1){ //  最后一页
  46.             loadMoreView = mInfalter.inflate(R.layout.loadmore_layout ,null);
  47.             loadMoreView.setVisibility(View.GONE); // 默认设置加载更多不可见
  48.             return loadMoreView; // 返回加载更多页面
  49.         }else{
  50.             if(view == null) view = mInfalter.inflate(R.layout.content_layout, null);
  51.             ImageView imageView = ViewHolder.get(view,R.id.image);
  52.             TextView describeTv = ViewHolder.get(view,R.id.describeTv);
  53.             imageView.setImageResource(getItem(position).getPictureResId()); // 设置相片资源ID
  54.             describeTv.setText(getItem(position).getPictureName());  // 设置相片名称
  55.             return view ; // 返回内容页面
  56.         }
  57.     }
  58. }


上面代码注意红色加粗的部分，在原来的数据集合长度上在加上2，表示一头一尾各加了一个布局占位。

蓝色部分也很好理解，初始的时候让一头一尾的两个界面都隐藏起来，该显示的时候才让其显示。

这里有一个R.layout.content_layout的布局，如下，包含一个ImageView和一个TextView

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:padding="10dp"
  6.     android:gravity="center">
  7.  
  8.     <TextView
  9.         android:id="@+id/describeTv"
  10.         android:layout_width="wrap_content"
  11.         android:layout_height="wrap_content"
  12.         android:layout_below="@+id/image"
  13.         android:layout_centerHorizontal="true"
  14.         android:layout_marginTop="20dp"
  15.         android:text="TextView"
  16.         android:textSize="24sp" />
  17.  
  18.     <ImageView
  19.         android:id="@+id/image"
  20.         android:layout_width="300dp"
  21.         android:layout_height="360dp"
  22.         android:src="@mipmap/ic_launcher"
  23.         android:layout_centerInParent="true" />
  24.  
  25. </RelativeLayout>

下面开始看MainActivity的布局界面

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:id="@+id/activity_main"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:paddingBottom="@dimen/activity_vertical_margin"
  8.     android:paddingLeft="@dimen/activity_horizontal_margin"
  9.     android:paddingRight="@dimen/activity_horizontal_margin"
  10.     android:paddingTop="@dimen/activity_vertical_margin"
  11.     tools:context="com.cjt.galleryrefreshdemo.MainActivity">
  12.  
  13.     <com.cjt.galleryrefreshdemo.view.MyGallery
  14.         android:id="@+id/myGallery"
  15.         android:layout_width="match_parent"
  16.         android:layout_height="match_parent"
  17.         android:spacing="15dp"
  18.         android:layout_alignParentTop="true"
  19.         android:layout_alignParentRight="true"
  20.         android:layout_alignParentEnd="true"
  21.         android:layout_marginRight="17dp"
  22.         android:layout_marginEnd="17dp">
  23.     </com.cjt.galleryrefreshdemo.view.MyGallery>
  24.  
  25. </RelativeLayout>

这里使用的是我们刚刚自定义的Gallery布局，那么 MainActivity要使用刷新和加载的功能，就不得不实现我们刚刚定义的接口了，代码如下 

  1. public class MainActivity extends AppCompatActivity implements IGalleryEventListener{
  2.  
  3.     private MyGallery myGallery ; // 自定义Gallery控件
  4.     private MyGalleryAdapter myGalleryAdapter ; // 适配器
  5.     private List<PictureBean> pictureList = new ArrayList<>();  // 数据集合，使用前要先转换为List的子类
  6.  
  7.     @Override
  8.     protected void onCreate(Bundle savedInstanceState) {
  9.         super.onCreate(savedInstanceState);
  10.         setContentView(R.layout.activity_main);
  11.  
  12.         myGallery = (MyGallery) findViewById(R.id.myGallery); /// 获取界面自定义的Gallery控件
  13.         myGallery.setGalleryEventListerner(this); // 为Gallery设置滑动监听器
  14.  
  15.         // 准备数据
  16.         PictureBean bean ;
  17.         for (int i = 1; i <= 7 ; i++) {
  18.             bean = new PictureBean();
  19.             // 下面一句是获取mipmap中对应的图片名称的资源ID
  20.             int picResId = this.getResources().getIdentifier("pic"+i,"mipmap",getPackageName());
  21.             bean.setPictureResId(picResId);
  22.             bean.setPictureName("照片--"+i);
  23.             pictureList.add(bean);
  24.         }
  25.  
  26.         // 设置适配器
  27.         myGalleryAdapter = new MyGalleryAdapter(this,pictureList) ;
  28.         myGallery.setAdapter(myGalleryAdapter);
  29.         myGallery.setSelection(1);   // 默认选中第一项，跳过第0项
  30.     }
  31.  
  32.     @Override
  33.     public void onLoadMore() {
  34.         // 在这里处理加载更多的事件
  35.         taskThread(0);
  36.     }
  37.  
  38.     @Override
  39.     public void onRefresh() {
  40.        // 在这里处理刷新的事件
  41.         taskThread(1);
  42.     }
  43.  
  44.     /**
  45.      * 一般新开一个线程用于加载或刷新操作
  46.      * @param type  这里的type用于区分是刷新还是加载操作
  47.      */
  48.     private void taskThread(final int type){
  49.         new Thread(new Runnable() {
  50.             @Override
  51.             public void run() {
  52.                 try {
  53.                     Thread.sleep(2000);
  54.                 } catch (InterruptedException e) {
  55.                     e.printStackTrace();
  56.                 }
  57.                 Log.e("CJT","这里可以新建加载或刷新的任务");
  58.                 getLoad(type); // 这里是模拟加载更多的任务
  59.             }
  60.         }).start();
  61.     }
  62.  
  63.     // 模拟获取数据的方法，这里一般是网络请求加载数据
  64.     private void getLoad(int type){
  65.         if(type == 0){ // 加载操作
  66.             mHandler.sendEmptyMessage(0x01); // 加载完毕之后，发送消息，更新界面
  67.  
  68.             // 这里模拟加载更多数据
  69.             // 准备数据
  70.             PictureBean bean ;
  71.             for (int i = 1; i <= 4 ; i++) {
  72.                 bean = new PictureBean();
  73.                 int picResId = this.getResources().getIdentifier("m"+i,"mipmap",getPackageName());
  74.                 bean.setPictureResId(picResId);
  75.                 bean.setPictureName("美女--"+i);
  76.                 pictureList.add(bean);
  77.             }
  78.         }else{
  79.             mHandler.sendEmptyMessage(0x02); // 刷新完毕之后，发送消息，更新界面
  80.         }
  81.     }
  82.  
  83.     // 一般使用Handler来更新界面
  84.     private Handler mHandler = new Handler(){
  85.         @Override
  86.         public void handleMessage(Message msg) {
  87.             if(msg.what == 0x01){
  88.                 // 更新界面
  89.                 if(myGalleryAdapter != null )
  90.                     myGalleryAdapter.notifyDataSetChanged();
  91.             }else  if(msg.what == 0x02){
  92.                 // 更新界面
  93.  
  94.             }
  95.             myGallery.onCompleted(); // 同时调用加载结束的回调函数，停止转圈圈
  96.         }
  97.     };
  98. }

首先实现了我们自定义的接口，并且重写了两个方法（刷新和加载），在刷新和加载中我们开启了一个新的线程，模拟在后台实现的网络请求过程， 加入线程休眠 Thread.sleep(2000) 主要是让刷新界面或者加载界面都能出来露个脸，就是让圈圈出来转一下。getLoad()方法就是模拟我们的后台请求数据，我这里使用一个int类型用来区分是刷新请求还是加载更多的请求，当然你们可以根据自己的需要去增加相应的请求的参数，比如分页加载需要页码（pageNum）等。推荐使用Handler来更新界面，如果是加载更多的话，只需要调用Adapter的 notifyDataSetChanged()方法，如果是刷新的话根据业务需求来更新，比如我是将数据集合清空，然后在填充一次，这样避免了数据重复。最后别忘了回调加载结束的方法，不然那个刷新或加载更多的圈圈会一直不停的转、不停的转、不停的转……。

这里有一个测试用的实体类，也一并贴上来，显得文章长一些…………

  1. public class PictureBean {
  2.     private int pictureResId ; // 图片资源的ID
  3.     private String pictureName ; // 图片的名称描述
  4.  
  5.     public int getPictureResId() {
  6.         return pictureResId;
  7.     }
  8.  
  9.     public void setPictureResId(int pictureResId) {
  10.         this.pictureResId = pictureResId;
  11.     }
  12.  
  13.     public String getPictureName() {
  14.         return pictureName;
  15.     }
  16.  
  17.     public void setPictureName(String pictureName) {
  18.         this.pictureName = pictureName;
  19.     }
  20.  
  21.     @Override
  22.     public String toString() {
  23.         return "PictureBean{" +
  24.                 "pictureResId=" + pictureResId +
  25.                 ", pictureName='" + pictureName + '\'' +
  26.                 '}';
  27.     }
  28. }

好像也没见得有多长。


总结一下：其实实现可滑动控件的刷新或加载也不难，定义好接口以及相应的待实现的方法，在要使用的地方实现该接口，并填充方法，在方法里面做刷新或加载的操作。另外刷新或加载完了之后，推荐使用Handler来更新界面，至于转圈圈的界面，控制好时机，该出现的时候让他出现，不该出现的时候坚决将他干掉就行了。


参考： 感谢网上的资料，下次记得把链接和名字一并奉上，这次就低调些大笑。


想要源码的可以去这两个地方，不要分，拿走不谢。我也是个菜鸟，希望跟大家共同探讨人生，哈哈哈得意。


Git地址：https://github.com/1989Jiangtao/GalleryRefresh

代码下载:http://download.csdn.net/detail/u010898329/9750269


声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/500675
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号