2. 程式人生 > >recyclerView 實現複雜的item佈局（如淘寶、京東、商城類首頁）

recyclerView 實現複雜的item佈局（如淘寶、京東、商城類首頁）

阿新 • • 發佈：2019-02-03
前言

現在各種電商如火如荼，首頁頁面設計也頗有色彩。
之前專案也是一個電商類購物app，主頁設計了好幾套樣式。
其中一個樣式如下圖相似涉及到： 輪播廣告圖banner、viewPager的輪播、沉浸式狀態列、
recyclerView的item的複雜分割線、以及自定義的主頁頭條ViewFlipper使用、glide圖片載入、其他的瑣碎知識點也略有涉及到。

看下Gif效果圖：

1

再下引用的第三方控制元件：

     //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即可。

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);

        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;
    }

    //模擬後臺請求資料 存放在AssertsFile資料夾裡
    public static byte[] getAssertsFile(Context context, String fileName) {
        InputStream inputStream = null;
        //讀取資源
        AssetManager 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;
    }

}
基類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);

    /**
     * 檢視是否已經對使用者可見，系統的方法
     */
    @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 lazyLoad() {

    }

    /**
     * 頁面停止載入的處理
     */
    public void stopLoad() {

    }

    public abstract int getLayoutId();

}
核心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());
    }
}
demo地址：
與君共勉

我要一步一步往上爬
在最高點乘著葉片往前飛
任風吹乾流過的淚和汗
我要一步一步往上爬
等待陽光靜靜看著它的臉
小小的天有大大的夢想
我有屬於我的天
任風吹乾流過的淚和汗
總有一天我有屬於我的天
這裡寫圖片描述

相關推薦

recyclerView 實現複雜的item佈局（如淘寶、京東、商城類首頁）

前言 現在各種電商如火如荼，首頁頁面設計也頗有色彩。 之前專案也是一個電商類購物app，主頁設計了好幾套樣式。 其中一個樣式如下圖相似涉及到： 輪播廣告圖banner、viewPager的輪播、沉浸式狀態列、 recyclerView的item的複雜分割

Android RecyclerView優雅實現複雜列表佈局（二）

轉載：https://blog.csdn.net/huang3513/article/details/62046528 前言 學習了（一）中那個RecyclerView的一些基礎知識，如果沒有具體看懂可以再返回看不一樣的RecyclerView優雅實現複雜列表佈局（一），那麼接下來我們就在（

Android RecyclerView優雅實現複雜列表佈局（一）

轉載：https://blog.csdn.net/huang3513/article/details/62044688 前言 在多彩佈局不斷呈現的今天，多佈局混合排布成為一個時尚，今天就結合Holder實現RecyclerView複雜列表佈局。  效果圖如下（三種佈局）： 

Android RecyclerView優雅實現複雜列表佈局（一）

前言 在多彩佈局不斷呈現的今天，多佈局混合排布成為一個時尚，今天就結合Holder實現RecyclerView複雜列表佈局。  效果圖如下（三種佈局）：  1.首先在我們主佈局中加入我們的RecyclerView控制元件。  2.在MainActivity中初始化我們

不一樣的RecyclerView優雅實現複雜列表佈局（一）

前言 在多彩佈局不斷呈現的今天，多佈局混合排布成為一個時尚，今天就結合Holder實現RecyclerView複雜列表佈局。 效果圖如下（三種佈局）： 1.首先在我們主佈局中加入我們的RecyclerView控制元件。 2.在MainActivity

RecyclerView實現多種item佈局

在專案中列表是基本都會用到的，然而在顯示列表時，我們需要的資料可能需要不止一種item顯示，對於複雜的資料就需要多種item，以不同的樣式顯示出來，這樣效果是很棒的，我們先看一下效果 我們可以看到，這個RecyclerView中有多種item顯示出來，那麼具體怎麼實現

Android RecyclerView多個Item佈局的實現（可實現頭部底部）

廢話不多說，小猿，上程式碼 package git.dzc.library; import android.support.v7.widget.RecyclerView; import android.view.ViewGroup; /** * Cre

學習RecyclerView優雅實現複雜列表佈局

這次學習的內容是使用RecyclerView來實現一些較為複雜的佈局，比如一個item： 最左邊是一個imageview，中間部分為textView，textView下面又是一個textView，最右邊為一個imageview。 1、首先在activit

RecyclerView詳細介紹-----多item佈局（三）

1.前言 前面兩篇文章主要介紹了recyclerview的基本使用，接下來介紹複雜一點的需求。 我們之前用listview的時候肯定遇到itemType>1的時候，我們定義多套item佈局，藉助getItemViewType（）實現多套佈局。但是如果像

RecyclerView實現複雜頁面

近日，三星Galaxy S8正式釋出，使用了曲屏無邊超大螢幕，屏佔比高達84%。為了獲得更大的屏佔比，S8甚至取消了正面指紋識別的設計，將指紋識別移到了後置攝像頭右側。另外還增加了語音助手Bixby，對蘋果Siri的進行公開叫板。不知道這一旗艦機型能否挽回去年“炸彈”Note

vue實現星級評價及上傳多張圖片等功能（類似淘寶商品評價頁面）

最近在寫一個關於vue的商城專案，然後整合在移動端中，開發需求中有一介面，類似淘寶商城評價介面！實現效果圖如下所示： 評價頁 點選看大圖，且可左右滑動 功能需求分析 預設為5顆星，為非常滿意，4顆滿意，根據不同星級顯示不同滿意程度。 2.評價內容，最

mvp實現Xrecyclerview的上下拉和購物車功能（仿淘寶）

首先先匯入我們要使用的依賴 implementation 'com.android.support:design:28.0.0' implementation 'com.google.code.gson:gson:2.8.5' implementation 'cn.bingoo

CSS3實現“聖盃佈局”--（固比固佈局）

使用CSS3中的屬性order可以輕易實現“聖盃佈局”，實現伸縮專案的順序重組，還有！！！使用flex屬性實現了中間列的等高效果，以及頁尾的黏附效果。 HTML: <header>h

recyclerview實現瀑布流佈局

先看效果,這裡我用的背景圖片, 首先匯入依賴 compile 'com.android.support:recyclerview-v7:26.1.0' 下面就是程式碼,首先是佈局 activity_main <RelativeLayout xmlns:a

Android開發之RecyclerView實現流式佈局

RecyclerView是什麼? RecycleView的出現, 替代了ListView, 沒了OnitemClickListener,; LayoutManager負責計算佈局; Adapter 負責適配,還增加了ViewHolder;RecycleView

css實現三欄佈局（兩側寬度固定，中間自適應）

  <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>三欄佈局</title&

js實現圖片滑動及放大鏡效果（仿淘寶京東圖片展示）

程式碼地址： https://github.com/EsionChang/HTML/tree/master/ThreeInOne 實現效果為： 滑鼠放到小圖上，上部的大圖會滑動到相應的位置，滑動方式為減速。滑鼠移動到上部的大圖上，會顯示大圖的對應放大部位。

基於RecyclerView實現ViewPager的功能（橫向）

說下大概思想吧，RecyclerView的使用大家都很熟悉了（不熟悉的請自行百度），在做專案的時候，需要實現一個圖片介面橫向滑動的功能，之前用RecycleView時一直做的都是垂直滑動的，當然使用ViewPager可以輕易完成。然而我就是想用RecycleVi

Android開發-載入公用佈局（如公用標題欄）

前言： 目前越來越多的activity頁面都會在頁面的頭部載入一個標題欄，為了減少重複程式碼，修改樣式方便。所以就簡單的來說說如何在當前頁面的頭部載入一個公用的佈局頭部檔案。 效果如下圖： 具

實現垂直輪播廣告（仿淘寶頭條） OC版本

1.先上效果圖 2 .可以實現下面效果   1》.可自由定義展示的內容（修改BannerContentView即可）。  2》使用方式類似ListView/RecyclerView。  3》可為當前顯示的內容新增各種事件，比如點選開啟某個頁面等。   4，實現垂直自動輪播