Android 仿Boss直聘跳转效果

写在前面

这段时间由于找工作的原因，下载了boss直聘，在ios最新版(4.1)上点击首页列表进行页面跳转的那个效果感觉很炫，但是android最新版本(4.2)上却没有对应的效果，不知道以前版本有没有，感觉很好奇，所以就有了本文...

IOS版本boss直聘的效果

这里写图片描述

分析

通过多次观察页面跳转动画，发现其实现过程也很简单:</br>
1、获取列表中item的位置。</br>
2、把根布局缩放0.9倍，同时跳出悬浮框，添加一个View(暂且称它为tempView)，设置tempView的高度和宽度为列表的item的高度和宽度。</br>
3、对tempView进行缩放，缩放倍数为tempView距离屏幕顶部，距离屏幕底部中的最大值处于tempView高度: Math.max(tempView.locationX, Math.abs(tempView.locationX - ScreenHeight)) / tempView.height。</br>
4、在安卓上，即使设置

Intent.FLAG_ACTIVITY_NO_ANIMATION

在部分机型上也无法禁止动画，如果按照正常的步骤，关闭悬浮框再进行页面跳转，就达不到boss直聘上的跳转效果，所以就需要当tempView展开到最大时，马上进行页面跳转。</br>
5、启动加载等待动画，延时1秒后，启动alpha动画，将tempView透明度设置为0，关闭悬浮框。</br>

悬浮框代码

public class BossTransferView extends LinearLayout {
    private static final String TAG = "ExpansionTemp";
    private View mHandleView;
    private WindowManager mWm;
    private ImageView mImg;
    private View mTemp;
    private ImageView mPb;
    private int[] mLocation = new int[2];
    private View mRootView;

    public BossTransferView(Context context, View rootView, View handleView, WindowManager wm) {
        super(context, null);
        mHandleView = handleView;
        mRootView = rootView;
        mWm = wm;
        init();
    }

    public BossTransferView(Context context, AttributeSet attrs) {
        super(context, attrs, 0);
    }

    public BossTransferView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    private void init() {
        LayoutInflater.from(getContext()).inflate(R.layout.layout_boss_transfer, this);
        mImg = (ImageView) findViewById(R.id.img);
        mTemp = findViewById(R.id.line);
//        mPb = (ProgressBar) findViewById(R.id.progress);
        mPb = (ImageView) findViewById(R.id.progress);
        mHandleView.getLocationInWindow(mLocation);
        int sbh = Util.getStatusBarHeight(getContext());
        mImg.setTranslationY(mLocation[1] - sbh);
        mTemp.setTranslationY(mLocation[1] + mImg.getMeasuredHeight() / 2 + sbh);
        mPb.setVisibility(GONE);
        Bitmap bm = getViewImg(mHandleView);
        if (bm != null) {
            mImg.setImageBitmap(getViewImg(mHandleView));
        }
        AnimationDrawable ad = new AnimationDrawable();
        ad.addFrame(getDrawable(R.mipmap.icon_refresh_left), 200);
        ad.addFrame(getDrawable(R.mipmap.icon_refresh_center), 200);
        ad.addFrame(getDrawable(R.mipmap.icon_refresh_right), 200);
        mPb.setImageDrawable(ad);
        ad.setOneShot(false);
        ad.start();
    }

    private Drawable getDrawable(@DrawableRes int drawable){
        return getContext().getResources().getDrawable(drawable);
    }

    public void show() {
        handleRootView();
        setBackgroundColor(Color.parseColor("#7f000000"));
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                mTemp.setVisibility(View.VISIBLE);
                expansion();
            }
        }, 500);
    }

    private void handleRootView() {
        ObjectAnimator setScaleY = ObjectAnimator.ofFloat(mRootView, "scaleY", 1f, 0.95f);
        ObjectAnimator setScaleX = ObjectAnimator.ofFloat(mRootView, "scaleX", 1f, 0.95f);
        AnimatorSet set = new AnimatorSet();
        set.play(setScaleX).with(setScaleY);
        set.setDuration(500);
        set.start();
    }

    public Bitmap getViewImg(View view) {
        view.setDrawingCacheEnabled(true);
        view.buildDrawingCache();
        int width = Util.getScreenParams(getContext())[0];
        Bitmap bmp = view.getDrawingCache();
        if (bmp == null) {
            return null;
        }
        Bitmap bp;
        bp = Bitmap.createBitmap(bmp, 0, 0, width, bmp.getHeight());
        view.destroyDrawingCache();
        return bp;
    }

    /**
     * 扩展到整个屏幕
     */
    private void expansion() {
        int wh = Util.getScreenParams(getContext())[1];
        int sbh = Util.getStatusBarHeight(getContext());
        int h = Math.max(mLocation[1], Math.abs(mLocation[1] - wh));
        ObjectAnimator animator = ObjectAnimator.ofFloat(mTemp, "scaleY", 1f, h + sbh);
        animator.setDuration(500);
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                mImg.setVisibility(View.GONE);
                Intent intent = new Intent(getContext(), BossDetailActivity.class);
                getContext().startActivity(intent);
                mRootView.setScaleY(1f);
                mRootView.setScaleX(1f);
                mPb.setVisibility(VISIBLE);
                setBackgroundColor(Color.TRANSPARENT);
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        fade();
                    }
                }, 1000);
            }
        });
        animator.start();
    }

    /**
     * 淡出
     */
    private void fade() {
        mPb.setVisibility(GONE);
        ObjectAnimator animator = ObjectAnimator.ofFloat(mTemp, "alpha", 1f, 0f);
        animator.setDuration(800);
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                mTemp.setVisibility(GONE);
//                mTemp.setScaleY(1f);
                mPb.setVisibility(GONE);
                mWm.removeView(BossTransferView.this);
            }
        });
        animator.start();
    }
}

由于涉及到两个Activity间的跳转，所以悬浮框就需要一直处于最显示层的最顶层，并且该悬浮框需要全局通用。</br>
在andorid里面可以使用WindowManager配合自定义View来实现悬浮框功能，上面便是悬浮框的自定义View。</br>
上面的核心参数是：mLocation，该数组是item在屏幕上的位置，通过

view.getLocationInWindow(mLocation);

方法，便可以轻松得到一个View在屏幕上的位置，不同于boss直聘上tempView的空白展开的是，我这里使用了item的图像缓存代替了boss直聘上tempView的位置，而填充整个页面任务是由tempView处于中间位置的一个1dp高度的view进行展开，进而覆盖整个屏幕。</br>
当展开到最大屏幕时，进行页面跳转，并将加载动画显示出来，将动画加载一秒，进行淡出操作，最终，将自定义的悬浮框View从WindowManager移除</br>

跳转类

由于一个工程项目中不可能只有一个列表，因此需要创建一个跳转帮助类，来实现跳转

public class TurnHelp {
    /**
     * 带动画跳转详情页面
     */
    public static void turn(Context context, View rootView, View itemView) {
        WindowManager wm = (WindowManager) context.getApplicationContext().getSystemService(Context.WINDOW_SERVICE);
        WindowManager.LayoutParams wmParams;
        BossTransferView temp = new BossTransferView(context, rootView, itemView, wm);
        wmParams = new WindowManager.LayoutParams();
//感谢5楼的小伙伴提出的解决小米等机型默认禁止弹出悬浮框的方案，直接把type，改为toast就可以了
        wmParams.type = WindowManager.LayoutParams.TYPE_TOAST;     // 系统提示类型,重要
        wmParams.format = 1;
        wmParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE; // 不能抢占聚焦点
        wmParams.flags = wmParams.flags | WindowManager.LayoutParams.FLAG_WATCH_OUTSIDE_TOUCH;
        wmParams.flags = wmParams.flags | WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS; // 排版不受限制
        wmParams.flags = wmParams.flags | WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL; // 排版不受限制
        wmParams.alpha = 1.0f;
        wmParams.gravity = Gravity.LEFT | Gravity.TOP;   //调整悬浮窗口至左上角
        //以屏幕左上角为原点，设置x、y初始值
        wmParams.x = 0;
        wmParams.y = 0;
        //设置悬浮窗口长宽数据
        wmParams.width = WindowManager.LayoutParams.MATCH_PARENT;
        wmParams.height = WindowManager.LayoutParams.MATCH_PARENT;
        //显示myFloatView图像
        wm.addView(temp, wmParams);
        temp.show();
    }
}

上面没啥好说的，就是WindowManager添加View的基本操作

启动代码

private View  mItemView;
mList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
      @Override
      public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
          mItemView = view;
          if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M
                  && checkSelfPermission(Settings.ACTION_MANAGE_OVERLAY_PERMISSION) == PackageManager.PERMISSION_GRANTED) {
              requestAlertWindowPermission();
          } else {
              TurnHelp.turn(MainActivity.this, findViewById(android.R.id.content), view);
          }

      }
  });

/**
* 6.0申请悬浮框权限
*/
private void requestAlertWindowPermission() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
        Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION);
        intent.setData(Uri.parse("package:" + getPackageName()));
        startActivityForResult(intent, 1);
    }
}

/**
* 6.0权限 回调
*/
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
   super.onActivityResult(requestCode, resultCode, data);
   if (requestCode == 1 && Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
       if (Settings.canDrawOverlays(this)) {
           TurnHelp.turn(MainActivity.this, findViewById(android.R.id.content), mItemView);
       } else {
           Toast.makeText(this, "申请悬浮框权限失败", Toast.LENGTH_SHORT).show();
       }
   }
}

最终效果

这里写图片描述

DEMO点我

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,133评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,682评论 3赞 390
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,784评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,508评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,603评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,607评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,604评论 3赞 415
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,359评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,805评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,121评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,280评论 1赞 344
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,959评论 5赞 339
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,588评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,206评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,442评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,193评论 2赞 367
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,144评论 2赞 352

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,016评论 25赞 707
  • GitHub上受欢迎的Android UI Library
    内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,749评论 22赞 665
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,088评论 4赞 62
  • 我的世界也精彩
    女儿的语文作业是一张试卷，大家都知道的，试卷最后一题就是一篇作文。这张试卷的作文题目是《我的世界真精彩》 女儿对于...
    走向阳光的自己阅读 575评论 6赞 6
  • 选购旋转木马的6个技巧
    1、转马类游乐场设备的外观必须拥有色彩鲜艳的外观，明亮而丰富的灯光和美妙的音乐。众所周知，第一印象对客户或乘坐者的...
    金宝客服王庆科阅读 316评论 0赞 0