實(shí)現(xiàn)導(dǎo)航Tab欄懸浮功能之改進(jìn)版

博文出處:實(shí)現(xiàn)導(dǎo)航Tab欄懸浮功能之改進(jìn)版换况,歡迎大家關(guān)注我的博客率触,謝謝抵碟!

在上一篇博文中,我們用WindowManager的方法實(shí)現(xiàn)了Tab欄的懸浮功能贷盲。如果你沒有看過上篇博文淘这,請(qǐng)點(diǎn)擊[《輕松實(shí)現(xiàn)app中的導(dǎo)航Tab欄懸浮功能》][url]。
[url]: /2016/01/12/%E8%BD%BB%E6%9D%BE%E5%AE%9E%E7%8E%B0app%E4%B8%AD%E7%9A%84%E5%AF%BC%E8%88%AATab%E6%A0%8F%E6%82%AC%E6%B5%AE%E5%8A%9F%E8%83%BD/

當(dāng)然巩剖,用WindowManager來實(shí)現(xiàn)由一個(gè)缺點(diǎn)就是當(dāng)沒有顯示懸浮窗的權(quán)限時(shí)铝穷,該功能就無法體現(xiàn)出來。而在本篇博文中佳魔,我們用第二種方法曙聂,也就是不斷地重新設(shè)置Tab欄的布局位置來實(shí)現(xiàn)懸浮功能,彌補(bǔ)了第一種方法的缺點(diǎn)鞠鲜。效果圖這里就不放了宁脊,相信大家都看過啦。

不廢話了贤姆,直接上代碼榆苞。

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/rl_title"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/colorPrimary">

        <ImageView
            android:id="@+id/iv_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:src="@drawable/new_img_back" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/app_name"
            android:textColor="@android:color/white"
            android:textSize="18sp" />

    </RelativeLayout>

    <com.yuqirong.tabsuspenddemo.view.MyScrollView
        android:id="@+id/mScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#cccccc"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/iv_pic"
                android:layout_width="match_parent"
                android:layout_height="180dp"
                android:scaleType="centerCrop"
                android:src="@drawable/ic_bg_personal_page" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:layout_marginBottom="5dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="55dp"
                android:background="@android:color/white"
                android:orientation="horizontal">

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:layout_marginBottom="5dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="15dp"
                android:background="@android:color/white"
                android:orientation="horizontal">

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:layout_marginBottom="5dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="15dp"
                android:background="@android:color/white"
                android:orientation="horizontal">

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:layout_marginBottom="5dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="15dp"
                android:background="@android:color/white"
                android:orientation="horizontal">

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:layout_marginBottom="5dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="15dp"
                android:background="@android:color/white"
                android:orientation="horizontal">

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:layout_marginBottom="5dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="15dp"
                android:background="@android:color/white"
                android:orientation="horizontal">

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:layout_marginBottom="5dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="15dp"
                android:background="@android:color/white"
                android:orientation="horizontal">

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:layout_marginBottom="5dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="15dp"
                android:background="@android:color/white"
                android:orientation="horizontal">

            </LinearLayout>

            <include layout="@layout/tab_layout" />

        </LinearLayout>
    </com.yuqirong.tabsuspenddemo.view.MyScrollView>
</LinearLayout>

tab_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_tab"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="@color/colorPrimary"
    android:orientation="horizontal">

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="分類"
        android:textColor="@android:color/white"
        android:textSize="18sp" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="排序"
        android:textColor="@android:color/white"
        android:textSize="18sp" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="篩選"
        android:textColor="@android:color/white"
        android:textSize="18sp" />

</LinearLayout>

我們發(fā)現(xiàn)在activity_main.xml里Tab欄懸浮窗的布局放在了最后,這是因?yàn)楫?dāng)懸浮窗懸浮在頂部時(shí)霞捡,應(yīng)該在所有的UI控件上方坐漏,所以在xml里放在了最后。

接下來看看MainActivity:

public class MainActivity extends AppCompatActivity implements MyScrollView.OnScrollListener {

    private static final String TAG = "MainActivity";
    private MyScrollView mScrollView;
    private LinearLayout ll_tab;
    private ImageView iv_pic;
    private int picBottom;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getSupportActionBar().hide();
        mScrollView = (MyScrollView) findViewById(R.id.mScrollView);
        mScrollView.setOnScrollListener(this);
        ll_tab = (LinearLayout) findViewById(R.id.ll_tab);
        iv_pic = (ImageView) findViewById(R.id.iv_pic);
        findViewById(R.id.ll_main).getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                onScroll(mScrollView.getScrollY());
            }
        });
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if (hasFocus) {
            picBottom = iv_pic.getBottom();
        }
    }

    @Override
    public void onScroll(int scrollY) {
        int top = Math.max(scrollY, picBottom);
        ll_tab.layout(0, top, ll_tab.getWidth(), top + ll_tab.getHeight());
    }

}

我們驚奇地發(fā)現(xiàn)在Activity里的代碼竟然這么短!但是這是這么短赊琳,實(shí)現(xiàn)了一模一樣的功能街夭。

首先在父布局中添加了OnGlobalLayoutListener,以便當(dāng)布局的狀態(tài)或者控件的可見性改變時(shí)去重新設(shè)置Tab欄的布局躏筏。之后在onWindowFocusChanged(boolean hasFocus)里得到iv_pic.getBottom()的值莱坎,也就是iv_pic的高度。也就是說你一開始想把ll_tab布局在iv_pic的下面寸士。因此可以當(dāng)作Tab欄距離ScrollView頂部的距離檐什。

最后在onScroll(int scrollY)中比較scrollY,picBottom的最大值弱卡。當(dāng)scrollY<picBottom時(shí)乃正,ll_tab會(huì)跟隨ScrollView的滑動(dòng)而滑動(dòng);當(dāng)scrollY>picBottom時(shí)婶博,ll_tab布局的頂部的坐標(biāo)始終是ScrollView的滑動(dòng)距離瓮具,這樣就造成了ll_tab懸浮在頂部的“假象”。

好了凡人,一起來看看效果吧:

效果圖gif

是不是和第一種方法的效果一樣呢名党,相信大家都學(xué)會(huì)了。如果有問題可以在下面留言挠轴。

最后传睹,放出源碼:

TabSuspendDemo.rar

~have fun!~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市岸晦,隨后出現(xiàn)的幾起案子欧啤,更是在濱河造成了極大的恐慌,老刑警劉巖启上,帶你破解...
    沈念sama閱讀 206,839評(píng)論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件邢隧,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡冈在,警方通過查閱死者的電腦和手機(jī)倒慧,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來包券,“玉大人纫谅,你說我怎么就攤上這事⌒耸梗” “怎么了系宜?”我有些...
    開封第一講書人閱讀 153,116評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)发魄。 經(jīng)常有香客問我盹牧,道長(zhǎng)俩垃,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,371評(píng)論 1 279
  • 正文 為了忘掉前任汰寓,我火速辦了婚禮口柳,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘有滑。我一直安慰自己跃闹,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,384評(píng)論 5 374
  • 文/花漫 我一把揭開白布毛好。 她就那樣靜靜地躺著望艺,像睡著了一般。 火紅的嫁衣襯著肌膚如雪肌访。 梳的紋絲不亂的頭發(fā)上找默,一...
    開封第一講書人閱讀 49,111評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音吼驶,去河邊找鬼惩激。 笑死,一個(gè)胖子當(dāng)著我的面吹牛蟹演,可吹牛的內(nèi)容都是我干的风钻。 我是一名探鬼主播,決...
    沈念sama閱讀 38,416評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼酒请,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼骡技!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起蚌父,我...
    開封第一講書人閱讀 37,053評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤哮兰,失蹤者是張志新(化名)和其女友劉穎毛萌,沒想到半個(gè)月后苟弛,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,558評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡阁将,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,007評(píng)論 2 325
  • 正文 我和宋清朗相戀三年膏秫,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片做盅。...
    茶點(diǎn)故事閱讀 38,117評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡缤削,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出吹榴,到底是詐尸還是另有隱情亭敢,我是刑警寧澤,帶...
    沈念sama閱讀 33,756評(píng)論 4 324
  • 正文 年R本政府宣布图筹,位于F島的核電站帅刀,受9級(jí)特大地震影響让腹,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜扣溺,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,324評(píng)論 3 307
  • 文/蒙蒙 一骇窍、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧锥余,春花似錦腹纳、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至雄驹,卻和暖如春蛔钙,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背荠医。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評(píng)論 1 262
  • 我被黑心中介騙來泰國(guó)打工吁脱, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人彬向。 一個(gè)月前我還...
    沈念sama閱讀 45,578評(píng)論 2 355
  • 正文 我出身青樓兼贡,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親娃胆。 傳聞我的和親對(duì)象是個(gè)殘疾皇子遍希,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,877評(píng)論 2 345

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