我先上效果
luzhi.gif
這種效果很明顯是用CoordinatorLayout來(lái)實(shí)現(xiàn)的，懸浮的區(qū)域位于AppBarLayout酥郭，直接上布局的源碼
<?xml version="1.0" encoding="utf-8"?>
<!--這里自定義了一個(gè)CoordinatorLayout是為了實(shí)現(xiàn)tableyout中tab圖片的顯示和隱藏-->
<www.jrexe.com.download_test.Mycoor 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:id="@+id/coord"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffaa00">
<!-- title部分-->
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:text="我要保修"
app:layout_scrollFlags="scroll|exitUntilCollapsed" />
<!-- 懸浮部分-->
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="@+id/rela"></android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<!--放fragment-->
<RelativeLayout
android:id="@+id/fragment_rela"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"></RelativeLayout>
</www.jrexe.com.download_test.Mycoor>
自定義了一個(gè)CoordinatorLayout是為了通過(guò)NestedScrollingParent接口中的一個(gè)onNestedScroll來(lái)獲取滑動(dòng)的狀態(tài)從而改變tab中的圖片是顯示還是隱藏华坦。下面上自定的CoordinatorLayout源碼：
import android.content.Context;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.TabLayout;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
/**
* Created by Administrator on 2017/7/4 0004.
*/
public class Mycoor extends CoordinatorLayout {
public String[] strings = {"進(jìn)行中", "待評(píng)價(jià)", "已完成", "待報(bào)修"};
public Mycoor(Context context) {
super(context);
}
public Mycoor(Context context, AttributeSet attrs) {
super(context, attrs);
}
public Mycoor(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
public void onNestedScroll(View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
super.onNestedScroll(target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
//獲取 appBarLayout
AppBarLayout appBarLayout = (AppBarLayout) getChildAt(0);
if (dyConsumed > 0) {
//這種情況是當(dāng)tablayout懸浮的狀態(tài)
//獲取 tableLayout
TabLayout tableLayout = (TabLayout) appBarLayout.getChildAt(1);
for (int i = 0; i < tableLayout.getTabCount(); i++) {
TabLayout.Tab tab = tableLayout.getTabAt(i);
tab.setText(i + "");
tab.setIcon(R.mipmap.ic_launcher);
}
} else if (dyConsumed == 0) {
//這種情況是當(dāng)title要出現(xiàn)在屏幕上的時(shí)候
TabLayout tableLayout = (TabLayout) appBarLayout.getChildAt(1);
for (int i = 0; i < tableLayout.getTabCount(); i++) {
TabLayout.Tab tab = tableLayout.getTabAt(i);
tab.setText(strings[i]);
tab.setIcon(null);
}
}
}
}
activity里面的代碼我就不在贅述 就是fragment的切換再加上tablayout的tab設(shè)置的代碼，到此ui要求的效果已經(jīng)完成不从，其實(shí)這里面用到NestedScroll的知識(shí)惜姐，大家可以學(xué)習(xí)下，確實(shí)能實(shí)現(xiàn)不少酷炫的效果椿息，比如說(shuō)視覺(jué)差啊等一些通過(guò)傳統(tǒng)的手勢(shì)沖突解決方案解決不了的問(wèn)題都可以用這種方法來(lái)搞定歹袁，還是比較強(qiáng)大的。
