ListView上滑ActionBar向上滑出螢幕、ListView下滑ActionBar從螢幕上部滑進螢幕
阿新 • • 發佈:2019-02-07
我們知道讓一個佈局顯示或者隱藏並帶有動畫效果,可以通過屬性動畫很方便地實現,所以這個效果的關鍵就是在於如何獲取ListView的各種滑動事件。所以藉助View的OnTouchListener介面來監聽ListView的滑動,通過比較與上次座標的大小,來判斷滑動的方向,並通過滑動的方向來判斷是否需要顯示或隱藏對應的佈局。在開始判斷滑動事件之前,我們還要給ListView新增一個HeaderView,避免第一個item被ToolBar遮擋,程式碼如下:(將header的高度設定成和toolbar一樣的高度)
View header = new View(this); header.setLayoutParams(new我們還需要定義一個mTouchStop變數用來獲取系統認為的最低滑動距離,即超過這個距離的移動,系統就將其定義為滑動狀態了,程式碼如下所示:AbsListView.LayoutParams(LayoutParams.MATCH_PARENT, (int) getResources().getDimension(R.dimen.height))); listView.addHeaderView(header);
mTouchShop = ViewConfiguration.get(this).getScaledDoubleTapSlop();有了這些準備工作,下面我們就可以判斷滑動的事件了,關鍵程式碼如下:
listView.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { //觸控時操作 case MotionEvent.ACTION_DOWN: mFirstY = event.getY(); break; //移動時操作 case MotionEvent.ACTION_MOVE程式碼邏輯很簡單,只是通過滑動點的座標改變大小,來判斷移動的方向,並根據移動方向來執行不同的動畫效果。: mCurrentY = event.getY(); if (mCurrentY - mFirstY > mTouchShop) {//down direction = 0; } else if (mFirstY - mCurrentY > mTouchShop) {//up direction = 1; } if (direction == 1) { if (mShow) { toolBarAnim(0); mShow = !mShow; } } else if (direction == 0) { if (!mShow) { toolBarAnim(1); mShow = !mShow; } } break; //離開時操作 case MotionEvent.ACTION_UP: break; } return false; } });
控制佈局顯示或隱藏的動畫程式碼如下:
private void toolBarAnim(int flag) { if (mAnimator != null && mAnimator.isRunning()) { mAnimator.cancel(); } if (flag == 0) { mAnimator = ObjectAnimator.ofFloat(toolbar, "translationY", toolbar.getTranslationY(), -toolbar.getHeight()); } else { mAnimator = ObjectAnimator.ofFloat(toolbar, "translationY", toolbar.getTranslationY(), 0); } mAnimator.start(); }
這裡使用了ToolBar,google已經推薦它用來逐漸取代ActionBar了,因為它更加靈活。但在使用的時候,一定要注意使用的theme一定是要NoActionbar的,不然會引起衝突,同時不要忘記引入編譯,程式碼如下:
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])compile 'com.android.support:appcompat-v7:23.2.1'
}完整程式碼如下:
public class MainActivity extends AppCompatActivity { private ListView listView; private ArrayList<String> arrayList = new ArrayList<String>(); private int lastVisibleItemPosition; private float mFirstY, mCurrentY, mTouchShop; private int direction; private boolean mShow = true; private ObjectAnimator mAnimator; private Toolbar toolbar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); toolbar = (Toolbar) findViewById(R.id.id_toolBar); setSupportActionBar(toolbar); //獲取系統認為的最低滑動距離 mTouchShop = ViewConfiguration.get(this).getScaledDoubleTapSlop(); listView = (ListView) findViewById(R.id.lv); for (int i = 0; i < 100; i++) { arrayList.add("item" + i); } ListViewAdapter adapter = new ListViewAdapter(arrayList, MainActivity.this); listView.setAdapter(adapter); listView.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { //觸控時操作 case MotionEvent.ACTION_DOWN: mFirstY = event.getY(); break; //移動時操作 case MotionEvent.ACTION_MOVE: mCurrentY = event.getY(); if (mCurrentY - mFirstY > mTouchShop) {//down direction = 0; } else if (mFirstY - mCurrentY > mTouchShop) {//up direction = 1; } if (direction == 1) { if (mShow) { toolBarAnim(0); mShow = !mShow; } } else if (direction == 0) { if (!mShow) { toolBarAnim(1); mShow = !mShow; } } break; //離開時操作 case MotionEvent.ACTION_UP: break; } return false; } }); } private void toolBarAnim(int flag) { if (mAnimator != null && mAnimator.isRunning()) { mAnimator.cancel(); } if (flag == 0) { mAnimator = ObjectAnimator.ofFloat(toolbar, "translationY", toolbar.getTranslationY(), -toolbar.getHeight()); } else { mAnimator = ObjectAnimator.ofFloat(toolbar, "translationY", toolbar.getTranslationY(), 0); } mAnimator.start(); } }佈局檔案如下:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.sweet_xue.listviewdemo.MainActivity"> <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="@dimen/height" android:id="@+id/id_toolBar" ></android.support.v7.widget.Toolbar> <ListView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/lv" android:scrollbars="none" android:listSelector="@color/colorPrimaryDark"/> </RelativeLayout>