日韩一级A片免费,日本免费观看入网视频免费观看,99er国产精品,成人夜间视频,91啪啪麻豆视频,日韩中AV无码毛片,中文字幕综合在线观看,99在线视频在线

作者 | 八怪不姓丑
地址 | https://www.jianshu.com/p/5dc19d15c096

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

與之相似的還有簡(jiǎn)書的個(gè)人頁面也是這樣的布局。

首頁大概分為幾個(gè)部分

狀態(tài)欄
標(biāo)題欄
輪播圖
切換的Tab
資訊列表
資訊列表頭部推薦
刷新控件

整個(gè)頁面是一個(gè)Activity，最外層是刷新控件，然后是標(biāo)題欄和折疊布局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" />            <!--滾動(dòng)視圖-->            <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)動(dòng)加載的Fragment，Fragment中列表用的是RecyclerView，然后再給RecyclerView添加了一個(gè)Header，實(shí)現(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滾動(dòng)沖突，造成滑動(dòng)不流暢。
需要在RecyclerView設(shè)置android:nestedScrollingEnabled="false"屬性，使?jié)L動(dòng)事件交給ScrollView處理。
添加RecyclerViewHeader的時(shí)候，父布局只能識(shí)別RelativeLayout 、LinearLayout、和FrameLayout這三種控件。
ScrollableLayout子布局是固定的格式，分為三部分。

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

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

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

隨便在網(wǎng)上找了三張圖片，使用Picasso框架完成圖片的加載。
start開啟輪播。
這時(shí)候打開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();    }

然后進(jìn)行tablayout的初始化

    private String[] titles = new String[]{"最新", "專欄", "官方", "活動(dòng)", "攻略", "娛樂", "收藏"};
    /*初始化tab標(biāo)簽*/    private void initTabLayout() {
        for (int i=0;i<titles.length;i++){            tab.addTab(tab.newTab().setText(titles[i]));        }    }

上面只是裝載了標(biāo)簽數(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);    }

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

 public CharSequence getPageTitle(int position) {            return titles[position];        }

到這里已經(jīng)完成了acticity的工作，但是我們還要實(shí)現(xiàn)標(biāo)題欄漸變消失的效果。

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

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

  /*滾動(dòng)監(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有兩個(gè)屬性，一個(gè)I是滾動(dòng)的距離，是根據(jù)手勢(shì)滑動(dòng)的距離計(jì)算出的距離，i1是從開始滾動(dòng)到header消失這之間的總距離。也就是固定的。

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

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

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

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

兩行代碼就實(shí)現(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é)

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

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

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

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

本文所用到的開源庫：

    //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ò)請(qǐng)求    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'    //折疊控件，解決了滾動(dòng)沖突    compile 'com.github.cpoopc:scrollablelayoutlib:1.0.1'    //RecyclerViewHeader    compile 'com.bartoszlipinski:recyclerviewheader2:2.0.1'

源碼地址：

https://github.com/wapchief/imitationLOL

到這里就結(jié)束啦.

Android仿掌上英雄聯(lián)盟首頁折疊效果