用過大眾點(diǎn)評和美團(tuán)的都應(yīng)該看到過這樣一個效果<code>商品頁不斷向上滑動炕桨,購買的按鈕一直懸浮在那里</code>秤朗。我做了一個類似的效果,閑話不多說光坝,先上圖了。
懸浮窗-1.gif
用Android Studio的同學(xué)教大家做gif的方法
- 首先保證全程手機(jī)與Android Studio連接
- 將項(xiàng)目運(yùn)行在手機(jī)上甥材,然后點(diǎn)擊下圖按鈕盯另,點(diǎn)擊Start Recording開始錄制
錄制.png
- 接下來你就瘋狂操作你的手機(jī),點(diǎn)擊Stop Recording保存視頻
- 然后就是將視頻轉(zhuǎn)化為gif洲赵,這一步需要用到PS鸳惯。直接丟給UI,讓她幫你做吧叠萍,增進(jìn)一下彼此的感情芝发。
接下來開始講懸浮窗的實(shí)現(xiàn)過程。
- 首先需要自定義ScrollView苛谷,具體代碼如下后德。主要是自定義一個接口,將滾動時距離頂部的距離傳出去供外部調(diào)用抄腔。
<pre>public class MyScrollView extends ScrollView{ private OnScrollListener onScrollListener; public MyScrollView(Context context) { this(context, null); } public MyScrollView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public MyScrollView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle); } public void setOnScrollListener(OnScrollListener onScrollListener) { this.onScrollListener = onScrollListener; } @Override public int computeVerticalScrollRange() { return super.computeVerticalScrollRange(); } @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { super.onScrollChanged(l, t, oldl, oldt); if(onScrollListener != null){ onScrollListener.onScroll(t); } } public interface OnScrollListener{ public void onScroll(int scrollY); }}
</pre> - 然后是布局瓢湃,如下圖亮钦。由于布局比較簡單冀膝,就不上代碼了。在頂部創(chuàng)建一個和中間創(chuàng)建一個同樣的懸浮窗账胧。
布局.png
- 先講一下思路:1.開始時將兩個布局重合2.當(dāng)中間的懸浮窗距離頂部的距離大于ScrollView滑動距離時悟耘,頂部懸浮窗的位置就是中間懸浮窗的位置落蝙,一直跟著中間懸浮窗3.當(dāng)中間懸浮窗距離頂部的距離小于ScrollView滑動距離時,頂部懸浮窗的位置就是滑動的距離,一直懸浮在頂部筏勒。
<pre>public class SuspendActivity extends Activity implements MyScrollView.OnScrollListener{ /** * 自定義的MyScrollView */ private MyScrollView myScrollView; /** * 在MyScrollView里面的購買布局 */ private TextView mBuyLayout; /** * 位于頂部的懸浮窗 */ private TextView mTopBuyLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_suspend); myScrollView = (MyScrollView) findViewById(R.id.scrollView); mBuyLayout = (TextView) findViewById(R.id.buy); mTopBuyLayout = (TextView) findViewById(R.id.top_buy_layout); myScrollView.setOnScrollListener(this); //當(dāng)布局的狀態(tài)或者控件的可見性發(fā)生改變回調(diào)的接口 findViewById(R.id.parent_layout).getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { //這一步很重要移迫,使得上面的購買布局和下面的購買布局重合 onScroll(myScrollView.getScrollY()); } }); } @Override public void onScroll(int scrollY) { int mBuyLayout2ParentTop = Math.max(scrollY, mBuyLayout.getTop()); mTopBuyLayout.layout(0, mBuyLayout2ParentTop, mTopBuyLayout.getWidth(), mBuyLayout2ParentTop + mTopBuyLayout.getHeight()); }}
</pre>