需求场景

我们在开发应用的时候经常会遇到先登录，登录成功后再跳转到目标页面。比如商品详情页面我们点击购买必须要先登录，登录完成才能去下单支付。针对这种场景，我们一般有两种做法：

第一种我们就不谈了产品经理不同意🐶。第二种我们一般是在 onActivityResult 里面获取到登录成功，然后根据 code 跳转到目标页面。这种方式缺点就是我们要在每个页面都处理相同的逻辑还有定义各种 code，如果应用里面很多这种场景也太繁琐了。那有没有统一的方式去处理这种场景就是我们今天的主题了。

封装方式

我们的应用是组件化的，APP 的页面跳转使用了 Arouter。所以我们统一处理使用 Arouter 封装。直接上代码

fun checkLoginToTarget(postcard: Postcard) {//Postcard 是 Arouter 的类

    if (User.isLogin()) {

        postcard.navigation()

    } else {

        //不能使用 postcard 切换 path 直接跳转，因为 group 可能不同，所以重新 build

        ARouter.getInstance().build(Constant.LOGIN)

            .with(postcard.extras)//获取携带的参数重新转入

            .withString(Constant.TAGACTIVIFY, postcard.path)//添加目标路由

            .navigation()

    }

}

//登录成功后在登录页面执行这个方法

fun loginSuccess() {

    val intent= intent

    val target = intent.getStringExtra(Constant.TAGACTIVIFY)//获取目标路由

    target?.apply { 

        if (isNotEmpty()){

            val build = ARouter.getInstance().build(this)

            val extras = intent.extras//获取携带的参数

            if (extras != null) {

                build.with(extras)

            }

            build.navigation()

        }

    }

    finish()

}

代码加了注释，使用 Kotlin 封装了顶层函数，登录页面在登录成功后跳转到目标页面，针对上面的场景直接调用 checkLoginToTarget 方法。

checkLoginToTarget(ARouter.getInstance().build(Constant.PAY_PAGE).withInt(Constant.GOOD_ID,id))

通过 Arouter 传入下单支付的路由地址，并且携带了商品的 ID，生成了 Postcard 参数。登录成功后能带着商品 ID
直接下单支付了。

最后

如果项目里没有使用路由库可以使用 Intent 封装实现，或者别的路由库也可以用上面的方式去做统一处理。

简述

要启动未注册的Activity主要是要逃避AMS的检测，思路是，检测前要启动的Activity换成注册的，检测通过了，再在启动前换回来。这里主要是两个点。检测前，hookAMS。检测后hookHandler。hook点有很多尽量找静态变量、单例和public

hookAMS

1、android 11举例，启动acitivty是在ATMS中（11之前是AMS，这个自己可以去适配）

2、拿到ATMS的代理。

3、然后ATMS整个动态代理在startActivity之前将Intent 偷梁换柱

4、换成已经注册的Activity之后记得原目标Acitivty存起来，在骗完AMS之后换回来

 

public static void hookAMS() {

    // 10之前

    try {

        Class<?> clazz = Class.forName("android.app.ActivityTaskManager");

        Field singletonField = clazz.getDeclaredField("IActivityTaskManagerSingleton");



        singletonField.setAccessible(true);

        Object singleton = singletonField.get(null);









        Class<?> singletonClass = Class.forName("android.util.Singleton");

        Field mInstanceField = singletonClass.getDeclaredField("mInstance");

        mInstanceField.setAccessible(true);

        Method getMethod = singletonClass.getMethod("get");

        Object mInstance = getMethod.invoke(singleton);



        Class IActivityTaskManagerClass = Class.forName("android.app.IActivityTaskManager");



        Object mInstanceProxy = Proxy.newProxyInstance(Thread.currentThread().getContextClassLoader(),

                new Class[]{IActivityTaskManagerClass}, new InvocationHandler() {

                    @Override

                    public Object invoke(Object proxy, Method method, Object[] args) throws Throwable {



                        if ("startActivity".equals(method.getName())) {

                            int index = -1;



                            // 获取 Intent 参数在 args 数组中的index值

                            for (int i = 0; i < args.length; i++) {

                                if (args[i] instanceof Intent) {

                                    index = i;

                                    break;

                                }

                            }

                            // 生成代理proxyIntent -- 孙悟空（代理）的Intent

                            Intent proxyIntent = new Intent();

                            // 这个包名是宿主的

                            proxyIntent.setClassName("com.leo.amsplugin",

                                    ProxyActivity.class.getName());



                            // 原始Intent能丢掉吗？保存原始的Intent对象

                            Intent intent = (Intent) args[index];

                            proxyIntent.putExtra(TARGET_INTENT, intent);



                            // 使用proxyIntent替换数组中的Intent

                            args[index] = proxyIntent;

                        }



                        // 原来流程

                        return method.invoke(mInstance, args);

                    }

                });



        // 用代理的对象替换系统的对象

        mInstanceField.set(singleton, mInstanceProxy);

    } catch (Exception e) {

        e.printStackTrace();

    }

}

hookHandler

hookAMS完成，欺骗了AMS，接下来要把Intent中的原目标扶起回正位，
启动Activity要用handler，我们从这里hook吧

1、Activtiy thread 中的handler用来启动activity class H extends Handler

2、handlerMessage中的EXECUTE_TRANSACTION(159)来启动activity

3、
final ClientTransaction transaction = (ClientTransaction) msg.obj;--包含Intent

mTransactionExecutor.execute(transaction);--执行启动

launchActivityItem中有Intent，而ta继承于ClientTransactionItem，而ClientTransaction中包含List<ClientTransactionItem>

4、所以我只要拿到msg就可以拿到Intent。
msg.obj --> ClientTransaction --> List mActivityCallbacks(LaunchActivityItem)
--> private Intent mIntent 替换

5、handlerMessage(MSG)之前有个callback也可以拿到msg。则会callback是一个接口，如果重写这个接口可就可重新handlerMessage这个方法，然后操作msg。

6、ActivityThread当中，Handler的构建没有传参数。

...//去ActivityThread.java里看

@UnsupportedAppUsage

final H mH = new H();

    ...

class H extends Handler //也没写构造方法

    

...//去Handler.java里看

 

@Deprecated

public Handler() {

    this(null, false);

}   

7、实际上callback是看，那么我自己替换系统的call就可以啦

8、那我通过反射拿Handler中的mCallback，

 public void hoodHandler() {

    try {

        Class<?> clazz = Class.forName("android.app.ActivityThread");

        Field activityThreadField = clazz.getDeclaredField("sCurrentActivityThread");

        activityThreadField.setAccessible(true);

        Object activityThread = activityThreadField.get(null);



        Field mHField = clazz.getDeclaredField("mH");

        mHField.setAccessible(true);

        final Handler mH = (Handler) mHField.get(activityThread);



        Field mCallbackField = Handler.class.getDeclaredField("mCallback");

        mCallbackField.setAccessible(true);



        mCallbackField.set(mH, new Handler.Callback() {



            @Override

            public boolean handleMessage(Message msg) {

                switch (msg.what) {

                    case 159:

                        // msg.obj = ClientTransaction

                        try {

                            // 获取 List<ClientTransactionItem> mActivityCallbacks 对象

                            Field mActivityCallbacksField = msg.obj.getClass()

                                    .getDeclaredField("mActivityCallbacks");

                            mActivityCallbacksField.setAccessible(true);

                            List mActivityCallbacks = (List) mActivityCallbacksField.get(msg.obj);



                            for (int i = 0; i < mActivityCallbacks.size(); i++) {

                                // 打印 mActivityCallbacks 的所有item:

                                //android.app.servertransaction.WindowVisibilityItem

                                //android.app.servertransaction.LaunchActivityItem



                                // 如果是 LaunchActivityItem，则获取该类中的 mIntent 值，即 proxyIntent

                                if (mActivityCallbacks.get(i).getClass().getName()

                                        .equals("android.app.servertransaction.LaunchActivityItem")) {

                                    Object launchActivityItem = mActivityCallbacks.get(i);

                                    Field mIntentField = launchActivityItem.getClass()

                                            .getDeclaredField("mIntent");

                                    mIntentField.setAccessible(true);

                                    Intent proxyIntent = (Intent) mIntentField.get(launchActivityItem);



                                    // 获取启动插件的 Intent，并替换回来

                                    Intent intent = proxyIntent.getParcelableExtra(TARGET_INTENT);

                                    if (intent != null) {

                                        mIntentField.set(launchActivityItem, intent);

                                    }

                                }

                            }

                        } catch (Exception e) {

                            e.printStackTrace();

                        }

                        break;

                }

                return false;

            }

        });

    } catch (Exception e) {

        e.printStackTrace();

    }



}

总结

一个分为两步

1、hookAMS主要就是逃避ams检测,让ams检测的是一个已经注册了的activity。

2、hookHandler在生成activity之前再把activity换回来。

所以一定要熟悉动态代理，反射和Activity的启动流程。

主要通过hook，核心在于hook点

插桩
1、尽量找 静态变量 单利
2、public

动态代理

AMS检测之前我改下

效果演示

横版

竖版

思路分析

基本结构

HTML基本结构

<div id="container"></div>

这里只需要一个容器，其他的结构通过js动态生成

CSS

#container {

  /* 添加这行样式=>文字纵向从右往左显示 */

  /* 目前先不设置,后面可以取消注释 */

  /* writing-mode: vertical-rl; */

}

#container span {

  /* 这里opacity先设置为1，让其不透明，可以看到每一步的效果 */

  /* 写完js之后到回来改为0 */

  opacity: 1;

  transition: opacity 0.5s;

}

文本数据

const data = ['清明时节闹坤坤，', '路上行人梳中分；', '借问荔枝何处有，', '苏珊遥指蔡徐村。']

使用数组存放文本数据，一个元素代表一段文字

创建p标签

使用for/of循环遍历数组创建对应个数的p标签，添加到html页面中

const data = ['清明时节闹坤坤，', '路上行人梳中分；', '借问荔枝何处有，', '苏珊遥指蔡徐村。']

// 获取dom元素

const container = document.querySelector('#container')

// for/of循环遍历数组

for (const item of data) {

  // 打印每一个item => 数组的每一个元素

  console.log(item)

  // 创建p标签

  const p = document.createElement('p')

  // 将p标签插入到container

  container.append(p)

}

item代表数组的每一个元素，也就是每一段文字，所以会创建4个p标签

与数组元素数量对应的p标签就生成好了

接下来就是将每一个元素里面的文本添加到span标签中

创建span标签

为每一个字创建一个span标签，然后让span标签的内容等于对应的字，再将每一个生成的span插入到p标签

本节代码

// 遍历item的每一个字

for (let i = 0; i < item.length; i++) {

  // 创建span

  let span = document.createElement('span')

  // span的内容等于item的每一个字

  span.innerHTML = item[i]

  // 将span插入到p标签中

  p.append(span)

}

合并后代码

const data = ['清明时节闹坤坤，', '路上行人梳中分；', '借问荔枝何处有，', '苏珊遥指蔡徐村。']

// 获取dom元素

const container = document.querySelector('#container')

// for/of循环遍历数组

for (const item of data) {

  // 打印每一个item => 数组的每一个元素

  console.log(item)

  // 创建p标签

  const p = document.createElement('p')

  // 遍历item的每一个字

  for (let i = 0; i < item.length; i++) {

    // 创建span

    let span = document.createElement('span')

    // span的内容等于item的每一个字

    span.innerHTML = item[i]

    // 将span插入到p标签中

    p.append(span)

  }

  // 将p标签插入到container

  container.append(p)

}

此时已经完成了渲染数组，并将数组的每一个元素的文字渲染到单独的span中

接下来就要让每一个文字做到从看不见到看的见的效果

添加透明度过渡效果

将css样式中的opacity由1改为0

因为每个字的出现时间不一样，所以不能直接在循环的时候直接添加过渡效果，添加以下代码，让span标签在添加到p标签前也添加到新数组中

const arr = []

// 将span也添加到新数组中

arr.push(span)

最后遍历arr数组，为每一个元素添加一个过渡延迟效果

// 延时1毫秒等待上方循环渲染完成

setTimeout(() => {

  // 遍历arr数组的每一个元素

  arr.forEach((item, index) => {

    // 给每一个元素添加过渡延迟属性

    item.style.transitionDelay = `${index * 0.2}s`

    // 将透明度设置为不透明

    item.style.opacity = 1

  })

}, 1)

最后的最后将css样式中的opacity改为0，让所有的字透明

#container span {

  opacity: 0;

  transition: opacity 0.5s;

}

完整js代码

const data = ['清明时节闹坤坤，', '路上行人梳中分；', '借问荔枝何处有，', '苏珊遥指蔡徐村。']

const arr = []

// 获取dom元素

const container = document.querySelector('#container')

// for/of循环遍历数组

for (const item of data) {

  // 打印每一个item => 数组的每一个元素

  console.log(item)

  // 创建p标签

  const p = document.createElement('p')

  // 遍历item的每一个字

  for (let i = 0; i < item.length; i++) {

    // 创建span

    let span = document.createElement('span')

    // span的内容等于item的每一个字

    span.innerHTML = item[i]

    // 将span插入到p标签中

    p.append(span)

    // 将span也添加到新数组中

    arr.push(span)

  }

  // 将p标签插入到container

  container.append(p)

}

// 延时1毫秒等待上方循环渲染完成

setTimeout(() => {

  // 遍历arr数组的每一个元素

  arr.forEach((item, index) => {

    // 给每一个元素添加过渡延迟属性

    // 让每一个字都比前一个字延时0.2秒的时间

    item.style.transitionDelay = `${index * 0.2}s`

    // 将透明度设置为不透明

    item.style.opacity = 1

  })

}, 1)

至此，已经完成了逐字显示的效果，最后介绍一个css属性

writing-mode

使用这个属性可以改变文字方向，实现纵向从左往右或从右往左显示

以下摘自mdn文档

writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。为整个文档设置该属性时，应在根元素上设置它（对于 HTML 文档，应该在 html 元素上设置）

horizontal-tb

对于左对齐（ltr）文本，内容从左到右水平流动。对于右对齐（rtl）文本，内容从右到左水平流动。下一水平行位于上一行下方。

vertical-rl

对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行右侧。

vertical-lr

对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行左侧。

一. 目标效果

二. 实现思路

使用Animate API或者CSS动画的方式都可以，我选择的是Animate API。

实现无缝滚动的一般思路

Translate位移+无限循环动画。但是这样会有一个小问题，就是在动画结束又开始的一瞬间会闪烁一下，不是很完美。

解决方法

复制一份数据, 原来的1份数据变成2份数据。然后动画的关键帧设置位移的终点为50%，这样每次动画的结束帧就在数据的中间位置, 注意如果数据之间有间距的话，还要加上间距的一半。这样即可实现无限滚动，并且足够丝滑。3

三. 实现

核心代码

以下代码示例都使用React框架。

  // 使用Web animate Api 添加动画

  useEffect(() => {

    if (!container.current) return;

    // 获取gap值

    const gap = getComputedStyle(container.current).gap.split('px')[0] ?? 0;



    // 滚动容器(container)的50%宽度 + 滚动容器的50%gap值

    // 如果不加滚动容器的50%gap值, 在动画结束又开始的瞬间会跳一下

    const translateX = container.current.clientWidth / 2 + Number(gap) / 2;

    if (isNaN(translateX)) {

      throw new Error('translateX is NaN!');

    }



    // 定义关键帧, 执行动画

    let keyframes: Keyframe[] = [];

    if (type === 'rtl') {

      keyframes = [

        {

          transform: 'translateX(0)',

        },

        {

          transform: `translateX(-${translateX}px)`,

        },

      ];

    } else if (type === 'ltr') {

      keyframes = [

        {

          transform: `translateX(-${translateX}px)`,

        },

        {

          transform: 'translateX(0)',

        },

      ];

    }



    animation.current = container.current.animate(keyframes, {

      duration,

      easing: 'linear',

      iterations: Infinity,

    });

  }, []);



 return (

    // 使用context传递store和dispatch

    <SwiperContext.Provider value={{ store, dispatch }}>

      <div className={classNames(['w-full overflow-x-hidden', wrapperClassName])}>

        {/* 使用inline-flex代替flex，让ul的宽度被子元素撑开 */}

        <ul

          className={classNames(['inline-flex flex-nowrap gap-5', className])}

          style={style}

          ref={container}

        >

          {/* 类似于HOC的效果, 为Item组件添加_key */}

          {children.map((child) =>

            cloneElement(child as ReactElement, {

              _key: (child as ReactElement).key ?? '',

            })

          )}



          {/* 实现无缝滚动, 复制一组子元素进行占位 */}

          {children.map((child) =>

            cloneElement(child as ReactElement, {

              _key: (child as ReactElement).key ?? '',

            })

          )}

        </ul>

      </div>

    </SwiperContext.Provider>

  );

其中type只是为了区分在x轴上的滚动方向而已，根据方向应用不同的动画。动画的实例使用useRef()去保存。
方便后续调用此动画实例进行动画的暂停和播放。

完整代码

SwiperBox.tsx

import { useHover } from 'ahooks';

import classNames from 'classnames';

import { isNaN, isUndefined } from 'lodash-es';

import {

  cloneElement,

  CSSProperties,

  ReactElement,

  ReactNode,

  useContext,

  useEffect,

  useRef,

} from 'react';



import { SwiperContext } from './swiper-context';

import useSwiperReducer, { SwiperActions } from './use-swiper-reducer';



interface SwiperBoxProp {

  /**

   * 轮播方向

   *

   * @type {('ltr' | 'rtl')}

   * @memberOf SwiperBoxProp

   */

  type: 'ltr' | 'rtl';



  /**

   * 子节点

   *

   * @type {ReactNode[]}

   * @memberOf SwiperBoxProp

   */

  children: ReactNode[];



  /**

   * 类名

   *

   * @type {string}

   * @memberOf SwiperBoxProp

   */

  className?: string;



  /**

   * 外层节点类名

   *

   * @type {string}

   * @memberOf SwiperBoxProp

   */

  wrapperClassName?: string;



  /**

   * 节点样式

   *

   * @type {CSSProperties}

   * @memberOf SwiperBoxProp

   */

  style?: CSSProperties;



  /**

   * 动画持续时间

   *

   * @type {EffectTiming['duration']}

   * @memberOf SwiperBoxProp

   */

  duration?: EffectTiming['duration'];



  /**

   * 鼠标悬停时触发

   * @type {boolean} isHovering 是否悬停

   * @type {string} key 节点key

   *

   * @memberOf SwiperBoxProp

   */

  hoverOnChange?: (isHovering: boolean, key: string) => void;

}



/**

 * 无限循环、无缝轮播组件

 * 使用这个组件必须通过gap的方式(eg: gap-4)来设置滚动项之间的距离, 不能使用margin的方式, 不然无缝滚动会有问题

 */

function SwiperBox(prop: SwiperBoxProp) {

  const {

    type,

    className,

    wrapperClassName,

    style,

    children,

    duration = 3000,

    hoverOnChange,

  } = prop;

  const [store, dispatch] = useSwiperReducer();

  const { activeKey } = store;

  // 滚动容器

  const container = useRef<HTMLUListElement>(null);

  // 动画实例

  const animation = useRef<Animation | null>(null);



  // activeKey改变时通知外部组件

  useEffect(() => {

    hoverOnChange &&

      !!Object.keys(activeKey).length &&

      hoverOnChange(activeKey.isHovering, activeKey.key);

  }, [activeKey]);



  // 获取所有的key值并存储

  useEffect(() => {

    dispatch(

      SwiperActions.updateKeys(children.map((child) => (child as ReactElement).key ?? ''))

    );

  }, []);



  // 使用Web animate Api 添加动画

  useEffect(() => {

    if (!container.current) return;

    // 获取gap值

    const gap = getComputedStyle(container.current).gap.split('px')[0] ?? 0;



    // 滚动容器(container)的50%宽度 + 滚动容器的50%gap值

    // 如果不加滚动容器的50%gap值, 在动画结束又开始的瞬间会跳一下

    const translateX = container.current.clientWidth / 2 + Number(gap) / 2;

    if (isNaN(translateX)) {

      throw new Error('translateX is NaN!');

    }



    // 定义关键帧, 执行动画

    let keyframes: Keyframe[] = [];

    if (type === 'rtl') {

      keyframes = [

        {

          transform: 'translateX(0)',

        },

        {

          transform: `translateX(-${translateX}px)`,

        },

      ];

    } else if (type === 'ltr') {

      keyframes = [

        {

          transform: `translateX(-${translateX}px)`,

        },

        {

          transform: 'translateX(0)',

        },

      ];

    }



    animation.current = container.current.animate(keyframes, {

      duration,

      easing: 'linear',

      iterations: Infinity,

    });

  }, []);



  // 鼠标移入动画暂停/播放

  useEffect(() => {

    if (!animation.current) return;

    if (isUndefined(activeKey.isHovering)) return;



    if (activeKey.isHovering) {

      animation.current.pause();

    } else {

      animation.current.play();

    }

  }, [activeKey]);



  return (

    // 使用context传递store和dispatch

    <SwiperContext.Provider value={{ store, dispatch }}>

      <div className={classNames(['w-full overflow-x-hidden', wrapperClassName])}>

        {/* 使用inline-flex代替flex，让ul的宽度被子元素撑开 */}

        <ul

          className={classNames(['inline-flex flex-nowrap gap-5', className])}

          style={style}

          ref={container}

        >

          {/* 类似于HOC的效果, 为Item组件添加_key */}

          {children.map((child) =>

            cloneElement(child as ReactElement, {

              _key: (child as ReactElement).key ?? '',

            })

          )}



          {/* 实现无缝滚动, 复制一组子元素进行占位 */}

          {children.map((child) =>

            cloneElement(child as ReactElement, {

              _key: (child as ReactElement).key ?? '',

            })

          )}

        </ul>

      </div>

    </SwiperContext.Provider>

  );

}



interface SwiperBoxItemProp {

  children: ReactNode;

  // 唯一标识, React不会将key转发到组件中, 因此自定义一个唯一的_key

  _key?: string;

}



function SwiperBoxItem(prop: SwiperBoxItemProp) {

  const { children, _key } = prop;



  const container = useRef<HTMLLIElement>(null);

  const context = useContext(SwiperContext);



  // 鼠标hover

  const onEnter = () => {

    context && _key && context.dispatch(SwiperActions.onEnter(true, _key));

  };



  // 鼠标退出hover

  const onLeave = () => {

    context && _key && context.dispatch(SwiperActions.onLeave(false, _key));

  };



  useHover(container, {

    onEnter,

    onLeave,

  });



  return (

    <li

      ref={container}

      className="transition-transform duration-500 ease-out hover:scale-105"

    >

      {children}

    </li>

  );

}



const SwiperWithAnimation = {

  Box: SwiperBox,

  Item: SwiperBoxItem,

};



export default SwiperWithAnimation;

swiper-context.ts

import { createContext, Dispatch } from 'react';



import { SwiperAction, SwiperState } from './use-swiper-reducer';



export type SwiperContextType = {

  store: SwiperState;

  dispatch: Dispatch<SwiperAction>;

};

export const SwiperContext = createContext<SwiperContextType | null>(null);

useSwiperReducer.ts

import { useReducer } from 'react';



export interface SwiperState {

  activeKey: { isHovering: boolean; key: string };

  totalKeys: string[];

}



export type SwiperAction<T = any> = {

  type: string;

  payload: T;

};



export const SwiperActions = {

  onEnter: (isHovering: boolean, key: string) => ({

    type: 'onEnter',

    payload: { isHovering, key },

  }),

  onLeave: (isHovering: boolean, key: string) => ({

    type: 'onLeave',

    payload: { isHovering, key },

  }),

  updateKeys: (keys: string[]) => ({

    type: 'update_keys',

    payload: keys,

  }),

};



export default function useSwiperReducer() {

  const initialState: SwiperState = {

    activeKey: {} as SwiperState['activeKey'],

    totalKeys: [] as SwiperState['totalKeys'],

  };



  const reducer = (store: SwiperState, { type, payload }: SwiperAction): SwiperState => {

    switch (type) {

      case 'onEnter':

        return {

          ...store,

          activeKey: payload,

        };

      case 'onLeave':

        return {

          ...store,

          activeKey: payload,

        };

      case 'update_keys':

        return {

          ...store,

          totalKeys: payload,

        };

      default:

        return store;

    }

  };



  const [store, dispatch] = useReducer(reducer, initialState);



  return [store, dispatch] as const;

}

四、如何使用

import SwiperWithAnimation from '@/components/swiper-box/SwiperBox';

import { uniqueId } from 'lodash-es';





const DATA = new Array(2).fill(0).map(() => uniqueId('data'));

/**

 *  测试页面

 */

export default function TestPage() {

  // 鼠标hover事件

  const hoverOnChange = (isHovering: boolean, key: string) => {

    console.log('isHovering: ', isHovering);

    console.log('key: ', key);

  };



  return (

    <div>

      <SwiperWithAnimation.Box

        type="ltr"

        wrapperClassName="py-9 m-auto !w-[600px] border border-red-200"

        className="gap-8"

        hoverOnChange={hoverOnChange}

      >

        {DATA.map((data) => (

          <SwiperWithAnimation.Item key={data}>

            <div className="f-c h-[300px] w-[300px] rounded-lg bg-theme-primary">

              <div className="text-2xl">{data}</div>

            </div>

          </SwiperWithAnimation.Item>

        ))}

      </SwiperWithAnimation.Box>

    </div>

  );

}

屏幕刷新机制

基本概念

• 刷新率：屏幕每秒刷新的次数，单位是 Hz，例如 60Hz，刷新率取决于硬件的固定参数。


• 帧率：GPU 在一秒内绘制操作的帧数，单位是 fps。Android 采用的是 60fps，即每秒 GPU 最多绘制 60 帧画面，帧率是动态变化的，例如当画面静止时，GPU 是没有绘制操作的，帧率就为0，屏幕刷新的还是 buffer 中的数据，即 GPU 最后操作的帧数据。

显示器不是一次性将画面显示到屏幕上，而是从左到右边，从上到下逐行扫描，顺序显示整屏的一个个像素点，不过这一过程快到人眼无法察觉到变化。以 60 Hz 刷新率的屏幕为例，这一过程的耗时： 1000 / 60 ≈ 16.6ms。

屏幕刷新的机制大概就是： CPU 执行应用层的测量，布局和绘制等操作，完成后将数据提交给 GPU，GPU 进一步处理数据，并将数据缓存起来，屏幕由一个个像素点组成，以固定的频率（16.6ms）从缓冲区中取出数据来填充像素点。

画面撕裂

如果一个屏幕内的数据来自两个不同的帧，画面会出现撕裂感。屏幕刷新率是固定的，比如每 16.6ms 从 buffer 取数据显示完一帧，理想情况下帧率和刷新率保持一致，即每绘制完成一帧，显示器显示一帧。但是 CPU 和 GPU 写数据是不可控的，所以会出现 buffer 里有些数据根本没显示出来就被重写了，即 buffer 里的数据可能是来自不同的帧，当屏幕刷新时，此时它并不知道 buffer 的状态，因此从 buffer 抓取的帧并不是完整的一帧画面，即出现画面撕裂。

那怎么解决这个问题呢？Android 系统采用的是 双缓冲 + VSync

双缓冲：让绘制和显示器拥有各自的 buffer，GPU 将完成的一帧图像数据写入到 BackBuffer，而显示器使用的是 FrameBuffer，当屏幕刷新时，FrameBuffer 并不会发生变化，当 BackBuffer 准备就绪后，它们才进行交换。那什么时候进行交换呢？那就得靠 VSync。

VSync：当设备屏幕刷新完毕后到下一帧刷新前，因为没有屏幕刷新，所以这段时间就是缓存交换的最佳时间。此时硬件屏幕会发出一个脉冲信号，告知 GPU 和 CPU 可以交换了，这个就是 Vsync 信号。

掉帧

有时，当布局比较复杂，或者设备性能较差的时候，CPU 并不能保证在 16.6ms 内就完成绘制，这里系统又做了一个处理，当正在往 BackBuffer 填充数据时，系统会将 BackBuffer 锁定。如果到了 GPU 交换两个 Buffer 的时间点，你的应用还在往 BackBuffer 中填充数据，会发现 BackBuffer 被锁定了，它会放弃这次交换。
这样做的后果就是手机屏幕仍然显示原先的图像，这就是所谓的掉帧。

优化方向

如果想要屏幕流畅运行，就必须保证 UI 全部的测量，布局和绘制的时间在 16.6ms 内，因为人眼与大脑之间的协作无法感知超过 60fps 的画面更新,也就是 1000 / 60Hz = 16.6ms，也就是说超过 16.6ms 用户就会感知到卡顿。

层级优化

层级越少，View 绘制得就越快，常用有两个方案。

• 合理使用 RelativeLayout 和 LinearLayout：层级一样优先使用 LinearLayout，因为 RelativeLayout 需要考虑视图之间的相对位置关系，需要更多的计算和更高的系统开销，但是使用 LinearLayout 有时会使嵌套层级变多，这时就应该使用 RelativeLayout。


• 使用 merge 标签：它会直接将其中的子元素添加到 merge 标签 Parent 中，这样就不会引入额外的层级。它只能用在布局文件的根元素，不能在 ViewStub 中使用 merge 标签，当需要 inflate 的布局本身是由 merge 作为根节点的话，需要将其置于 ViewGr0up 中，设置 attachToRoot 为 true。

一个布局可以重复利用，当使用 include 引入布局时，可以考虑 merge 作为根节点，merge 根节点内的布局取决于include 这个布局的父布局。编写 XML 时，可以先用父布局作为根节点，然后完成后再用 merge 替换，方便我们预览效果。

merge_layout.xml

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Hello" />



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="World" />



</merge>

父布局如下：

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

<LinearLayout 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_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity">



    <include layout="@layout/merge_layout" />



</LinearLayout>

如果需要通过 inflate 引入 merge_layout 布局文件时，可以这样引入：

class MyLinearLayout(context: Context, attrs: AttributeSet) : LinearLayout(context, attrs) {



    init {

        LayoutInflater.from(context).inflate(R.layout.merge_layout, this, true)

    }

}

第一个参数为 merge 布局文件 id，第二个参数为要将子视图添加到的 ViewGr0up，第三个参数为是否将加载好的视图添加到 ViewGr0up 中。

需要注意的是，merge 标签的布局，是不能设置 padding 的，比如像这样：

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    android:padding="30dp">



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Hello" />



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="World" />



</merge>

上面的这个 padding 是不会生效的，如果需要设置 padding，可以在其父布局中设置。

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

<LinearLayout 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_width="match_parent"

    android:layout_height="match_parent"

    android:padding="30dp"

    tools:context=".MainActivity">



    <include layout="@layout/merge_layout" />



</LinearLayout>

ViewStub

ViewStub 是一个轻量级的 View，一个看不见的，并且不占布局位置，占用资源非常小的视图对象。可以为 ViewStub 指定一个布局，加载布局时，只有 ViewStub 会被初始化，当 ViewStub 被设置为可见或 inflate 时，ViewStub 所指向的布局会被加载和实例化，可以使用 ViewStub 来设置是否显示某个布局。

ViewStub 只能用来加载一个布局文件，且只能加载一次，之后 ViewStub 对象会被置为空。适用于某个布局在加载后就不会有变化，想要控制显示和隐藏一个布局文件的场景，一个典型的场景就是我们网络请求返回数据为空时，往往要显示一个默认界面，表明暂无数据。

view_stub_layout.xml

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:gravity="center"

    android:orientation="vertical">



    <ImageView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

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



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="no data" />



</LinearLayout>

通过 ViewStub 引入

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

<layout 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">



    <data>



        <variable

            name="click"

            type="com.example.testapp.MainActivity.ClickEvent" />

    </data>



    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:orientation="vertical"

        tools:context=".MainActivity">



        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:onClick="@{click::showView}"

            android:text="show" />



        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:onClick="@{click::hideView}"

            android:text="hide" />



        <ViewStub

            android:id="@+id/default_page"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:layout="@layout/view_stub_layout" />



    </LinearLayout>

</layout>

然后在代码中 inflate，这里通过按钮点击来控制其显示和隐藏。

class MainActivity : AppCompatActivity() {



    private var viewStub: ViewStub? = null



    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        val binding =

            DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)

        binding.click = ClickEvent()

        viewStub = binding.defaultPage.viewStub

        if (!binding.defaultPage.isInflated) {

            viewStub?.inflate()

        }

    }



    inner class ClickEvent {

        // 后面 ViewStub 已经回收了，所以只能用 GONE 和 VISIBLE

        fun showView(view: View) {

            viewStub?.visibility = View.VISIBLE

        }



        fun hideView(view: View) {

            viewStub?.visibility = View.GONE

        }

    }

}

过度绘制

过度绘制是指屏幕上的某个像素在同一帧的时间内被绘制了多次，在多层次重叠的 UI 结构中，如果不可见的 UI 也在做绘制操作，就会导致某些像素区域被绘制了多次，从而浪费了 CPU 和 GPU 资源。

我们可以打开手机的开发人员选项，打开调试 GPU 过度绘制的开关，就能通过不同的颜色区域查看过度绘制情况。我们要做的，就是尽量减少红色，看到更多的蓝色。

• 无色：没有过度绘制，每个像素绘制了一次。


• 蓝色：每个像素多绘制了一次，蓝色还是可以接受的。


• 绿色：每个像素多绘制了两次。


• 深红：每个像素多绘制了4次或更多，影响性能，需要优化，应避免出现深红色区域。

优化方法：

• 减少不必要的背景：比如 Activity 往往会有一个默认的背景，这个背景由 DecorView 持有，当自定义布局有一个全屏的背景时，这个 DecorView 的背景对我们来说是无用的，但它会产生一次 Overdraw，可以干掉。

window.setBackgroundDrawable(null)

• 自定义 View 的优化：在自定义 View 的时候，某个区域可能会被绘制多次，造成过度绘制。可以通过 canvas.clipRect 方法指定绘制区域，可以节约 CPU 与 GPU 资源，在 clipRect 区域之外的绘制指令都不会被执行。

AsyncLayoutInflater

setContentView 函数是在 UI 线程执行的，其中有一系列的耗时动作：XML 的解析，View 的反射创建等过程都是在 UI 线程执行的，AsyncLayoutInflater 就是把这些过程以异步的方式执行，保持 UI 线程的高响应。

implementation 'androidx.asynclayoutinflater:asynclayoutinflater:1.0.0'

class TestActivity : AppCompatActivity() {



    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        AsyncLayoutInflater(this).inflate(R.layout.activity_test, null) { view, _, _ ->

            setContentView(view)

        }

    }

}

这样，将 UI 的加载过程迁移到了子线程，保证了 UI 线程的高响应，使用时需要特别注意，调用 UI 一定要等它初始化完成之后，不然可能会产生崩溃。

Compose

Jetpack Compose 相对于传统的 XML 布局方式，具有更强的可组合性，更高的效率和更佳的开发体验，相信未来会成为 Android UI 开发的主流方式。

传统的 XML 布局方式是基于声明式的 XML 代码编写的，使用大量的 XML 标签来描述 UI 结构，XML 文件通过解析和构建生成 View 对象，并将它们添加到 View 树中。在 Compose 中，UI 代码被组织成可组合的函数，每个函数都负责构建某个具体的 UI 元素，UI 元素的渲染是由 Compose 运行时直接管理的，Composable 函数会被调用，以计算并生成当前 UI 状态下的最终视图。

前言

在产品经理提需求时候提到，app在接收到报警信息时候能不能弹出一个弹框，告诉用户报警信息，这个弹框要在app的任意界面能够弹出，并且用户点击详情时候，会跳转到报警详情界面，查看具体信息，当用户将app至于后台的时候，接收到报警信息，app发送通知，当用户点击通知时候，跳转到报警详情界面。
功能大体总结如上，在实现弹框与通知在跳转界面时遇到一些问题，在此记录一下。效果图如下：

功能分析

弹框实现，使用DialogFragment。

前后台判断则是，创建一个继承自ActivityLifecycleCallbacks接口和Application的类，继承ActivityLifecycleCallbacks接口是为了前后台判断，继承Application则是方便在基类BaseActivity获取前后台相关数据。

项目原本采用单Activity多Fragment实现，后面因为添加了视频相关功能，改为了多Activity多Fragment。

原单Activity时候，实现比较容易。后面修改为多Activity，就有些头疼，最终用思路是创建基类BaseActivity，后面添加Activity时都要继承基类BaseActivity。使用基类原因是把相同的功能抽取出来，且若每个Activity都自己实现弹框和通知的话太容易出错，也太容易漏下代码了。

代码实现

弹框

在实现继承自DialogFragment的弹框时，需要在onCreateDialog方法内设置dialog的宽高模式以及背景，不然弹框会有默认的边距，导致显示效果与预期不符，未去边距与去掉边距的弹框效果如下：

关于onCreateDialog的代码如下：

override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {

    val dialog = Dialog(requireContext())

    dialog.setContentView(R.layout.custom_dialog_layout)

    dialog.window?.apply {

        setLayout(ViewGr0up.LayoutParams.MATCH_PARENT,ViewGr0up.LayoutParams.MATCH_PARENT)

        setBackgroundDrawable(ColorDrawable(Color.parseColor("#88000000")))//去掉DialogFragment的边距

    }

    dialog.setCancelable(false)

    return dialog

}

此外当弹框出现的时候，弹框背景色还会闪烁。这里采用属性值动画设置弹框背景色控件的透明度变换。完整的Dialog代码如下：

class AlarmDialogFragment: DialogFragment() {

    private lateinit var binding:CustomDialogLayoutBinding

    private var animator:ObjectAnimator? = null



    override fun show(manager: FragmentManager, tag: String?) {

        try {

            super.show(manager, tag)

        }catch (e:Exception){

            e.printStackTrace()

        }

    }



    override fun onCreateView(

        inflater: LayoutInflater,

        container: ViewGr0up?,

        savedInstanceState: Bundle?

    ): View? {

        binding = CustomDialogLayoutBinding.inflate(inflater)

        return binding.root

    }



    override fun onStart() {

        super.onStart()

        binding.viewAlarmDialogBg

        startAnimation()

    }



    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {

        val dialog = Dialog(requireContext())

        dialog.setContentView(R.layout.custom_dialog_layout)

        dialog.window?.apply {

            setLayout(ViewGr0up.LayoutParams.MATCH_PARENT,ViewGr0up.LayoutParams.MATCH_PARENT)

            setBackgroundDrawable(ColorDrawable(Color.parseColor("#88000000")))//去掉DialogFragment的边距

        }

        dialog.setCancelable(false)

        return dialog

    }



    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {

        super.onViewCreated(view, savedInstanceState)

        initView()

    }



    override fun onDestroy() {

        super.onDestroy()

        if(animator?.isStarted == true){

            animator?.end()

        }

    }



    private fun initView() {

        binding.btnCloseDialog.setOnClickListener {

            dismiss()

        }



        binding.btnDialogNav.setOnClickListener {

            if(context is MainActivity){

                val bundle = Bundle()

                bundle.putString("alarmId","1")

                findNavController().navigate(R.id.alarmDetailFragment,bundle)

            }else{

                val intent = Intent(context,MainActivity::class.java)

                intent.putExtra("task","toAlarmDetail")

                startActivity(intent)

            }

            dismiss()

        }

    }



    private fun startAnimation() {

        animator = ObjectAnimator.ofFloat(binding.viewAlarmDialogBg, "alpha", 0f, 0.6f, 0f, 0.6f, 0f)

        animator?.duration = 1200

        animator?.interpolator = AccelerateInterpolator()

        animator?.start()

    }

}

需要注意地方是，由于弹框还负责跳转，而跳转有两种情况，一种是在ActivityA内，fragmentA与fragmentB间的跳转，这种情况使用findNavController().navigate()方法进行跳转，另一种是ActivityB到另一个ActivityA内的指定FragmentB界面。这种采用startActivity(intent)方式跳转，并且在ActivityA的onStart()的方法使用下面方法。

/** 跳转报警详情界面 */

private fun initToAlarmDetail() {

    val task = intent.getStringExtra("task")

    if (task == "toAlarmDetail"){

        val bundle = Bundle()

        bundle.putString("alarmId","1")

        findNavController(R.id.fragment_main_table).navigate(R.id.alarmDetailFragment,bundle)

    }

}

这样从ActivityB到另一个ActivityA时候，在onStart()方法内会触发上面的initToAlarmDetail()方法，获取跳转里面的信息，在决定具体跳转到哪个Fragment。这里解释的可能不太清楚，可以在Github下载源码看看可能更好理解些。

弹框对应的xml文件代码，可以在Github内查看，可以自己写一个，这个xml比较简单，只是xml代码比较占地方这里就不粘贴了。

前后台判断

关于前后台判断，需要创建一个继承ActivityLifecycleCallbacks和Application的类，这里命名为CustomApplication，在类里面实现ActivityLifecycleCallbacks接口相关方法，此外需要创建下面三个变量，分别表示activity数量，当前activity的名称，是否处于后台，代码如下：

private var activityCount = 0

private var nowActivityName:String? = null

private var isInBackground = true

之后需要在onActivityStarted，onActivityResumed，onActivityStopped方法内进行前后台相关处理，代码如下：

override fun onActivityStarted(activity: Activity) {

    activityCount++

    if (isInBackground){

        isInBackground = false

    }

    nowActivityName = activity.javaClass.name

}



override fun onActivityStopped(activity: Activity) {

    activityCount--

    if (activityCount == 0 && !isInBackground){

        isInBackground = true

    }

}

上面代码可以看出，当触发onActivityStarted方法时候，activityCount数量加一，且app处于前台。之后记录当前activity名称，这里记录activity名称是后面有个功能是app置于后台时候弹出通知，而通知相关操作，为了每个activity都能实现就放在基类执行，而弹出通知并不需要每个继承基类的activity都执行，到时候需要根据根据nowActivityName判断哪个继承了基类的activity执行通知操作。

当触发onActivityStopped方法时候，activityCount数量减一，且当activityCount数量为零时，app置于后台。
CustomApplication完整代码如下：

class CustomApplication: Application(),Application.ActivityLifecycleCallbacks {

    companion object{

        const val TAG = "CustomApplication"

        @SuppressLint("CustomContext")

        lateinit var context: Context 

    }



    private var activityCount = 0

    private var nowActivityName:String? = null

    private var isInBackground = true



    fun getNowActivityName(): String? {

        return nowActivityName

    }



    fun getIsInBackground():Boolean{

        return isInBackground

    }



    override fun onCreate() {

        super.onCreate()

        context = applicationContext

        registerActivityLifecycleCallbacks(this)

    }



    override fun onActivityCreated(activity: Activity, p1: Bundle?) {



    }



    override fun onActivityStarted(activity: Activity) {

        activityCount++

        if (isInBackground){

            isInBackground = false

        }

        nowActivityName = activity.javaClass.name

    }



    override fun onActivityResumed(activity: Activity) {



    }



    override fun onActivityPaused(activity: Activity) {



    }



    override fun onActivityStopped(activity: Activity) {

        activityCount--

        if (activityCount == 0 && !isInBackground){

            isInBackground = true

        }

    }



    override fun onActivitySaveInstanceState(activity: Activity, p1: Bundle) {



    }



    override fun onActivityDestroyed(activity: Activity) {



    }

}

弹框与通知弹出

开发中弹框与通知弹出的触发条件是，监听Websocket若有信息过来，app处于前台弹框，处于后台弹通知。这里使用Handler来模拟，弹框弹出比较简单，若有继承了DialogFragment的AlarmDialogFragment类。代码如下：

val dialog = AlarmDialogFragment()

dialog.show(supportFragmentManager,"tag")

通知弹出也不难，若只是弹出通知示例代码如下：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {

    val channel =

        NotificationChannel("normal", "Normal", NotificationManager.IMPORTANCE_DEFAULT)

    notificationManager?.createNotificationChannel(channel)

}

val notification = NotificationCompat.Builder(this.applicationContext, "normal")

    .setContentTitle("标题")

    .setContentText("通知次数:${++alarmCount}")

    .setSmallIcon(R.drawable.ic_launcher_background)

    .setTimeoutAfter(5000)

    .setAutoCancel(true)

    .build()

notificationManager?.notify(notificationId,notification)

弹框与通知的特殊要求是，能在界面任意地方弹出且跳转到指定界面。弹框跳转相关代码在上面'弹框'部分，下面来说下通知的跳转，点击通知跳转是通过创建PendingIntent后在设置进NotificationCompat的setContentIntent方法内，不过通知跳转与弹框跳转一样需要分两种情况考虑，第一种同一Activity内Fragment与Fragment跳转，这种情况下PendingIntent如下代码所示：

var pendingIntent:PendingIntent? = null

val bundle = Bundle()

bundle.putString("alarmId","1")

pendingIntent = NavDeepLinkBuilder(this)

    .setGraph(R.navigation.main_navigation)

    .setDestination(R.id.alarmDetailFragment)

    .setArguments(bundle)

    .createPendingIntent()

上面代码中使用NavDeepLinkBuilder创建了一个PendingIntent，并且使用setGraph()指向使用的导航图，setDestination()则指向目标Fragment。
另一种情况则是ActivityB到另一个ActivityA内的指定FragmentB界面，这种情况下PendingIntent设置代码如下：

val intent = Intent(this@BaseActivity,MainActivity::class.java)

intent.putExtra("task","toAlarmDetail")

intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK

pendingIntent = TaskStackBuilder.create(this@BaseActivity)

    .addNextIntentWithParentStack(intent)

    .getPendingIntent(0,PendingIntent.FLAG_UPDATE_CURRENT)

这种是创建一个跳转到MainActivity的Intent，并添加传递的参数task，接着设置Intent的启动方式，其中Intent.FLAG_ACTIVITY_NEW_TASK，表示启动Activity作为新任务启动，Intent.FLAG_ACTIVITY_CLEAR_TASK，表示清除任务栈中所有现有的Activity。之后调用TaskStackBuilder创建PendingIntent。
上面两种方式创建的PendingIntent可以通过NotificationCompat.setContentIntent(pendingIntent)添加进去，关于通知创建的代码如下：

/** 使用通知 - 通过pendingIntent实现跳转，缺点是任意界面进入报警详情界面，点击返回键只能返回MainFragment */

    private fun useNotificationPI() {

        var pendingIntent:PendingIntent? = null

        if(javaClass.simpleName == "MainActivity"){//主界面

            val bundle = Bundle()

            bundle.putString("alarmId","1")

            pendingIntent = NavDeepLinkBuilder(this)

                .setGraph(R.navigation.main_navigation)

                .setDestination(R.id.alarmDetailFragment)

                .setArguments(bundle)

                .createPendingIntent()

        }else {//其他界面时候切换后台通知

            val intent = Intent(this@BaseActivity,MainActivity::class.java)

            intent.putExtra("task","toAlarmDetail")

            intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK

            pendingIntent = TaskStackBuilder.create(this@BaseActivity)

                .addNextIntentWithParentStack(intent)

                .getPendingIntent(0,PendingIntent.FLAG_UPDATE_CURRENT)

        }



        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {

            val channel =

                NotificationChannel("normal", "Normal", NotificationManager.IMPORTANCE_DEFAULT)

            notificationManager?.createNotificationChannel(channel)

        }

        val notification = NotificationCompat.Builder(this.applicationContext, "normal")

            .setContentTitle("标题")

            .setContentText("通知次数:${++alarmCount}")

            .setSmallIcon(R.drawable.ic_launcher_background)

            .setTimeoutAfter(5000)

            .setAutoCancel(true)

            .setContentIntent(pendingIntent)

            .build()

        notificationManager?.notify(notificationId,notification)

    }

上面代码中if(javaClass.simpleName == "MainActivity"),及第四行代码，该代码用处是当app置于后台时候，pp界面是MainActivity时，pendingIntent使用NavDeepLinkBuilder生成，当是其他Activity时使用TaskStackBuilder生成。之所以这样是因为，在MainActivity的xml，使用了FragmentContainerView用于fragment间跳转，其他的Activity没有FragmentContainerView，因此在生成pendingIntent需要采用不同的方式生成。

这示例代码中，主要涉及到的Avtivity有MainActivity与VideoActivity，MainActivity使用FragmentContainerView，而VideoActivity没有。弹框与通知跳转的界面是AlarmDetailFragment，这个fragment在MainActivity通过Navigation实现导航。

因此在MainActivity界面进入后台时，pendingIntent使用NavDeepLinkBuilder生成，NavDeepLinkBuilder则可以使用导航图中fragment生成深度链接URI，这个URI则可以导航到指定的fragment（关于NavDeepLinkBuilder了解不深入，这里说的可能有错误地方，欢迎大佬指正）。

而VideoActivity界面进入后台时，就需要使用TaskStackBuilder生成一个启动MainActivity的Intent。而在MainActivity的onStart方法内有下面initToAlarmDetail方法，判断跳转时携带参数决定是否跳转到AlarmDetailFragment界面。

/** 跳转报警详情界面 */

private fun initToAlarmDetail() {

    val task = intent.getStringExtra("task")

    if (task == "toAlarmDetail"){

        val bundle = Bundle()

        bundle.putString("alarmId","1")

        findNavController(R.id.fragment_main_table).navigate(R.id.alarmDetailFragment,bundle)

    }

}

至此弹框与通知的功能基本实现，完整的BaseActivity代码如下：

open class BaseActivity: AppCompatActivity() {

    companion object{

        const val TAG = "BaseActivity"

    }

    private var alarmCount = 0

    private val handler = Handler(Looper.myLooper()!!)

    //为了关闭通知，manager放在外面

    private val notificationId = 1

    private var alarmDialogFragment: AlarmDialogFragment? = null

    private var notificationManager:NotificationManager? = null

    private var bgServiceIntent:Intent? = null//前台服务



    private var nowClassName = ""



    /** 弹框定时任务 */

    private val dialogRunnable = object : Runnable {

        override fun run() {

            //在定时方法里面 javaClass.simpleName 不能获取当前所处Activity的名称

            if (nowClassName == "VideoActivity"){ //视频界面不弹弹框

                CustomLog.d(TAG,"不使用弹框 ${nowClassName}")

            }else{

                CustomLog.d(TAG,"使用弹框 ${nowClassName}")

                useDialog()

                handler.postDelayed(this, 10000)

            }

        }

    }



    /** 通知定时任务 */

    private val notificationRunnable = object :Runnable{

        override fun run() {

            useNotificationPI()

            handler.postDelayed(this,10000)

        }

    }



    override fun onCreateView(name: String, context: Context, attrs: AttributeSet): View? {

        initWindow()

        return super.onCreateView(name, context, attrs)

    }



    override fun onCreate(savedInstanceState: Bundle?, persistentState: PersistableBundle?) {

        super.onCreate(savedInstanceState, persistentState)

        CustomLog.d(TAG,"onCreate(savedInstanceState: Bundle?, persistentState: PersistableBundle?) 当前类:${javaClass.simpleName}")

    }



    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        CustomLog.d(TAG,"onCreate(savedInstanceState: Bundle?) 当前类:${javaClass.simpleName}")

        initData()

    }



    override fun onStart() {

        super.onStart()

        CustomLog.d(TAG,"onStart 当前类:${javaClass.simpleName}")

        nowClassName = javaClass.simpleName

        handler.postDelayed(dialogRunnable, 3000)

        initService()

    }



    override fun onResume() {

        super.onResume()

        CustomLog.d(TAG,"onResume 当前类:${javaClass.simpleName}")

    }



    override fun onRestart() {

        super.onRestart()

        CustomLog.d(TAG,"onRestart 当前类:${javaClass.simpleName}")

    }



    override fun onPause() {

        super.onPause()

        CustomLog.d(TAG,"onPause 当前类:${javaClass.simpleName}")

    }



    override fun onStop() {

        super.onStop()

        CustomLog.d(TAG,"onStop 当前类:${javaClass.simpleName}")

        val customApplication = applicationContext as CustomApplication

        val nowActivityName = customApplication.getNowActivityName()

        val activitySimpleName = nowActivityName?.substringAfterLast(".")

        CustomLog.d(TAG,"activitySimpleName:$activitySimpleName")

        val isInBackground = (this@BaseActivity.applicationContext as CustomApplication).getIsInBackground()

        if (isInBackground && activitySimpleName.equals(javaClass.simpleName)){// 处于后台 且 切换至后台app的activity页面名称等于当前基类里面获取activity类名

            handler.postDelayed(notificationRunnable,3000)

            CustomLog.d(TAG,"使用通知 $nowClassName")

        }else{

            CustomLog.d(TAG,"关闭所有定时任务 $nowClassName")

            closeAllTask()

        }

    }



    override fun onDestroy() {

        super.onDestroy()

        CustomLog.d(TAG,"onDestroy 当前类:${javaClass.simpleName}")

        closeAllTask()

        this.stopService(bgServiceIntent)

    }



    /** 关闭所有定时任务 */

    private fun closeAllTask() {

        handler.removeCallbacks(dialogRunnable)

        handler.removeCallbacks(notificationRunnable)

    }



    /** 初始化数据 - 关于弹框*/

    private fun initData() {

        notificationManager = notificationManager ?: this.getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager

        alarmDialogFragment = alarmDialogFragment ?: AlarmDialogFragment()

    }



    /** 使用通知 - 通过pendingIntent实现跳转，缺点是任意界面进入报警详情界面，点击返回键只能返回MainFragment */

    private fun useNotificationPI() {

        var pendingIntent:PendingIntent? = null

        if(javaClass.simpleName == "MainActivity"){//主界面

            CustomLog.d(TAG,">>>通知：MainActivity")

            val bundle = Bundle()

            bundle.putString("alarmId","1")

            pendingIntent = NavDeepLinkBuilder(this)

                .setGraph(R.navigation.main_navigation)

                .setDestination(R.id.alarmDetailFragment)

                .setArguments(bundle)

                .createPendingIntent()

        }else {//其他界面时候切换后台通知

            CustomLog.d(TAG,">>>通知：else")

            val intent = Intent(this@BaseActivity,MainActivity::class.java)

            intent.putExtra("task","toAlarmDetail")

            intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK

            pendingIntent = TaskStackBuilder.create(this@BaseActivity)

                .addNextIntentWithParentStack(intent)

                .getPendingIntent(0,PendingIntent.FLAG_UPDATE_CURRENT)

        }



        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {

            val channel =

                NotificationChannel("normal", "Normal", NotificationManager.IMPORTANCE_DEFAULT)

            notificationManager?.createNotificationChannel(channel)

        }

        val notification = NotificationCompat.Builder(this.applicationContext, "normal")

            .setContentTitle("标题")

            .setContentText("通知次数:${++alarmCount}")

            .setSmallIcon(R.drawable.ic_launcher_background)

            .setTimeoutAfter(5000)

            .setAutoCancel(true)

            .setContentIntent(pendingIntent)

            .build()

        notificationManager?.notify(notificationId,notification)

    }



    /** 弹框使用 - 因为此处涉及到fragment等生命周期，进入其他activity内时候，在前的activity使用useDialog会因为生命周期问题闪退*/

    private fun useDialog() {

        //弹出多个同种弹框

//        alarmDialogFragment = AlarmDialogFragment()

//        alarmDialogFragment?.show(supportFragmentManager,"testDialog")



        //不弹出多个同种弹框，一次只弹一个，若弹框存在不弹新框

        if (alarmDialogFragment?.isVisible == false){//如果不加这一句，当弹框存在时候在调用alarmDialogFragment.show的时候会报错，因为alarmDialogFragment已经存在

            alarmDialogFragment?.show(supportFragmentManager,"testDialog")

        }else{

            //更新弹框内信息

        }

    }



    /** 关闭报警弹框 */

    private fun closeAlarmDialog() {

        if (alarmDialogFragment?.isVisible == true) {

            alarmDialogFragment?.dismiss()//要关闭的弹框

        }

    }



    //状态栏透明,且组件占据了状态栏

    private fun initWindow() {

        window.statusBarColor = Color.TRANSPARENT

        window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

    }



    /** 初始化服务 */

    private fun initService() {

        CustomLog.d(TAG,"开启前台服务")

        bgServiceIntent = bgServiceIntent ?: Intent(this, BackgroundService::class.java)

        this.startService(bgServiceIntent)

    }

}

总结

只是弹出弹框和通知的话，实现很好实现，中间麻烦地方在于当app使用多个Activity，该怎么实现跳转到指定的界面。当然这里麻烦是，从ActivityB跳转到ActivityA的Fragment，如果是只有一个Activity应该会好办些。个人感觉fragment跳转应该有更好的方式实现希望能和大佬们交流下这种情况下，用什么技术实现。

PS：感觉原生Android在写界面和跳转方面写起来不太方便。不知道大家有便捷的方式吗。

代码地址

GitHub：github.com/SmallCrispy…

最近项目上要实现一个小 'x' 的关闭样式, 今天记录一下处理过程

先看效果

HTML DOM 元素说明

要渲染内容必须有 dom 节点, 这里我们使用 span 作为容器, 然后所有的处理都基于它进行处理

<span class="close-x">span>

第一步, 设置 close-x 的样式

@closeXSize: 20px; // 大小/尺寸

@closeXLine: 2px; // 线条宽度

.close-x {

    position: relative;

    display: inline-block;

    width: @closeXSize;

    height: @closeXSize;

    cursor: pointer;

}

• 通过使用 closeXSize closeXLine, 方便对尺寸进行调整
  
  渲染出来大概是这样的
  

第二步, 通过伪元素 before after 画两条线

.close-x {

    // ...



    &::before, &::after {

        position: absolute;

        left: 50%;

        width: @closeXLine;

        height: 100%;

        margin-left: (@closeXLine / -2);

        content: '';

        background: #000;

    }

}

• margin-left 的设置是为了处理'线'的自身宽度
  
  渲染出来大概是这样的
  

第三步, 分别设置旋转角度

.close-x {

    // ...



    &::before {

        transform: rotate(-45deg);

    }



    &::after {

        transform: rotate(45deg);

    }

}

渲染出来大概是这样的, 基本上就完成了

继续优化, 锦上添花

• 先来定义一个动画, 动画的意思是这样的:
  
  
  
  • 当为 0% 时旋转角为 0 度,
  
  
  • 当为 100% 时旋转角为 360 度
  
  
  
  

@keyframes rotating {

    0% {

        transform: rotate(0deg);

    }



    100% {

        transform: rotate(360deg);

    }

}

持续旋转

.rotate-infinite {

    animation: rotating .3s infinite linear;

}



// 使用方式 增加类 rotate-infinite

// 

加载时旋转一次

.rotate-one {

    animation: rotating .3s linear;

}



// 使用方式 增加类 rotate-one

// 

hover 时旋转一次

.rotate-hover:hover {

    .rotate-one();

}



// 使用方式 增加类 rotate-hover

// 

选中时旋转

.rotate-active:active {

    .rotate-infinite();

}



// 使用方式 增加类 rotate-active

// 

纯JS实现

function addCloseX(content) {

    const closeXSize = 20;

    const closeXLine = 2;



    const closeXWrap = document.createElement('div');

    closeXWrap.style.cssText = `

        position: relative;

        display: inline-block;

        width: ${closeXSize}px;

        height: ${closeXSize}px;

        cursor: pointer;

    `;



    const baseStyle = `

        display: block;

        height: 100%;

        width: ${closeXLine}px;

        margin: auto;

        background: #000;

    `;

    const xLineOne = document.createElement('i');

    xLineOne.style.cssText = baseStyle + `

        transform: rotate(45deg);

    `;

    const xLineTwo = document.createElement('i');

    xLineTwo.style.cssText = baseStyle + `

        margin-top: -100%;

        transform: rotate(-45deg);

    `;

    closeXWrap.appendChild(xLineOne);

    closeXWrap.appendChild(xLineTwo);



    content.appendChild(closeXWrap);

}



addCloseX(document.getElementById('close'))

需要提供一下注入的位置, 以上示例需要我们提供这样的 dmo 节点:

<div id="close">div>

• 这种方式没有使用样式表, 所有的样式都使用了行内样式的方式实现的


• 因为只用到了行内样式, 所以没办法使用伪元素, 故引入了两个 i 标签代替

结束

相关文档

CSS 实现圆(环)形进度条