现在各种电商如火如荼，首页页面设计也颇有色彩。
之前项目也是一个电商类购物app，主页设计了好几套样式。
其中一个样式如下图相似涉及到： 轮播广告图banner、viewPager的轮播、沉浸式状态栏、
recyclerView的item的复杂分割线、以及自定义的主页头条ViewFlipper使用、glide图片加载、其他的琐碎知识点也略有涉及到。
看下Gif效果图：
再下引用的第三方控件：
//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\'
1
2
3
4
5
6
7
8
9
10
11
12
HomeFragment基本代码
这里主要说一下：recyclerView的item的复杂分割线
根据GridLayoutManager的getSpanSize()方法可以动态的设置item跨列数；
mRecyclerView.setLayoutManager(new GridLayoutManager(getContext(), 6));
1
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即可。
public class HomeFragment extends BaseFragment {
private LinearLayout mToolbar;
private RecyclerView mRecyclerView;
private List<TestBean> data;
private int height;
@Override
public int getLayoutId() {
return R.layout.app_fragment_home;
}
@Override
public void initView(View mView) {
mToolbar = mView.findViewById(R.id.toolbar);
mRecyclerView = mView.findViewById(R.id.app_home_list);
}
/**
* 懒加载方法
*/
@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);