Android仿簡(jiǎn)書動(dòng)態(tài)searchview搜索欄效果
簡(jiǎn)書的動(dòng)態(tài)搜索欄效果是這樣的,挺高大上的感覺。
ezgif.com-resize.gif
仔細(xì)想一下,其實(shí)實(shí)現(xiàn)起來非常簡(jiǎn)單,這是我做的效果,基本完美還原。
ezgif.com-resize (2).gif
實(shí)現(xiàn)這個(gè)效果, 只要關(guān)注幾個(gè)點(diǎn)
1.搜索欄伸展和收縮動(dòng)畫效果實(shí)現(xiàn)
2.搜索欄伸展和收縮的時(shí)機(jī)
3.頂部透明度的漸變
搜索欄伸展和收縮動(dòng)畫效果實(shí)現(xiàn):
我們只要明確,使用系統(tǒng)為我們提供的Transition框架,就可以輕而易舉的實(shí)現(xiàn)了。
首先要引入依賴compile 'com.android.support:design:25.3.1',要知道我們使用到的這部分Transition效果只是封裝了屬性動(dòng)畫的內(nèi)容,是可以兼容到5.0之前的。
private void expand() { //設(shè)置伸展?fàn)顟B(tài)時(shí)的布局 tvSearch.setText("搜索簡(jiǎn)書的內(nèi)容和朋友"); 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); //設(shè)置動(dòng)畫 beginDelayedTransition(mSearchLayout); } private void reduce() { //設(shè)置收縮狀態(tài)時(shí)的布局 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); //設(shè)置動(dòng)畫 beginDelayedTransition(mSearchLayout); } void beginDelayedTransition(ViewGroup view) { mSet = new AutoTransition(); //設(shè)置動(dòng)畫持續(xù)時(shí)間 mSet.setDuration(300); // 開始表演 TransitionManager.beginDelayedTransition(view, mSet); }
其中mSearchLayout就是搜索框的布局,只需要?jiǎng)討B(tài)設(shè)置一下伸展和收縮的布局大小和其中顯示的文字,剩下的就交給Transition吧~ 這樣搜索框就可以來回?fù)u擺了。。
搜索欄伸展和收縮的時(shí)機(jī):
觀察一下效果,伸展的時(shí)機(jī)是當(dāng)頂部完全蓋住banner的時(shí)候開始的,收縮的時(shí)機(jī)是滾動(dòng)到頂部的時(shí)候觸發(fā)。需要我們監(jiān)聽scllerview的滾動(dòng)狀態(tài)。這里的頂部我是用了自定義布局的toolbar,然后用一個(gè)imageview代替了banner。
//scrollview滾動(dòng)狀態(tài)監(jiān)聽 mScrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() { @Override public void onScrollChanged() { //改變toolbar的透明度 changeToolbarAlpha(); //滾動(dòng)距離>=大圖高度-toolbar高度 即toolbar完全蓋住大圖的時(shí)候 且不是伸展?fàn)顟B(tài) 進(jìn)行伸展操作 if (mScrollView.getScrollY() >=ivImg.getHeight() - toolbar.getHeight() && !isExpand) { expand(); isExpand = true; } //滾動(dòng)距離<=0時(shí) 即滾動(dòng)到頂部時(shí) 且當(dāng)前伸展?fàn)顟B(tài) 進(jìn)行收縮操作 else if (mScrollView.getScrollY()<=0&& isExpand) { reduce(); isExpand = false; } } }); }
當(dāng)然簡(jiǎn)書的整個(gè)布局是基于recyclerview的,這里我為了方便使用了scrollerview。recyclerview也只需監(jiān)聽相應(yīng)的滾動(dòng)狀態(tài)即可。
頂部透明度的漸變
直接上代碼
private void changeToolbarAlpha() { int scrollY = mScrollView.getScrollY(); //快速下拉會(huì)引起瞬間scrollY<0 if(scrollY<0){ toolbar.getBackground().mutate().setAlpha(0); return; } //計(jì)算當(dāng)前透明度比率 float radio= Math.min(1,scrollY/(ivImg.getHeight()-toolbar.getHeight()*1f)); //設(shè)置透明度 toolbar.getBackground().mutate().setAlpha( (int)(radio * 0xFF)); }
注意剛才監(jiān)聽滾動(dòng)事件的時(shí)候調(diào)用changeToolbarAlpha()方法,并且需要初始設(shè)置為全透明
toolbar.getBackground().mutate().setAlpha(0);
好了關(guān)鍵代碼就這么多點(diǎn)了~
下面附上完整代碼
布局文件
<?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>
就一個(gè)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); //設(shè)置全屏透明狀態(tài)欄 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); } //設(shè)置toolbar初始透明度為0 toolbar.getBackground().mutate().setAlpha(0); //scrollview滾動(dòng)狀態(tài)監(jiān)聽 mScrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() { @Override public void onScrollChanged() { //改變toolbar的透明度 changeToolbarAlpha(); //滾動(dòng)距離>=大圖高度-toolbar高度 即toolbar完全蓋住大圖的時(shí)候 且不是伸展?fàn)顟B(tài) 進(jìn)行伸展操作 if (mScrollView.getScrollY() >=ivImg.getHeight() - toolbar.getHeight() && !isExpand) { expand(); isExpand = true; } //滾動(dòng)距離<=0時(shí) 即滾動(dòng)到頂部時(shí) 且當(dāng)前伸展?fàn)顟B(tài) 進(jìn)行收縮操作 else if (mScrollView.getScrollY()<=0&& isExpand) { reduce(); isExpand = false; } } }); } private void changeToolbarAlpha() { int scrollY = mScrollView.getScrollY(); //快速下拉會(huì)引起瞬間scrollY<0 if(scrollY<0){ toolbar.getBackground().mutate().setAlpha(0); return; } //計(jì)算當(dāng)前透明度比率 float radio= Math.min(1,scrollY/(ivImg.getHeight()-toolbar.getHeight()*1f)); //設(shè)置透明度 toolbar.getBackground().mutate().setAlpha( (int)(radio * 0xFF)); } private void expand() { //設(shè)置伸展?fàn)顟B(tài)時(shí)的布局 tvSearch.setText("搜索簡(jiǎn)書的內(nèi)容和朋友"); 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); //開始動(dòng)畫 beginDelayedTransition(mSearchLayout); } private void reduce() { //設(shè)置收縮狀態(tài)時(shí)的布局 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); //開始動(dòng)畫 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); } }
更完整的在這里https://github.com/yanyiqun001/dymicSearchview 希望大家多多支持
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android Studio搜索功能(查找功能)及快捷鍵圖文詳解
- Android實(shí)現(xiàn)搜索功能并本地保存搜索歷史記錄
- Android自定義View實(shí)現(xiàn)搜索框(SearchView)功能
- Android百度地圖實(shí)現(xiàn)搜索和定位及自定義圖標(biāo)繪制并點(diǎn)擊時(shí)彈出泡泡
- Android搜索框SearchView屬性和用法詳解
- Android SearchView搜索框組件的使用方法
- Android遍歷所有文件夾和子目錄搜索文件
- Android搜索框組件SearchView的基本使用方法
- Android ListView用EditText實(shí)現(xiàn)搜索功能效果
- Android實(shí)現(xiàn)簡(jiǎn)單動(dòng)態(tài)搜索功能
相關(guān)文章
android實(shí)現(xiàn)讀取、搜索聯(lián)系人的代碼
本文給大家分享的是在安卓系統(tǒng)中實(shí)現(xiàn)讀取搜索聯(lián)系人的代碼,非常的實(shí)用,想學(xué)習(xí)安卓開發(fā)的小伙伴一定不要錯(cuò)過。2015-03-03Android開發(fā)自學(xué)筆記(五):使用代碼控制界面
這篇文章主要介紹了Android開發(fā)自學(xué)筆記(五):使用代碼控制界面,本文講解了添加第二個(gè)layout、添加MyActivity的code、setup函數(shù)、getResult函數(shù)等內(nèi)容,需要的朋友可以參考下2015-04-04Android編程中ViewPage判斷左右滑動(dòng)方向的方法
這篇文章主要介紹了Android編程中ViewPage判斷左右滑動(dòng)方向的方法,涉及Android中ViewPage針對(duì)滑動(dòng)判定的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-10-10分享Android 藍(lán)牙4.0(ble)開發(fā)的解決方案
這篇文章主要為大家分享了Android 藍(lán)牙4.0(ble)開發(fā)的解決方案,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03Android ScrollView實(shí)現(xiàn)下拉彈回動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了Android ScrollView實(shí)現(xiàn)下拉彈回動(dòng)畫效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08android中Webview實(shí)現(xiàn)截屏三種方式小結(jié)
本篇文章主要介紹了android Webview實(shí)現(xiàn)截屏,主要詳解了3種方式,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03Android WebView 不支持 H5 input type="file" 解決方法
這篇文章主要介紹了Android WebView 不支持 H5 input type="file" 解決方法,需要的朋友可以參考下2017-06-06詳細(xì)介紹Android中的視圖焦點(diǎn)Focus的使用
本篇文章主要介紹了詳細(xì)介紹Android中的視圖焦點(diǎn)Focus的使用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01Android中 動(dòng)態(tài)改變對(duì)話框值的方法
Android Dev-Guide 推薦重寫Activity.onCreateDialog()方法來創(chuàng)建Dialog,這樣Dialog就歸屬于這個(gè)Activity了。2013-04-04Android實(shí)現(xiàn)橫豎屏切換的實(shí)例代碼
本篇文章主要介紹了Android實(shí)現(xiàn)橫豎屏切換的實(shí)例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06