前言
现在各种电商如火如荼，首页页面设计也颇有色彩。 之前项目也是一个电商类购物app，主页设计了好几套样式。 其中一个样式如下图相似涉及到： 轮播广告图banner、viewPager的轮播、沉浸式状态栏、 recyclerView的item的复杂分割线、以及自定义的主页头条ViewFlipper使用、glide图片加载、其他的琐碎知识点也略有涉及到。
效果图
掘金上不了gif图？！
Github地址
Github项目地址：github.com/lvlife/shop…
依赖
//banner
implementation 'com.youth.banner:banner:1.4.10'
//RecyclerView
implementation 'com.android.support:recyclerview-v7:27.1.1'
//RecyclerView Adapter
implementation 'com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.40'
//图片加载
implementation 'com.github.bumptech.glide:glide:3.7.0'
//沉浸式
implementation 'com.jaeger.statusbarutil:library:1.5.1'
//retrofit2 转化器 gson
implementation 'com.squareup.retrofit2:converter-gson:2.3.0'
HomeFragment基本代码
这里主要说一下：recyclerView的item的复杂分割线
根据GridLayoutManager的getSpanSize()方法可以动态的设置item跨列数；
mRecyclerView.setLayoutManager(new GridLayoutManager(getContext(), 6));
- return 6表示独占一个item 比如一张图片占满一行
- return 3 3是6的多少？2分之1啊，那就是占一行的一半 也就是说 如果放图片 一行可以最大放2张！！！
- return 2 2是6的多少？3分之1啊，那就是占一行的3分之1 也就是说 如果放图片 一行可以最大放3张！！！
例如：
根据getItemViewType返回的itemtype， 第一个position显示为轮播图
所以返回的是gridManager.getSpanCount(); 即：return 6
如果是2张图占满一行，那么1张图就是占整行的二分之一，既6/2=3， return 3即可。
/**
* 懒加载方法
*/
@Override
public void lazyLoad() {
GridLayoutManager gridLayoutManager = new GridLayoutManager(getContext(), 6);
mRecyclerView.setLayoutManager(gridLayoutManager);
String jsonData = new String(getAssertsFile(getContext(), "content.json"));
data = new Gson().fromJson(jsonData, new TypeToken<List<TestBean>>() {
}.getType());
TestHomeAdapter adapter = new TestHomeAdapter();
//这里就要设置分割线了
adapter.setSpanSizeLookup(new BaseQuickAdapter.SpanSizeLookup() {
@Override
public int getSpanSize(GridLayoutManager gridLayoutManager, int position) {
int type = data.get(position).getType();
if (type == 1 || type == 3 || type == 2 || type == 5 || type == 6) {
return 6;
} else if (type == 4) {
return 2;
} else if (type == 7) {
return 3;
}
return 0;
}
});
mRecyclerView.setAdapter(adapter);
adapter.setHeaderView(getHeaderView(mRecyclerView));
adapter.setNewData(data);
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
private int totalDy = 0;
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
totalDy += dy;
if (totalDy <= height) {
float alpha = (float) totalDy / height;
mToolbar.setBackgroundColor(ColorUtils.blendARGB(Color.TRANSPARENT
, ContextCompat.getColor(getContext(), R.color.white), alpha));
} else {
mToolbar.setBackgroundColor(ColorUtils.blendARGB(Color.TRANSPARENT
, ContextCompat.getColor(getContext(), R.color.white), 1));
}
}
});
}
/**
* 轮播图banner的数据设置
*/
private View getHeaderView(RecyclerView v) {
List<String> bannerImg = new ArrayList<>();
bannerImg.add("图片地址1.jpg");
bannerImg.add("图片地址2.jpg");
bannerImg.add("图片地址3.jpg");
bannerImg.add("http://58.87.71.247:8080/TestFile/banner.png");
View convertView = LayoutInflater
.from(getContext())
.inflate(R.layout.app_include_home_header, (ViewGroup) v.getParent(), false);
Banner mBanner = convertView.findViewById(R.id.app_home_header_banner);
mBanner.setImages(bannerImg)
.setImageLoader(new GlideImageLoader())
.setDelayTime(3000)
.start();
MarqueeView marqueeView = convertView.findViewById(R.id.app_home_header_problem);
//头条数据ViewFlipper
List<String> problems = new ArrayList<>();
problems.add("如何获取更多个人积分");
problems.add("下单时服务费率规则");
problems.add("大额预定商品详细交易流程");
marqueeView.startWithList(problems);
ViewGroup.LayoutParams bannerParams = mBanner.getLayoutParams();
int resourceId = getContext().getResources().getIdentifier("status_bar_height",
"dimen","android");
int statusBarHeight = getContext().getResources().getDimensionPixelSize(resourceId);
height = bannerParams.height - statusBarHeight - 104;
return convertView;
}
核心adapter
public class TestHomeAdapter extends MultipleItemRvAdapter<TestBean, BaseViewHolder> {
//通栏商品大图片
public static final int TYPE_IMG = 100;
//通栏图文
public static final int TYPE_TEXT_AND_IMG = 200;
//通栏文本
public static final int TYPE_TEXT = 300;
//三列
public static final int TYPE_THREE_COLUMN = 400;
//通栏水平拖动
public static final int TYPE_HORIZONTAL_SCROLL = 500;
//通栏窄图片
public static final int TYPE_NARROW_IMG = 600;
//两列
public static final int TYPE_TWO_COLUMN = 700;
public TestHomeAdapter() {
super(null);
finishInitialize();
}
@Override
protected int getViewType(TestBean testBean) {
int type = testBean.getType();
if (type == 1) {
return TYPE_IMG;
} else if (type == 2) {
return TYPE_TEXT_AND_IMG;
} else if (type == 3) {
return TYPE_TEXT;
} else if (type == 4) {
return TYPE_THREE_COLUMN;
} else if (type == 5) {
return TYPE_HORIZONTAL_SCROLL;
} else if (type == 6) {
return TYPE_NARROW_IMG;
} else if (type == 7) {
return TYPE_TWO_COLUMN;
}
return 0;
}
@Override
public void registerItemProvider() {
//通栏商品大图片
mProviderDelegate.registerProvider(new ImgItemProvider());
//通栏图文
mProviderDelegate.registerProvider(new ImgAndTextItemProvider());
//通栏文本
mProviderDelegate.registerProvider(new TextItemProvider());
//三列图文
mProviderDelegate.registerProvider(new ThreeColumnItemProvider());
//通栏横向滑动
mProviderDelegate.registerProvider(new ScrollItemProvider());
//通栏窄图片
mProviderDelegate.registerProvider(new NarrowImgItemProvider());
//两列图文
mProviderDelegate.registerProvider(new TwoColumnItemProvider());
}
}
总结
第一次在掘金写 有问题可以提出来 共同进步~！
Github代码已更新
