寫在前面
這段時間由于找工作的原因，下載了boss直聘，在ios最新版(4.1)上點擊首頁列表進行頁面跳轉(zhuǎn)的那個效果感覺很炫，但是android最新版本(4.2)上卻沒有對應(yīng)的效果，不知道以前版本有沒有，感覺很好奇，所以就有了本文...
IOS版本boss直聘的效果
這里寫圖片描述
分析
通過多次觀察頁面跳轉(zhuǎn)動畫，發(fā)現(xiàn)其實現(xiàn)過程也很簡單:</br>
1、獲取列表中item的位置。</br>
2、把根布局縮放0.9倍，同時跳出懸浮框，添加一個View(暫且稱它為tempView)，設(shè)置tempView的高度和寬度為列表的item的高度和寬度。</br>
3、對tempView進行縮放，縮放倍數(shù)為tempView距離屏幕頂部，距離屏幕底部中的最大值處于tempView高度: Math.max(tempView.locationX, Math.abs(tempView.locationX - ScreenHeight)) / tempView.height。</br>
4、在安卓上，即使設(shè)置
Intent.FLAG_ACTIVITY_NO_ANIMATION
在部分機型上也無法禁止動畫，如果按照正常的步驟，關(guān)閉懸浮框再進行頁面跳轉(zhuǎn)，就達不到boss直聘上的跳轉(zhuǎn)效果，所以就需要當(dāng)tempView展開到最大時，馬上進行頁面跳轉(zhuǎn)。</br>
5、啟動加載等待動畫，延時1秒后，啟動alpha動畫，將tempView透明度設(shè)置為0，關(guān)閉懸浮框。</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間的跳轉(zhuǎn)，所以懸浮框就需要一直處于最顯示層的最頂層，并且該懸浮框需要全局通用。</br>
在andorid里面可以使用WindowManager配合自定義View來實現(xiàn)懸浮框功能，上面便是懸浮框的自定義View。</br>
上面的核心參數(shù)是：mLocation，該數(shù)組是item在屏幕上的位置，通過
view.getLocationInWindow(mLocation);
方法，便可以輕松得到一個View在屏幕上的位置，不同于boss直聘上tempView的空白展開的是，我這里使用了item的圖像緩存代替了boss直聘上tempView的位置，而填充整個頁面任務(wù)是由tempView處于中間位置的一個1dp高度的view進行展開，進而覆蓋整個屏幕。</br>
當(dāng)展開到最大屏幕時，進行頁面跳轉(zhuǎn)，并將加載動畫顯示出來，將動畫加載一秒，進行淡出操作，最終，將自定義的懸浮框View從WindowManager移除</br>
跳轉(zhuǎn)類
由于一個工程項目中不可能只有一個列表，因此需要創(chuàng)建一個跳轉(zhuǎn)幫助類，來實現(xiàn)跳轉(zhuǎn)
public class TurnHelp {
/**
* 帶動畫跳轉(zhuǎn)詳情頁面
*/
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樓的小伙伴提出的解決小米等機型默認(rèn)禁止彈出懸浮框的方案，直接把type，改為toast就可以了
wmParams.type = WindowManager.LayoutParams.TYPE_TOAST; // 系統(tǒng)提示類型,重要
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; //調(diào)整懸浮窗口至左上角
//以屏幕左上角為原點，設(shè)置x、y初始值
wmParams.x = 0;
wmParams.y = 0;
//設(shè)置懸浮窗口長寬數(shù)據(jù)
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申請懸浮框權(quán)限
*/
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權(quán)限 回調(diào)
*/
@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, "申請懸浮框權(quán)限失敗", Toast.LENGTH_SHORT).show();
}
}
}
最終效果
這里寫圖片描述
