类似美团悬浮框的效果

具体代码:

ublic class MainActivity extends Activity implements OnScrollListener{

/**

* 自定义的MyScrollView

*/

private MyScrollView myScrollView;

/**

* 在MyScrollView里面的购买布局

*/

private LinearLayout mBuyLayout;

/**

* 位于顶部的购买布局

*/

private LinearLayout mTopBuyLayout;

@SuppressWarnings("deprecation")

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

myScrollView = (MyScrollView) findViewById(R.id.scrollView);

mBuyLayout = (LinearLayout) findViewById(R.id.buy);

mTopBuyLayout = (LinearLayout) findViewById(R.id.top_buy_layout);

myScrollView.setOnScrollListener(this);

//当布局的状态或者控件的可见性发生改变回调的接口

findViewById(R.id.parent_layout).getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

@Override

public void onGlobalLayout() {

//这一步很重要,使得上面的购买布局和下面的购买布局重合

onScroll(myScrollView.getScrollY());

System.out.println(myScrollView.getScrollY());

}

});

}

@Override

public void onScroll(int scrollY) {

int mBuyLayout2ParentTop = Math.max(scrollY, mBuyLayout.getTop());

mTopBuyLayout.layout(0, mBuyLayout2ParentTop, mTopBuyLayout.getWidth(), mBuyLayout2ParentTop + mTopBuyLayout.getHeight());

}

}

自定义的控件:

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);

}

/**

* 设置滚动接口

* @param onScrollListener

*/

public void setOnScrollListener(OnScrollListener onScrollListener) {

this.onScrollListener = onScrollListener;

}

@Override

protected void onScrollChanged(int l, int t, int oldl, int oldt) {

super.onScrollChanged(l, t, oldl, oldt);

if(onScrollListener != null){

onScrollListener.onScroll(t);

}

}

/**

*

* 滚动的回调接口

*

* @author xiaanming

*

*/

public interface OnScrollListener{

/**

* 回调方法, 返回MyScrollView滑动的Y方向距离

* @param scrollY

* 、

*/

public void onScroll(int scrollY);

}

}

activity的布局:

activity_main:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/parent_layout"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<ImageView

android:id="@+id/imageView1"

android:layout_width="match_parent"

android:layout_height="45dip"

android:scaleType="centerCrop"

android:src="@drawable/navigation_bar" />

<com.example.meituandemo.MyScrollView

android:id="@+id/scrollView"

android:layout_width="fill_parent"

android:layout_height="fill_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" >

<ImageView

android:id="@+id/iamge"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@drawable/pic"

android:scaleType="centerCrop" />

<include

android:id="@+id/buy"

layout="@layout/buy_layout" />

<ImageView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@drawable/one"

android:scaleType="centerCrop" />

<ImageView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@drawable/one"

android:scaleType="centerCrop" />

<ImageView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@drawable/one"

android:scaleType="centerCrop" />

</LinearLayout>

<include

android:id="@+id/top_buy_layout"

layout="@layout/buy_layout" />

</FrameLayout>

</com.example.meituandemo.MyScrollView>

</LinearLayout>

buy_layout布局:

<?xml version="1.0" encoding="UTF-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal"

android:layout_width="fill_parent"

android:layout_height="wrap_content" >

<ImageView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:background="@drawable/buy" />

</LinearLayout>

时间: 2024-10-10 12:38:28

类似美团悬浮框的效果的相关文章

Js实现一键分享效果--悬浮框状态

一.html框架 /*整个分享区域*/    <div id="share">         /*分享区域的顶端文字描述*/              <h3><img src="../img/chaohao.png">分享到...</h3>         /*分享区域的的具体分享网站链接*/              <ul>                    <li><a hr

“右侧悬浮框”页面特效

功能描述: 悬浮框固定在页面右下方,随着滚动条的滚动,悬浮框运动到固定位置. 实现效果: 编码思路: 获取滚动条滚动时,方块需要移动的目标位置(可视区域的高度-物体高度-滚动的高度). 套用运动框架. 示例代码:

使用悬浮框监听内存的使用状态 -- 附源码

源码下载地址:http://download.csdn.net/detail/hewence1/8176601 <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">先看一下效果:  显示当前内存使用率55% ,每一秒都刷新一次</span> 实现原理,在Service中创建一个悬浮框就可,在service中每秒钟访问计算一次单

mouseleave mouseout时候悬浮框不应该消失的时候消失了 css 解决办法

要实现的效果和代码思路 简单来说就是 用一个div包着喇叭和悬浮框 悬浮事件写在这个div上 鼠标悬浮到div上的时候 悬浮框出现 最终要做成鼠标从小喇叭移动到下面的框上的时候 下面框是不会消失的. 遇到的问题 遇到的问题是 当鼠标从喇叭移动到悬浮框上面的时候 鼠标移动到三角那个空隙的时候 下面的悬浮框就会消失 解决办法有的人说 mouseleave的时候用timeout判断一下,如果移到下面那个悬浮框上了(判断是否移动到悬浮框,给悬浮框写mouseentered事件),就把隐藏逻辑停掉就行了,

类似tabBar的切换页面效果(微信小程序)

微信小程序开发,我们经常遇到类似tabBar的页面切换效果:                  这种效果,微信小程序开发应该如何实现呢?项目源码: 页面切换-横向: 页面切换-竖向: 页面切换的需求是: 当点击任何一个标题时,选中标题的状态区别显示,页面切换到标题对应的页面:当滑动页面时,页面对应的标题呈现选中状态. 代码实现的逻辑是: 定义变量selectedTitle.标题的id.样式title-selected(当id和selectedTitle相等时).当点击任何一个标题时,将选中标题的

小米Adnroid默认禁止悬浮框的使用,导致开发的悬浮框无法接收事件

比如你建了一个悬浮框: WindowManager windowManager = getWindowManager(context); int screenWidth = windowManager.getDefaultDisplay().getWidth(); if (smallWindow == null) { smallWindow = new FloatWindowSmallView(context); if (smallWindowParams == null) { smallWin

Android用TabLayout实现类似网易选项卡动态滑动效果

此前我们用HorizontalScrollView也实现了类似网易选项卡动态滑动效果,详见 Android选项卡动态滑动效果这篇文章 这里我们用TabLayout来实现这一效果.TabLayout是Android Design Support Library库中的控件. Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个support库里面,Google给

js实现页面悬浮框

当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用. 当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示. <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .div1 { height:2000px; } .div2 { width:100%; height:35

基于Qt的类似QQ好友列表抽屉效果的实现

前段时间在忙毕业设计,所以一直没有更新博客.今天答辩完以后,将对我的毕业设计进行模块展示,供Qt初学者进行参考. 毕业设计题目:Linux系统下基于Qt的局域网即时通信系统设计与实现 其中我有一个类似于QQ的好友列表,然后对好友可以进行分组管理,毕设中具体效果图如下: 网上查寻到的设计思路: 1.采用QToolBox的方式,虽然看起来有点样子,但是并不是我们所熟悉的好友列表,比如:http://blog.csdn.net/qianguozheng/article/details/6719074