preface

Now a variety of e-commerce in full swing, home page design is quite colorful. The previous project was also an e-commerce shopping app, and several styles were designed for the homepage. One of the styles is similar to the one shown below: Rotating advertising banner, viewPager rotating, immersive status bar, recyclerView item complex segmentation line, and custom homepage headlines ViewFlipper use, Glide picture loading, other trivial knowledge is also slightly involved.

Take a look at the Gif effect:

Next reference to the third party control:

/ / banner implementation 'com. Youth. The banner, the banner: 1.4.10' / / RecyclerView implementation 'com. Android. Support: recyclerview - v7:27.1.1' / / recyclerview Adapter implementation 'com. Making. CymChad: BaseRecyclerViewAdapterHelper: 2.9.40' / / picture loading implementation 'com. Making. Bumptech. Glide: glide: 3.7.0' / / immersion implementation 'com. Jaeger. Statusbarutil: library: 1.5.1' / / gson retrofit2 converter implementation 'com. Squareup. Retrofit2: converter - gson: 2.3.0'Copy the code

HomeFragment basic code

Here is mainly to say: recyclerView item complex division line

The GridLayoutManager getSpanSize() method dynamically sets the number of items across columns;

 mRecyclerView.setLayoutManager(new GridLayoutManager(getContext(), 6));
Copy the code
  • return 6It means to own an item like a picture that fills a row
  • return 3What’s 3 of 6? That’s half of a row, so if you put pictures in a row, you can put up to 2 pictures in a row!!
  • return 2What’s 2 of 6? A third of a row, that’s a third of a row, so you can put up to 3 pictures in a row!!

For example, according to the itemType returned by getItemViewType, the first position is displayed as a caroute graph, so the return is GridManager.getSPANCount (); If 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); } 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(); / / here is about to set the line 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)); }}}); Private View getHeaderView(RecyclerView v) {List<String> bannerImg = new ArrayList<>(); private View getHeaderView(RecyclerView v) {List<String> bannerImg = new ArrayList<>(); Bannerimg. add(" image address 1.jpg"); Bannerimg. add(" image.2.jpg "); Bannerimg. add(" image address 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 (" How to get more personal points "); Problems. Add (" Service rate rule when ordering "); Problems. Add (" large order detailed transaction process "); 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; } public static byte[] getAssertsFile(Context Context, String fileName) { InputStream inputStream = null; AssetManager = context.getAssets(); try { inputStream = assetManager.open(fileName); if (inputStream == null) { return null; } BufferedInputStream bis = null; int length; try { bis = new BufferedInputStream(inputStream); length = bis.available(); byte[] data = new byte[length]; bis.read(data); return data; } catch (IOException e) { } finally { if (bis ! = null) { try { bis.close(); } catch (Exception e) { } } } return null; } catch (IOException e) { e.printStackTrace(); } return null; }}Copy the code

Fragment

public abstract class BaseFragment extends Fragment { View mView; boolean isLoad = false; boolean isInit = false; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { if (mView == null) mView = inflater.inflate(getLayoutId(), container, false); isInit = true; initView(mView); isCanLoadData(); return mView; } public abstract void initView(View mView); /** * If the view is already visible to the user, Override public void setUserVisibleHint(Boolean isVisibleToUser) {super.setUserVisibleHint(isVisibleToUser); isCanLoadData(); } / / private void isCanLoadData() {if (! isInit) { return; } if (getUserVisibleHint() && ! isLoad) { lazyLoad(); isLoad = true; } else { if (isLoad) { stopLoad(); } } } @Override public void onDestroyView() { super.onDestroyView(); isInit = false; Public void stopLoad() {} public void stopLoad() {} public void stopLoad() { abstract int getLayoutId(); }Copy the code

Core adapter

public class TestHomeAdapter extends MultipleItemRvAdapter<TestBean, 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_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 () {/ / big picture mProviderDelegate. The banner goods registerProvider (new ImgItemProvider ()); / / banner graphic mProviderDelegate. RegisterProvider (new ImgAndTextItemProvider ()); / / banner text mProviderDelegate. RegisterProvider (new TextItemProvider ()); / / three columns by mProviderDelegate. RegisterProvider (new ThreeColumnItemProvider ()); / / banner transverse sliding mProviderDelegate. RegisterProvider (new ScrollItemProvider ()); / / banner narrow picture mProviderDelegate. The registerProvider (new NarrowImgItemProvider ()); / / two columns by mProviderDelegate. RegisterProvider (new TwoColumnItemProvider ()); }}Copy the code

The demo address:

Please move: recyclerView to realize complex item layout (such as Taobao, JINGdong, mall home page)

Share with you

I want to work my way up

Fly forward on the blades at the highest point

Let the wind blow dry tears and sweat

I want to work my way up

Waiting for the sun to watch its face

Little days have big dreams

I have my day

Let the wind blow dry tears and sweat

One day I will have my day