欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android仿簡(jiǎn)書動(dòng)態(tài)searchview搜索欄效果

 更新時(shí)間：2017年06月21日 14:55:44   作者：chiyidun  
這篇文章主要為大家詳細(xì)介紹了Android仿簡(jiǎn)書動(dòng)態(tài)searchview效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

簡(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í)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論