RecycleView的简单使用

最近使用RecycleView进行简单的界面切换效果制作

RecycleView的简单使用流程：
1、 首先进行导入android.support.v7.widget.RecyclerView
2、 File–>Project Structure

3、 XML文件中进行引入：
如下

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

4、 新建xml文件，为RecycleView添加子元素视图

<?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="wrap_content">
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/city_list_item"
    style="@style/city_list_item"/>
</RelativeLayout>

这里可以进行随意添加相关控件
5、 创建holder文件

class SceneViewHolder extends RecyclerView.ViewHolder
{
    private ImageView imageView;
    private SceneViewHolder(View view)
    {
        super(view);
        imageView = (ImageView)view.findViewById(R.id.scene_img_but);
    }
}

6、 新建adapter

public class SceneAdapter extends RecyclerView.Adapter<SceneAdapter.SceneViewHolder>{
    private List<SceneModel> modelList;
    private Context context;
    int resource_id;

    public SceneAdapter(List<SceneModel> modelList,Context context) {
        this.modelList = modelList;
        this.context = context;
    this.resource_id = resource_id;
    }

    @Override
    public SceneViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(context).inflate(resource_id,null);
        ButterKnife.inject(this,view)
        SceneViewHolder holder = new SceneViewHolder(view);
        return holder;
    }
    @Override
    public void onBindViewHolder(final SceneViewHolder holder, final int position) {
//相关视图事件
}
    @Override
    public int getItemCount() {
        return modelList.size();
    }

7、 使用的为Fragment中的，与Activity在传递Context时会不同，需要使用getContext（）进行获取，其他使用基本相同

public class SceneFragment extends Fragment {
    @InjectView(R.id.scene_recycle)
    RecyclerView recyclerView;

    private SceneAdapter adapter;
    List<SceneModel> sceneList;
    private View view;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.scene_fragment, container, false);
        ButterKnife.inject(this, view);
        sceneList = new ArrayList<SceneModel>();
        initData();
        adapter = new SceneAdapter(sceneList,view.getContext(),R.layout.scene_fragment_item,getActivity().getWindow());
        LinearLayoutManager linearManager = new LinearLayoutManager(getContext());
        linearManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        recyclerView.setLayoutManager(linearManager);
        recyclerView.setAdapter(adapter);
        return view;

    }
    private void initData() {
        List<Devices> temp = new ArrayList<Devices>();
        temp.add(new Devices(R.drawable.scene_model_bg));
        temp.add(new Devices(R.drawable.scene_model_bg));
        temp.add(new Devices(R.drawable.scene_model_bg));
        temp.add(new Devices(R.drawable.scene_model_bg));
        temp.add(new Devices(R.drawable.scene_model_bg));
        temp.add(new Devices(R.drawable.scene_model_bg));
        temp.add(new Devices(R.drawable.scene_model_bg));
        temp.add(new Devices(R.drawable.scene_model_bg));
}

一个简单的RecycleView完成

下面是实现上图效果的代码文件
1、adapter和holder

public class HomeNavViewAdapter extends RecyclerView.Adapter<HomeNavViewAdapter.ViewHolder>{
    private LayoutInflater mInflater;
    private List<RoomData> mData;
    private Context contexts;


    public HomeNavViewAdapter(Context context, List<RoomData> datas){
        contexts = context;
        mInflater = LayoutInflater.from(context);
        mData = datas;
    }
    @Override
    public int getItemCount() {
        return mData.size();
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = mInflater.inflate(R.layout.home_item_layout,parent,false);
        ViewHolder viewHolder = new ViewHolder(view);
        viewHolder.myImg = (ImageView) view.findViewById(R.id.home_img);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        WindowManager wm = (WindowManager) contexts.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics dm = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(dm);
        int width = dm.widthPixels;         // 屏幕宽度（像素）
        LogUtil.e("屏幕宽度：",width+"");
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, DensityUtil.dip2px(contexts,86));
        params.width = width;
        holder.myImg.setImageResource(mData.get(position).getImgUrl());
    }

    public class ViewHolder extends  RecyclerView.ViewHolder{
        public ViewHolder(View arg0){
            super(arg0);
        }
        ImageView myImg;
    }
}

2、activity（这里使用Fragment）

public class ApartmentFragment_Test extends Fragment implements  View.OnTouchListener,GestureDetector.OnGestureListener{
    private final String TAG = "ApartmentFragment";
    //用于首页图片切换--房间图片
    /**
     *     @InjectView()
     *     使用的注解方式进行与视图中的id进行对应
     *     可以改用findviewbyid进行初始化
     */
    @InjectView(R.id.home_nav_rec)
    RecyclerView home_recycleView;
    /**
     * 房间设备信息相关
     * */
    private List<Devices> room_device_data;
    private View view;
    private ApartmentDevicesAdapter myAdapter;

    /**
     * 相关数据
     */
    private int[] imgs = {R.drawable.cgt_airconditioner, R.drawable.cgt_hotwater, R.drawable.cgt_wetdevice, R.drawable.cgt_washdevice, R.drawable.cgt_hotwater2
            , R.drawable.cgt_airconditioner, R.drawable.cgt_hotwater, R.drawable.cgt_wetdevice};
    private int[] imgs2 = {R.drawable.cgt_hotwater,R.drawable.cgt_airconditioner};
    private int[] imgs3 = {R.drawable.cgt_airconditioner,  R.drawable.cgt_wetdevice, R.drawable.cgt_washdevice, R.drawable.cgt_hotwater2
            , R.drawable.cgt_wetdevice};
    private int[] imgs4 = {R.drawable.cgt_hotwater2,R.drawable.cgt_airconditioner};
    /**
     * 房间图片有关
     */
    @InjectView(R.id.apartmentF_recyclerview)
    RecyclerView mRecyclerView;
//    private List<Integer> imgList = new ArrayList<Integer>();
    int currentPosition = 0;
    GestureDetector detector;

    @InjectView(R.id.room_location)
    TextView room_name;
    /**
     * 切换按钮  上一个图片下一个图片
     */
    @InjectView(R.id.btn_up)
    Button btn_up;
    @InjectView(R.id.btn_down)
    Button btn_down;
    private List<RoomData> roomDataList;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.apartment_fragment, container, false);
        ButterKnife.inject(this, view);
        initData();
        initView();
        return view;
    }
    private void initData() {
        /**
         *添加房间设备信息
         */
        List<Devices> data = new ArrayList<Devices>();
        List<Devices> data2 = new ArrayList<Devices>();
        List<Devices> data3 = new ArrayList<Devices>();
        List<Devices> data4 = new ArrayList<Devices>();
        for (int i = 0; i < imgs.length; i++) {
            Devices devices = new Devices(imgs[i]);
            data.add(devices);
        }
        for (int i = 0; i < imgs2.length; i++) {
            Devices devices = new Devices(imgs2[i]);
            data2.add(devices);
        }
        for (int i = 0; i < imgs3.length; i++) {
            Devices devices = new Devices(imgs3[i]);
            data3.add(devices);
        }
        for (int i = 0; i < imgs4.length; i++) {
            Devices devices = new Devices(imgs4[i]);
            data4.add(devices);
        }
        roomDataList = new ArrayList<RoomData>();
        roomDataList.add(new RoomData(R.drawable.home_draw_big,"房间",data));
        roomDataList.add(new RoomData(R.drawable.home_bedroom_big,"卧室",data2));
        roomDataList.add(new RoomData(R.drawable.home_kitchen_big,"餐厅",data3));
        roomDataList.add(new RoomData(R.drawable.home_study_big,"书房",data4));
        room_device_data = new ArrayList<Devices>();
        List<Devices> temp = roomDataList.get(currentPosition).getRoomList();
        for(int i=0;i<temp.size();i++){
            room_device_data.add(temp.get(i));
        }
        room_name.setText(roomDataList.get(0).getRoomName());
    }

    private void initView() {
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getContext());
        linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        mRecyclerView.setLayoutManager(linearLayoutManager);
        myAdapter = new ApartmentDevicesAdapter(room_device_data, view.getContext(), R.layout.apartment_equipment_layout);
        mRecyclerView.setAdapter(myAdapter);
        /**
         * 处理房间图片切换
         */
        LinearLayoutManager homeLinearLayoutManager = new LinearLayoutManager(getContext());
        homeLinearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        home_recycleView.setLayoutManager(homeLinearLayoutManager);
        HomeNavViewAdapter homeAdapter = new HomeNavViewAdapter(getContext(),roomDataList);
        home_recycleView.setAdapter(homeAdapter);
        home_recycleView.setOnTouchListener(this);
        home_recycleView.setHasFixedSize(true);
        home_recycleView.smoothScrollToPosition(0);
        homeAdapter.notifyDataSetChanged();
        //将相关的图片作为一整页进行滑动
        detector = new GestureDetector(getContext(),this);

        btn_up.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(currentPosition>0){
                    currentPosition--;
                    home_recycleView.smoothScrollToPosition(currentPosition);
                }else{
                    home_recycleView.smoothScrollToPosition(0);
                }
                changeRoomDevice();
            }
        });
        btn_down.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(currentPosition<roomDataList.size()-1){
                    currentPosition++;
                    home_recycleView.smoothScrollToPosition(currentPosition);
                }else{
                    home_recycleView.smoothScrollToPosition(roomDataList.size()-1);
                }
                changeRoomDevice();
            }
        });
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        //传递event给GestureDetector对象
        detector.onTouchEvent(event);
        return true;
    }

    @Override
    public boolean onDown(MotionEvent e) {
        return false;
    }

    @Override
    public void onShowPress(MotionEvent e) {

    }

    @Override
    public boolean onSingleTapUp(MotionEvent e) {
        return false;
    }

    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
        return false;
    }

    @Override
    public void onLongPress(MotionEvent e) {

    }

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        LogUtil.i("phc", "onFling");
        if (e1.getX() - e2.getX() > 0 && currentPosition < roomDataList.size()-1) {
            currentPosition++;
            // 手向左滑动，图片下一张
        } else if (e2.getX() - e1.getX() > 0 && currentPosition > 0) {
            // 向右滑动，图片上一张
            currentPosition--;
        }
        home_recycleView.smoothScrollToPosition(currentPosition);
        changeRoomDevice();
        return false;
    }
    /**
     * 滑动时进行处理房间设备的数据替换
     */
    public void changeRoomDevice(){
        room_device_data.clear();
        Devices devices = new Devices(imgs[1]);
        List<Devices> temp = roomDataList.get(currentPosition).getRoomList();
        for(int i=0;i<temp.size();i++){
            devices = temp.get(i);
            room_device_data.add(devices);
        }
        LogUtil.e("room_device_data",""+room_device_data.size());
        myAdapter.notifyDataSetChanged();
        room_name.setText(roomDataList.get(currentPosition).getRoomName());
    }
}

3、布局文件

<RelativeLayout
                    android:layout_marginTop="14dp"
                    android:layout_marginLeft="40dp"
                    android:layout_marginRight="40dp"
                    android:id="@+id/apartment_bg_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    >
                    <!--图片滑动-->
                    <android.support.v7.widget.RecyclerView
                        android:id="@+id/home_nav_rec"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                    </android.support.v7.widget.RecyclerView>
                </RelativeLayout>
                <!--进行切换的设备列表-->
                <android.support.v7.widget.RecyclerView
                    android:id="@+id/apartmentF_recyclerview"
                    android:divider="#ff0000"
                    android:layout_marginTop="310dip"
                    android:layout_width="match_parent"
                    android:layout_height="460dp" />

填充子元素

<?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:orientation="horizontal"
    android:gravity="center"
    >

    <ImageView
        android:id="@+id/home_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />



</RelativeLayout>

完成
不过滑动整页切换时如果在滑动中进行触摸屏幕，界面就会卡在那一帧动画，无法进行继续滑动。。。正常切换，使用正常。