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>

完成
不過滑動整頁切換時如果在滑動中進行觸摸屏幕,界面就會卡在那一幀動畫,無法進行繼續滑動。。。正常切換,使用正常。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章