1. 程式人生 > >基於RecyclerView實現ViewPager的功能(橫向)

基於RecyclerView實現ViewPager的功能(橫向)

說下大概思想吧,RecyclerView的使用大家都很熟悉了(不熟悉的請自行百度),在做專案的時候,需要實現一個圖片介面橫向滑動的功能,之前用RecycleView時一直做的都是垂直滑動的,當然使用ViewPager可以輕易完成。然而我就是想用RecycleView完成((⊙﹏⊙)程式設計師死磕病又犯了)。

1.首先item檔案,因為需要,每個Item都是寬度與螢幕等長,要在程式碼中實現,不然圖片寬度會不一樣
item_photo_preview.xml

<?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:layout_gravity="center" android:orientation="vertical" >
<ImageView android:id="@+id/photo_preview_img" android:layout_width="match_parent"
android:layout_height="match_parent" android:src="@drawable/face" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" />
</LinearLayout>

2.介面卡
PhotoPreviewAdapter.java

package com.phc.act.myphcapp.adapter;

import android.content.Context
; import android.graphics.Point; 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.LinearLayout; import com.phc.act.myphcapp.R; import com.phc.act.myphcapp.app.MyApp; import com.phc.act.myphcapp.viewholder.PhotoPreviewViewHolder; import java.util.ArrayList; /** * Created by Administrator on 2015/11/2. */ public class PhotoPreviewAdapter extends RecyclerView.Adapter<PhotoPreviewViewHolder> { ArrayList<CharSequence> data; Context context; public PhotoPreviewAdapter() { data = new ArrayList<>(); } @Override public PhotoPreviewViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { if (context == null) context = parent.getContext(); View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_photo_preview, parent, false); PhotoPreviewViewHolder viewHolder = new PhotoPreviewViewHolder(view); return viewHolder; } @Override public void onBindViewHolder(PhotoPreviewViewHolder holder, int position) { Point p = new Point(); WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE); wm.getDefaultDisplay().getSize(p); //之所以高度是MATCH_PARENT 是因為圖片會根據高度居中顯示,否則會在螢幕上方 holder.img.setLayoutParams(new LinearLayout.LayoutParams(p.x, ViewGroup.LayoutParams.MATCH_PARENT)); MyApp.loadImage(data.get(position).toString(), holder.img, context); } public ArrayList<CharSequence> getData() { return data; } @Override public int getItemCount() { return data.size(); } }

3.ViewHolder

PhotoPreviewViewHolder.java

package com.phc.act.myphcapp.viewholder;

import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.ImageView;

import com.phc.act.myphcapp.R;

/**
 * Created by Administrator on 2015/11/2.
 */
public class PhotoPreviewViewHolder extends RecyclerView.ViewHolder  {
    public ImageView img;
    public PhotoPreviewViewHolder(final View itemView) {
        super(itemView);
        img = (ImageView) itemView.findViewById(R.id.photo_preview_img);

    }

}

4.主介面
重頭戲來了,主要是實現兩個介面
View.OnTouchListener, GestureDetector.OnGestureListener
前一個是獲取使用者觸控的Event,之後傳遞給GestureDetector物件,分析使用者的手勢
PhotoPreviewActivity.java

package com.phc.act.myphcapp.activity;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.widget.RelativeLayout;

import com.phc.act.myphcapp.R;
import com.phc.act.myphcapp.adapter.PhotoPreviewAdapter;
import com.phc.act.myphcapp.constant.Constant;

public class PhotoPreviewActivity extends AppCompatActivity implements View.OnTouchListener, GestureDetector.OnGestureListener {

    RecyclerView recyclerView;
    PhotoPreviewAdapter adapter;
    int currentPosition = 0;
    GestureDetector detector;
    RelativeLayout relativeLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_photo_preview);
        relativeLayout = (RelativeLayout) findViewById(R.id.photo_preview_mainLayout);
        recyclerView = (RecyclerView) findViewById(R.id.photo_preview_recycleView);
        recyclerView.setOnTouchListener(this);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        recyclerView.setLayoutManager(layoutManager);
        adapter = new PhotoPreviewAdapter();
        detector = new GestureDetector(this, this);

        recyclerView.setHasFixedSize(true);
        adapter.getData().addAll(getIntent().getCharSequenceArrayListExtra(Constant.PHOTOARRAYLIST));
        recyclerView.setAdapter(adapter);
        recyclerView.setHorizontalScrollBarEnabled(false);
        adapter.notifyDataSetChanged();
        recyclerView.smoothScrollToPosition(1);

    }


    @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) {
        Log.i("phc", "onFling");
        if (e1.getX() - e2.getX() > 0 && currentPosition < recyclerView.getChildCount()) {
            currentPosition++;
            // 手向左滑動,圖片下一張
        } else if (e2.getX() - e1.getX() > 0 && currentPosition > 0) {
            // 向右滑動,圖片上一張
            currentPosition--;

        }
        recyclerView.smoothScrollToPosition(currentPosition);

        return false;
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        Log.i("phc", "onTouch");
        //傳遞event給GestureDetector物件
        detector.onTouchEvent(event);
        return true;
    }
}

5.主檢視
activity_photo_preview.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.phc.act.myphcapp.activity.PhotoPreviewActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

    </android.support.design.widget.AppBarLayout>

   <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000"
    android:id="@+id/photo_preview_mainLayout">


    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/photo_preview_recycleView"
        android:scrollbars="horizontal"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        />

</RelativeLayout>



</android.support.design.widget.CoordinatorLayout>

PS:因為是用android studio做的,所以自動生成的程式碼有點多,有錯的地方請指正!