您现在的位置是:首页 > 文章详情

android recyclerview+GalleryLayoutManager 实现广告画廊效果

日期:2018-04-15点击:327
image

相信大家平常在项目中遇到过画廊的效果,网上也有多种方式,类似viewPager、recyclerview等等方式实现,今天推荐一个三方库GalleryLayoutManager,便于快速实现,以解燃眉之急。


image

依赖

gradle依赖

compile 'github.hellocsl:GalleryLayoutManager:1.0.6' 

实现

布局文件

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView android:id="@+id/recycler" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout> 

recyclerView设置的adapter

 private class Adapter extends RecyclerView.Adapter<RecyclerHolder> { private Context context; private Adapter(Context context) { this.context = context; } @Override public RecyclerHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(context).inflate(R.layout.item_view, null); //自定义view的宽度,控制一屏显示个数 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); int width = context.getResources().getDisplayMetrics().widthPixels; params.width = width / 3; view.setLayoutParams(params); return new RecyclerHolder(view); } @Override public void onBindViewHolder(RecyclerHolder holder, int position) { } @Override public int getItemCount() { return 10; } } private class RecyclerHolder extends RecyclerView.ViewHolder { private View view; public RecyclerHolder(View itemView) { super(itemView); view = itemView; } public View getView() { return view; } } 

每个item简单的放置一个布局

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical"> <ImageView android:layout_width="100dp" android:layout_height="wrap_content" android:src="@mipmap/dota" /> </LinearLayout> 

采用第三方的GalleryLayoutManager 与 recyclerView绑定,设置为横向滑动布局

GalleryLayoutManager manager = new GalleryLayoutManager(GalleryLayoutManager.HORIZONTAL); manager.attach(recycler); //设置滑动缩放效果 manager.setItemTransformer(new Transformer()); recycler.setAdapter(new Adapter(this)); 

缩放效果处理

//滑动过程中的缩放 public class Transformer implements GalleryLayoutManager.ItemTransformer { @Override public void transformItem(GalleryLayoutManager layoutManager, View item, float fraction) { //以圆心进行缩放 item.setPivotX(item.getWidth() / 2.0f); item.setPivotY(item.getHeight() / 2.0f); float scale = 1 - 0.3f * Math.abs(fraction); item.setScaleX(scale); item.setScaleY(scale); } } 

可以自定义RecyclerView里每项view的宽度,控制一屏显示效果,adapter的onCreateViewHolder里操作

@Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(context).inflate(R.layout.item_view, null); //自定义view的宽度,控制一屏显示个数 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); int width = context.getResources().getDisplayMetrics().widthPixels; params.width = width / 3; view.setLayoutParams(params); return new RecyclerHolder(view); } 
image

滑动监听

滑动监听最终停止的位置

manager.setOnItemSelectedListener(new GalleryLayoutManager.OnItemSelectedListener() { @Override public void onItemSelected(RecyclerView recyclerView, View item, int position) { //滑动到某一项的position } }); 

同时支持点击每一项滑动切换,adapter的onBindViewHolder方法里

@Override public void onBindViewHolder(RecyclerHolder holder, final int position) { holder.getView().setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { recycler.smoothScrollToPosition(position); } }); } 

至此,一个简单的画廊效果实现,如果你项目正好需要这个,而我正好有。
当然这里只是简单介绍了画廊效果的实现,这个库还提供支持上下滑动的效果,贴上github地址 https://github.com/BCsl/GalleryLayoutManager, 便于大家进一步研究
同时欢迎关注微信公众号

image.png

原文链接:https://yq.aliyun.com/articles/610900
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章