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

原创 2018年04月16日 09:49:19


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

依赖

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);
}

滑动监听

滑动监听最终停止的位置

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

android仿gallery画廊效果

  • 2016年07月20日 09:30
  • 4.61MB
  • 下载

android viewpager 无限循环实现gallery 效果

谷歌官方已经说明 gallery 已经弃用 我直接上demo吧, 这是效果, 下载地址为: https://github.com/Jonguo/InfiniteViewpagerGalle...
  • com314159
  • com314159
  • 2014-01-08 19:44:12
  • 5083

android实现广告轮播效果,支持自动播放,点击手势滑动

  • 2015年03月26日 15:14
  • 1.34MB
  • 下载

Android-ConvenientBanner轻松实现广告头效果

摘要 Android-ConvenientBanner通用的广告栏控件,让你轻松实现广告头效果。支持无限循环,可以设置自动翻页和时间(而且非常智能,手指触碰则暂停翻页,离开自动开始翻页。你也可以设置...
  • u011277123
  • u011277123
  • 2016-07-20 09:49:27
  • 435

RecyclerView 实现gallery画廊效果

转载自: 1、RecyclerView的基本用法 首先主Activity的布局文件: [html] v...
  • lv18092081172
  • lv18092081172
  • 2016-10-01 20:03:52
  • 1041

ViewPager实现画廊效果

1.先看一下效果 2.技术要点: 1、setClipChildren(boolean clipChildren)方法: clipChild用来定义他的子控件是否要在他应有的边界内进行绘制...
  • ForrestL
  • ForrestL
  • 2016-08-04 10:44:15
  • 9770

Android 中使用ViewPager实现画廊效果

Android 中使用ViewPager实现画廊效果
  • qq_33523706
  • qq_33523706
  • 2016-11-14 16:06:29
  • 854

Android照片墙加强版,使用ViewPager实现画廊效果Demo

  • 2013年11月13日 21:37
  • 1.56MB
  • 下载

Android-->RecyclerView的上手教程(模仿画廊效果)

效果图: 考虑到图片体积, 上一个和下一个的按钮,没有截图出来.RecyclerView使用教程1:创建RecyclerView,也可以在布局中创建recyclerView = new Recy...
  • angcyo
  • angcyo
  • 2015-06-10 16:44:40
  • 4093

ViewPager实现简单的画廊效果

效果图如下: 实现思路如下: 1、将ViewPager的宽度设置为屏幕宽度的一半,并将ViewPager置于屏幕的中央; 2、通过clipChildren属性将ViewPager控件范围外的Vi...
  • wwww_dong
  • wwww_dong
  • 2017-04-05 16:03:35
  • 1054
收藏助手
不良信息举报
您举报文章:android recyclerview+GalleryLayoutManager 实现广告画廊效果
举报原因:
原因补充:

(最多只允许输入30个字)