溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了如何在Android應用中實現一個動態searchview搜索欄效果，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
實現這個效果， 只要關注幾個點
1.搜索欄伸展和收縮動畫效果實現
2.搜索欄伸展和收縮的時機
3.頂部透明度的漸變
搜索欄伸展和收縮動畫效果實現：
我們只要明確，使用系統為我們提供的Transition框架，就可以輕而易舉的實現了。
首先要引入依賴compile 'com.android.support:design:25.3.1'，要知道我們使用到的這部分Transition效果只是封裝了屬性動畫的內容，是可以兼容到5.0之前的。
private void expand() {
//設置伸展狀態時的布局
tvSearch.setText("搜索簡書的內容和朋友");
RelativeLayout.LayoutParams LayoutParams = (RelativeLayout.LayoutParams) mSearchLayout.getLayoutParams();
LayoutParams.width = LayoutParams.MATCH_PARENT;
LayoutParams.setMargins(dip2px(10), dip2px(10), dip2px(10), dip2px(10));
mSearchLayout.setLayoutParams(LayoutParams);
//設置動畫
beginDelayedTransition(mSearchLayout);
}
private void reduce() {
//設置收縮狀態時的布局
tvSearch.setText("搜索");
RelativeLayout.LayoutParams LayoutParams = (RelativeLayout.LayoutParams) mSearchLayout.getLayoutParams();
LayoutParams.width = dip2px(80);
LayoutParams.setMargins(dip2px(10), dip2px(10), dip2px(10), dip2px(10));
mSearchLayout.setLayoutParams(LayoutParams);
//設置動畫
beginDelayedTransition(mSearchLayout);
}
void beginDelayedTransition(ViewGroup view) {
mSet = new AutoTransition();
//設置動畫持續時間
mSet.setDuration(300);
// 開始表演
TransitionManager.beginDelayedTransition(view, mSet);
}其中mSearchLayout就是搜索框的布局，只需要動態設置一下伸展和收縮的布局大小和其中顯示的文字，剩下的就交給Transition吧~ 這樣搜索框就可以來回搖擺了。。
搜索欄伸展和收縮的時機：
觀察一下效果，伸展的時機是當頂部完全蓋住banner的時候開始的，收縮的時機是滾動到頂部的時候觸發。需要我們監聽scllerview的滾動狀態。這里的頂部我是用了自定義布局的toolbar，然后用一個imageview代替了banner。
//scrollview滾動狀態監聽
mScrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
@Override
public void onScrollChanged() {
//改變toolbar的透明度
changeToolbarAlpha();
//滾動距離>=大圖高度-toolbar高度 即toolbar完全蓋住大圖的時候 且不是伸展狀態 進行伸展操作
if (mScrollView.getScrollY() >=ivImg.getHeight() - toolbar.getHeight() && !isExpand) {
expand();
isExpand = true;
}
//滾動距離<=0時 即滾動到頂部時 且當前伸展狀態 進行收縮操作
else if (mScrollView.getScrollY()<=0&& isExpand) {
reduce();
isExpand = false;
}
}
});
}當然簡書的整個布局是基于recyclerview的，這里我為了方便使用了scrollerview。recyclerview也只需監聽相應的滾動狀態即可。
頂部透明度的漸變
直接上代碼
private void changeToolbarAlpha() {
int scrollY = mScrollView.getScrollY();
//快速下拉會引起瞬間scrollY<0
if(scrollY<0){
toolbar.getBackground().mutate().setAlpha(0);
return;
}
//計算當前透明度比率
float radio= Math.min(1,scrollY/(ivImg.getHeight()-toolbar.getHeight()*1f));
//設置透明度
toolbar.getBackground().mutate().setAlpha( (int)(radio * 0xFF));
}注意剛才監聽滾動事件的時候調用changeToolbarAlpha()方法，并且需要初始設置為全透明
toolbar.getBackground().mutate().setAlpha(0);
好了關鍵代碼就這么多點了~
下面附上完整代碼
布局文件
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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:background="#c2c0c0" > <ScrollView android:id="@+id/scrollView" android:layout_width="match_parent" android:layout_height="wrap_content" android:scrollbars="none"> <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <FrameLayout android:layout_width="match_parent" android:layout_height="1500dp"> <ImageView android:id="@+id/iv_img" android:layout_width="match_parent" android:layout_height="180dp" android:scaleType="centerCrop" android:src="@drawable/night1" /> </FrameLayout> </FrameLayout> </ScrollView> <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/toolbar" android:background="@android:color/white" android:fitsSystemWindows="true"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <LinearLayout android:id="@+id/ll_search" android:layout_width="80dp" android:layout_height="30dp" android:layout_alignParentRight="true" android:layout_marginRight="10dp" android:layout_marginTop="10dp" android:layout_marginBottom="10dp" android:background="@drawable/shape_bg" android:gravity="center"> <TextView android:id="@+id/tv_search" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableLeft="@drawable/search" android:gravity="center_vertical" android:text="搜索" android:textColor="#8A8A8A" /> </LinearLayout> </RelativeLayout> </android.support.v7.widget.Toolbar> </RelativeLayout>
就一個activity
public class MainActivity extends AppCompatActivity {
@Bind(R.id.tv_search)
TextView tvSearch;
@Bind(R.id.ll_search)
LinearLayout mSearchLayout;
@Bind(R.id.scrollView)
ScrollView mScrollView;
boolean isExpand = false;
@Bind(R.id.iv_img)
ImageView ivImg;
@Bind(R.id.toolbar)
Toolbar toolbar;
private TransitionSet mSet;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
//設置全屏透明狀態欄
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
ViewGroup rootView = (ViewGroup) ((ViewGroup)findViewById(android.R.id.content)).getChildAt(0);
ViewCompat.setFitsSystemWindows(rootView,false);
rootView.setClipToPadding(true);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS|
WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN| View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
getWindow().setStatusBarColor(Color.TRANSPARENT);
}
//設置toolbar初始透明度為0
toolbar.getBackground().mutate().setAlpha(0);
//scrollview滾動狀態監聽
mScrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
@Override
public void onScrollChanged() {
//改變toolbar的透明度
changeToolbarAlpha();
//滾動距離>=大圖高度-toolbar高度 即toolbar完全蓋住大圖的時候 且不是伸展狀態 進行伸展操作
if (mScrollView.getScrollY() >=ivImg.getHeight() - toolbar.getHeight() && !isExpand) {
expand();
isExpand = true;
}
//滾動距離<=0時 即滾動到頂部時 且當前伸展狀態 進行收縮操作
else if (mScrollView.getScrollY()<=0&& isExpand) {
reduce();
isExpand = false;
}
}
});
}
private void changeToolbarAlpha() {
int scrollY = mScrollView.getScrollY();
//快速下拉會引起瞬間scrollY<0
if(scrollY<0){
toolbar.getBackground().mutate().setAlpha(0);
return;
}
//計算當前透明度比率
float radio= Math.min(1,scrollY/(ivImg.getHeight()-toolbar.getHeight()*1f));
//設置透明度
toolbar.getBackground().mutate().setAlpha( (int)(radio * 0xFF));
}
private void expand() {
//設置伸展狀態時的布局
tvSearch.setText("搜索簡書的內容和朋友");
RelativeLayout.LayoutParams LayoutParams = (RelativeLayout.LayoutParams) mSearchLayout.getLayoutParams();
LayoutParams.width = LayoutParams.MATCH_PARENT;
LayoutParams.setMargins(dip2px(10), dip2px(10), dip2px(10), dip2px(10));
mSearchLayout.setLayoutParams(LayoutParams);
//開始動畫
beginDelayedTransition(mSearchLayout);
}
private void reduce() {
//設置收縮狀態時的布局
tvSearch.setText("搜索");
RelativeLayout.LayoutParams LayoutParams = (RelativeLayout.LayoutParams) mSearchLayout.getLayoutParams();
LayoutParams.width = dip2px(80);
LayoutParams.setMargins(dip2px(10), dip2px(10), dip2px(10), dip2px(10));
mSearchLayout.setLayoutParams(LayoutParams);
//開始動畫
beginDelayedTransition(mSearchLayout);
}
void beginDelayedTransition(ViewGroup view) {
mSet = new AutoTransition();
mSet.setDuration(300);
TransitionManager.beginDelayedTransition(view, mSet);
}
private int dip2px(float dpVale) {
final float scale = getResources().getDisplayMetrics().density;
return (int) (dpVale * scale + 0.5f);
}
}上述內容就是如何在Android應用中實現一個動態searchview搜索欄效果，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
