android 使用RecyclerView实现首项左右滑动,剩余项图片自适应

  实际项目中要实现这样的效果,界面中开始的位置实现轮播图的效果,然后下面紧跟着就是一张张的图片,而且图片的大小不一定.并且是依次排列下来的.

  首先想到的就是使用RecyclerView,然后第0项使用ViewPager的方式实现左右滑动,并且但是小圆点的导航图,从第一项开始使用ImageView使图片依次排列下来.OK方案确定下来后没开始动手写代码:

一:先把布局文件写出来:

<RelativeLayout
        android:id="@+id/e_custom_merchandise_activity_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/activity_recyclerview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
</RelativeLayout

既然第0项使用的ViewPager,要把它的界面布局也要写出来:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <android.support.v4.view.ViewPager
            android:id="@+id/e_custom_merchandise_vp_iamge"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorPrimary"/>
        <LinearLayout
            android:id="@+id/e_custom_merchandise_indicator"
            android:layout_width="wrap_content"
            android:layout_height="20dp"
            android:layout_gravity="bottom|right"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:orientation="horizontal"/>
    </FrameLayout>
</LinearLayout>

其余的Item布局,其实就是一个ImageView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical">
    <ImageView
        android:id="@+id/recyclerview_item_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        tools:src="@drawable/watermark"/>
</RelativeLayout>

二:然后就是在Activity中初始化

private EcommerceDetailDisplayAdapter mMyAdapter;


private void initView() {
        mRecyclerView = (RecyclerView) findViewById(R.id.activity_recyclerview);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(CustomProductActivity.this, LinearLayoutManager.VERTICAL, false));//竖直放置
        mMyAdapter = new EcommerceDetailDisplayAdapter(CustomProductActivity.this);
        mMyAdapter.setShowHeaderList(headShowList);
        mMyAdapter.setShowDetailList(itemShowList);
        mRecyclerView.setAdapter(mMyAdapter);
        mRecyclerView.addItemDecoration(new SpaceItemDecoration(4));
    }

最重要的Adapter:

import android.content.Context;
import android.graphics.Bitmap;
import android.support.v4.view.ViewPager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.manboker.headportrait.R;

import java.util.ArrayList;

/**
 * Author: aaa
 * Date: 2016/12/12 20:22.
 */
public class EcommerceDetailDisplayAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private Context mContext;
    private static final int TYPE_HEADER = 0;//列表头
    private static final int TYPE_ITEM = 1;//列表项

    private ArrayList<Bitmap> showHeaderList;//第一项ViewPager中的图片
    private ArrayList<Bitmap> showDetailList;//剩余的图片

    private int mScreenWidth;//屏幕的宽度

    public EcommerceDetailDisplayAdapter(Context context) {
        mContext = context;
        showHeaderList = new ArrayList<Bitmap>();
        showDetailList = new ArrayList<Bitmap>();

        WindowManager wm = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);
        mScreenWidth = wm.getDefaultDisplay().getWidth();
    }

    public void setShowHeaderList(ArrayList<Bitmap> headerBitmapList) {
        showHeaderList = headerBitmapList;
        notifyDataSetChanged();
    }

    public void setShowDetailList(ArrayList<Bitmap> showDetailList) {
        this.showDetailList = showDetailList;
        notifyDataSetChanged();
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //理论上应该把最可能返回的 TYPE 放在前面
        View view = null;

        //头部返回 ViewPager 实现的轮播图片
        if (viewType == TYPE_HEADER) {
            view = LayoutInflater.from(mContext).inflate(R.layout.e_custom_merchandise_recyclerview_header, parent, false);
            HeaderViewHolder headerViewHolder = new HeaderViewHolder(view);
            //创建的时候绑定Adapter,防止RecyclerView从底部滑到上部的时候,重复刷新
            EcommerceHeaderAdapter imageAdapter = new EcommerceHeaderAdapter(mContext, showHeaderList);
            headerViewHolder.mViewPager.setAdapter(imageAdapter);
            headerViewHolder.mViewPager.addOnPageChangeListener(new HeaderChangeListener());//设置滑动监听
            createTipsCircle(headerViewHolder.mLLIndicator);//设置底部导航圆点
            return headerViewHolder;
        }
        if (viewType == TYPE_ITEM) {
            view = LayoutInflater.from(mContext).inflate(R.layout.e_custom_merchandise_recyclerview_item, parent, false);
            return new ItemViewHolder(view);
        }

        return null;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        if (holder instanceof HeaderViewHolder) {

        } else if (holder instanceof ItemViewHolder) {
            ItemViewHolder itemViewHolder = (ItemViewHolder) holder;

            ViewGroup.LayoutParams layoutParams = itemViewHolder.mItemImageView.getLayoutParams();
            layoutParams.width = mScreenWidth;
            layoutParams.height = ViewPager.LayoutParams.WRAP_CONTENT;
            itemViewHolder.mItemImageView.setLayoutParams(layoutParams);
            itemViewHolder.mItemImageView.setMaxWidth(mScreenWidth);
            itemViewHolder.mItemImageView.setMaxHeight(mScreenWidth * 4);
            itemViewHolder.mItemImageView.setImageBitmap(showDetailList.get(position - 1));
        }
    }

    @Override
    public int getItemCount() {
        return showDetailList.size() + 1;//剩余图片+第一列的图片
    }

    @Override
    public int getItemViewType(int position) {
        if (position == 0) {
            return TYPE_HEADER;
        } else {
            return TYPE_ITEM;
        }
    }

    class HeaderViewHolder extends RecyclerView.ViewHolder {

        private ViewPager mViewPager;
        private LinearLayout mLLIndicator;

        public HeaderViewHolder(View itemView) {
            super(itemView);
            mViewPager = (ViewPager) itemView.findViewById(R.id.e_custom_merchandise_vp_iamge);
            mLLIndicator = (LinearLayout) itemView.findViewById(R.id.e_custom_merchandise_indicator);
        }
    }

    class ItemViewHolder extends RecyclerView.ViewHolder {

        public ImageView mItemImageView;

        public ItemViewHolder(View itemView) {
            super(itemView);
            mItemImageView = (ImageView) itemView.findViewById(R.id.e_custom_merchandise_recyclerview_item_image);
        }
    }

    ImageView[] mCircleImages;//底部导航栏的小圆点数组
    //设置当前 第几个图片 被选中
    private int currentIndex = 0;

    //创建底部的小圆点导航栏
    private void createTipsCircle(LinearLayout llTips) {

        mCircleImages = new ImageView[showHeaderList.size()];
        for (int i = 0; i < mCircleImages.length; i++) {
            ImageView imageView = new ImageView(mContext);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(10, 10);
            params.setMargins(5, 0, 5, 0);
            imageView.setLayoutParams(params);
            if (i == 0) {
                imageView.setBackgroundResource(R.drawable.indicator_focused);
            } else {
                imageView.setBackgroundResource(R.drawable.indicator);
            }
            mCircleImages[i] = imageView;
            //把指示作用的原点图片加入底部的视图中
            llTips.addView(mCircleImages[i]);
        }
    }

    private class HeaderChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            // 一定几个图片，几个圆点，但注意是从0开始的
            int total = mCircleImages.length;
            for (int j = 0; j < total; j++) {
                if (j == position) {
                    mCircleImages[j].setBackgroundResource(R.drawable.indicator_focused);
                } else {
                    mCircleImages[j].setBackgroundResource(R.drawable.indicator);
                }
            }
            //设置全局变量，currentIndex为选中图标的 index
            currentIndex = position;
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }
}

还有就是ViewPager的adapter:

import android.content.Context;
import android.graphics.Bitmap;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.ArrayList;

/**
 * Author: aaa
 * Date: 2016/12/12 21:23.
 */
public class EcommerceHeaderAdapter extends PagerAdapter {

    private Context mContext;
    private ArrayList<Bitmap> mBitmaps;
    private ArrayList<ImageView> mImageViews;

    public EcommerceHeaderAdapter(Context context, ArrayList<Bitmap> bitmaps) {
        mContext = context;
        mBitmaps = new ArrayList<Bitmap>();
        mImageViews = new ArrayList<ImageView>();

        mBitmaps = bitmaps;
        init();
    }

    private void init() {
        for (int i = 0; i < getCount(); i++) {
            ImageView imageView = new ImageView(mContext);

            imageView.setImageBitmap(mBitmaps.get(i));
            mImageViews.add(imageView);
        }
    }

    @Override
    public int getCount() {
        return mBitmaps.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        // 将当前位置的View移除
        container.removeView(mImageViews.get(position));
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {  //这个方法用来实例化页卡
        container.addView(mImageViews.get(position), 0);
        return mImageViews.get(position);
    }
}

三:注意
1.创建导航点的代码:

createTipsCircle(headerViewHolder.mLLIndicator);//设置底部导航圆点

一定要放到onCreateViewHolder(ViewGroup parent, int viewType)这个方法中.目的是指创建一次.

2.图片显示的时候属性值:

android:adjustViewBounds="true"
android:scaleType="fitXY"

一定要加上这两句属性,同时代码,也要加上:
itemViewHolder.mItemImageView.setMaxWidth(mScreenWidth);
itemViewHolder.mItemImageView.setMaxHeight(mScreenWidth * 4);
否则达不到想要的效果.

3.要相信自己,不停的测试各种方案,最终会达到目的的.