代碼地址：https://github.com/DaLeiGe/AndroidSamples/tree/master/VLayout
先上圖
ezgif.com-video-to-gif.gif
VLayout是一個(gè)針對(duì)RecyclerView的LayoutManager擴(kuò)展, 主要提供一整套布局方案和布局間的組件復(fù)用的問(wèn)題励幼。簡(jiǎn)單理解就是方便實(shí)現(xiàn)Recyclerview的item為各種列表的情況
VLayout支持如下布局方式
- LinearLayoutHelper: 線性布局
- GridLayoutHelper: Grid布局熙卡， 支持橫向的colspan
- FixLayoutHelper: 固定布局，始終在屏幕固定位置顯示
- ScrollFixLayoutHelper: 固定布局竹勉，但之后當(dāng)頁(yè)面滑動(dòng)到該圖片區(qū)域才顯示, 可以用來(lái)做返回頂部或其他書簽等
- FloatLayoutHelper: 浮動(dòng)布局，可以固定顯示在屏幕上娄琉，但用戶可以拖拽其位置
- ColumnLayoutHelper: 欄格布局次乓，都布局在一排，可以配置不同列之間的寬度比值
- SingleLayoutHelper: 通欄布局孽水，只會(huì)顯示一個(gè)組件View
- OnePlusNLayoutHelper: 一拖N布局票腰，可以配置1-5個(gè)子元素
- StickyLayoutHelper: stikcy布局， 可以配置吸頂或者吸底
- StaggeredGridLayoutHelper: 瀑布流布局匈棘，可配置間隔高度/寬度
實(shí)現(xiàn)如上頁(yè)面
1.三方庫(kù)引入
implementation 'com.android.support:recyclerview-v7:28.0.0'
implementation 'com.alibaba.android:vlayout:1.0.3'
implementation 'com.android.support:support-v4:28.0.0'
//banner 輪播圖
implementation 'com.youth.banner:banner:1.4.9'
//marqueeview 跑馬燈
implementation 'com.sunfusheng:marqueeview:1.3.1'
//Glide圖片加載框架
implementation 'com.github.bumptech.glide:glide:3.7.0'
2.基類封裝
操作RecyclerView時(shí)一般都會(huì)使用BaseViewHolder簡(jiǎn)化操作
import android.support.annotation.ColorInt;
import android.support.annotation.DrawableRes;
import android.support.annotation.IdRes;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.util.SparseArray;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
/**
* Create by 陳揚(yáng)齊
* Create on 2019-07-06
* description:基類ViewHolder封裝
*/
public class BaseViewHolder extends RecyclerView.ViewHolder {
private SparseArray<View> views;
public BaseViewHolder(@NonNull View itemView) {
super(itemView);
this.views = new SparseArray<>();
}
public BaseViewHolder setTextColor(@IdRes int viewId, @ColorInt int textColor) {
TextView view = getView(viewId);
view.setTextColor(textColor);
return this;
}
public BaseViewHolder setImageResource(@IdRes int viewId, @DrawableRes int imageResId) {
ImageView view = getView(viewId);
view.setImageResource(imageResId);
return this;
}
public BaseViewHolder setText(@IdRes int viewId, CharSequence value) {
TextView view = getView(viewId);
view.setText(value);
return this;
}
public <T extends View> T getView(@IdRes int viewId) {
View view = views.get(viewId);
if (view == null) {
view = itemView.findViewById(viewId);
views.put(viewId, view);
}
return (T) view;
}
}
同樣也封裝VLayout的DelegeteAdapter丧慈，提取基類
import android.content.Context;
import android.support.annotation.NonNull;
import android.view.LayoutInflater;
import android.view.ViewGroup;
import com.alibaba.android.vlayout.DelegateAdapter;
import com.alibaba.android.vlayout.LayoutHelper;
/**
* Create by 陳揚(yáng)齊
* Create on 2019-07-06
* description:
*/
public class BaseDelegeteAdapter extends DelegateAdapter.Adapter<BaseViewHolder> {
private LayoutHelper mLayoutHelper;
private int mCount = -1;
private int mLayoutId = -1;
private Context mContext;
private int mViewTypeItem = -1;
public BaseDelegeteAdapter(Context context,
LayoutHelper layoutHelper,
int layoutId, int count) {
this.mLayoutHelper = layoutHelper;
this.mCount = count;
this.mLayoutId = layoutId;
this.mContext = context;
}
@Override
public LayoutHelper onCreateLayoutHelper() {
return mLayoutHelper;
}
@NonNull
@Override
public BaseViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {
return new BaseViewHolder(LayoutInflater.from(mContext).inflate(mLayoutId, viewGroup,
false));
}
@Override
public void onBindViewHolder(@NonNull BaseViewHolder baseViewHolder, int i) {
}
@Override
public int getItemCount() {
return mCount;
}
}
3. 列表嵌套列表的實(shí)現(xiàn)
通過(guò)RecyclerView的Adapter.addAdapter(itemAdapter)的方式實(shí)現(xiàn)列表嵌套列表，具體代碼如下
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import com.alibaba.android.vlayout.DelegateAdapter;
import com.alibaba.android.vlayout.VirtualLayoutManager;
import com.alibaba.android.vlayout.layout.GridLayoutHelper;
import com.alibaba.android.vlayout.layout.LinearLayoutHelper;
import com.bumptech.glide.Glide;
import com.sunfusheng.marqueeview.MarqueeView;
import com.youth.banner.Banner;
import com.youth.banner.BannerConfig;
import com.youth.banner.Transformer;
import com.youth.banner.listener.OnBannerListener;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private RecyclerView mRecyclerView;
//應(yīng)用
String[] ITEM_NAMES = {"天貓", "聚劃算", "天貓國(guó)際", "外賣", "天貓超市", "充值中心", "飛豬旅行", "領(lǐng)金幣", "拍賣", "分類"};
int[] IMG_URLS = {R.mipmap.ic_tian_mao, R.mipmap.ic_ju_hua_suan, R.mipmap.ic_tian_mao_guoji,
R.mipmap.ic_waimai, R.mipmap.ic_chaoshi, R.mipmap.ic_voucher_center,
R.mipmap.ic_travel, R.mipmap.ic_tao_gold, R.mipmap.ic_auction, R.mipmap.ic_classify};
// 高顏值商品位
int[] ITEM_URL = {R.mipmap.item1, R.mipmap.item2, R.mipmap.item3, R.mipmap.item4,
R.mipmap.item5};
int[] GRID_URL = {R.mipmap.flashsale1, R.mipmap.flashsale2, R.mipmap.flashsale3,
R.mipmap.flashsale4};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
mRecyclerView = findViewById(R.id.recycler);
VirtualLayoutManager virtualLayoutManager = new VirtualLayoutManager(this);
mRecyclerView.setLayoutManager(virtualLayoutManager);
RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool();
mRecyclerView.setRecycledViewPool(viewPool);
viewPool.setMaxRecycledViews(0, 10);
BaseDelegeteAdapter bannerAdapter = new BaseDelegeteAdapter(this,
new LinearLayoutHelper(), R.layout.vlayout_banner, 1) {
@Override
public void onBindViewHolder(@NonNull BaseViewHolder baseViewHolder, int i) {
ArrayList<String> arrayList = new ArrayList<>();
arrayList.add("https://gw.alicdn.com/imgextra/i1/7/O1CN01nfNUEq1BvFJ6YLtPD_!!7-0" +
"-lubanu.jpg");
arrayList.add("https://gw.alicdn.com/imgextra/i3/20/O1CN01UTTfyr1C1CSm4hzOv_!!20" +
"-0" +
"-lubanu.jpg");
arrayList.add("https://gw.alicdn.com/imgextra/i3/106/O1CN01etvHvW1CeaWUFfTu9_" +
"!!106-0" +
"-lubanu.jpg");
arrayList.add("https://gw.alicdn.com/imgextra/i3/20/O1CN01UTTfyr1C1CSm4hzOv_!!20" +
"-0" +
"-lubanu.jpg");
arrayList.add("https://gw.alicdn.com/imgextra/i2/14/O1CN019L7VgZ1ByS5PJJpnO_!!14" +
"-0" +
"-lubanu.jpg");
arrayList.add("https://img.alicdn.com/tps/i4/TB1YMbpeoKF3KVjSZFESutExFXa.jpg");
// 綁定數(shù)據(jù)
Banner mBanner = baseViewHolder.getView(R.id.banner);
//設(shè)置banner樣式
mBanner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR);
//設(shè)置圖片集合
mBanner.setImages(arrayList);
//設(shè)置banner動(dòng)畫效果
mBanner.setBannerAnimation(Transformer.Default);
//設(shè)置標(biāo)題集合（當(dāng)banner樣式有顯示title時(shí)）
// mBanner.setBannerTitles(titles);
//設(shè)置自動(dòng)輪播主卫，默認(rèn)為true
mBanner.isAutoPlay(true);
mBanner.setImageLoader(new GlideImageLoader());
//設(shè)置輪播時(shí)間
mBanner.setDelayTime(3000);
//設(shè)置指示器位置（當(dāng)banner模式中有指示器時(shí)）
mBanner.setIndicatorGravity(BannerConfig.CENTER);
//banner設(shè)置方法全部調(diào)用完畢時(shí)最后調(diào)用
mBanner.start();
mBanner.setOnBannerListener(new OnBannerListener() {
@Override
public void OnBannerClick(int position) {
Toast.makeText(getApplicationContext(), "banner點(diǎn)擊了" + position,
Toast.LENGTH_SHORT).show();
}
});
super.onBindViewHolder(baseViewHolder, i);
}
};
GridLayoutHelper gridLayoutHelper = new GridLayoutHelper(5);
gridLayoutHelper.setPadding(0, 20, 0, 0);
gridLayoutHelper.setVGap(20);//垂直間距
gridLayoutHelper.setHGap(0);//水平間距
BaseDelegeteAdapter menuAdapter = new BaseDelegeteAdapter(this, gridLayoutHelper,
R.layout.vlayout_menu, 10) {
@Override
public void onBindViewHolder(@NonNull BaseViewHolder holder, final int position) {
holder.setText(R.id.tv_menu_title_home, ITEM_NAMES[position] + "");
holder.setImageResource(R.id.iv_menu_home, IMG_URLS[position]);
holder.getView(R.id.ll_menu_home).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getApplicationContext(), ITEM_NAMES[position],
Toast.LENGTH_SHORT).show();
}
});
super.onBindViewHolder(holder, position);
}
};
BaseDelegeteAdapter newsAdapter = new BaseDelegeteAdapter(this, new LinearLayoutHelper(),
R.layout.vlayout_news, 1) {
@Override
public void onBindViewHolder(@NonNull BaseViewHolder holder, int i) {
MarqueeView marqueeView1 = holder.getView(R.id.marqueeView1);
MarqueeView marqueeView2 = holder.getView(R.id.marqueeView2);
List<String> info1 = new ArrayList<>();
info1.add("天貓超市最近發(fā)大活動(dòng)啦逃默，快來(lái)?yè)?);
info1.add("沒(méi)有最便宜，只有更便宜簇搅！");
List<String> info2 = new ArrayList<>();
info2.add("這個(gè)是用來(lái)搞笑的完域，不要在意這寫小細(xì)節(jié)！");
info2.add("啦啦啦啦瘩将，我就是來(lái)搞笑的吟税！");
marqueeView1.startWithList(info1);
marqueeView2.startWithList(info2);
// 在代碼里設(shè)置自己的動(dòng)畫
marqueeView1.startWithList(info1, R.anim.anim_bottom_in, R.anim.anim_top_out);
marqueeView2.startWithList(info2, R.anim.anim_bottom_in, R.anim.anim_top_out);
marqueeView1.setOnItemClickListener(new MarqueeView.OnItemClickListener() {
@Override
public void onItemClick(int position, TextView textView) {
Toast.makeText(getApplicationContext(), textView.getText().toString(),
Toast.LENGTH_SHORT).show();
}
});
marqueeView2.setOnItemClickListener(new MarqueeView.OnItemClickListener() {
@Override
public void onItemClick(int position, TextView textView) {
Toast.makeText(getApplicationContext(), textView.getText().toString(),
Toast.LENGTH_SHORT).show();
}
});
}
};
DelegateAdapter delegateAdapter = new DelegateAdapter(virtualLayoutManager, true);
delegateAdapter.addAdapter(bannerAdapter);
delegateAdapter.addAdapter(menuAdapter);
delegateAdapter.addAdapter(newsAdapter);
for (int i = 0; i < ITEM_URL.length; i++) {
final int finalI = i;
BaseDelegeteAdapter titleAdapter = new BaseDelegeteAdapter(this,
new LinearLayoutHelper(), R.layout.vlayout_title, 1) {
@Override
public void onBindViewHolder(BaseViewHolder holder, int position) {
super.onBindViewHolder(holder, position);
Glide.with(getApplicationContext()).load(ITEM_URL[finalI])
.thumbnail(0.2f)
.into((ImageView) holder.getView(R.id.iv));
}
};
GridLayoutHelper gridHelper = new GridLayoutHelper(2);
BaseDelegeteAdapter gridAdapter = new BaseDelegeteAdapter(this, gridHelper,
R.layout.vlayout_grid, 4) {
@Override
public void onBindViewHolder(@NonNull BaseViewHolder holder, final int position) {
int item = GRID_URL[position];
ImageView iv = holder.getView(R.id.iv);
Glide.with(getApplicationContext()).load(item).thumbnail(0.2f).into(iv);
iv.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getApplicationContext(), "item" + position,
Toast.LENGTH_SHORT).show();
}
});
}
};
delegateAdapter.addAdapter(titleAdapter);
delegateAdapter.addAdapter(gridAdapter);
}
mRecyclerView.setAdapter(delegateAdapter);
}
}
VLayout更多功能參考官方demohttps://github.com/alibaba/vlayout
