Ⅰ android 下拉滾動頁面怎麼實現
以下是我自己花功夫編寫了一種非常簡單的下拉刷新實現方案,現在拿出來和大家分享一下。相信在閱讀完本篇文章之後,大家都可以在自己的項目中一分鍾引入下拉刷新功能 最近項目中需要用到ListView下拉刷新的功能,一開始想圖省事,在網上直接找一個現成的,可是嘗試了網上多個版本的下拉刷新之後發現效果都不 怎麼理想。有些是因為功能不完整或有Bug,有些是因為使用起來太復雜,十全十美的還真沒找到。因此我也是放棄了在網上找現成代碼的想法,自己花功夫編寫 了一種非常簡單的下拉刷新實現方案,現在拿出來和大家分享一下。相信在閱讀完本篇文章之後,大家都可以在自己的項目中一分鍾引入下拉刷新功能。 首先講一下實現原理。這里我們將採取的方案是使用組合View的方式,先自定義一個布局繼承自LinearLayout,然後在這個布局中加入下拉 頭和ListView這兩個子元素,並讓這兩個子元素縱向排列。初始化的時候,讓下拉頭向上偏移出屏幕,這樣我們看到的就只有ListView了。然後對 ListView的touch事件進行監聽,如果當前ListView已經滾動到頂部並且手指還在向下拉的話,那就將下拉頭顯示出來,鬆手後進行刷新操 作,並將下拉頭隱藏。原理示意圖如下: 那我們現在就來動手實現一下,新建一個項目起名叫PullToRefreshTest,先在項目中定義一個下拉頭的布局文件pull_to_refresh/apk/res/android" xmlns:tools="schemas/tools" android:id="@+id/pull_to_refresh_head" android:layout_width="fill_parent" android:layout_height="60dip" > <LinearLayout android:layout_width="200dip" android:layout_height="60dip" android:layout_centerInParent="true" android:orientation="horizontal" > <RelativeLayout android:layout_width="0dip" android:layout_height="60dip" android:layout_weight="3" > <ImageView android:id="@+id/arrow" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/arrow" /> <ProgressBar android:id="@+id/progress_bar" android:layout_width="30dip" android:layout_height="30dip" android:layout_centerInParent="true" android:visibility="gone" /> </RelativeLayout> <LinearLayout android:layout_width="0dip" android:layout_height="60dip" android:layout_weight="12" android:orientation="vertical" > <TextView android:id="@+id/description" android:layout_width="fill_parent" android:layout_height="0dip" android:layout_weight="1" android:gravity="center_horizontalbottom" android:text="@string/pull_to_refresh" /> <TextView android:id="@+id/updated_at" android:layout_width="fill_parent" android:layout_height="0dip" android:layout_weight="1" android:gravity="center_horizontaltop" android:text="@string/updated_at" /> </LinearLayout> </LinearLayout> </RelativeLayout> 在這個布局中,我們包含了一個下拉指示箭頭,一個下拉狀態文字提示,和一個上次更新的時間。當然,還有一個隱藏的旋轉進度條,只有正在刷新的時候我們才會將它顯示出來。 布局中所有引用的字元串我們都放在stringsmit(); new HideHeaderTask()/apk/res/android" xmlns:tools="schemas/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <com.example.pulltorefreshtest.RefreshableView android:id="@+id/refreshable_view" android:layout_width="fill_parent" android:layout_height="fill_parent" > <ListView android:id="@+id/list_view" android:layout_width="fill_parent" android:layout_height="fill_parent" > </ListView> </com.example.pulltorefreshtest.RefreshableView> </RelativeLayout> 可以看到,我們在自定義的RefreshableView中加入了一個ListView,這就意味著給這個ListView加入了下拉刷新的功能,就是這么簡單! 然後我們再來看一下程序的主Activity,打開或新建MainActivity,加入如下代碼: 復制代碼 代碼如下: public class MainActivity extends Activity { RefreshableView refreshableView; ListView listView; ArrayAdapter<String> adapter; String[] items = { "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L" }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); refreshableView = (RefreshableView) findViewById(R.id.refreshable_view); listView = (ListView) findViewById(R.id.list_view); adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, items); listView.setAdapter(adapter); refreshableView.setOnRefreshListener(new PullToRefreshListener() { @Override public void onRefresh() { try { Thread.sleep(3000); } catch (InterruptedException e) { e.printStackTrace(); } refreshableView.finishRefreshing(); } }, 0); } } 可 以看到,我們通過調用RefreshableView的setOnRefreshListener方法注冊了一個監聽器,當ListView正在刷新時就 會回調監聽器的onRefresh方法,刷新的具體邏輯就在這里處理。而且這個方法已經自動開啟了線程,可以直接在onRefresh方法中進行耗時操 作,比如向伺服器請求最新數據等,在這里我就簡單讓線程睡眠3秒鍾。另外在onRefresh方法的最後,一定要調用RefreshableView中的 finishRefreshing方法,這個方法是用來通知RefreshableView刷新結束了,不然我們的ListView將一直處於正在刷新的 狀態。 不知道大家有沒有注意到,setOnRefreshListener這個方法其實是有兩個參數的,我們剛剛也是傳入了一個不起眼的 0。那這第二個參數是用來做什麼的呢?由於RefreshableView比較智能,它會自動幫我們記錄上次刷新完成的時間,然後下拉的時候會在下拉頭中 顯示距上次刷新已過了多久。這是一個非常好用的功能,讓我們不用再自己手動去記錄和計算時間了,但是卻存在一個問題。如果當前我們的項目中有三個地方都使 用到了下拉刷新的功能,現在在一處進行了刷新,其它兩處的時間也都會跟著改變!因為刷新完成的時間是記錄在配置文件中的,由於在一處刷新更改了配置文件, 導致在其它兩處讀取到的配置文件時間已經是更改過的了。那解決方案是什麼?就是每個用到下拉刷新的地方,給setOnRefreshListener方法 的第二個參數中傳入不同的id就行了。這樣各處的上次刷新完成時間都是單獨記錄的,相互之間就不會再有影響。 好了,全部的代碼都在這里了,讓我們來運行一下,看看效果吧。 效果看起來還是非常不錯的。我們最後再來總結一下,在項目中引入ListView下拉刷新功能只需三步: 1. 在Activity的布局文件中加入自定義的RefreshableView,並讓ListView包含在其中。 2. 在Activity中調用RefreshableView的setOnRefreshListener方法注冊回調介面。 3. 在onRefresh方法的最後,記得調用RefreshableView的finishRefreshing方法,通知刷新結束。 從此以後,在項目的任何地方,一分鍾引入下拉刷新功能妥妥的。 好了,今天的講解到此結束,有疑問的朋友請在下面留言。 源碼下載,請點擊這里
Ⅱ Android涔嬩笅鎷夋嗛夋嫨浣跨敤紺轟緥
鍦ˋndroid寮鍙戜腑錛屽壋寤轟竴涓鐩磋備笖鍔熻兘涓板瘜鐨勪笅鎷夋嗭紙Spinner錛夋槸鑷沖叧閲嶈佺殑銆傝╂垜浠閫愭ユ帰緔㈠備綍鍦╔ML甯冨矓鍜孞ava浠g爜涓瀹炵幇榪欎釜鍔熻兘錛屼互鍙婂備綍鐩戝惉閫変腑欏瑰拰鑷瀹氫箟閫傞厤鍣ㄤ互婊¤凍澶嶆潅闇奼傘
棣栧厛錛岃╂垜浠鍦╔ML甯冨矓鏂囦歡涓瀹氫箟Spinner鍜屼竴涓鍩虹鐨勯傞厤鍣ㄣ傚湪<Spinner>鍏冪礌涓錛岃劇疆鍏跺藉害鍜岄珮搴︿負鑷閫傚簲錛
```xml
<Spinner
android:id="@+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
```
鎺ヤ笅鏉ワ紝鐢↗ava浠g爜鏉ュ炲己榪欎釜緇勪歡銆傚湪浣犵殑Activity鎴朏ragment涓錛岄氳繃findViewById()鑾峰彇Spinner瀹炰緥錛岀劧鍚庤劇疆涓涓獮rrayAdapter錛屼嬌鐢ˋrrayAdapter鐨勬瀯閫犲嚱鏁頒紶鍏ヤ笂涓嬫枃銆佸竷灞璧勬簮鍜屾暟鎹錛
```java
import ... ArrayAdapter;
ArrayAdapter spinnerAdapter;
List data = Arrays.asList("閫夐」1", "閫夐」2", "閫夐」3");
spinner = findViewById(R.id.spinner);
spinnerAdapter = new ArrayAdapter>(this, android.R.layout.simple_spinner_item, data);
spinnerAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spinner.setAdapter(spinnerAdapter);
```
紜淇濅綘鐨勯傞厤鍣ㄨ兘澶熸樉紺哄氭牱鍖栫殑鏁版嵁鍜岃嚜瀹氫箟甯冨矓錛岃繖鏍蜂綘鍙浠ユ牴鎹闇瑕佽皟鏁翠笅鎷夋嗙殑澶栬傘
褰撲綘甯屾湜鐢ㄦ埛鍦ㄤ笅鎷夋嗕腑榪涜岄夋嫨鏃訛紝闇瑕佷負Spinner璁劇疆涓涓鐩戝惉鍣ㄣ傚湪onCreate()鏂規硶涓錛屽疄鐜癘nItemSelectedListener鎺ュ彛錛屼互鍝嶅簲閫変腑欏圭殑鏀瑰彉錛
```java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView parent, View view, int position, long id) {
String selectedValue = spinnerAdapter.getItem(position);
Toast.makeText(MainActivity.this, "閫夋嫨鐨勫: " + selectedValue, Toast.LENGTH_SHORT).show();
}
@Override
public void onNothingSelected(AdapterView parent) {
// 鏃犻変腑欏瑰勭悊
}
});
}
```
瑕佷富鍔ㄨ幏鍙栭変腑鐨勫礆紝浣犲彲浠ョ洿鎺ヨ皟鐢╯pinner.getSelectedItem()鑾峰彇鏂囨湰錛屾垨鑰呬嬌鐢╯pinner.getSelectedItemPosition()鑾峰彇浣嶇疆銆傚姟蹇呭勭悊鏃犻変腑欏圭殑杈圭紭鎯呭喌錛
```java
int currentPosition = spinner.getSelectedItemPosition();
String selectedItem = (currentPosition != AdapterView.INVALID_POSITION) ? spinner.getSelectedItem() : null;
```
涓轟簡鍒濆嬪寲榛樿ら変腑欏癸紝浣犲彲浠ヨ劇疆setSelection()錛屾瘮濡傚皢絎浜屼釜閫夐」璁劇疆涓洪粯璁わ細
```java
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
spinner.setSelection(1);
}
});
```
榪欐牱錛屼綘涓嶄粎鍒涘緩浜嗕竴涓鍩烘湰鐨勪笅鎷夋嗭紝榪樻坊鍔犱簡鐢ㄦ埛浜や簰鍜岄変腑欏圭殑鐩戝惉銆傝嚜瀹氫箟閫傞厤鍣ㄥ厑璁鎬綘鏍規嵁闇瑕佸睍紺哄嶆潅鏁版嵁錛岃岀洃鍚鍣ㄥ垯紜淇濅簡閫夋嫨浜嬩歡鐨勫勭悊銆傚湪瀹為檯欏圭洰涓錛岃板緱鏍規嵁搴旂敤闇奼傚瑰竷灞銆佹牱寮忓拰鏁版嵁榪涜岃皟鏁達紝浠ユ彁鍗囩敤鎴蜂綋楠屻
Ⅲ 【Android】打造下拉放大效果
在其他App上看到了這樣的一個效果,感覺有點意思,於是決定實現一個類似的效果。
( 其實是iOS的同學在實現功能的時候隨意發揮了一下 )
效果大概值這樣子的:
UI看完後
「這個效果不錯啊」
「要不你們Android也么做?」 於是~~
作為一個有追求的程序員,決定也要實現一個這樣的效果 (滿腦子都是草泥馬在奔騰)
這樣的效果嘛~~
利用自定義的 ViewGroup ,通過對手勢的處理,應該就能實現了吧?
主要應該分兩部分:
比較麻煩的應該是在第一部分,需要對事件的分發有一些理解。
說到手勢的判斷,難免需要對事件分發進行處理。
下拉部分
1、在 onInterceptTouchEvent 中對事件進行處理,如果為下拉事件,則將該事件攔截,交給 onTouchEvent 處理;
2、在 onTouchEvent 中通過計算得到下拉的距離,然後動態改變 Header 的配置,實現放大的效果。
重置部分
在 onTouchEvent 的 ACTION_UP 中重置 Header ,實現回彈
知道思路以後,實現起來就比較簡單了
創建一個 ViewGroup (這么命名為 FlexibleLayout )繼承 LinearLayout 。
onInterceptTouchEvent的處理
先通過兩個條件判斷是否為下拉事件:
然後通過 mIsBeingDragged 來標記開始拖拽
onTouchEvent的處理
修改頭部大小
得到下拉的距離後,就可以來改變 Header 的大小,實現放大效果了。
放大、重置的部分大家可以自由發揮
這里利用 Math.pow(offsetY, 0.8) 得到實際需要增加的高度,通過計算得到對應的寬度以及偏移(類似阻尼效果)。
重置頭部
直接將寬高以及偏移設置成原來的參數即可。
(如果覺得這樣重置過程不夠絲滑,可以通過動畫來完成一個流暢的重置效果,這里就不演示了)
到這里,一個簡易拉下放大的效果就做完了。試試效果
使用
直接在需要下拉放大的布局外面套上 FlexibleLayout 即可,例如 ScrollView
效果
ScrollVIew:
RecyclerView:
CoordinatorLayout:
大功告成!!!
當然裡面還有一些細節的處理,比如下拉的條件、回彈的動畫、最大高度等,具體內容的可以在 源碼 中看到。
完成下拉放大後,貌似把一個很重要的功能遺忘了下拉刷新 ??
光顧這下拉放大,刷新怎麼辦?【黑人問號】
這個功能留著下周實現吧,我的7小時睡眠已遙遙無期~~
雖然沒有直接實現下拉刷新的功能,不過源碼中已經暴露了一個下拉的監聽,你也可以通過這個監聽實現下拉刷新的操作
到這里就結束了
(來還上周欠下的債~~)
和下拉放大類似,通過希手指下滑的監聽,利用 View 的 translationY 和 rotation 實現移動和旋轉。
具體的實現過程這里就不貼出來了,直接看效果吧
有興趣的可以直接去 Github 上看源碼以及用法。
Github
PullZoomView
Android事件分發機制 詳解攻略,您值得擁有