首页 文章 精选 留言 我的

[Android学习笔记三] Support v7提供交错式网格布局开发示例

2017-11-12 473

   本文主要介绍Android Support v7提供的RecycleView和交错式布局（通常成为瀑布流布局）的使用和事件监听处理。


  1. 涉及到开源库有：

   Fresco : 

   Facebook开源的不是一般强大的图片加载组件库 

   Bufferknife : 

   Android View和事件绑定库，通过注解完成，在编译时APT处理注解文档。

  

  2. 模块配置

    

   Android Studio模块，build.gradle配置：

   

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
apply plugin:  'com.android.application'
android {
     compileSdkVersion  21
     buildToolsVersion  '21.1.2'
 
     defaultConfig {
         applicationId  'secondriver.sdk'
         minSdkVersion  16
         targetSdkVersion  21
         versionCode  1
         versionName  '1.0'
     }
     buildTypes {
         release {
             minifyEnabled false
             proguardFiles getDefaultProguardFile( 'proguard-android.txt' ),  'proguard-rules.pro'
         }
     }
 
     packagingOptions {
         exclude  'META-INF/services/javax.annotation.processing.Processor'
     }
 
     lintOptions {
         disable  'InvalidPackage'
     }
}
dependencies {
     compile fileTree(dir:  'libs' , include: [ '*.jar' ])
 
     compile  'com.android.support:appcompat-v7:21.0.3'
     compile  'com.android.support:recyclerview-v7:21.0.3@aar'
     compile  'com.android.support:cardview-v7:21.0.3@aar'
 
     compile  'com.facebook.fresco:fresco:0.8.0'
     compile  'com.jakewharton:butterknife:7.0.1'
 
     testCompile  'junit:junit:4.12'
}


   3. 布局文件


    主布局文件：activity_recycleview.xml 包含一个RecycleView，将作为主屏幕组件。

   

1
2
3
4
5
6
7
8
9
10
11
12
13
<? xml  version = "1.0"  encoding = "utf-8" ?>
< RelativeLayout  android:id = "@+id/swipe_refresh_layout"
                 xmlns:android = "http://schemas.android.com/apk/res/android"
                 android:layout_width = "match_parent"
                 android:layout_height = "wrap_content" >
     < android.support.v7.widget.RecyclerView
         android:id = "@+id/recycler_view"
         android:layout_width = "match_parent"
         android:layout_height = "wrap_content"
         android:layout_alignParentTop = "true"
         android:scrollbars = "vertical"
         />
</ RelativeLayout >


    RecycleView 通过设置不同的布局管理器对象来实现不同的布局显示，如：   

    android.support.v7.widget.LinearLayoutManager 可以实现ListView的布局效果

    android.support.v7.widget.GridLayoutManager  可以实现GridView的布局效果

    android.support.v7.widget.StaggeredGridLayoutManager 可以实现交错式网格布局效果


    次布局文件(RecycleView中显示的每一项视图的布局)：item_recycelview.xml 通过com.android.support:CardView包提供的CardView帧式容器布局包含一个ImageView和TextView作为RecycleView的每一项视图的布局。

    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<? xml  version = "1.0"  encoding = "utf-8" ?>
< LinearLayout  xmlns:android = "http://schemas.android.com/apk/res/android"
               xmlns:card_view = "http://schemas.android.com/apk/res-auto"
               xmlns:fresco = "http://schemas.android.com/tools"
               android:layout_width = "match_parent"  android:layout_height = "match_parent"
               android:gravity = "center" >
 
     < android.support.v7.widget.CardView
         android:id = "@+id/card_view"
         android:layout_width = "wrap_content"
         android:layout_height = "wrap_content"
         android:layout_gravity = "center"
         card_view:cardCornerRadius = "4dp"
         card_view:cardUseCompatPadding = "true" >
 
         < RelativeLayout
             android:layout_width = "match_parent"
             android:layout_height = "wrap_content"  android:orientation = "vertical" >
 
             < com.facebook.drawee.view.SimpleDraweeView
                 android:id = "@+id/info_image"
                 android:layout_width = "300dp"
                 android:layout_height = "420dp"
                 fresco:actualImageScaleType = "centerCrop"
                 fresco:placeholderImage = "@mipmap/ic_launcher"
                 fresco:roundAsCircle = "false"
                 fresco:roundBottomLeft = "true"
                 fresco:roundBottomRight = "true"
                 fresco:roundTopLeft = "true"
                 fresco:roundTopRight = "true"
                 fresco:roundedCornerRadius = "1dp"
                 fresco:roundingBorderWidth = "2dp"
                 />
             < TextView
                 android:id = "@+id/info_text"
                 android:layout_width = "200dp"
                 android:layout_height = "80dp"
                 android:textSize = "20sp"
                 android:textColor = "@android:color/holo_blue_dark"
                 android:textAppearance = "?android:attr/textAppearanceMedium"
                 android:layout_alignLeft = "@id/info_image"
                 android:layout_alignRight = "@id/info_image"
                 android:layout_below = "@id/info_image"
                 android:gravity = "left|center_vertical" />
         </ RelativeLayout >
     </ android.support.v7.widget.CardView >
</ LinearLayout >

    

    ImageView组件使用的是Fresco库提供的视图组件。


 4. Activity实现和数据填充


    4.1 RecycleView中的每一项视图的数据组成

       文本信息+ 图片地址（url,file,resId） 本示例中采用Url网络图片

       

1
2
3
4
5
6
7
8
9
10
11
12
/**
      * View项的数据对象
      */
     static  class  Pair {
         public  String text;
         public  String url;
 
         public  Pair(String text, String url) {
             this .text = text;
             this .url = url;
         }
     }

        

   

    4.2 RecycleView中国的每一项视图的数据填充，即适配器

        自定义适配器需要实现RecycleView.Adapter类。

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
static  class  RecycleViewAdapter  extends  RecyclerView.Adapter<RecyclerView.ViewHolder> {
 
         /**
          * RecycleView的View项单击事件监听
          */
         public  interface  OnRecycleViewItemClickListener {
 
             void  onRecycleViewItemClick(View view,  int  position);
         }
 
         private  ArrayList<Pair> items =  new  ArrayList<>();
 
         private  OnRecycleViewItemClickListener mOnRecycleViewItemClickListener;
 
         public  RecycleViewAdapter(ArrayList<Pair> items) {
             this .items = items;
         }
 
         @Override
         public  RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent,  int  viewType) {
             View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_recyclerview, parent,  false );
             return  new  RecycleViewItemHolder(view, mOnRecycleViewItemClickListener);
         }
 
         @Override
         public  void  onBindViewHolder(RecyclerView.ViewHolder holder,  int  position) {
             Pair pair = items.get(position);
             ((RecycleViewItemHolder) holder).setContent(pair);
         }
 
         @Override
         public  int  getItemCount() {
             return  items.size();
         }
 
         public  void  setOnRecycleViewItemClickListener(OnRecycleViewItemClickListener onItemClickListener) {
             if  ( null  != onItemClickListener) {
                 this .mOnRecycleViewItemClickListener = onItemClickListener;
             }
         }
     }


   主要实现onCreateViewHolder和onBindViewHolder方法。由于RecycleView并未提供为视图项添加监听事件，这里自定义个一个事件监听接口，在实例化适配器的时候可以选择设置事件监听。


   4.3 创建ViewHolder需要通过自定义ViewHolder类继承RecycleView.ViewHolder。

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
static  class  RecycleViewItemHolder  extends  RecyclerView.ViewHolder  implements  View.OnClickListener {
 
         @Bind (R.id.info_text)
         public  TextView infoTextView;
 
         @Bind (R.id.info_image)
         public  SimpleDraweeView draweeView;
 
         private  RecycleViewAdapter.OnRecycleViewItemClickListener onItemClickListener;
 
         public  RecycleViewItemHolder(View itemView, RecycleViewAdapter.OnRecycleViewItemClickListener onItemClickListener) {
             super (itemView);
             ButterKnife.bind( this , itemView);
             this .onItemClickListener = onItemClickListener;
             itemView.setOnClickListener( this );
         }
 
         public  void  setContent(Pair pair) {
             infoTextView.setText(pair.text);
             draweeView.setImageURI(Uri.parse(pair.url));
         }
 
         @Override
         public  void  onClick(View v) {
             if  ( null  != onItemClickListener) {
                 onItemClickListener.onRecycleViewItemClick(v, getPosition());
             }
         }
     }


    在构造方法中的传入OnRecycleViewItemClickListener对象，并且自定义ViewHolder实现OnClickListener接口，通过为itemView对象设置OnClickListener监听事件，在onClick方法中将点击事件的处理交由OnRecycleViewItemClickListener对象处理，从而达到为RecycleView中的itemView注册点击事件。


    如果不采用这种方式添加事件监听，就不需要自定义监听接口和自定义ViewHolder实现事件监听接口以及事件处理。另外可以通过获得的itemView之后，通过组件I的获取组件来添加事件监听。还可以通过获得的自定义ViewHolder，来访问每个组件。


   4.4 Activity的具体实现

    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
package  secondriver.sdk.activity;
 
import  android.app.Activity;
import  android.net.Uri;
import  android.os.Bundle;
import  android.support.v7.widget.DefaultItemAnimator;
import  android.support.v7.widget.RecyclerView;
import  android.support.v7.widget.StaggeredGridLayoutManager;
import  android.util.Log;
import  android.view.LayoutInflater;
import  android.view.View;
import  android.view.ViewGroup;
import  android.widget.TextView;
import  android.widget.Toast;
 
import  com.facebook.drawee.view.SimpleDraweeView;
 
import  java.util.ArrayList;
import  java.util.Arrays;
import  java.util.Random;
 
import  butterknife.Bind;
import  butterknife.ButterKnife;
import  secondriver.sdk.R;
 
/**
  * Author : secondriver
  * Created : 2015/11/18
  */
public  class  RecycleViewActivity  extends  Activity {
 
     private  static  final  String TAG = RecyclerView. class .getName();
 
     private  static  final  String[] RES_URL =  new  String[]{
             "http://p1.wmpic.me/article/2015/11/16/1447644849_hySANEEF.jpg" ,
             //减少篇幅，此处省去14个图片Url
     };
 
     @Bind (R.id.recycler_view)
     public  RecyclerView mRecycleView;
 
     private  final  int  PRE_SCREEN_NUMBER =  6 ;
     private  final  int  SPAN_COUNT =  2 ;
 
     private  int  previousLastIndex =  0 ;
     private  boolean  isSlidingToLast =  false ;
 
     private  RecycleViewAdapter mAdapter;
     private  ArrayList<Pair> mItem =  new  ArrayList<>();
 
     //交错式网格布局管理对象，即通常称的瀑布流布局
     private  StaggeredGridLayoutManager mLayoutManager;
 
     @Override
     protected  void  onCreate(Bundle savedInstanceState) {
         super .onCreate(savedInstanceState);
         setContentView(R.layout.activity_recyclerview);
         ButterKnife.bind( this );
     Fresco.initialize( this );  //重要，Fresco做一系列初始化工作
         initRecycleView();
     }
 
     private  void  initRecycleView() {
 
         mLayoutManager =  new  StaggeredGridLayoutManager(SPAN_COUNT, StaggeredGridLayoutManager.VERTICAL);
         mRecycleView.setLayoutManager(mLayoutManager);
 
         mAdapter =  new  RecycleViewAdapter(mItem);
         loadData( false );
 
         mRecycleView.setAdapter(mAdapter);
         mRecycleView.setItemAnimator( new  DefaultItemAnimator());
 
         //RecycleView的View项单击事件监听
         mAdapter.setOnRecycleViewItemClickListener( new  RecycleViewAdapter.OnRecycleViewItemClickListener() {
 
             @Override
             public  void  onRecycleViewItemClick(View view,  int  position) {
 
                 long  id = mRecycleView.getChildItemId(view);
                 Log.d(TAG,  "View项的根视图:"  + view.getClass().getName() +  ",position="  + position +  " ViewHolder_Id="  + id);
 
                 //通过findViewById查找View项中的元素
                 SimpleDraweeView draweeView = (SimpleDraweeView) view.findViewById(R.id.info_image);
                 if  ( null  != draweeView) {
                     draweeView.setImageURI(Uri.parse(RES_URL[ 0 ]));
                     Toast.makeText(RecycleViewActivity. this ,  "通过findViewById查找View项中的元素" , Toast.LENGTH_LONG).show();
                 }
 
                 RecycleViewItemHolder recycleViewItemHolder = (RecycleViewItemHolder) mRecycleView.findViewHolderForPosition(position);
                 if  ( null  != recycleViewItemHolder) {
                     recycleViewItemHolder.infoTextView.setText( "通过ViewHolder找到View项中的元素" );
                 }
             }
         });
 
         //下拉刷新，追加内容
         mRecycleView.setOnScrollListener(
                 new  RecyclerView.OnScrollListener() {
 
                     @Override
                     public  void  onScrollStateChanged(RecyclerView recyclerView,  int  newState) {
                         super .onScrollStateChanged(recyclerView, newState);
 
                         if  (newState == RecyclerView.SCROLL_STATE_IDLE) {
                             if  (isPullToBottom() && isSlidingToLast) {
                                 if  (mItem.size() >  36 ) {  //最大数据量
                                     Toast.makeText(RecycleViewActivity. this ,  "没有数据了" , Toast.LENGTH_LONG).show();
                                     return ;
                                 }  else  {
                                     loadData( false );
                                     Log.d(TAG,  "notifyItemRangeInserted startPosition="  + previousLastIndex);
                                     mAdapter.notifyItemRangeInserted(previousLastIndex, PRE_SCREEN_NUMBER);
                                 }
                             }
                         }
                         if  (newState == RecyclerView.SCROLL_STATE_SETTLING) {
                             Log.d(TAG,  "settling" );
                         }
                     }
 
                     @Override
                     public  void  onScrolled(RecyclerView recyclerView,  int  dx,  int  dy) {
                         super .onScrolled(recyclerView, dx, dy);
                         isSlidingToLast = dy >  0 ;  //上拉，下滑
                         Log.d(TAG,  "dx = "  + dx +  " dy="  + dy +  " isSlidingToLast="  + isSlidingToLast);
                     }
                 }
         );
 
     }
 
     private  boolean  isPullToBottom() {
         int [] lastIndexs = mLayoutManager.findLastCompletelyVisibleItemPositions( null );
         Log.d(TAG,  "last item ="  + Arrays.toString(lastIndexs) +  ", have item="  + mAdapter.getItemCount());
         int  maxIndex = mAdapter.getItemCount() -  1 ;
         for  ( int  i : lastIndexs) {
             if  (i == maxIndex) {
                 return  true ;
             }
         }
         return  false ;
     }
 
 
     private  void  loadData( boolean  isClear) {
         if  (isClear) {
             mItem.clear();
         }
         previousLastIndex = mItem.size();
         Random r =  new  Random();
         for  ( int  index =  0 ; index < PRE_SCREEN_NUMBER && index < RES_URL.length; index++) {
             mItem.add( new  Pair( "Card "  + (previousLastIndex + index), RES_URL[r.nextInt(RES_URL.length)]));
         }
         Log.d(TAG,  "mItem count ="  + mItem.size());
     }
}


    说明：

    RecycleView的ItemView的数据由Pair对象管理存储

    Fresco库默认配置下的使用之前需要初始化调用Fresco.initialize(Context)

    上述实现了2个事件监听，一个OnScrollerListener由RecycleView提供，实现下拉刷新；一个OnRecycleViewItemClickListener由自定义的RecycleViewAdpater提供，实现单击itemView来更换图片(SimpleDraweeView)和文字(TextView)。

    Butterknife和Fresco库的具体使用参见其Github上的文档。

 

5. 效果图

  

  比较遗憾ScreenRecord不支持模拟器和Android4.4一下的系统，只能附上截图。

  

wKiom1ZO4o-QeQpgAAGxEVl9mcg721.pngwKiom1ZO4pHTryCOAAFsNVfJcQo288.png

wKiom1ZO4pXhJ94JAAHzXksmYI8284.pngwKiom1ZO4pjjCzOTAAHD0AdMo8o213.png




本文转自 secondriver 51CTO博客，原文链接：http://blog.51cto.com/aiilive/1715139，如需转载请自行联系原作者
上一篇 下一篇
优秀的个人博客,低调大师

微信关注我们

原文链接：https://yq.aliyun.com/articles/411945

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

android 19 activity纵横屏切换的数据保存与恢复

Bundle类：竖屏的activity换到横屏的activity的时候，会把竖屏的activity杀掉横屏的activity创建，竖屏的activity会有一些计算结果，可以用数据存起来，存到内存里面，然后存在横屏的activity。 Intent类putExtra("user", user);传数据的时候用的就是Bundle对象， private Bundle mExtras; Bundle是一个map， package com.sxt.day04_03; import java.io.IOException; import java.io.InputStream; import java.net.MalformedURLException; import java.net.URL; import java.net.URLConnection; import android.app.Activity; import android.os.Bundle; import android.util.Log; public class MainActivity extends Activit...
2017-11-13
594
上一篇

Android联机或者模拟器单独测试Activity的辅助Activity示例开发

想起写个单独测试Activity的辅助Activity的原因是在联机测试的时候IDEA或者Android Studio中的指定运行Activity功能没法使用了。 下面付IDE中指定运行Activity的界面截图： 辅助Activity要做的事情是将辅助Activity作为启动的默认Activity，其主界面中以ListView的形式展示所有Activity，通过单击ListView的Item项来启动要测试的Activity。 1. 辅助Activity代码示例： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 8...
2017-11-13
553
下一篇

相关文章

发表评论

资源下载

更多资源
腾讯云软件源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

时间: 2026-01-27 大小: 1MB 下载: 5次
Nacos

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

时间: 2025-12-21 大小: 189MB 下载: 2次
Spring

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

时间: 2025-12-17 大小: 5MB 下载: 1次
Rocky Linux

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

时间: 2026-01-03 大小: 1.42GB 下载: 2次
手机查看

扫码在手机上查看文章

扫描二维码，手机阅读更方便

热门标签
Rocky Kubernetes DeepSeek Nacos3 SpringBoot4 Redis OpenAi HarmonyOS6 Gemini3 SpringCloud Service Mesh Jdk25 Docker

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册