Android 自訂RecyclerView 實現真正的Gallery效果，androidrecycler

Android 自訂RecyclerView 實現真正的Gallery效果，androidrecycler

轉載請標明出處：http://blog.csdn.net/lmj623565791/article/details/38173061 ，本文出自：【張鴻洋的部落格】

上一篇部落格我使用自訂HorizontalScrollView寫了一個具有HorizontalScrollView效果和ViewPager特性的橫向圖片輪播，詳見：Android 自訂 HorizontalScrollView 打造再多圖片（控制項）也不怕 OOM 的橫向滑動效果。其實製作橫向滾動的不得不說另一個控制項，就是Google官方最近新增加的RecyclerView，據說是ListView的升級版本，本篇部落格，首先介紹RecyclerView的用法，然後經行一定的分析；最後自訂一下RecyclerView實現我們需要的相簿效果。

1、RecyclerView的基本用法

首先主Activity的布局檔案：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <android.support.v7.widget.RecyclerView        android:id="@+id/id_recyclerview_horizontal"        android:layout_width="match_parent"        android:layout_height="120dp"        android:layout_centerVertical="true"        android:background="#FF0000"        android:scrollbars="none" /></RelativeLayout>

Item的布局檔案：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="120dp"    android:layout_height="120dp"    android:background="@drawable/item_bg02" >    <ImageView        android:id="@+id/id_index_gallery_item_image"        android:layout_width="80dp"        android:layout_height="80dp"        android:layout_alignParentTop="true"        android:layout_centerHorizontal="true"        android:layout_margin="5dp"        android:scaleType="centerCrop" />    <TextView        android:id="@+id/id_index_gallery_item_text"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@id/id_index_gallery_item_image"        android:layout_centerHorizontal="true"        android:layout_marginBottom="5dp"        android:layout_marginTop="5dp"        android:textColor="#ff0000"        android:text="some info"        android:textSize="12dp" /></RelativeLayout>

資料配接器：

package com.example.zhy_horizontalscrollview03;import java.util.List;import android.content.Context;import android.support.v7.widget.RecyclerView;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.TextView;public class GalleryAdapter extendsRecyclerView.Adapter<GalleryAdapter.ViewHolder>{private LayoutInflater mInflater;private List<Integer> mDatas;public GalleryAdapter(Context context, List<Integer> datats){mInflater = LayoutInflater.from(context);mDatas = datats;}public static class ViewHolder extends RecyclerView.ViewHolder{public ViewHolder(View arg0){super(arg0);}ImageView mImg;TextView mTxt;}@Overridepublic int getItemCount(){return mDatas.size();}/** * 建立ViewHolder */@Overridepublic ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i){View view = mInflater.inflate(R.layout.activity_index_gallery_item,viewGroup, false);ViewHolder viewHolder = new ViewHolder(view);viewHolder.mImg = (ImageView) view.findViewById(R.id.id_index_gallery_item_image);return viewHolder;}/** * 設定值 */@Overridepublic void onBindViewHolder(final ViewHolder viewHolder, final int i){viewHolder.mImg.setImageResource(mDatas.get(i));}}

可以看到資料配接器與BaseAdapter比較發生了相當大的變化，主要有3個方法：

getItemCount 這個不用說，擷取總的條目數

onCreateViewHolder 建立ViewHolder

onBindViewHolder 將資料繫結至ViewHolder

可見，RecyclerView對ViewHolder也進行了一定的封裝，但是如果你仔細觀察，你會發出一個疑問，ListView裡面有個getView返回View為Item的布局，那麼這個Item的樣子在哪控制？

其實是這樣的，我們建立的ViewHolder必須繼承RecyclerView.ViewHolder，這個RecyclerView.ViewHolder的構造時必須傳入一個View，這個View相當於我們ListView getView中的convertView （即：我們需要inflate的item布局需要傳入）。

還有一點，ListView中convertView是複用的，在RecyclerView中，是把ViewHolder作為緩衝的單位了，然後convertView作為ViewHolder的成員變數保持在ViewHolder中，也就是說，假設沒有螢幕顯示10個條目，則會建立10個ViewHolder緩衝起來，每次複用的是ViewHolder，所以他把getView這個方法變為了onCreateViewHolder。有興趣的自己列印下Log，測試下。

最後在Activity中使用：

package com.example.zhy_horizontalscrollview03;import java.util.ArrayList;import java.util.Arrays;import java.util.List;import android.app.Activity;import android.os.Bundle;import android.support.v7.widget.LinearLayoutManager;import android.support.v7.widget.RecyclerView;import android.view.Window;public class MainActivity extends Activity{private RecyclerView mRecyclerView;private GalleryAdapter mAdapter;private List<Integer> mDatas;@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);initDatas();//得到控制項mRecyclerView = (RecyclerView) findViewById(R.id.id_recyclerview_horizontal);//設定布局管理器LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);mRecyclerView.setLayoutManager(linearLayoutManager);//設定適配器mAdapter = new GalleryAdapter(this, mDatas);mRecyclerView.setAdapter(mAdapter);}private void initDatas(){mDatas = new ArrayList<Integer>(Arrays.asList(R.drawable.a,R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e,R.drawable.f, R.drawable.g, R.drawable.h, R.drawable.l));}}

使用起來也很方便，唯一的區別就是要設定LayoutManager，目前只有一個實作類別，就是LinearLayoutManager，可以設定為水平或者垂直。

最後：

效果很不錯，這就是RecyclerView的基本用法了，但是你會發現一個坑爹的地方，竟然沒有提供setOnItemClickListener這個回調，要不要這麼坑爹。。。

2、為RecyclerView添加OnItemClickListener回調

雖然它沒有提供，但是添加個OnItemClickListener對我們來說還不是小菜一碟~

我決定在Adapter中添加這個回調介面：

package com.example.zhy_horizontalscrollview03;import java.util.List;import android.content.Context;import android.support.v7.widget.RecyclerView;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.TextView;public class GalleryAdapter extendsRecyclerView.Adapter<GalleryAdapter.ViewHolder>{/** * ItemClick的回調介面 * @author zhy * */public interface OnItemClickLitener{void onItemClick(View view, int position);}private OnItemClickLitener mOnItemClickLitener;public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener){this.mOnItemClickLitener = mOnItemClickLitener;}private LayoutInflater mInflater;private List<Integer> mDatas;public GalleryAdapter(Context context, List<Integer> datats){mInflater = LayoutInflater.from(context);mDatas = datats;}public static class ViewHolder extends RecyclerView.ViewHolder{public ViewHolder(View arg0){super(arg0);}ImageView mImg;TextView mTxt;}@Overridepublic int getItemCount(){return mDatas.size();}@Overridepublic ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i){View view = mInflater.inflate(R.layout.activity_index_gallery_item,viewGroup, false);ViewHolder viewHolder = new ViewHolder(view);viewHolder.mImg = (ImageView) view.findViewById(R.id.id_index_gallery_item_image);return viewHolder;}@Overridepublic void onBindViewHolder(final ViewHolder viewHolder, final int i){viewHolder.mImg.setImageResource(mDatas.get(i));//如果設定了回調，則設定點擊事件if (mOnItemClickLitener != null){viewHolder.itemView.setOnClickListener(new OnClickListener(){@Overridepublic void onClick(View v){mOnItemClickLitener.onItemClick(viewHolder.itemView, i);}});}}}

很簡單，建立一個介面，提供一個設定入口，然後在onBindViewHolder中判斷即可。

最後在主Activity中設定監聽：

mAdapter = new GalleryAdapter(this, mDatas);mAdapter.setOnItemClickLitener(new OnItemClickLitener(){@Overridepublic void onItemClick(View view, int position){Toast.makeText(MainActivity.this, position+"", Toast.LENGTH_SHORT).show();}});mRecyclerView.setAdapter(mAdapter);

好了，這樣就行了，看：

效果還是不錯的，接下來我想改成相簿效果，即上面顯示一張大圖，下面的RecyclerView做為圖片切換的指標。

3、自訂RecyclerView實現滾動時內容聯動

首先修改下布局：

布局檔案：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <FrameLayout        android:layout_width="fill_parent"        android:layout_height="0dp"        android:layout_weight="1" >        <ImageView            android:id="@+id/id_content"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_gravity="center"            android:layout_margin="10dp"            android:scaleType="centerCrop"            android:src="@drawable/ic_launcher" />    </FrameLayout>    <com.example.zhy_horizontalscrollview03.MyRecyclerView        android:id="@+id/id_recyclerview_horizontal"        android:layout_width="match_parent"        android:layout_height="120dp"        android:layout_gravity="bottom"        android:background="#FF0000"        android:scrollbars="none" /></LinearLayout>

添加一個顯示大圖的地區，把RecyclerView改為自己定義的。

然後看我們自訂RecyclerView的代碼：

package com.example.zhy_horizontalscrollview03;import android.content.Context;import android.support.v7.widget.RecyclerView;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;public class CopyOfMyRecyclerView extends RecyclerView{public CopyOfMyRecyclerView(Context context, AttributeSet attrs){super(context, attrs);}private View mCurrentView;/** * 滾動時回調的介面 */private OnItemScrollChangeListener mItemScrollChangeListener;public void setOnItemScrollChangeListener(OnItemScrollChangeListener mItemScrollChangeListener){this.mItemScrollChangeListener = mItemScrollChangeListener;}public interface OnItemScrollChangeListener{void onChange(View view, int position);}@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b){super.onLayout(changed, l, t, r, b);mCurrentView = getChildAt(0);if (mItemScrollChangeListener != null){mItemScrollChangeListener.onChange(mCurrentView,getChildPosition(mCurrentView));}}@Overridepublic boolean onTouchEvent(MotionEvent e){if (e.getAction() == MotionEvent.ACTION_MOVE){mCurrentView = getChildAt(0);// Log.e("TAG", getChildPosition(getChildAt(0)) + "");if (mItemScrollChangeListener != null){mItemScrollChangeListener.onChange(mCurrentView,getChildPosition(mCurrentView));}}return super.onTouchEvent(e);}}

定義了一個滾動時回調的介面，然後在onTouchEvent中，監聽ACTION_MOVE，使用者手指滑動時，不斷把當前第一個View回調回去~

關於我咋知道getChildAt(0)和getChildPosition()可用，起初我以為有getFirstVisibleItem這個方法，後來發現麼有；但是發現了getRecycledViewPool()看名字我覺得是Viewholder那個緩衝隊列，我想那麼直接取這個隊列的第一個不就是我要的View麼，後來沒有成功。我就觀察它內部的View，最後發現，第一個顯示的始終是它第一個child，至於getChildPosition這個看方法就看出來了。

現在的效果：

和我之前那個例子的效果是一模一樣的，不過，我還想做一些改變，我覺得Gallery或者說相簿的指標，下面可能1000來張圖片，我不僅喜歡手指在螢幕上滑動時，圖片會自動切換。我還希望，如果我給指標一個加速度，即使手指離開，下面還在滑動，上面也會聯動 。而且我還想做些最佳化，直接在ACTION_MOVE中回調，觸發的頻率太高了，理論上一張圖片只會觸發一次~~

4、最佳化與打造真正的Gallery效果

既然希望手指離開還能聯動，那麼不僅需要ACTION_MOVE需要監聽，還得監聽一個加速度，速度到達一定值，然後繼續移動~~再理一理，需要這麼麻煩麼，不是能滾動麼，那麼應該有OnScrollListener啊，小看一把，果然有，哈哈哈~天助我也，下面看修改後的代碼：

package com.example.zhy_horizontalscrollview03;import android.content.Context;import android.support.v7.widget.RecyclerView;import android.support.v7.widget.RecyclerView.OnScrollListener;import android.util.AttributeSet;import android.view.View;public class MyRecyclerView extends RecyclerView implements OnScrollListener{/** * 記錄當前第一個View */private View mCurrentView;private OnItemScrollChangeListener mItemScrollChangeListener;public void setOnItemScrollChangeListener(OnItemScrollChangeListener mItemScrollChangeListener){this.mItemScrollChangeListener = mItemScrollChangeListener;}public interface OnItemScrollChangeListener{void onChange(View view, int position);}public MyRecyclerView(Context context, AttributeSet attrs){super(context, attrs);// TODO Auto-generated constructor stubthis.setOnScrollListener(this);}@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b){super.onLayout(changed, l, t, r, b);mCurrentView = getChildAt(0);if (mItemScrollChangeListener != null){mItemScrollChangeListener.onChange(mCurrentView,getChildPosition(mCurrentView));}}@Overridepublic void onScrollStateChanged(int arg0){}/** *  * 滾動時，判斷當前第一個View是否發生變化，發生才回調 */@Overridepublic void onScrolled(int arg0, int arg1){View newView = getChildAt(0);if (mItemScrollChangeListener != null){if (newView != null && newView != mCurrentView){mCurrentView = newView ;mItemScrollChangeListener.onChange(mCurrentView,getChildPosition(mCurrentView));}}}}

我放棄了重寫onTouchEvent方法，而是讓這個類實現RecyclerView.OnScrollListener介面，然後設定監聽，在onScrolled裡面進行判斷。

至於最佳化：我使用了一個成員變化儲存當前第一個View，只有第一個View發生變化時才回調~~太完美了~

看MainActivity:

package com.example.zhy_horizontalscrollview03;import java.util.ArrayList;import java.util.Arrays;import java.util.List;import android.app.Activity;import android.os.Bundle;import android.support.v7.widget.LinearLayoutManager;import android.support.v7.widget.RecyclerView;import android.view.View;import android.view.Window;import android.widget.ImageView;import android.widget.Toast;import com.example.zhy_horizontalscrollview03.GalleryAdapter.OnItemClickLitener;import com.example.zhy_horizontalscrollview03.MyRecyclerView.OnItemScrollChangeListener;public class MainActivity extends Activity{private MyRecyclerView mRecyclerView;private GalleryAdapter mAdapter;private List<Integer> mDatas;private ImageView mImg ; @Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);mImg = (ImageView) findViewById(R.id.id_content);mDatas = new ArrayList<Integer>(Arrays.asList(R.drawable.a,R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e,R.drawable.f, R.drawable.g, R.drawable.h, R.drawable.l));mRecyclerView = (MyRecyclerView) findViewById(R.id.id_recyclerview_horizontal);LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);mRecyclerView.setLayoutManager(linearLayoutManager);mAdapter = new GalleryAdapter(this, mDatas);mRecyclerView.setAdapter(mAdapter);mRecyclerView.setOnItemScrollChangeListener(new OnItemScrollChangeListener(){@Overridepublic void onChange(View view, int position){mImg.setImageResource(mDatas.get(position));};});mAdapter.setOnItemClickLitener(new OnItemClickLitener(){@Overridepublic void onItemClick(View view, int position){//Toast.makeText(getApplicationContext(), position + "", Toast.LENGTH_SHORT)//.show();mImg.setImageResource(mDatas.get(position));}});}}

代碼沒什麼變化~多了個設定回調~

：

可以看到不僅支援手機在上面移動時的變化，如果我給了一個加速度，下面持續滾動，上面也會持續變化~~大讚~每張圖片回調一次，效率也相當不錯。

好了，看完這邊部落格，相信大家對於RecyclerView有了一定的認識，甚至對於如何改造一個控制項也多了一份瞭解~~

如果覺得不錯，就留個言或者點個贊，表示對我的支援 

源碼點擊下載

android gallery 怎實現聯動效果

Gallery gallery = (Gallery) findViewById(R.id.gallery);
// 為縮圖瀏覽器指定一個適配器
gallery.setAdapter(new ImageAdapter(this));
// 響應 在縮圖列表上選中某個縮圖後的 事件
gallery.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View v,
int position, long id) {
Toast.makeText(_Gallery.this, String.valueOf(position), Toast.LENGTH_SHORT).show();
}

@Override
public void onNothingSelected(AdapterView<?> arg0) {

}
});
}

// 繼承 BaseAdapter 用以實現自訂的圖片適配器
public class ImageAdapter extends BaseAdapter {

private Context mContext;

public ImageAdapter(Context context) {
mContext = context;
}

public int getCount() {
return mThumbIds.length;
}

public Object getItem(int position) {
return position;
}

public long getItemId(int position) {
return position;
}

public View getView(int position, View convertView, ViewGroup parent) {
ImageView image = new ImageView(mContext);

image.setImageResource(mThumbIds[position]);
image.setAdjustViewBounds(true);
image.setLayoutParams(new Gallery.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT))......餘下全文>>
 
android的Gallery可以包含什控制項 除了ImageView以外

任何view，你完全可以自訂view配合adapter，用inflate注入自己的view進去，Gallery的每一項就顯示自己的view了，你的view裡面可以是簡單的ImageView，也可以是很複雜的布局，看你怎麼用了。關鍵是adapter裡面你要好好處理，關於adapter的例子網上很多。