使用 convenientBanner 輪播圖給 RecyclerView 添加 header
先來看看效果圖。我們要實現的就是上面輪播圖輪播，下面是列表 list 展示數據。實際應用中很多都會使用輪播圖去插入廣告，活動等。
那么我們要怎么實現呢？
思路有很多，可以用 ViewPager 去實現輪播圖，不過使用比較麻煩，要自己實現無限循環輪播，自動輪播等。
還可以用 RecyclerView 去打造一個輪播圖。LinearSnapHelper 可以幫助你滑動停止的時候某頁居中。設置定時器可以實現自動輪播。
這里我們并不使用以上的方法，我們使用外部的框架 convenientBanner 去直接使用輪播圖。有關詳細使用可以搜一下或者點github地址 有說明。
效果圖
項目開始
新建之后添加依賴
// 輪播器
compile 'com.bigkoo:convenientbanner:2.0.5'
//圖片加載框架
compile 'com.github.bumptech.glide:glide:3.7.0'
因為這里的例子是使用網絡圖片加載的方式，所以還要添加網絡權限和存儲權限。
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
布局
主布局添加 RecyclerView 即可。整個主界面其實就是一個 RecyclerView，輪播圖其實是 Rv 根據不同的 Type 添加不同的 View 來放到 Rv 頭部的。后面會再提到。
另外就是 rv_header_banner.xml，這個就是放到 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" />
還有一個 rv_header_img.xml。這個是構建 Banner 的視圖的時候用到。
<?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>
最后一個 rv_item.xml，這個是展示 list 數據。
<?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>
以上布局基本完成。
細心的人會發現，輪播圖那里有幾個小點指示器。這個的樣式是我們自定義的。所以我們這里還要在 drawable 下新建兩個圓點的樣式文件
<?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 配置的核心是根據不同的 itemType 加載不同的 View。
/**
* 根據不同的 ViewType 返回不同的 ViewHolder
* 通過 setter 方法將不同的 View 注入進 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);//插入下標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 實際需要不包括 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 加上算一個 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 點擊事件接口
void onItemClick(int position, String data);
}
}
以上是 Adapter 的代碼，可見加了兩個 TYPE 來區分 header 和 正常的數據 item。（我們也可以加更多的 Type 去實現更復雜的布局）在 onCreateViewHolder 里面判斷 TYPE 如果是 header 則返回 headerView，否則加載正常的 item 布局。里面一些函數還有邏輯都加了注釋說明了，這里就不詳細說了。
MainActivity
讓我們回到 MainActivity，這里我們將初始化 Banner，并用 adapter.setmHeaderView 放進 Adapter 中。在使用 LayoutManager 設置一下 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) //設置指示器的方向（左、中、右）
.setPageIndicator(new int[] { R.drawable.indicator_gray, R.drawable.indicator_red })//設置指示器樣式
.setOnItemClickListener(this)//點擊事件
.setScrollDuration(1500);//滑動的時間
}
@Override
public void onItemClick(int position) {//Banner 點擊事件
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 的基本設置就是這樣。通過 setPages 來配置，上面的配置都加了注釋說明，更多的配置樣式可以查查。
mBanner 綁定的是 rv_header_banner.xml 視圖下的 banner 。而 NetWorkImageHolderView 里面的 view 綁定了 rv_header_img.xml.里面的圖片 ImageView 則是綁定了 R.id.iv_head 這個 img 控件。 總的來說，Banner 的視圖 View 實際是 NetWorkImageHolderView 的 onCreateView 里面返回的。類同 Adapter 的使用
UpdateUI 這里用 Glide 加載了網絡圖片。Glide 不是這里的主角所以不說明了，用法也很簡單。placeholder 是設置占位圖。
以上就基本完成了 Banner 的配置。在 onResume 里面添加一句 mBanner.startTurning(3000) 就可以自動輪播了。
剩下的就是 Rv 的基本用法了。
View header = LayoutInflater.from(this).inflate(R.layout.rv_header_banner, null);
mBanner = (ConvenientBanner) header.findViewById(R.id.banner);
//設置高度是屏幕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();
}
});
還有需要的可以看一下我的源碼。
