Android仿簡(jiǎn)書(shū)動(dòng)態(tài)searchview搜索欄效果
更新時(shí)間：2017年06月21日 14:55:44 作者：chiyidun
這篇文章主要為大家詳細(xì)介紹了Android仿簡(jiǎn)書(shū)動(dòng)態(tài)searchview效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
簡(jiǎn)書(shū)的動(dòng)態(tài)搜索欄效果是這樣的，挺高大上的感覺(jué)。
ezgif.com-resize.gif
仔細(xì)想一下，其實(shí)實(shí)現(xiàn)起來(lái)非常簡(jiǎn)單，這是我做的效果，基本完美還原。
ezgif.com-resize (2).gif
實(shí)現(xiàn)這個(gè)效果， 只要關(guān)注幾個(gè)點(diǎn)
1.搜索欄伸展和收縮動(dòng)畫(huà)效果實(shí)現(xiàn)
2.搜索欄伸展和收縮的時(shí)機(jī)
3.頂部透明度的漸變
搜索欄伸展和收縮動(dòng)畫(huà)效果實(shí)現(xiàn)：
我們只要明確，使用系統(tǒng)為我們提供的Transition框架，就可以輕而易舉的實(shí)現(xiàn)了。
首先要引入依賴compile 'com.android.support:design:25.3.1'，要知道我們使用到的這部分Transition效果只是封裝了屬性動(dòng)畫(huà)的內(nèi)容，是可以兼容到5.0之前的。
private void expand() {
//設(shè)置伸展?fàn)顟B(tài)時(shí)的布局
tvSearch.setText("搜索簡(jiǎn)書(shū)的內(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)畫(huà)
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)畫(huà)
beginDelayedTransition(mSearchLayout);
}
void beginDelayedTransition(ViewGroup view) {
mSet = new AutoTransition();
//設(shè)置動(dòng)畫(huà)持續(xù)時(shí)間
mSet.setDuration(300);
// 開(kāi)始表演
TransitionManager.beginDelayedTransition(view, mSet);
}
其中mSearchLayout就是搜索框的布局，只需要?jiǎng)討B(tài)設(shè)置一下伸展和收縮的布局大小和其中顯示的文字，剩下的就交給Transition吧~ 這樣搜索框就可以來(lái)回?fù)u擺了。。
搜索欄伸展和收縮的時(shí)機(jī)：
觀察一下效果，伸展的時(shí)機(jī)是當(dāng)頂部完全蓋住banner的時(shí)候開(kāi)始的，收縮的時(shí)機(jī)是滾動(dòng)到頂部的時(shí)候觸發(fā)。需要我們監(jiān)聽(tīng)scllerview的滾動(dòng)狀態(tài)。這里的頂部我是用了自定義布局的toolbar，然后用一個(gè)imageview代替了banner。
//scrollview滾動(dòng)狀態(tài)監(jiān)聽(tīng)
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)書(shū)的整個(gè)布局是基于recyclerview的，這里我為了方便使用了scrollerview。recyclerview也只需監(jiān)聽(tīng)相應(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)聽(tīng)滾動(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)聽(tīng)
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)書(shū)的內(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);
//開(kāi)始動(dòng)畫(huà)
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);
//開(kāi)始動(dòng)畫(huà)
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水波紋載入控件CircleWaterWaveView使用詳解
這篇文章主要為大家詳細(xì)介紹了Android水波紋載入控件CircleWaterWaveView使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
TabLayout+ViewPager實(shí)現(xiàn)切頁(yè)的示例代碼
這篇文章主要介紹了TabLayout+ViewPager實(shí)現(xiàn)切頁(yè)的示例代碼，可實(shí)現(xiàn)左右滑動(dòng)切換視圖界面和點(diǎn)擊切換，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2019-01-01
Android Activity之間的數(shù)據(jù)傳遞方法總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于Android Activity之間的數(shù)據(jù)傳遞方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)各位Android開(kāi)發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Android 友盟第三方登錄與分享的實(shí)現(xiàn)代碼
這篇文章主要介紹了Android 友盟第三方登錄與分享的實(shí)現(xiàn)代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
淺析android studio3.5中使用recycleview的包
這篇文章主要介紹了android studio3.5中使用recycleview的包，本文雖然內(nèi)容不長(zhǎng)，但是給出了思路,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了android中的相對(duì)路徑,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
android studio 新手入門(mén)教程（二）項(xiàng)目的導(dǎo)入教程圖解
這篇文章主要介紹了android studio 新手入門(mén)教程（二）項(xiàng)目的導(dǎo)入教程圖解,需要的朋友可以參考下2017-12-12
Flutter構(gòu)建自定義Widgets的全過(guò)程記錄
在Flutter實(shí)際開(kāi)發(fā)中,大家可能會(huì)遇到flutter框架中提供的widget達(dá)不到我們想要的效果,這時(shí)就需要我們?nèi)プ远xwidget,下面這篇文章主要給大家介紹了關(guān)于Flutter構(gòu)建自定義Widgets的相關(guān)資料,需要的朋友可以參考下2022-01-01
android仿知乎標(biāo)題欄隨ScrollView滾動(dòng)變色
這篇文章主要為大家詳細(xì)介紹了android仿知乎標(biāo)題欄隨ScrollView滾動(dòng)變色，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章主要為大家詳細(xì)介紹了Android控件ListView的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07