基於RecyclerView實現ViewPager的功能(橫向)
阿新 • • 發佈:2019-01-30
說下大概思想吧,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做的,所以自動生成的程式碼有點多,有錯的地方請指正!