Android简单的浮窗
AngusD45
8年前
<p>用过大众点评和美团的都应该看到过这样一个效果<code>商品页不断向上滑动,购买的按钮一直悬浮在那里</code>。我做了一个类似的效果,闲话不多说,先上图了。</p> <p style="text-align: center;"><img alt="简单的浮窗 - 简书" src="https://simg.open-open.com/show/abb4f3b7ead9ff9f276f21ce02563cd8.gif"></p> <p> </p> <h3>用Android Studio的同学教大家做gif的方法</h3> <ul> <li>首先保证全程手机与Android Studio连接</li> <li>将项目运行在手机上,然后点击下图按钮,点击Start Recording开始录制</li> </ul> <p style="text-align: center;"><img alt="简单的浮窗 - 简书" src="https://simg.open-open.com/show/3c5c104d4b78fd273a85eb326036f51d.png"></p> <p style="text-align: center;">录制</p> <ul> <li>接下来你就疯狂操作你的手机,点击Stop Recording保存视频</li> <li>然后就是将视频转化为gif,这一步需要用到PS。直接丢给UI,让她帮你做吧,增进一下彼此的感情。</li> </ul> <h3>接下来开始讲悬浮窗的实现过程。</h3> <ul> <li>首先需要自定义ScrollView,具体代码如下。主要是自定义一个接口,将滚动时距离顶部的距离传出去供外部调用。 <pre> <code class="language-java">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); }}</code></pre> </li> <li>然后是布局,如下图。由于布局比较简单,就不上代码了。在顶部创建一个和中间创建一个同样的悬浮窗。</li> </ul> <p style="text-align: center;"><img alt="简单的浮窗 - 简书" src="https://simg.open-open.com/show/e3c309b35a0a29f5f32bb5b25f47ee19.png"></p> <p style="text-align: center;">布局</p> <ul> <li>先讲一下思路:1.开始时将两个布局重合2.当中间的悬浮窗距离顶部的距离大于ScrollView滑动距离时,顶部悬浮窗的位置就是中间悬浮窗的位置,一直跟着中间悬浮窗3.当中间悬浮窗距离顶部的距离小于ScrollView滑动距离时,顶部悬浮窗的位置就是滑动的距离,一直悬浮在顶部。 <pre> <code class="language-java">public class SuspendActivity extends Activity implements MyScrollView.OnScrollListener{ /<strong> <em> 自定义的MyScrollView </em>/ private MyScrollView myScrollView; /</strong> <em> 在MyScrollView里面的购买布局 </em>/ private TextView mBuyLayout; /<em>* </em> 位于顶部的悬浮窗 */ 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); //当布局的状态或者控件的可见性发生改变回调的接口 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()); }}</code></pre> </li> </ul> <p>参考: <a href="/misc/goto?guid=4959674906689088368">http://blog.csdn.net/xiaanming/article/details/17761431</a></p> <p><br> </p> <p><a href="/misc/goto?guid=4959674906795772614">文/刘小帅</a>(简书)<br> </p>