使用CoordinatorLayout打造知乎界面

這兩天在學(xué)習(xí)com.android.support:design類庫(kù)的使用疗绣,也算有些小心得客们。就想打造一個(gè)類似于知乎的上滑隱藏吕世、下滑加載Toolbar和TabLayout的界面布局钓株。用起來體驗(yàn)還是很不錯(cuò)的却紧。
中間呢也借鑒了不少大神的博客。比如:
http://www.reibang.com/p/488283f74e69
http://androidwing.net/index.php/70
程序運(yùn)行效果如下:

aa.gif

當(dāng)然了惨撇,實(shí)際操作領(lǐng)悟還要全靠自己伊脓。那么今天,我就把大家?guī)нM(jìn)門魁衙。
1.知乎首頁(yè)是一個(gè)Activity和多個(gè)Fragment报腔。底部導(dǎo)航欄和頂部Toolbar在Activity的布局中。
2.除了第一個(gè)Fragment剖淀,其余的Toolbar全部隱藏掉纯蛾,換成Fragment的自身的頂部導(dǎo)航欄。

那么我們今天主要就是完成Activity的布局效果纵隔。
首先我們先看布局文件翻诉。我一點(diǎn)一點(diǎn)的貼炮姨,一點(diǎn)一點(diǎn)的講,免得一大片代碼讓大家煩躁碰煌。而且舒岸,我覺得難就難在可能大家對(duì)這些新的東西的屬性和API不熟悉。慢慢來

//最外層的布局拄查,CoordinatorLayout就是我們用來協(xié)調(diào)它的各種子View
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.sg.zhidemo.MainActivity">

之后呢吁津,我添加了一個(gè)FrameLayout,用來替換Fragment的

<FrameLayout    android:id="@+id/main_center_fl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    //這里要說的堕扶。如果沒有這個(gè)屬性碍脏,F(xiàn)rameLayout或者Fragment就會(huì)在Toolbar的下面,而如果用了這個(gè)屬性稍算,就會(huì)根據(jù)appbar的大小來協(xié)調(diào)自身的位置
    app:layout_behavior="@string/appbar_scrolling_view_behavior">
</FrameLayout>

接下來就是頂部的AppBar了典尾,其實(shí)他就是一個(gè)可以將各種玩意和Toolbar組合到一起使用的一個(gè)容器而已。如果這里不愿意寫的話呢糊探,可以直接去new Moudle钾埂,創(chuàng)建一個(gè)ScrollViewActivity,內(nèi)容大同小異

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">
        <android.support.v7.widget.Toolbar
            android:id="@+id/main_toolbar"
            android:layout_width="match_parent"
//這個(gè)barSize是Google建議的高度科平,是56dp
            android:layout_height="?attr/actionBarSize" 
            android:background="?attr/colorPrimary"
//前兩個(gè)屬性我就不說了褥紫,一會(huì)給大家推薦文章有,snap就是具有彈性的感覺瞪慧,自己體會(huì)··
            app:layout_scrollFlags="scroll|enterAlways|snap">
//這里我就是懶省事髓考,隨便寫的ET
            <EditText
                android:background="@drawable/shape"
                android:hint="搜索話題。弃酌。氨菇。"
                android:layout_width="wrap_content"
                android:layout_height="42dp" />
        </android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

然后是底部導(dǎo)航欄

//用CardView包裹更好看了····
<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
//設(shè)置位置和高度
    android:layout_gravity="bottom"
    app:cardElevation="8dp"
//這里是重點(diǎn),這里我們使用了自定義的行為妓湘。也是著重要寫的地方查蓉。稍后講
    app:layout_behavior="com.sg.zhidemo.FooterBehavior">
    <android.support.design.widget.TabLayout
        android:id="@+id/main_bottom_tab"
        android:layout_width="match_parent"
        android:layout_height="66dp"
//去掉指示器
        app:tabIndicatorColor="@null" />
</android.support.v7.widget.CardView>

最后是一個(gè)懸浮的FAB

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right|bottom"
    android:layout_marginBottom="80dp"
    android:layout_marginRight="30dp"
    android:src="@android:drawable/ic_dialog_email"
//用到了和上面一樣的自定義行為,都是用來協(xié)調(diào)滑動(dòng)事件的
    app:layout_behavior="com.sg.zhidemo.FooterBehavior" />

布局就這么寫完了榜贴。是不是也沒有什么難的啊豌研。。
MainActivity中無非就是尋找控件唬党,設(shè)置點(diǎn)擊事件來切換Fragment鹃共,我就不寫了,這里我們著重看一下FooterBehavior初嘹。
再看之前及汉,我還想說以下沮趣,一共有兩種Behavior屯烦。
一種是:Aview依賴Bview,在Bview移動(dòng)的時(shí)候,Aview可以獲取到B的一些屬性和數(shù)據(jù),同時(shí)調(diào)整自身的屬性驻龟。
另外一種呢就是我們要寫的這種温眉,當(dāng)布局中有滑動(dòng)事件發(fā)生的時(shí)候,會(huì)通知注冊(cè)的View翁狐,是否要去處理自身的一些方法类溢。怎么注冊(cè)呢,就是靠app:layout_behavior="com.sg.zhidemo.FooterBehavior"這種行為來注冊(cè)露懒。

來闯冷,接下來我直接把整個(gè)代碼貼出來(摘自 簡(jiǎn)明的博客)

//Behavior這個(gè)類就是用來協(xié)調(diào)我們的行為的。
public class FooterBehavior extends CoordinatorLayout.Behavior<View> {
    private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator();
    private float viewY;//控件距離coordinatorLayout底部距離
    private boolean isAnimate;//動(dòng)畫是否在進(jìn)行
    public FooterBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
//coordinatorLayout中有滾動(dòng)發(fā)生的時(shí)候會(huì)回調(diào)該方法懈词。我們可以在該方法中獲取到滾動(dòng)的方向蛇耀,可以獲取到注冊(cè)該行為的view,也就是child坎弯。大家一定要Ctrl+q看看英文的文檔介紹纺涤。
    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
        //在第一次進(jìn)入的時(shí)候獲取到控件距離父布局(coordinatorLayout)底部距離。根據(jù)這個(gè)控件到底部的距離抠忘,使用插值器撩炊,來做顯示隱藏的動(dòng)畫。
        if(child.getVisibility() == View.VISIBLE && viewY==0){
            viewY=coordinatorLayout.getHeight()-child.getY();
        } 
       return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL;//判斷是否豎直滾動(dòng)
    }
   @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) {
        //手指向上移動(dòng),屏幕內(nèi)容上移dy>0,手指下移dy<0
        if (dy >=0 && !isAnimate && child.getVisibility()==View.VISIBLE) {
            //hide和show的代碼我就不寫了崎脉,無非就是調(diào)用動(dòng)畫來顯示隱藏控件(雖然我感覺動(dòng)畫的代碼才是最難的··)
            hide(child);
        } else if (dy <0 && !isAnimate && child.getVisibility()==View.GONE) {
            show(child);
        }
    }
}

這樣就結(jié)束了拧咳。
我推薦如果是想寫滾動(dòng)下移上移,最好自定義一個(gè)FooterBehavior或者是HeaderBehavior荧嵌。如果是Aview依賴BView最好使用比例去依賴呛踊,而不要根據(jù)具體的值去依賴。
同時(shí)給大家推薦幾篇好的文章啦撮。
本文基本就是搬運(yùn)簡(jiǎn)明的博客谭网,只不過他用的是單個(gè)Activity。我改了一下
http://www.reibang.com/p/488283f74e69
這個(gè)也是大神啊赃春,不過Demo跑起來卡
http://androidwing.net/index.php/70
還有徐宜生大神的這個(gè)愉择,建議不會(huì)的跟著代碼走一遍,收貨頗多织中,超級(jí)值
http://blog.csdn.net/eclipsexys/article/details/46349721
Github地址:https://github.com/SshiGguang/SGUi
第一次用Git···

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末锥涕,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子狭吼,更是在濱河造成了極大的恐慌层坠,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,194評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件刁笙,死亡現(xiàn)場(chǎng)離奇詭異破花,居然都是意外死亡谦趣,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門座每,熙熙樓的掌柜王于貴愁眉苦臉地迎上來前鹅,“玉大人,你說我怎么就攤上這事峭梳〗⒒妫” “怎么了?”我有些...
    開封第一講書人閱讀 156,780評(píng)論 0 346
  • 文/不壞的土叔 我叫張陵葱椭,是天一觀的道長(zhǎng)捂寿。 經(jīng)常有香客問我,道長(zhǎng)孵运,這世上最難降的妖魔是什么者蠕? 我笑而不...
    開封第一講書人閱讀 56,388評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮掐松,結(jié)果婚禮上踱侣,老公的妹妹穿的比我還像新娘。我一直安慰自己大磺,他們只是感情好抡句,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評(píng)論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著杠愧,像睡著了一般待榔。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上流济,一...
    開封第一講書人閱讀 49,764評(píng)論 1 290
  • 那天锐锣,我揣著相機(jī)與錄音,去河邊找鬼绳瘟。 笑死雕憔,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的糖声。 我是一名探鬼主播斤彼,決...
    沈念sama閱讀 38,907評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼蘸泻!你這毒婦竟也來了琉苇?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,679評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤悦施,失蹤者是張志新(化名)和其女友劉穎并扇,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體抡诞,經(jīng)...
    沈念sama閱讀 44,122評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡穷蛹,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評(píng)論 2 325
  • 正文 我和宋清朗相戀三年渗勘,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片俩莽。...
    茶點(diǎn)故事閱讀 38,605評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖乔遮,靈堂內(nèi)的尸體忽然破棺而出扮超,到底是詐尸還是另有隱情,我是刑警寧澤蹋肮,帶...
    沈念sama閱讀 34,270評(píng)論 4 329
  • 正文 年R本政府宣布出刷,位于F島的核電站,受9級(jí)特大地震影響坯辩,放射性物質(zhì)發(fā)生泄漏馁龟。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評(píng)論 3 312
  • 文/蒙蒙 一漆魔、第九天 我趴在偏房一處隱蔽的房頂上張望坷檩。 院中可真熱鬧,春花似錦改抡、人聲如沸矢炼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)句灌。三九已至,卻和暖如春欠拾,著一層夾襖步出監(jiān)牢的瞬間胰锌,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評(píng)論 1 265
  • 我被黑心中介騙來泰國(guó)打工藐窄, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留资昧,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,297評(píng)論 2 360
  • 正文 我出身青樓荆忍,卻偏偏與公主長(zhǎng)得像榛搔,于是被迫代替她去往敵國(guó)和親倦始。 傳聞我的和親對(duì)象是個(gè)殘疾皇子把介,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,749評(píng)論 25 707
  • RandomAccessFile 隨機(jī)讀取文件內(nèi)容 構(gòu)造方法 RandomAccessiFile raf=new ...
    HAHAYA閱讀 486評(píng)論 0 0
  • 美好的一天從感恩開始:我感恩生命的富足美好!讓我可以自由的生活乡恕。我感恩健康嘶卧!讓我可以無憂的生活尔觉。我感恩老公辛勞打拼...
    淘淘的簡(jiǎn)書閱讀 184評(píng)論 1 0
  • 玩彩是一場(chǎng)華麗的遠(yuǎn)行,只有提高功底芥吟,才會(huì)走的更遠(yuǎn)侦铜。今天繼續(xù)前行专甩。 好運(yùn)彩吧3D第173期分析: 獨(dú)膽:5 兩碼:5...
    金穗賓館好運(yùn)彩吧閱讀 180評(píng)論 0 0