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>