Android小技巧之最快速简单的悬浮TAB 有更新!

  aohanyao

先看效果图吧

原理

其实实现这样的效果是十分的简单的,继承ScrollView,监听onScrollChanged,根据滑动的距离,不断的layout需要悬浮的tab的位置。这只是一个简单的demo,主要提供的是一种思路,利用到实际中还是有点距离。

编码

  1. 继承ScrollView,暴露一个外接口,重写onScrollChanged方法,向接口提供scrollY位置。
  2. getViewTreeObserver().addOnGlobalLayoutListener,通过添加视图观察者监听来初始化tab的位置。
	
	public class ScrollLevitateTabView extends ScrollView {
	    private OnScrollLintener onScrollLintener;
	    public void setOnScrollLintener(OnScrollLintener onScrollLintener) {
	        this.onScrollLintener = onScrollLintener;
	    }
	    public ScrollLevitateTabView(Context context) {
	        this(context,null);
	    }
	
	    public ScrollLevitateTabView(Context context, AttributeSet attrs) {
	        this(context, attrs,0);
	    }
	
	    public ScrollLevitateTabView(Context context, AttributeSet attrs, int defStyleAttr) {
	        super(context, attrs, defStyleAttr);
	        init();
	    }
	    private void init() {
	        //增加视图监听 在整个视图树绘制完成后会回调
	        getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
	            @Override
	            public void onGlobalLayout() {
	                onScrollLintener.onScroll(getScrollY());
	            }
	        });
	    }
	    @Override
	    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
	        super.onScrollChanged(l, t, oldl, oldt);
	        if (onScrollLintener != null) {
	            onScrollLintener.onScroll(t);
	        }
	    }
	
	    public interface OnScrollLintener{
	        void onScroll(int scrollY);
	    }
	}

布局中使用

直接将ScrollLevitateTabView作为根布局,嵌套一个FrameLayout方便更改tab的位置。FrameLayout中放真正的tab,嵌套的其它ViewGroup中正常布局,必须留有一个TAB的占位View


	<?xml version="1.0" encoding="utf-8"?>
	<aohanyao.com.scolltabview.ScrollLevitateTabView xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/sltv"
	android:layout_width="match_parent"
	android:layout_height="match_parent">
	
	    <FrameLayout
	        android:layout_width="match_parent"
	        android:layout_height="wrap_content">
	
	        <LinearLayout
	            android:layout_width="match_parent"
	            android:layout_height="wrap_content"
	            android:orientation="vertical">
	
	            ................放自己的View
	
	            <!--占位的Tab-->
	            <TextView
	                android:id="@+id/flow_tab2"
	                android:layout_width="match_parent"
	                android:layout_height="48dp"
	                android:textColor="#fff"
	                android:textSize="20sp" />
	            <!--占位的Tab-->
	            ................放自己的View
	        </LinearLayout>
	        <!--真正的Tab-->
	        <TextView
	            android:id="@+id/flow_tab"
	            android:layout_width="match_parent"
	            android:layout_height="48dp"
	            android:background="#03a9f4"
	            android:gravity="center"
	            android:text="这里是悬浮的TAB"
	            android:textColor="#fff"
	            android:textSize="20sp" />
	        <!--真正的Tab-->
	    </FrameLayout>
	</aohanyao.com.scolltabview.ScrollLevitateTabView>


MainActivity

没什么代码量,FVB和设置滑动监听,然后在回调方法中不断的layout真正tab的位置



	public class MainActivity extends AppCompatActivity implements ScrollLevitateTabView.OnScrollLintener {
	    //外层的ScrollView
	    private ScrollLevitateTabView sltv;
	    //真正的Tab
	    private TextView flow_tab;
	    //占位的Tab
	    private TextView flow_tab2;
	
	    @Override
	    protected void onCreate(Bundle savedInstanceState) {
	        super.onCreate(savedInstanceState);
	        setContentView(R.layout.activity_main);
	        flow_tab = (TextView) findViewById(R.id.flow_tab);
	        flow_tab2 = (TextView) findViewById(R.id.flow_tab2);
	        sltv = (ScrollLevitateTabView) findViewById(R.id.sltv);
	        //设置监听
	        sltv.setOnScrollLintener(this);
	    }
	
	    @Override
	    public void onScroll(int scrollY) {
	        //layout Tab的位置
	        int top = Math.max(scrollY, flow_tab2.getTop());
	        flow_tab.layout(0, top, flow_tab.getWidth(), top + flow_tab.getHeight());
	    }
	}
	

最终就能达到效果了。

源码地址

软广

来都来了,就给个关注吧,时不时会悄悄的推送一些小技巧的文章~~!
FullScreenDeveloper