自定义behavior-仿华为应用市场

最新推荐文章于 2020-12-20 10:31:02 发布
最新推荐文章于 2020-12-20 10:31:02 发布
阅读量282 收藏
点赞数
文章标签： 移动开发
原文链接：https://juejin.im/post/5b3d9209e51d451985656b2e
版权

Behavior 配合 CoordinatorLayout 可以实现很多酷炫的交互,掌握自定义 Behavior 也是很大的提升 。先看看要实现的效果如下：

上面这个效果是「华为应用市场」的首页效果。使用 RecycleView（ListView）也是可以实现的。不过需要对滑动事件的处理相对较多。如果使用自定义 behavior 就不需要那么复杂了。

自定义 behavior 有两种：

  1. 一个 view 依赖另外一个 view。（A 依赖于 B ，B 的状态发生变化，A 也发生变化）
  2. 一个view 监听 CoordinateLayout 中嵌套子 View 的滑动状态。

观察上面的效果可以很明显的发现: 搜索框和 导航栏都是跟随 Banner 的滑动做出相应变化。这里我们使用第一种方法来完成。（自定义搜索框可以查看源码）

先看看布局：

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:background="@android:color/transparent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <com.bigkoo.convenientbanner.ConvenientBanner
                android:id="@+id/convenientBanner"
                android:layout_width="match_parent"
                android:layout_height="@dimen/bannner_height"
                app:canLoop="true"
                app:layout_collapseMode="pin" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:minHeight="?attr/actionBarSize"
                app:contentInsetStart="0dp"
                app:layout_collapseMode="pin">

                <TextView
                    android:id="@+id/tab"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/white"
                    android:gravity="center"
                    android:text="@string/market_title"
                    android:textSize="20sp" />

            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/net"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="@dimen/item_height"
                android:background="@drawable/sp_itembg_one"
                android:gravity="center"
                android:text="Item1"
                android:textColor="@color/white"
                android:textSize="32sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="@dimen/item_height"
                android:background="@drawable/sp_itembg_two"
                android:gravity="center"
                android:text="Item2"
                android:textColor="@color/white"
                android:textSize="32sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="@dimen/item_height"
                android:background="@drawable/sp_itembg_three"
                android:gravity="center"
                android:text="Item3"
                android:textColor="@color/white"
                android:textSize="32sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="@dimen/item_height"
                android:background="@drawable/sp_itembg_four"
                android:gravity="center"
                android:text="Item4"
                android:textColor="@color/white"
                android:textSize="32sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="@dimen/item_height"
                android:background="@drawable/sp_itembg_five"
                android:gravity="center"
                android:text="Item5"
                android:textColor="@color/white"
                android:textSize="32sp" />
        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

    <com.ruomiz.coordinatorheader.SearchBar
        android:id="@+id/searchBar"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_gravity="top"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="160dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        app:layout_behavior="@string/scrollingBehavior"/>

</android.support.design.widget.CoordinatorLayout>
复制代码

先实现搜索框跟随 banner 位移效果的 自定义Behavior（代码很简单）

//需要重写有两个参数的构造函数 
public MarketScrollingBehavior(Context context, AttributeSet attrs) {
    super(context, attrs);
}

@Override
public boolean layoutDependsOn(CoordinatorLayout parent, SearchBar child, View dependency) {
     return dependency != null && dependency instanceof AppBarLayout;
}

@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, SearchBar child, View dependency) {
        float y = dependency.getY();	
        int totalScrollRange = ((AppBarLayout) dependency).getTotalScrollRange();//获取 AppBarLayout的高度
        if (Math.abs(y) < totalScrollRange * 0.6) { 
            if (child.getCurrentState() == SearchBar.State.OPEN) {     //当searchBar处于展开状态
                child.setTranslationY(y); 
            } else if (child.getCurrentState() == SearchBar.State.EXPANDING){ //当searchBar展开和收缩的过程中
                child.setTranslationY(y);
            }
        }
        return true;
    }
复制代码

监听 AppBarLayout 的位移，导航栏跟随 banner 滑动 颜色渐变，搜索框也随之展开或收缩。

mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        if (verticalOffset == 0) {
            mTab.setTextColor(Color.argb(255, 255, 255, 255)); 
            mTab.setBackgroundColor(Color.argb(0, 255, 255, 255)); 
        } else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {
            mTab.setTextColor(Color.argb(255, 0, 0, 0));
            mTab.setBackgroundColor(Color.argb(255, 255, 255, 255));
        } else {
            float percent = (Math.abs(verticalOffset) * 100 / appBarLayout.getTotalScrollRange()) * 0.01f;
            int alpha = (int) Math.floor(percent * 255);  // 颜色的透明通道 255为不透明  
            if (Math.abs(verticalOffset) * 4 > appBarLayout.getTotalScrollRange()) {
                mTab.setTextColor(Color.argb(alpha, 0, 0, 0)); 			//Tab 字体颜色渐变
            } else {
                mTab.setTextColor(Color.argb(255 - alpha * 4, 255, 255, 255));
            }
            mTab.setBackgroundColor(Color.argb(alpha, 255, 255, 255));	//Tab 背景逐渐透明
    
            if (Math.abs(verticalOffset) > appBarLayout.getTotalScrollRange() * 0.6) {
                if (mSearchBar.getCurrentState() == SearchBar.State.OPEN) {
                    mSearchBar.closeAnimation(); //搜索框收缩动画
                }
            } else {
                if (mSearchBar.getCurrentState() == SearchBar.State.CLOSED) {
                    mSearchBar.startAnimation(); //搜索框展开动画
                }
            }

        }
    }
});
复制代码

最后实现的效果如下：

具体请查看源码

weixin_34320724
关注
案例38在华为设备上实施网络 QoS 限速
qq_43416206的博客
11-04 399
通过监控进入网络的某一流量的规格，将它限制在一个允许的范围之内，若某个连接的报文流量过大，就对流量进行惩罚，比如丢弃报文，或重新设置该报文的优先级(比如限制 HTTP 报文不能占用超过50%的网络带宽)，以保护网络资源和运营商的利益不受损害。监管实施位置如图 38-1 所示，在路由器的入方向实施了监管，使得高速链路不对低速链路形成冲击。[HW-R1lacInameXIANSU //使用ACL对流量分类，注意，配置OoS的难点就在于如何对流量进行分类，可以根据自己的需要来定义流量，ACL是常用方式之一。
【愚公系列】2023年10月 WPF+上位机+工业互联 046-行为封装
时光隧道
09-25 4万+
WPF中的行为封装是将特定的行为包装在可重用的组件中，以便在任何UI元素中重复使用。WPF中的行为封装使用附加属性和依赖属性实现。附加属性是在不修改元素本身的情况下添加属性的方法。例如，可以将一个“拖放”行为作为附加属性添加到元素上，从而启用元素的拖放功能。使用依赖属性来实现行为封装时，可以使属性自动更新，从而确保行为的正确实现。依赖属性提供了一种机制，可以检测到属性值的更改，并通过事件来通知任何使用该属性的对象。行为封装也可以通过使用命令来实现。
自定义Behavior
wzy885588的专栏
03-23 1645
Behavior简介CoordinatorLayout是个很牛的布局容器，使用它可以很方面的实现很多效果，比如支付宝首页的折叠效果，知乎首页等等，Behavior是它的一个内部抽象类，声明Behavior属性的View可以和他它依赖的兄弟元素交互，当然，这些元素都必须是CoordinatorLayout的子元素。what?该类是CoordinatorLayout子View之间交互的插件，有了它Co...
高级UI-自定义Behavior
weixin_30337251的博客
04-06 140
Behavior本身是一个抽象类，可以用于两个view之间的状态监听，也可用于某个view监听CoordinateLayout里面的所有控件滑动状态，实现自定义Behavior则可以实现任意两个view之间的状态变化 简单使用 这里我们自定义一个Behavior，继承自CoordinatorLayout.Behavior，实现观察者随着被观察者的位置...
自定义Behavior —— 仿知乎，FloatActionButton隐藏与展示
BillyLu的博客
03-02 801
使用CoordinatorLayout打造各种炫酷的效果 自定义Behavior —— 仿知乎，FloatActionButton隐藏与展示 前段时间写了一篇博客使用CoordinatorLayout打造各种炫酷的效果,主要介绍了APPBarLayout和CollapsingToolbarLayout的基本用法，AppBarLayout主要用来实现在滚动的时候ToolBar的 隐藏
CoordinatorLayout自定义Behavior
jxf_access的专栏
03-15 700
1.Behavior简介 Behavior是CoordinatorLayout里面的一个内部类，通过它我们可以与 CoordinatorLayout的一个或者多个子View进行交互，包括 drag，swipes, flings等手势动作。 今天 我们主要着重介绍里面的几个方法 方法 解释 boolean layoutDependsOn(Coordi
自定义 Behavior
weixin_30314813的博客
10-21 104
自定义Behavior 允许在WCF 构建运行时环境和消息处理管道的关键点上插入代码。 实现自定义行为的步骤： 1. 创建一个实现了 Inspector、Selector、Formatter、或Invoker 接口的类； 2. 创建一个实现了下列行为接口之一的类：IServiceBehavior、IEndpointBehavior、IOperationBehavior或IContr...
华为策略路由-旁挂IPGUARD安全网关
11-23
[HUAWEI] traffic behavior safe [HUAWEI-behavior-safe] redirect next-hop 10.0.32.1 # 应用至traffic-policy策略 [HUAWEI] traffic policy safe [HUAWEI-trafficpolicy-safe] classifier safe behavior safe ```...
华为acl怎么生效_华为交换机ACL配置的一些东西
weixin_39958559的博客
12-20 2552
这是华为ACL配置中流策略的配置命令。华为设备配置ACL不像Cisco的那样可以直接在接口下配置ACL来应用。华为需要先配ACL，然后配流分类(traffic classifier tc1)，将ACL和流分类绑定，再配流行为(traffic behavior tb1)，接着配置流策略(traffic policy tp1)，最后把策略应用到接口下，让ACL生效。具体例子如下：步骤1 配置ACL[Q...
自定义Behavior简单教程
08-14
自定义Behavior Demo，可以结合任何View使用，可以自定义动画等！详解请移步严振杰的博客：http://blog.csdn.net/yanzhenjie1003/article/details/52205665
仿华为应用市场应用
01-23
Android6.0运行时权限 RecycleView高级封装，万能RecycleView，试用90%以上布局 通过高度计算设计沉浸式状态栏 多种自定义控件(比如自定义轮播图，下载进度Progress，SubTabNavitagor,Flowlayout,阻尼会弹View，伸缩TextView等) 功能强大，健壮，完善的网络请求库(基于Rxjava2，retrofit2，GreenDAO，Okhttp3的网络请求库，支持多文件下载，断网重新请求，Rxjava生命周期管理，缓存数据，断电续传，异常处理....) 利用AIDL缓存清理 观察者模式多页面下载进度同步 自定义带进度WebView 应用下载后自定义安装 查找应用，卸载，安装 所有应用数据缓存清理 自定义Activity跳转动画 阻尼回弹 沉浸式状态栏 根据数据请求结果动态更新界面 自定义Activity切换动画
Android代码-自定义CoordinatorLayout.Behavior仿美团商家详情界面实现内容复杂联动
08-06
behavior-learn 该项目是为了练习-> 使用CoordinatorLayout.Behavior 实现页面复杂联动效果 代码模仿实现美团商家详情界面内容联动 download apk 开发使用知识点顺带涉及到： Scroller Handler 实现View自动滑动 View属性动画 触摸事件分发机制 ConstraintLayout约束布局 emmmmmmm 继续加油咯~
Android 高仿华为Tab页的滑动导航功能
04-02
Android 高仿华为Tab页的滑动导航功能，分别用LinearLayout和HorizontalScrollView实现
Android项目源码纯手工仿华为商城应用源码
07-29
本项目是一个简单仿华为商城的项目，没有用任何第三方类库，HttpClient，数据库存储，内部缓存和外部缓存都是作者独立写的，目前项目处于一个打开就崩的状态，不知道是不是我的模拟器问题还是项目问题，对本项目感兴趣的可以自己下载了解一下。www.之前也介绍过很多类似的项目，在www.搜索“商城”就可以找到下载。
自定义behavior
xiaoxiao_ming的博客
11-14 293
在自定义Behavior的时候，我们需要关心的两组四个方法。 某个View监听另一个view的状态变化，例如大小、位置、显示状态等 某个view监听CoordinatorLayout里的滑动状态 对于第一种情况，我们关心的是： layoutDependendsOn和onDependentViewChanged方法； 对于第二种情况，我们关心的是： onStartNestedScroll
自定义Behavior（一）
weixin_33790053的博客
03-20 110
2019独角兽企业重金招聘Python工程师标准>>> ...
华为NE20E-S2路由器QoS特性详解
"HUAWEI NE20E-S2 综合业务承载路由器V800R011C10的QoS特性描述文档，涵盖了QoS的基本概念、DiffServ体系结构、端到端QoS服务模型、流分类与标记、流量监管和流量整形以及拥塞管理等内容。" 在IT领域，服务质量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值