【移動(dòng)應(yīng)用開發(fā)技術(shù)】Android學(xué)習(xí)筆記三 Support v7提供交錯(cuò)式網(wǎng)格布局開發(fā)示例

【移動(dòng)應(yīng)用開發(fā)技術(shù)】[Android學(xué)習(xí)筆記三]Supportv7提供交錯(cuò)式網(wǎng)格布局開發(fā)示例

本文主要介紹AndroidSupportv7提供的RecycleView和交錯(cuò)式布局（通常成為瀑布流布局）的使用和事件監(jiān)聽處理。

1.涉及到開源庫有：

Fresco:

Facebook開源的不是一般強(qiáng)大的圖片加載組件庫

Bufferknife:

AndroidView和事件綁定庫，通過注解完成，在編譯時(shí)APT處理注解文檔。

2.模塊配置

AndroidStudio模塊，build.gradle配置：

apply

plugin:

'com.android.application'

android

{

compileSdkVersion

21

buildToolsVersion

'21.1.2'

defaultConfig

{

applicationId

'secondriver.sdk'

minSdkVersion

16

targetSdkVersion

21

versionCode

1

versionName

'1.0'

}

buildTypes

{

release

{

minifyEnabled

false

proguardFiles

getDefaultProguardFile('proguard-android.txt'),

''

}

}

packagingOptions

{

exclude

'META-INF/services/cessing.Processor'

}

lintOptions

{

disable

'InvalidPackage'

}

}

dependencies

{

compile

fileTree(dir:

'libs',

include:

['*.jar'])

compile

'com.android.support:appcompat-v7:21.0.3'

compile

'com.android.support:recyclerview-v7:21.0.3@aar'

compile

'com.android.support:cardview-v7:21.0.3@aar'

compile

'com.facebook.fresco:fresco:0.8.0'

compile

'com.jakewharton:butterknife:7.0.1'

testCompile

'junit:junit:4.12'

}

3.布局文件

主布局文件：activity_recycleview.xml包含一個(gè)RecycleView，將作為主屏幕組件。

<?xml

version="1.0"

encoding="utf-8"?>

<RelativeLayout

android:id="@+id/swipe_refresh_layout"

xmlns:android="/apk/res/android"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<android.support.v7.widget.RecyclerView

android:id="@+id/recycler_view"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentTop="true"

android:scrollbars="vertical"

/>

</RelativeLayout>

RecycleView通過設(shè)置不同的布局管理器對(duì)象來實(shí)現(xiàn)不同的布局顯示，如：

android.support.v7.widget.LinearLayoutManager可以實(shí)現(xiàn)ListView的布局效果

android.support.v7.widget.GridLayoutManager

可以實(shí)現(xiàn)GridView的布局效果

android.support.v7.widget.StaggeredGridLayoutManager可以實(shí)現(xiàn)交錯(cuò)式網(wǎng)格布局效果

次布局文件(RecycleView中顯示的每一項(xiàng)視圖的布局)：item_recycelview.xml通過com.android.support:CardView包提供的CardView幀式容器布局包含一個(gè)ImageView和TextView作為RecycleView的每一項(xiàng)視圖的布局。

<?xml

version="1.0"

encoding="utf-8"?>

<LinearLayout

xmlns:android="/apk/res/android"

xmlns:card_view="/apk/res-auto"

xmlns:fresco="/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center">

<android.support.v7.widget.CardView

android:id="@+id/card_view"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

card_view:cardCornerRadius="4dp"

card_view:cardUseCompatPadding="true">

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

<com.facebook.drawee.view.SimpleDraweeView

android:id="@+id/info_p_w_picpath"

android:layout_width="300dp"

android:layout_height="420dp"

fresco:actualImageScaleType="centerCrop"

fresco:placeholderImage="@mipmap/ic_launcher"

fresco:roundAsCircle="false"

fresco:roundBottomLeft="true"

fresco:roundBottomRight="true"

fresco:roundTopLeft="true"

fresco:roundTopRight="true"

fresco:roundedCornerRadius="1dp"

fresco:roundingBorderWidth="2dp"

/>

<TextView

android:id="@+id/info_text"

android:layout_width="200dp"

android:layout_height="80dp"

android:textSize="20sp"

android:textColor="@android:color/holo_blue_dark"

android:textAppearance="?android:attr/textAppearanceMedium"

android:layout_alignLeft="@id/info_p_w_picpath"

android:layout_alignRight="@id/info_p_w_picpath"

android:layout_below="@id/info_p_w_picpath"

android:gravity="left|center_vertical"/>

</RelativeLayout>

</android.support.v7.widget.CardView>

</LinearLayout>

ImageView組件使用的是Fresco庫提供的視圖組件。

4.Activity實(shí)現(xiàn)和數(shù)據(jù)填充

4.1RecycleView中的每一項(xiàng)視圖的數(shù)據(jù)組成

文本信息+圖片地址（url,file,resId）本示例中采用Url網(wǎng)絡(luò)圖片

/**

*

View項(xiàng)的數(shù)據(jù)對(duì)象

*/

static

class

Pair

{

public

String

text;

public

String

url;

public

Pair(String

text,

String

url)

{

this.text

=

text;

this.url

=

url;

}

}

4.2RecycleView中國的每一項(xiàng)視圖的數(shù)據(jù)填充，即適配器

自定義適配器需要實(shí)現(xiàn)RecycleView.Adapter類。

static

class

RecycleViewAdapter

extends

RecyclerView.Adapter<RecyclerView.ViewHolder>

{

/**

*

RecycleView的View項(xiàng)單擊事件監(jiān)聽

*/

public

interface

OnRecycleViewItemClickListener

{

void

onRecycleViewItemClick(View

view,

int

position);

}

private

ArrayList<Pair>

items

=

new

ArrayList<>();

private

OnRecycleViewItemClickListener

mOnRecycleViewItemClickListener;

public

RecycleViewAdapter(ArrayList<Pair>

items)

{

this.items

=

items;

}

@Override

public

RecyclerView.ViewHolder

onCreateViewHolder(ViewGroup

parent,

int

viewType)

{

View

view

=

LayoutInflater.from(parent.getContext()).inflate(R.layout.item_recyclerview,

parent,

false);

return

new

RecycleViewItemHolder(view,

mOnRecycleViewItemClickListener);

}

@Override

public

void

onBindViewHolder(RecyclerView.ViewHolder

holder,

int

position)

{

Pair

pair

=

items.get(position);

((RecycleViewItemHolder)

holder).setContent(pair);

}

@Override

public

int

getItemCount()

{

return

items.size();

}

public

void

setOnRecycleViewItemClickListener(OnRecycleViewItemClickListener

onItemClickListener)

{

if

(null

!=

onItemClickListener)

{

this.mOnRecycleViewItemClickListener

=

onItemClickListener;

}

}

}

主要實(shí)現(xiàn)onCreateViewHolder和onBindViewHolder方法。由于RecycleView并未提供為視圖項(xiàng)添加監(jiān)聽事件，這里自定義個(gè)一個(gè)事件監(jiān)聽接口，在實(shí)例化適配器的時(shí)候可以選擇設(shè)置事件監(jiān)聽。

4.3創(chuàng)建ViewHolder需要通過自定義ViewHolder類繼承RecycleView.ViewHolder。

static

class

RecycleViewItemHolder

extends

RecyclerView.ViewHolder

implements

View.OnClickListener

{

@Bind(R._text)

public

TextView

infoTextView;

@Bind(R._p_w_picpath)

public

SimpleDraweeView

draweeView;

private

RecycleViewAdapter.OnRecycleViewItemClickListener

onItemClickListener;

public

RecycleViewItemHolder(View

itemView,

RecycleViewAdapter.OnRecycleViewItemClickListener

onItemClickListener)

{

super(itemView);

ButterKnife.bind(this,

itemView);

this.onItemClickListener

=

onItemClickListener;

itemView.setOnClickListener(this);

}

public

void

setContent(Pair

pair)

{

infoTextView.setText(pair.text);

draweeView.setImageURI(Uri.parse(pair.url));

}

@Override

public

void

onClick(View

v)

{

if

(null

!=

onItemClickListener)

{

onItemClickListener.onRecycleViewItemClick(v,

getPosition());

}

}

}

在構(gòu)造方法中的傳入OnRecycleViewItemClickListener對(duì)象，并且自定義ViewHolder實(shí)現(xiàn)OnClickListener接口，通過為itemView對(duì)象設(shè)置OnClickListener監(jiān)聽事件，在onClick方法中將點(diǎn)擊事件的處理交由OnRecycleViewItemClickListener對(duì)象處理，從而達(dá)到為RecycleView中的itemView注冊(cè)點(diǎn)擊事件。

如果不采用這種方式添加事件監(jiān)聽，就不需要自定義監(jiān)聽接口和自定義ViewHolder實(shí)現(xiàn)事件監(jiān)聽接口以及事件處理。另外可以通過獲得的itemView之后，通過組件I的獲取組件來添加事件監(jiān)聽。還可以通過獲得的自定義ViewHolder，來訪問每個(gè)組件。

4.4Activity的具體實(shí)現(xiàn)

package

secondriver.sdk.activity;

import

android.app.Activity;

import

.Uri;

import

android.os.Bundle;

import

android.support.v7.widget.DefaultItemAnimator;

import

android.support.v7.widget.RecyclerView;

import

android.support.v7.widget.StaggeredGridLayoutManager;

import

android.util.Log;

import

android.view.LayoutInflater;

import

android.view.View;

import

android.view.ViewGroup;

import

android.widget.TextView;

import

android.widget.Toast;

import

com.facebook.drawee.view.SimpleDraweeView;

import

java.util.ArrayList;

import

java.util.Arrays;

import

java.util.Random;

import

butterknife.Bind;

import

butterknife.ButterKnife;

import

secondriver.sdk.R;

/**

*

Author

:

secondriver

*

Created

:

2015/11/18

*/

public

class

RecycleViewActivity

extends

Activity

{

private

static

final

String

TAG

=

RecyclerView.class.getName();

private

static

final

String[]

RES_URL

=

new

String[]{

"http://p1.wmpic.me/article/2015/11/16/1447644849_hySANEEF.jpg",

//減少篇幅，此處省去14個(gè)圖片Url

};

@Bind(R.id.recycler_view)

public

RecyclerView

mRecycleView;

private

final

int

PRE_SCREEN_NUMBER

=

6;

private

final

int

SPAN_COUNT

=

2;

private

int

previousLastIndex

=

0;

private

boolean

isSlidingToLast

=

false;

private

RecycleViewAdapter

mAdapter;

private

ArrayList<Pair>

mItem

=

new

ArrayList<>();

//交錯(cuò)式網(wǎng)格布局管理對(duì)象，即通常稱的瀑布流布局

private

StaggeredGridLayoutManager

mLayoutManager;

@Override

protected

void

onCreate(Bundle

savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_recyclerview);

ButterKnife.bind(this);

Fresco.initialize(this);

//重要，F(xiàn)resco做一系列初始化工作

initRecycleView();

}

private

void

initRecycleView()

{

mLayoutManager

=

new

StaggeredGridLayoutManager(SPAN_COUNT,

StaggeredGridLayoutManager.VERTICAL);

mRecycleView.setLayoutManager(mLayoutManager);

mAdapter

=

new

RecycleViewAdapter(mItem);

loadData(false);

mRecycleView.setAdapter(mAdapter);

mRecycleView.setItemAnimator(new

DefaultItemAnimator());

//RecycleView的View項(xiàng)單擊事件監(jiān)聽

mAdapter.setOnRecycleViewItemClickListener(new

RecycleViewAdapter.OnRecycleViewItemClickListener()

{

@Override

public

void

onRecycleViewItemClick(View

view,

int

position)

{

long

id

=

mRecycleView.getChildItemId(view);

Log.d(TAG,

"View項(xiàng)的根視圖:"

+

view.getClass().getName()

+

",position="

+

position

+

"

ViewHolder_Id="

+

id);

//通過findViewById查找View項(xiàng)中的元素

SimpleDraweeView

draweeView

=

(SimpleDraweeView)

view.findViewById(R._p_w_picpath);

if

(null

!=

draweeView)

{

draweeView.setImageURI(Uri.parse(RES_URL[0]));

Toast.makeText(RecycleViewActivity.this,

"通過findViewById查找View項(xiàng)中的元素",

Toast.LENGTH_LONG).show();

}

RecycleViewItemHolder

recycleViewItemHolder

=

(RecycleViewItemHolder)

mRecycleView.findViewHolderForPosition(position);

if

(null

!=

recycleViewItemHolder)

{

recycleViewItemHTextView.setText("通過ViewHolder找到View項(xiàng)中的元素");

}

}

});

//下拉刷新，追加內(nèi)容

mRecycleView.setOnScrollListener(

new

RecyclerView.OnScrollListener()

{

@Override

public

void

onScrollStateChanged(RecyclerView

recyclerView,

int

newState)

{

super.onScrollStateChanged(recyclerView,

newState);

if

(newState

==

RecyclerView.SCROLL_STATE_IDLE)

{

if

(isPullToBottom()

&&

isSlidingToLast)

{

if

(mItem.size()

>

36)

{

//最大數(shù)據(jù)量

Toast.makeText(RecycleViewActivity.this,

"沒有數(shù)據(jù)了",

Toast.LENGTH_LONG).show();

return;

}

else

{

loadData(false);

Log.d(TAG,

"notifyItemRangeInserted

startPosition="

+

previousLastIndex);

mAdapter.notifyItemRangeInserted(previousLastIndex,

PRE_SCREEN_NUMBER);

}

}

}

if

(newState

==

RecyclerView.SCROLL_STATE_SETTLING)

{

Log.d(TAG,

"settling");

}

}

@Override

public

void

onScrolled(RecyclerView

recyclerView,

int

dx,

int

dy)

{

super.onScrolled(recyclerView,

dx,

dy);

isSlidingToLast

=

dy

>

0;

//上拉，下滑

L