博文出處:實(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
懸浮在頂部的“假象”。
好了凡人,一起來看看效果吧:
是不是和第一種方法的效果一樣呢名党,相信大家都學(xué)會(huì)了。如果有問題可以在下面留言挠轴。
最后传睹,放出源碼:
~have fun!~