android固定悬浮框,安卓和iOS实现上滑停靠顶部悬浮框

最新推荐文章于 2022-12-25 20:31:57 发布
最新推荐文章于 2022-12-25 20:31:57 发布
阅读量388 收藏
点赞数
文章标签： android固定悬浮框

一言不合就上图

496c746efbc4

Android_view.gif

496c746efbc4

iOS_view.gif

1:安卓

很早以前写过一个类似的效果，不过当时的做法是：

在FrameLayout中布局listview和你想要在滑动时显示在顶部的布局并将属性设置为invisible。

在代码中动态添加想要悬停的布局为listview头布局(也就是悬停部分写两遍)。

监听listview的滚动(滚动时显示在布局中隐藏的部分达到悬停效果)

@Override

public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {

if (firstVisibleItem >= 1) {

//悬浮布局显示

invis.setVisibility(View.VISIBLE);

} else {

invis.setVisibility(View.GONE);

}

}

缺点：

布局不够灵活

不能处理事件(如果想要作为多个fragment的滑动指示器不能实现)。

安卓5.0后实现这样的布局就很简单了而且还能处理各种事件

做法：

layout代码

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

xmlns:app="http://schemas.android.com/apk/res-auto"

android:orientation="vertical"

android:background="@color/white"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/appbar_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/white"

app:elevation="0dp">

android:layout_width="match_parent"

android:layout_height="48dp"

android:gravity="center"

app:layout_scrollFlags="scroll"

android:background="@color/main_Green">

android:id="@+id/nav_tv_title"

style="@style/ShowTv1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="在线测评"

android:textColor="@color/white" />

android:id="@+id/banner"

android:layout_width="match_parent"

android:layout_height="170dp"

android:background="@mipmap/banner_loading"

app:canLoop="true"

app:layout_scrollFlags="scroll" />

android:layout_width="match_parent"

android:layout_height="1px"

android:background="@android:color/darker_gray" />

android:layout_width="match_parent"

android:layout_height="4dp"

android:background="#f0f0f0">

android:layout_width="match_parent"

android:layout_height="130dp"

android:orientation="horizontal">

android:layout_width="0dp"

android:layout_height="130dp"

android:layout_weight="1"

android:id="@+id/ll_consult"

android:gravity="center_horizontal"

android:background="@drawable/btn_bg_main"

android:orientation="vertical">

android:layout_width="80dp"

android:layout_height="80dp"

android:src="@mipmap/consult_icon"/>

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginLeft="1dp"

android:gravity="center_horizontal"

android:orientation="vertical">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="心理咨询师考试"

android:textColor="#3399cc"

style="@style/ShowTv2"/>

android:layout_marginTop="5dp"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="做自己的咨询师"

android:textColor="@color/default_gray"

style="@style/ShowTv4"/>

android:layout_width="1px"

android:layout_height="match_parent"

android:background="@android:color/darker_gray" />

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1"

android:orientation="vertical">

android:id="@+id/ll_hunyin"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight="1"

android:background="@drawable/btn_bg_main"

android:gravity="center_vertical"

android:orientation="horizontal"

android:paddingLeft="3dp"

android:paddingRight="3dp">

android:id="@+id/iv_home_icon_1"

android:layout_width="44dp"

android:layout_height="44dp"

android:src="@mipmap/hunyin_icon" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="5dp"

android:orientation="vertical">

android:id="@+id/tv_home_lable_1"

style="@style/ShowTv3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textColor="#f11e8a"

android:text="婚姻家庭咨询师" />

android:id="@+id/tv_home_contemt_1"

style="ShowTv5"

android:layout_marginTop="5dp"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="为幸福服务"

android:textColor="@color/default_gray" />

android:layout_width="match_parent"

android:layout_height="1px"

android:background="@android:color/darker_gray" />

android:id="@+id/ll_yingyang"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight="1"

android:background="@drawable/btn_bg_main"

android:focusable="true"

android:gravity="center_vertical"

android:orientation="horizontal"

android:paddingLeft="3dp"

android:paddingRight="3dp">

android:id="@+id/iv_home_icon_3"

android:layout_width="44dp"

android:layout_height="44dp"

android:focusable="false"

android:src="@mipmap/yingyang_icon1" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="5dp"

android:focusable="false"

android:orientation="vertical">

android:id="@+id/tv_home_lable_3"

style="ShowTv3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:focusable="false"

android:textColor="#ff742f"

android:text="营养师资格证" />

android:id="@+id/tv_home_contemt_3"

style="ShowTv5"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:focusable="false"

android:text="与健康同行"

android:layout_marginTop="5dp"

android:textColor="@color/default_gray" />

android:layout_width="match_parent"

android:layout_height="4dp"

android:background="#f0f0f0">

android:id="@+id/line_divider"

android:layout_width="match_parent"

android:layout_height="1px"

android:background="@android:color/darker_gray"

android:visibility="gone"

/>

android:id="@+id/vertical_recyclerView"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/white"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

/>

496c746efbc4

layout.png

注意点：

1：新属性app:layout_scrollFlags的使用，对应的值为：scroll，enterAlways，enterAlwaysCollapsed，snap，exitUntilCollapsed；也可以在代码中通过setScrollFlags(int)方法使用，app:layout_scrollFlags="scroll"就会跟着一起滚动如果不设置则在滑动的时候会悬停在顶部。

2： 下面必须使用RecyclerView。

页面代码

package com.ygxinjian.anhui.test_online.Fragment;

import android.content.Context;

import android.support.design.widget.AppBarLayout;

import android.support.v7.widget.LinearLayoutManager;

import android.support.v7.widget.RecyclerView;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TextView;

import android.widget.Toast;

import com.bigkoo.convenientbanner.ConvenientBanner;

import com.bigkoo.convenientbanner.adapter.CBPageAdapter;

import com.bigkoo.convenientbanner.adapter.CBViewHolderCreator;

import com.bigkoo.convenientbanner.listener.OnItemClickListener;

import com.chad.library.adapter.base.BaseQuickAdapter;

import com.chad.library.adapter.base.BaseViewHolder;

import com.nostra13.universalimageloader.core.ImageLoader;

import com.ygxinjian.anhui.test_online.Activity.Consult_Test_Activity;

import com.ygxinjian.anhui.test_online.Activity.Consult_Test_intros_Activity;

import com.ygxinjian.anhui.test_online.Controller.NetworkImageHolderView;

import com.ygxinjian.anhui.test_online.Model.JsEntry;

import com.ygxinjian.anhui.test_online.R;

import com.ygxinjian.anhui.test_online.TestOnlineApplication;

import com.ygxinjian.anhui.test_online.View.DividerItemDecoration;

import com.ygxinjian.anhui.test_online.utils.DevUtil;

import java.util.ArrayList;

import java.util.Arrays;

import java.util.List;

/**

* Created by handongqiang on 16/12/29.

*/

public class Fragment_Home extends BaseFragment implements View.OnClickListener{

private static final String TAG = "Fragment_Home";

private ConvenientBanner mConvenientBanner;

private RecyclerView mRecyclerView;

private AppBarLayout mAppBarLayout;

private View mLine;

private NewsAdapter mAdapter;

private LinearLayout ll_consult_click,ll_hunying_click,ll_yingyang_click;

List mData;

private String[] images = {"http://img2.imgtn.bdimg.com/it/u=3093785514,1341050958&fm=21&gp=0.jpg",

"http://img2.3lian.com/2014/f2/37/d/40.jpg",

"http://img2.3lian.com/2014/f2/37/d/39.jpg",

"http://f.hiphotos.baidu.com/image/h%3D200/sign=1478eb74d5a20cf45990f9df460b4b0c/d058ccbf6c81800a5422e5fdb43533fa838b4779.jpg",

"http://f.hiphotos.baidu.com/image/pic/item/09fa513d269759ee50f1971ab6fb43166c22dfba.jpg"

};

@Override

public View initView() {

View view = View.inflate(mActivity, R.layout.fragment_home, null);

ll_consult_click = (LinearLayout) view.findViewById(R.id.ll_consult);

ll_hunying_click = (LinearLayout) view.findViewById(R.id.ll_hunyin);

ll_yingyang_click = (LinearLayout) view.findViewById(R.id.ll_yingyang);

ll_consult_click.setOnClickListener(this);

ll_hunying_click.setOnClickListener(this);

ll_yingyang_click.setOnClickListener(this);

mConvenientBanner = (ConvenientBanner) view.findViewById(R.id.banner);

mAppBarLayout = (AppBarLayout) view.findViewById(R.id.appbar_layout);

mLine = view.findViewById(R.id.line_divider);

mRecyclerView = (RecyclerView) view.findViewById(R.id.vertical_recyclerView);

mRecyclerView.addItemDecoration(new DividerItemDecoration(getActivity(), DividerItemDecoration.VERTICAL_LIST));

mAdapter = new NewsAdapter(getActivity());

//添加头尾布局

// mAdapter.addHeaderView(getView());

mConvenientBanner.setPages(new CBViewHolderCreator() {

@Override

public NetworkImageHolderView createHolder() {

return new NetworkImageHolderView();

}

}, Arrays.asList(images))

.setPageIndicator(new int[]{R.mipmap.ic_page_indicator, R.mipmap.ic_page_indicator_focused})

.setPageIndicatorAlign(ConvenientBanner.PageIndicatorAlign.CENTER_HORIZONTAL);

initAdapter();

initBanner();

initLine();

return view;

}

private void initLine() {

mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

@Override

public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

if(Math.abs(verticalOffset) >= mAppBarLayout.getTotalScrollRange()){

mLine.setVisibility(View.VISIBLE);

}else{

mLine.setVisibility(View.GONE);

}

}

});

}

private void initBanner() {

mConvenientBanner.startTurning(3000);

// 进入Banner

mConvenientBanner.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(int position) {

DevUtil.showShortInfo(mActivity,"心理咨询师考试");

}

});

}

@Override

public void onClick(View v) {

switch (v.getId()){

case R.id.ll_consult:

DevUtil.gotoActivity(mActivity, Consult_Test_Activity.class);

break;

case R.id.ll_hunyin:

DevUtil.gotoActivity(mActivity, Consult_Test_intros_Activity.class);

break;

case R.id.ll_yingyang:

DevUtil.showShortInfo(mActivity,"题库整理中");

break;

}

}

/**

* 模拟首页数据

* @return

*/

private List mockData(){

List data = new ArrayList<>();

JsEntry jsEntry = new JsEntry();

jsEntry.time = "15小时前";

jsEntry.title = "这些情商的技巧，你是不是都掌握了？";

jsEntry.authorName = "JayChou";

jsEntry.cover ="http://upload-images.jianshu.io/upload_images/2785318-5306a632b46a8c27.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1020/q/80";

JsEntry jsEntry2 = new JsEntry();

jsEntry2.time = "10小时前";

jsEntry2.title = "除了阴谋，《锦绣未央》里还有哪些温情？";

jsEntry2.authorName = "菇凉似梦";

jsEntry2.cover = "http://upload-images.jianshu.io/upload_images/2881988-b217e714eb05f88e.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1020/q/80";

for (int i=0;i<20;i++){

if(i % 2 == 0){

data.add(jsEntry);

}else{

data.add(jsEntry2);

}

}

return data;

}

/**

* 设置RecyclerView属性

*/

private void initAdapter() {

mRecyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));

mAdapter.openLoadAnimation();

mRecyclerView.setAdapter(mAdapter);//设置adapter

//设置item点击事件

mAdapter.setOnRecyclerViewItemClickListener(new BaseQuickAdapter.OnRecyclerViewItemClickListener() {

@Override

public void onItemClick(View view, int position) {

Toast.makeText(mActivity, ""+position, Toast.LENGTH_SHORT).show();

}

});

}

/**

* RecycleView的adapter

*/

class NewsAdapter extends BaseQuickAdapter {

public NewsAdapter(Context context) {

super(context,R.layout.news_label_item,mockData());

}

@Override

public void convert(BaseViewHolder helper, JsEntry mData) {

helper.setText(R.id.item_content, mData.title)

.setText(R.id.author_name, mData.authorName)

.setText(R.id.publish_time, mData.time);

ImageLoader.getInstance().displayImage(mData.cover, (ImageView) helper.getView(R.id.cover));

}

}

}

至此安卓端这个简单的效果就实现了

2：iOS端实现方法

思路：

最底层为UIScrollView，布局上依次添加banner，悬停的UIView布局和Tableview.

通过代码判断UIScrollView的滚动实现悬停

核心代码：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

{

//悬浮框

if (_bottomScrollView.contentOffset.y < self.banner.bounds.size.height) {

_bottomScrollView.delegate = nil;

CGPoint contentOffsetPoint = _bottomScrollView.contentOffset;

_bottomScrollView.contentOffset = contentOffsetPoint;

_bottomScrollView.delegate = self;

m_tabel.scrollEnabled =NO; //设置tableview 不能滚动

}else if(_bottomScrollView.contentOffset.y > self.banner.bounds.size.height){

m_tabel.scrollEnabled =YES;

_bottomScrollView.delegate = nil;

_bottomScrollView.contentOffset = CGPointMake(0, self.banner.bounds.size.height);

_bottomScrollView.delegate = self;

}

}

496c746efbc4

老规矩-喜欢就点个赞呗 T.T .gif

weixin_39949673
关注
安卓和ios的ui设计区别_UI设计中IOS和安卓的设计差异
weixin_36194102的博客
01-17 2978
设计师在做app的时候很少考虑两个平台的差异，在设计上用一套设计稿去做，其实有很多不一样的地方。今天我就针对UI设计中IOS和安卓的设计差异进行简单的说明。iOS与安卓设计上的差异主要从系统差异、成本考虑、用户习惯3个方面来阐述。一. 系统差异1. 物理按键对返回的影响安卓的物理按键以及屏幕导航按键的差异是安卓的返回键更加方便，iOS只有home键，随着全屏的出现，可能会打破这种差异。因此在设计返...
安卓和ios的ui设计区别_安卓界面设计与iPhone界面设计区别在哪里？
weixin_32493245的博客
01-17 3042
据美国科技媒体最新报道，谷歌将推出一个新的设计语言，统一安卓应用的用户界面设计，届时将会出现新的按钮等界面要素。安卓生态的用户界面，将实现类似微软Metro和iOS的统一。这个消息一出，瞬间传遍移动互联网行业。可以说是震惊APP设计界的一个重磅新闻。起码对于搞安卓界面设计和安卓开发的小伙伴们来说，是一个无比的好消息。起码以后不用为了适配安卓的分辨率而烦恼，只需要做好一套标准的界面设计就行。前提是按...
Android ScrollView向上滑动控件顶部悬浮效果实现
09-29
Android ScrollView向上滑动控件顶部悬浮效果实现，请参考文章：http://blog.csdn.net/viviwen123/article/details/39669811
android实现顶部悬浮效果
weixin_44659286的博客
02-13 1764
效果 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_wid
android固定悬浮框,Android实现全局悬浮框
weixin_30942339的博客
05-25 635
本文实例为大家分享了Android实现全局悬浮框的具体代码，供大家参考，具体内容如下效果图：代码实现：Androidmanifest.xml添加弹框权限自定义悬浮窗类FloatWindow.javapublic class FloatWindow implements View.OnTouchListener {private Context mContext;private WindowMana...
Android项目实战（二十）：浅谈ListView悬浮头部展现效果
defukwanmcth26174的博客
07-04 205
　　先看下效果：需求是 滑动列表 ，其中一部分视图（粉丝数，关注数这一部分）在滑动到顶端的时候不消失，而是停留在整个界面头部。 我们先分析要解决的问题： 1、如何实现列表ListView顶部视图跟随ListView一起滑动 2、如何实现滑动过程中需要停留在顶部的视图 解决： 第一个问题，实现ListView与顶部视图一起滑动，ListView提供一个方法，add...
Android Scrollview上滑停靠—悬浮框停靠在标题栏下方（防微博详情页）
11-27
Android Scrollview上滑停靠—悬浮框停靠在标题栏下方（防微博详情页）－－完整demo
微信小程序开发生成二维码,安卓和IOS都通用
06-03
微信小程序开发生成二维码,安卓和IOS都通用
上滑停靠顶端的悬浮框
07-11
在移动应用开发中，"上滑停靠顶端的悬浮框"是一种常见的交互设计，它能够提升用户的使用体验，尤其是在浏览长列表或者滚动内容时。这种设计常见于许多App，如美团、大众点评等，用于显示重要的功能或促销信息。本文...
uni-app整包更新与热更新方案(安卓和IOS)
唐先森的博客
12-25 6691
提供一种uni-app整包更新与热更新的方案，包括APP和后台客户端版本管理。
Android实现悬浮式顶部和底部标题栏效果
06-18
Android实现了仿百度贴吧的悬浮式顶部和底部标题栏的效果，项目中含：源码+效果图+项目结构图 教程地址：http://blog.csdn.net/yangyu20121224/article/details/9122517
android listView顶部悬浮效果实现
08-22
android简单方式实现listview顶部悬浮将
android固定悬浮窗口,Android Window 和 WindowManager实现悬浮小窗
weixin_32350433的博客
05-26 383
window 表示一个窗口概念 ，我们在桌面看到一个悬浮的窗口这个就需要 window来实现，window是一个抽象类，实现是PhoneWindow，android 所有的视图都是通过window来呈现的，activity ，dialog，toast，都是附加在window上，因此window是view的管理者先看一下window的使用吧WindowManager windowManager = ...
Android 下拉式抽屉折叠动画
meixi_android的博客
11-16 2621
自定义listview工具类1、 public class ViewMeasureUtils { /** * 根据父 View 规则和子 View 的 LayoutParams，计算子类的宽度(width)测量规则 * * @param view */ public static int getChildWidthMeasureSpec...
iphone悬浮球怎么设置_【悬浮菜单】安卓悬浮&手势助手
weixin_39893274的博客
10-20 387
封面图：酷安网截图这款【悬浮菜单】，强烈推荐安卓机安装，我也购买了终身会员的高级功能，拥有的不只是iPhone小白点的功能，还包括多功能【手势导航】【应用小窗】【晃动手势】【消息弹窗】等诸多功能，定制性超强。先来看视频感受一下（还有很喜欢的晃动手势，录屏无法展示，太可惜了）【悬浮菜单】使用https://www.zhihu.com/video/1245996016836739072机型：华为P30...
Android view滑动悬浮固定效果实现-踩坑记
Duncan的Android专栏
04-19 1681
android新特性：使用CollapsingToolbarLayout实现折叠效果及问题解决[有比较严重的卡顿感]https://www.jianshu.com/p/485223349703CollapsingToolbarLayout有滑动折叠有严重的卡顿，不顺畅，实现一波之后，非常不推荐。 推荐以下方式，需要悬浮的View整2个，自定义ScrollView中监听滑动 隐藏显示。Android...
【Android -- UI 开发】RecyclerView 实现顶部悬浮效果
Kevin Learn Android
07-15 1516
本文介绍了 Android RecyclerView 悬浮效果
Android 滑动组件悬浮固定在顶部
ganshenml的专栏
11-10 7041
要想实现的效果是如下： 场景：有些时候是内容中间的组件当滑动至顶部的时候固定显示在顶部。 实现的思路： 1.目标组件（button）有两套，放在顶部和内容中间； 2.当内容中间的组件滑动至顶部栏位置时控制显示/隐藏顶部和中间的组件（涉及到组件获取在屏幕的位置知识点）； activity代码： public class MainActivity extends A
Android自定义ScrollView（实现上滑停靠，悬浮部分在标题栏下方（仿微博详情页）
JiYaRuo的博客
01-08 1701
微博的详情页效果 我们要实现的效果： 1.自定义MyScrollView import android.content.Context; import android.util.AttributeSet; import android.widget.ScrollView; /** * 自定义ScrollView */ public class MyScrollView ...
安卓和iosinput框兼容性问题
最新发布
09-04
安卓和iOS的输入框兼容性问题主要涉及以下几个方面： 1. 键盘样式：安卓和iOS的键盘样式有所不同，包括键盘的外观和布局。在开发过程中，应该针对不同平台设计相应的布局和样式。 2. 输入事件：安卓和iOS的输入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值