android recyclerview+GalleryLayoutManager 實現廣告畫廊效果

相信你們日常在項目中遇到過畫廊的效果，網上也有多種方式，相似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地址 github.com/BCsl/Galler…， 便於你們進一步研究 同時歡迎關注微信公衆號