之前使用嗶哩嗶哩客戶端的時(shí)候覺得她的搜索效果非常的贊擎颖，最近剛好有時(shí)間準(zhǔn)備學(xué)習(xí)嘗試自己寫一下轻要。
話不多說，先看東西是吧
test.gif
好了廢話不多說正式開始：
1.首先分析一下我們解析獲得的布局樣式
image.png
觀察之后發(fā)現(xiàn)B站實(shí)現(xiàn)這個(gè)效果是在主頁(yè)面有單獨(dú)的一個(gè)布局带膀，也就是說這個(gè)列表其實(shí)是早就寫好的撩银。那么實(shí)際上這個(gè)效果就只有2個(gè)步驟1個(gè)就是首頁(yè)的布局，2就是圓形的動(dòng)畫鬼佣。
2.圓形動(dòng)畫的實(shí)現(xiàn)：
這個(gè)圓形動(dòng)畫就是5.0之后谷歌新加入的ViewAnimationUtils.createCircularRevea
image.png
* @param view 需要增加動(dòng)畫的view
* @param centerX 確定圓心
*
* @param centerY 確定圓心
*
* @param startRadius 開始半徑
* @param endRadius 結(jié)束半徑
*/
public static Animator createCircularReveal(View view,
int centerX, int centerY, float startRadius, float endRadius) {
}
實(shí)現(xiàn)動(dòng)畫效果：
public static void handleToolBar(final Context context, final CardView search, final EditText editText) {
//隱藏
if (search.getVisibility() == View.VISIBLE) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
final Animator animatorHide = ViewAnimationUtils.createCircularReveal(search,
search.getWidth() - dip2px(context, 56),
dip2px(context, 23),
//確定元的半徑（算長(zhǎng)寬的斜邊長(zhǎng)驶拱，這樣半徑不會(huì)太短也不會(huì)很長(zhǎng)效果比較舒服）
(float) Math.hypot(search.getWidth(), search.getHeight()),
0);
animatorHide.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
search.setVisibility(View.GONE);
((InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE)).hideSoftInputFromWindow(search.getWindowToken(), 0);
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
animatorHide.setDuration(300);
animatorHide.start();
} else {
// 關(guān)閉輸入法
((InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE)).hideSoftInputFromWindow(search.getWindowToken(), 0);
search.setVisibility(View.GONE);
}
editText.setText("");
search.setEnabled(false);
}
//顯示
else {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
final Animator animator = ViewAnimationUtils.createCircularReveal(search,
search.getWidth() - dip2px(context, 56),
dip2px(context, 23),
0,
(float) Math.hypot(search.getWidth(), search.getHeight()));
animator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
((InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE)).toggleSoftInput(InputMethodManager.SHOW_FORCED, InputMethodManager.HIDE_IMPLICIT_ONLY);
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
search.setVisibility(View.VISIBLE);
if (search.getVisibility() == View.VISIBLE) {
animator.setDuration(300);
animator.start();
search.setEnabled(true);
}
} else {
search.setVisibility(View.VISIBLE);
search.setEnabled(true);
// 關(guān)閉輸入法
((InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE)).toggleSoftInput(InputMethodManager.SHOW_FORCED, InputMethodManager.HIDE_IMPLICIT_ONLY);
}
}
項(xiàng)目源代碼：
https://github.com/didixyy/BilibiliSearchView
