Android仿掌上英雄聯(lián)盟首頁，實現(xiàn)折疊效果

不單單是掌上英雄聯(lián)盟，像微博發(fā)現(xiàn)頁也用了這樣的布局，當(dāng)滑動到一定距離的時候，自動隱藏輪播圖，或者標題欄下面的布局。并且使tablayout置頂。

與之相似的還有簡書的個人頁面也是這樣的布局。

lol.gif

圖片處理的有些不清楚。建議下載安裝包自行查看效果

首頁大概分為幾個部分
  • 狀態(tài)欄
  • 標題欄
  • 輪播圖
  • 切換的Tab
  • 資訊列表
  • 資訊列表頭部推薦
  • 刷新控件
lol.png

整個頁面是一個Activity，最外層是刷新控件，然后是標題欄和折疊布局ScrollableLayout。

<com.cjj.MaterialRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.cpoopc.scrollablelayoutlib.ScrollableLayout
            android:id="@+id/scrollablelayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="16dp"
            android:orientation="vertical">
            
        </com.cpoopc.scrollablelayoutlib.ScrollableLayout>

        <include layout="@layout/title_bar" />
    </RelativeLayout>
</com.cjj.MaterialRefreshLayout>

ScrollableLayout里面嵌套了輪播圖、tablayout、viewpager。

        <com.cpoopc.scrollablelayoutlib.ScrollableLayout
            android:id="@+id/scrollablelayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="16dp"
            android:orientation="vertical">
            <!--header-->
            <com.youth.banner.Banner
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="200dp" />

            <!--置頂?shù)牟糠?->
            <android.support.design.widget.TabLayout
                android:id="@+id/tab"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@color/white"
                app:tabIndicatorColor="@color/tab_select"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="@color/tab_select" />
            <!--滾動視圖-->
            <android.support.v4.view.ViewPager
                android:id="@+id/vp"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </com.cpoopc.scrollablelayoutlib.ScrollableLayout>

然后切換是通過tab和viewpager聯(lián)動加載的Fragment
Fragment中列表用的是RecyclerView，然后再給RecyclerView添加了一個Header，實現(xiàn)推薦功能。

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:id="@+id/fragment_lv"
            android:paddingLeft="12dp"
            android:paddingRight="12dp"
            android:nestedScrollingEnabled="false"
            android:layout_height="match_parent"/>

        <com.bartoszlipinski.recyclerviewheader2.RecyclerViewHeader
            android:id="@+id/header"
            android:layout_width="match_parent"
            android:layout_gravity=""
            android:nestedScrollingEnabled="false"
            android:layout_height="60dp"/>
    </RelativeLayout>
</ScrollView>
創(chuàng)建布局需要注意的問題

  • ScrollView和RecyclerView滾動沖突，造成滑動不流暢。
    需要在RecyclerView設(shè)置android:nestedScrollingEnabled="false"屬性，使?jié)L動事件交給ScrollView處理。

  • 添加RecyclerViewHeader的時候，父布局只能識別RelativeLayout 、LinearLayout、和FrameLayout這三種控件。

  • ScrollableLayout子布局是固定的格式，分為三部分。

設(shè)置好布局后，進行數(shù)據(jù)的填充，先操作activty中的元素

實例化控件直接用ButterKnife一鍵綁定了。直接加載控件數(shù)據(jù)。

    private void initView() {
        //加載輪播圖數(shù)據(jù)
        initBanner();
        //TabLayout
        initTabLayout();
        //創(chuàng)建Fragment
        initFragment();
        //監(jiān)聽滾動狀態(tài)
        initOnClickScroll();
    }

隨便在網(wǎng)上找了三張圖片，使用Picasso框架完成圖片的加載。
start開啟輪播。
這時候打開app就能看到效果了。
該框架支持多種輪播樣式風(fēng)格，根據(jù)需要自己設(shè)置。

    /*輪播*/
    private void initBanner() {
        //圓形指示器
        header.setBannerStyle(BannerConfig.CIRCLE_INDICATOR);
        //指示器居中
        header.setIndicatorGravity(BannerConfig.CENTER);
        img.add("http://m.beequick.cn/static/bee/img/m/boot_logo-275a61e3.png");
        img.add("http://m.beequick.cn/static/bee/img/m/boot_logo-275a61e3.png");
        img.add("http://m.beequick.cn/static/bee/img/m/boot_logo-275a61e3.png");
        header.setImageLoader(new ImageLoader() {
            @Override
            public void displayImage(Context context, Object o, ImageView imageView) {
                Picasso.with(context)
                        .load(url)
                        .into(imageView);
            }
        });
        header.setImages(img);
        header.start();
    }

然后進行tablayout的初始化

    private String[] titles = new String[]{"最新", "專欄", "官方", "活動", "攻略", "娛樂", "收藏"};

    /*初始化tab標簽*/
    private void initTabLayout() {

        for (int i=0;i<titles.length;i++){
            tab.addTab(tab.newTab().setText(titles[i]));
        }

    }

上面只是裝載了標簽數(shù)據(jù)，通過setupWithViewPager關(guān)聯(lián)viewpager

    /*初始化Fragment*/
    private void initFragment() {

        ScrollableFragment fragment = new ScrollableFragment();
        ScrollableFragment fragment1 = new ScrollableFragment();
        ScrollableFragment fragment2 = new ScrollableFragment();
        ScrollableFragment fragment3 = new ScrollableFragment();
        ScrollableFragment fragment4 = new ScrollableFragment();
        ScrollableFragment fragment5 = new ScrollableFragment();
        ScrollableFragment fragment6 = new ScrollableFragment();
        fragmentList.add(fragment);
        fragmentList.add(fragment1);
        fragmentList.add(fragment2);
        fragmentList.add(fragment3);
        fragmentList.add(fragment4);
        fragmentList.add(fragment5);
        fragmentList.add(fragment6);
        adapterVP = new ViewPagerAdapter(getSupportFragmentManager());
        vp.setAdapter(adapterVP);
        tab.setupWithViewPager(vp);
    }

如果到這一步運行app，發(fā)現(xiàn)tab標簽的狀態(tài)或者顏色沒有選中的效果，檢查viewpager的adapter是否重寫了getPageTitle方法

 public CharSequence getPageTitle(int position) {
            return titles[position];
        }
到這里已經(jīng)完成了acticity的工作，但是我們還要實現(xiàn)標題欄漸變消失的效果。

在android中大多數(shù)跟滾動有關(guān)的控件，都有自己的滾動監(jiān)聽事件，來讓開發(fā)者調(diào)用，以實現(xiàn)高級的效果。

而這里用的是ScrollableLayout控件，該控件內(nèi)部也是基于ScrollView滾動，所以在內(nèi)部給我們封裝好了監(jiān)聽事件，直接調(diào)動監(jiān)聽方法就可以

  /*滾動監(jiān)聽*/
    private void initOnClickScroll() {
        scrollablelayout.setOnScrollListener(new ScrollableLayout.OnScrollListener() {
            @Override
            public void onScroll(int i, int i1) {
                if (i >= i1) {
                    title.setVisibility(View.GONE);
                } else {
                    title.setVisibility(View.VISIBLE);
                }
                //通過距離設(shè)置漸變效果
                float scale = (float) i1-i;
                float alpha = (255 * scale);
                float alpha2 = scale/i1*150;
                float alphaTv = scale / i1 * 255;
                title.setBackgroundColor(Color.argb((int) alpha2, 0, 0, 0));
                titleBarTitle.setTextColor(Color.argb((int) alphaTv, 198, 166, 102));
                titleBarContent.setTextColor(Color.argb((int) alphaTv,198,166,102));
            }
        });
    }

onScroll有兩個屬性，一個I是滾動的距離，是根據(jù)手勢滑動的距離計算出的距離，i1是從開始滾動到header消失這之間的總距離。也就是固定的。

為了區(qū)別，這里加了標題欄的顯示和隱藏，當(dāng)?shù)撞繚L動視圖置頂?shù)臅r候，也就是i=i1的時候，就把標題欄隱藏掉。

但是我們這里是需要一個漸變隱藏的效果，也就是讓控件背景顏色從不透明到全透明的實時漸變的一個過程。

顏色需要用到argb，有四個參數(shù)，第一個就是透明度，
如果需要遞增則用255 * scale
遞減用scale ／ i1 * 255
需要半透的話，把255再除以2。

Fragment里面需要操作的東西就少了

兩行代碼就實現(xiàn)了headerview的添加

  private void initAdapter() {
        View headerView = View.inflate(getContext(), R.layout.view_header, null);
        LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
        recyclerView.setLayoutManager(layoutManager);
        header.addView(headerView);
        header.attachTo(recyclerView);
        adapter = new FragmentAdapter(data, getActivity());
        //分割線
        recyclerView.addItemDecoration(new DividerItemDecoration(getActivity(), DividerItemDecoration.VERTICAL));
        recyclerView.setAdapter(adapter);
    }
總結(jié)

其實要實現(xiàn)這種效果的方法還有很多，比如利用Design庫中的CoordinatorLayout，和AppBarLayout結(jié)合來用，也能實現(xiàn)折疊效果。

包括GitHub也有一些開源的庫可供我們選擇使用，像ScrollableLayout 、ObservableScrollView這些都是非常優(yōu)秀的框架。

在實際項目中節(jié)省了很多開發(fā)時間。

唯一的時間成本就是我們學(xué)習(xí)這些框架的時間，當(dāng)熟練運用之后，這些看似復(fù)雜的東西，可能只需要短短的幾分鐘而已。

關(guān)于

本文所用到的開源庫：

    //recyclerview列表
    compile 'com.android.support:recyclerview-v7:25.0.0'
    //design庫，用于tablayout，CoordinatorLayout折疊布局等
    compile 'com.android.support:design:25.0.0'
    //一鍵綁定控件
    compile 'com.jakewharton:butterknife:5.1.1'
    compile 'com.android.support:appcompat-v7:25.0.0'
    //網(wǎng)絡(luò)請求
    compile 'com.squareup.picasso:picasso:2.5.2'
    //ConstraintLayout
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    //輪播控件
    compile 'com.youth.banner:banner:1.4.9'
    //刷新加載控件
    compile 'com.cjj.materialrefeshlayout:library:1.3.0'
    //折疊控件，解決了滾動沖突
    compile 'com.github.cpoopc:scrollablelayoutlib:1.0.1'
    //RecyclerViewHeader
    compile 'com.bartoszlipinski:recyclerviewheader2:2.0.1'

最后附上Demo地址：https://github.com/wapchief/imitationLOL

新的分支

添加了新的分支new，布局調(diào)整，使更接近于實際效果。
調(diào)整了header的位置，為了實現(xiàn)懸浮消失的效果，將header從recyclerView獨立出來，放在了activity，并且對頭部標題欄做了優(yōu)化，
可以自助選擇tab置頂?shù)臅r候，標題欄是否消失。

并且在標題欄選項中增加了一個彩蛋，是仿美團外賣配送時折疊的效果。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,094評論 25贊 709
  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點贊按鈕進度條TabLayout圖標下拉刷新...
    皇小弟閱讀 47,163評論 22贊 665
  • 最近做了一個Android UI相關(guān)開源項目庫匯總，里面集合了OpenDigg 上的優(yōu)質(zhì)的Android開源項目庫...
    OpenDigg閱讀 17,624評論 6贊 222
  • 一滴露珠 渺小的可以忽略不計 許許多多 無數(shù)的匯積 滋潤萬物 一天的努力 微不足道 每天的勤奮 構(gòu)建進步的階梯
    百世隨風(fēng)閱讀 134評論 0贊 0
  • 拖延是工作與生活的大敵，番茄工作法有效解決了拖延。 以25分鐘為一個工作單位，在此期間內(nèi)集中所有精力將手中事情做好...
    曲米粒閱讀 227評論 0贊 0

友情鏈接更多精彩內(nèi)容