使用 convenientBanner 輪播圖給 RecyclerView 添加 header
先來(lái)看看效果圖浙芙。我們要實(shí)現(xiàn)的就是上面輪播圖輪播，下面是列表 list 展示數(shù)據(jù)跪妥。實(shí)際應(yīng)用中很多都會(huì)使用輪播圖去插入廣告趣惠，活動(dòng)等。
那么我們要怎么實(shí)現(xiàn)呢？
思路有很多感昼，可以用 ViewPager 去實(shí)現(xiàn)輪播圖，不過(guò)使用比較麻煩罐脊，要自己實(shí)現(xiàn)無(wú)限循環(huán)輪播定嗓，自動(dòng)輪播等。
還可以用 RecyclerView 去打造一個(gè)輪播圖萍桌。LinearSnapHelper 可以幫助你滑動(dòng)停止的時(shí)候某頁(yè)居中宵溅。設(shè)置定時(shí)器可以實(shí)現(xiàn)自動(dòng)輪播。
這里我們并不使用以上的方法上炎，我們使用外部的框架 convenientBanner 去直接使用輪播圖恃逻。有關(guān)詳細(xì)使用可以搜一下或者點(diǎn)github地址 有說(shuō)明。
項(xiàng)目開(kāi)始
新建之后添加依賴(lài)
// 輪播器
compile 'com.bigkoo:convenientbanner:2.0.5'
//圖片加載框架
compile 'com.github.bumptech.glide:glide:3.7.0'
因?yàn)檫@里的例子是使用網(wǎng)絡(luò)圖片加載的方式，所以還要添加網(wǎng)絡(luò)權(quán)限和存儲(chǔ)權(quán)限辛块。
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
布局
主布局添加 RecyclerView 即可。整個(gè)主界面其實(shí)就是一個(gè) RecyclerView铅碍，輪播圖其實(shí)是 Rv 根據(jù)不同的 Type 添加不同的 View 來(lái)放到 Rv 頭部的润绵。后面會(huì)再提到。
另外就是 rv_header_banner.xml胞谈，這個(gè)就是放到 Rv 頭部的尘盼。
<?xml version="1.0" encoding="utf-8"?>
<com.bigkoo.convenientbanner.ConvenientBanner
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:canLoop="true" />
還有一個(gè) rv_header_img.xml。這個(gè)是構(gòu)建 Banner 的視圖的時(shí)候用到烦绳。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/iv_head"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"/>
</LinearLayout>
最后一個(gè) rv_item.xml卿捎，這個(gè)是展示 list 數(shù)據(jù)。
<?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:id="@+id/tv_item"
android:layout_marginBottom="20dp"
android:textSize="20sp"
android:text="item"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
以上布局基本完成径密。
細(xì)心的人會(huì)發(fā)現(xiàn)午阵，輪播圖那里有幾個(gè)小點(diǎn)指示器。這個(gè)的樣式是我們自定義的享扔。所以我們這里還要在 drawable 下新建兩個(gè)圓點(diǎn)的樣式文件
<?xml version="1.0" encoding="utf-8"?>
<shape
android:shape="oval"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#BDBDBD"/>
<size android:height="10dp" android:width="10dp"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#D32F2F"/>
<size android:width="10dp" android:height="10dp"/>
</shape>
Adapter
在這里底桂，Adapter 配置的核心是根據(jù)不同的 itemType 加載不同的 View。
/**
* 根據(jù)不同的 ViewType 返回不同的 ViewHolder
* 通過(guò) setter 方法將不同的 View 注入進(jìn) Adapter
*/
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
public static final int TYPE_HEADER = 0;
public static final int TYPE_NOMAL = 1;
private View mHeaderView;
private List<String> mDatas = new ArrayList<>();
private OnItemClickListener mListener;
public View getmHeaderView() {
return mHeaderView;
}
public void setmHeaderView(View mHeaderView) {
this.mHeaderView = mHeaderView;
notifyItemInserted(0);//插入下標(biāo)0位置
}
public void addDatas(List<String> datas){
mDatas.addAll(datas);
notifyDataSetChanged();
}
@Override
public int getItemViewType(int position) {
if(mHeaderView == null){
return TYPE_NOMAL;
}
if(position == 0){
return TYPE_HEADER;
}
return TYPE_NOMAL;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if(mHeaderView != null && viewType == TYPE_HEADER){
return new MyViewHolder(mHeaderView);
}
View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.rv_item, parent, false);
return new MyViewHolder(itemView);
}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
if (getItemViewType(position) == TYPE_HEADER) {
return;
}
final int pos = getRealPosition(holder);//這里的 position 實(shí)際需要不包括 header
final String data = mDatas.get(pos);
holder.textView.setText(data);
if(mListener == null) return;
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mListener.onItemClick(pos, data);
}
});
}
/**
* 添加頭部布局后的位置
* headerView 不為空則 position - 1
*/
private int getRealPosition(MyViewHolder holder) {
int position = holder.getLayoutPosition();
return mHeaderView == null ? position : position - 1;
}
@Override
public int getItemCount() {
//header 不為空惧眠，則 rv 的總 Count 需要 +1（把 Header 加上算一個(gè) item）
return mHeaderView == null ? mDatas.size() : mDatas.size() + 1;
}
public class MyViewHolder extends RecyclerView.ViewHolder {
TextView textView;
public MyViewHolder(View itemView) {
super(itemView);
if(itemView == mHeaderView){ return; }
textView = (TextView) itemView.findViewById(R.id.tv_item);
}
}
public void setOnItemClickListener(OnItemClickListener listener){
mListener = listener;
}
public interface OnItemClickListener{//item 點(diǎn)擊事件接口
void onItemClick(int position, String data);
}
}
以上是 Adapter 的代碼籽懦，可見(jiàn)加了兩個(gè) TYPE 來(lái)區(qū)分 header 和 正常的數(shù)據(jù) item。（我們也可以加更多的 Type 去實(shí)現(xiàn)更復(fù)雜的布局）在 onCreateViewHolder 里面判斷 TYPE 如果是 header 則返回 headerView氛魁，否則加載正常的 item 布局暮顺。里面一些函數(shù)還有邏輯都加了注釋說(shuō)明了，這里就不詳細(xì)說(shuō)了秀存。
MainActivity
讓我們回到 MainActivity捶码，這里我們將初始化 Banner，并用 adapter.setmHeaderView 放進(jìn) Adapter 中或链。在使用 LayoutManager 設(shè)置一下 Rv 的布局宙项，然后就基本完成了。
private void initBanner(){
networkImage = Arrays.asList(images);
mBanner.setPages(new CBViewHolderCreator<NetWorkImageHolderView>() {
@Override
public NetWorkImageHolderView createHolder() {
return new NetWorkImageHolderView();
}
}, networkImage)
.setPageIndicatorAlign(ConvenientBanner.PageIndicatorAlign.ALIGN_PARENT_RIGHT) //設(shè)置指示器的方向（左株扛、中尤筐、右）
.setPageIndicator(new int[] { R.drawable.indicator_gray, R.drawable.indicator_red })//設(shè)置指示器樣式
.setOnItemClickListener(this)//點(diǎn)擊事件
.setScrollDuration(1500);//滑動(dòng)的時(shí)間
}
@Override
public void onItemClick(int position) {//Banner 點(diǎn)擊事件
Toast.makeText(MainActivity.this, "Banner:"+position, Toast.LENGTH_SHORT).show();
}
public class NetWorkImageHolderView implements Holder<String>{
private ImageView imageView;
@Override
public View createView(Context context) {
View view = LayoutInflater.from(context).inflate(R.layout.rv_header_img, null);
imageView = (ImageView) view.findViewById(R.id.iv_head);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
return view;
}
@Override
public void UpdateUI(Context context, int position, String data) {
//Glide.with(context).load(data.getImgUrl()).into(imageView);
Log.d("imgUrl", "UpdateUI: "+data);
Glide.with(context).load(data).placeholder(R.mipmap.ic_launcher_round).into(imageView);
}
}
}
convenientBanner 的基本設(shè)置就是這樣。通過(guò) setPages 來(lái)配置洞就，上面的配置都加了注釋說(shuō)明盆繁，更多的配置樣式可以查查。
mBanner 綁定的是 rv_header_banner.xml 視圖下的 banner 旬蟋。而 NetWorkImageHolderView 里面的 view 綁定了 rv_header_img.xml.里面的圖片 ImageView 則是綁定了 R.id.iv_head 這個(gè) img 控件油昂。 總的來(lái)說(shuō)，Banner 的視圖 View 實(shí)際是 NetWorkImageHolderView 的 onCreateView 里面返回的。類(lèi)同 Adapter 的使用
UpdateUI 這里用 Glide 加載了網(wǎng)絡(luò)圖片冕碟。Glide 不是這里的主角所以不說(shuō)明了拦惋，用法也很簡(jiǎn)單。placeholder 是設(shè)置占位圖安寺。
以上就基本完成了 Banner 的配置厕妖。在 onResume 里面添加一句 mBanner.startTurning(3000) 就可以自動(dòng)輪播了。
剩下的就是 Rv 的基本用法了挑庶。
View header = LayoutInflater.from(this).inflate(R.layout.rv_header_banner, null);
mBanner = (ConvenientBanner) header.findViewById(R.id.banner);
//設(shè)置高度是屏幕1/4
mBanner.setLayoutParams(new RecyclerView.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT, getWindowManager().getDefaultDisplay().getHeight()/3));
mRecyclerView = (RecyclerView) findViewById(R.id.rv_content);
mLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
mRecyclerView.setLayoutManager(mLayoutManager);
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
initBanner();
myAdapter = new MyAdapter();
myAdapter.addDatas(mData);
myAdapter.setmHeaderView(mBanner);
mRecyclerView.setAdapter(myAdapter);
myAdapter.setOnItemClickListener(new MyAdapter.OnItemClickListener() {
@Override
public void onItemClick(int position, String data) {
Toast.makeText(MainActivity.this, data, Toast.LENGTH_SHORT).show();
}
});
還有需要的可以看一下我的源碼言秸。
