Android_仿支付寶賬單列表(頭部停留及分頁資料載入)
沒有辦法,米公設計的一個UI是stickyheaderlist(頭部停留)和分頁載入資料功能的整合,筆者原以為是米工自己拍著腦袋想出來的,還想進一步討論一下,後來才發現支付寶也是這麼做的,那好吧,做唄。
先上Demo完成效果圖(有點簡陋,但是這樣程式碼卻也更清晰了)
下面分別介紹一下StickyHeaderListView(這麼長!後面都簡寫成StickyLV好了)和分頁載入:
一、StickyLV(頭部停留listview)
其實這個沒什麼好說的,因為是開源元件,github上都有介紹和demo,這裡就簡單的講一下幾個關鍵的地方吧
a.StickyLV的對應的Adapter要繼承StickyListHeadersAdapter介面,並實現其中的getHeaderView和getHeaderId方法,前者和普通的Adapter的getView方法一樣,需要注意的是後者,只有在返回的int值和上一個返回值不同時,才會顯示HeaderView,同時,要將返回值的計算式關聯到position上。
b.同樣在StickyLV對應的Adapter中,儘管為StickyLV添加了HeaderView,但是getCount()返回的仍然是內容列表項的數量,而不包括HeaderView的數量。
二、分頁載入更多資料
a.首先分頁載入通常出現在伺服器資料請求中,因為一次性載入過多的資料可能會帶來不好的使用者體驗,及不要的效能開銷。所以通過分頁載入來平滑載入過程。
b.分頁資料載入事件由listview觸發,主要通過重寫onScrollStateChanged方法來實現。
c.最後定義一個OnLoadingMoreListener介面,在其中定義一個載入資料的方法OnLoadingMore。並將介面作為引數由外部呼叫進行初始化動作,這就是所謂的代理或者說監聽者模式。
d.最後還有footerView的定義、新增及隱藏。
主要實現程式碼
StickyListAdapter:
package com.wly.sticky_pagelist; import java.util.ArrayList; import android.content.Context; import android.graphics.Color; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.TextView; import com.emilsjolander.components.stickylistheaders.StickyListHeadersAdapter; public class StickyListAdapter extends BaseAdapter implements StickyListHeadersAdapter { private ArrayList<String> list; private Context mContext; public void init(Context context,ArrayList<String> list) { this.list = list; this.mContext = context; mContext = context; } @Override public int getCount() { return list.size(); } @Override public Object getItem(int position) { return list.get(position); } @Override public long getItemId(int position) { return 0; } @Override public View getView(int position, View convertView, ViewGroup parent) { TextView itemView = new TextView(mContext); itemView.setText("Item:" + position); itemView.setTextSize(20); return itemView; } @Override public View getHeaderView(int position, View convertView, ViewGroup parent) { TextView headView = new TextView(mContext); headView.setText("Head:" + (position/10)); headView.setTextSize(24); headView.setTextColor(new Color().RED); return headView; } /** * 決定header出現的時機,如果當前的headerid和前一個headerid不同時,就會顯示 */ @Override public long getHeaderId(int position) { return position/10 + 0x1234; } }
在匯入的StickyListHeadersListView中定義介面OnLoadingMoreListener
/**
* 載入更多資料回撥介面
*
*/
public interface OnLoadingMoreLinstener {
/**
* 載入更多資料回撥方法,由元件自身觸發
*/
void OnLoadingMore();
}
並修改StickyListHeadersListView的mOnScrollListener介面物件的onScrollStateChanged方法,如下:
public OnScrollListener mOnScrollListener = new OnScrollListener() {
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
Log.e("parent","onScrollStateChanged");
if (mOnScrollListenerDelegate != null) {
mOnScrollListenerDelegate.onScrollStateChanged(view,
scrollState);
}
// 滑到底部後自動載入,判斷listview已經停止滾動並且最後可視的條目等於adapter的條目
if (scrollState == OnScrollListener.SCROLL_STATE_FLING) {
} else if (scrollState == OnScrollListener.SCROLL_STATE_TOUCH_SCROLL
|| scrollState == OnScrollListener.SCROLL_STATE_IDLE) {
if (getLastVisiblePosition() == (getCount() - 1)) {
Log.e("Sticky","--拖動到最後--");
if(loadMoreListener != null) {
loadMoreListener.OnLoadingMore();
}
}
}
}
最後,介面MainActivity
package com.wly.sticky_pagelist;
import java.util.ArrayList;
public class MainActivity extends Activity implements OnHeaderClickListener,AdapterView.OnItemClickListener
,OnLoadingMoreLinstener {
private LayoutInflater inflater;
ArrayList<String> list;
StickyListAdapter adapter;
StickyListHeadersListView stickyLV;
private RelativeLayout moredata;
private View progressBarView;
private TextView progressBarTextView;
private AnimationDrawable loadingAnimation; //載入更多,動畫
private boolean isLoading = false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
list = new ArrayList<String>();
for(int i=1;i<=15;i++) {
list.add(i + "");
}
adapter = new StickyListAdapter();
adapter.init(this, list);
inflater = LayoutInflater.from(this);
moredata = (RelativeLayout)inflater.inflate(R.layout.moredata, null);
stickyLV = (StickyListHeadersListView)this.findViewById(R.id.stickyList);
progressBarView = (View) moredata.findViewById(R.id.loadmore_foot_progressbar);
progressBarTextView = (TextView) moredata.findViewById(R.id.loadmore_foot_text);
loadingAnimation = (AnimationDrawable) progressBarView.getBackground();
stickyLV.addFooterView(moredata);
stickyLV.setAdapter(adapter);
stickyLV.setOnItemClickListener(this);
stickyLV.setOnHeaderClickListener(this);
stickyLV.setLoadingMoreListener(this);
}
public void loadingFinished() {
if (null != loadingAnimation && loadingAnimation.isRunning()) {
loadingAnimation.stop();
}
progressBarView.setVisibility(View.INVISIBLE);
progressBarTextView.setVisibility(View.INVISIBLE);
isLoading = false;
adapter.notifyDataSetChanged();
}
@Override
public void OnLoadingMore() {
progressBarView.setVisibility(View.VISIBLE);
progressBarTextView.setVisibility(View.VISIBLE);
loadingAnimation.start();
if(!isLoading) {
isLoading = true;
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
for(int i=0;i<5;i++) {
list.add((Math.random() * 40) + "");
}
loadingFinished();
}
},1200);
}
}
@Override
public void onHeaderClick(StickyListHeadersListView l, View header,
int itemPosition, long headerId, boolean currentlySticky) {
Toast.makeText(this, "header:" + headerId, Toast.LENGTH_SHORT).show();
}
@Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
Toast.makeText(this, "item:" + position, Toast.LENGTH_SHORT).show();
}
}
O啦~~~
謝謝!!
相關推薦
Android_仿支付寶賬單列表(頭部停留及分頁資料載入)
沒有辦法,米公設計的一個UI是stickyheaderlist(頭部停留)和分頁載入資料功能的整合,筆者原以為是米工自己拍著腦袋想出來的,還想進一步討論一下,後來才發現支付寶也是這麼做的,那好吧,做唄。 先上Demo完成效果圖(有點簡陋,但是這樣程式碼卻也更清
iOS仿支付寶賬單餅狀圖
前言: 這段時間專案做了一個賬單查詢的頁面使用到了餅狀圖,支付寶賬單那個餅狀圖,就簡單的封裝了一個給大家看看,使用的基本技術也就是使用UIBezierPath繪製柱狀圖路徑,再把CAShapeLayer和UIBezierPath建立關係,最後使用CABasicAnima
仿支付寶賬單的效果(listview分組 )
最近公司要 新增類似支付寶賬單 的listview分組頂部懸浮 的效果,其實總的實現思想很簡單。由於 後臺給的資料 的不同 ,可能處理的方式也不一樣。 接下來咱們就一起來探討研究一下。 首先 ,自定義ListView ,建立 UpLoadPinnedHeaderListV
仿支付寶首頁頭部伸縮效果
nat load err 默認 hub pen tle 滑動 bili 原文鏈接:https://mp.weixin.qq.com/s/GegMt7GDBCFVoUgFQWG3Sw 每次打開支付寶首頁滑動,頭部的伸縮動畫甚是吸引人。於是自己決定動手來實現一個。 無圖言虛
Android中仿支付寶月賬單view
前言 昨夜同門雲集推杯又換盞,今朝茶涼酒寒豪言成笑談。半生累,盡徒然,碑文完美有誰看,隱居山水之間誓與浮名散。 簡介 今天給大家帶來的是支付寶的月賬單view的實現,看到標題,你可能會覺得是自定義view的相關實現,這裡可能要讓你失望了,因為這裡我們用的是
仿UC首頁頭部和仿支付寶頭部Demo
最近為了學習自定義UI,做的一些效果 CosutmUI 仿UC首頁頭部與支付寶首頁頭部 使用 CoordinatorLayout 與Behavior 實現的demo。 有些強迫症,快速上拉關閉時有頓挫感,感覺有點不舒服,在這裡就不調了,可以參
仿支付寶/微信的password輸入框效果GridPasswordView解析
arp 主類 center 大小 str .get fcm android def 仿支付寶/微信的password輸入框效果GridPasswordView解析,把一些設置和一些關鍵的地方列了出來,方便大家使用,可能能夠省一部分的時間,也算是自己的積累吧。
aNDROID仿支付寶餅圖效果
餅圖 aid hao123 .com andro smart and lis oid sMaRT%E6%BC%82%E4%BA%AE%E6%97%B6%E9%92%9F%E2%80%94%E2%80%94%E6%BA%90%E4%BB%A3%E7%A0%81 http:/
iOS仿支付寶首頁效果
tor www self get mage rsh .data 一定的 完全 代碼地址如下:http://www.demodashi.com/demo/12776.html 首先看一下效果 狀態欄紅色是因為使用手機錄屏的原因。 1.問題分析 1.導航欄A有兩組控件,
Android基礎控件——CardView的使用、仿支付寶銀行卡
內容 https prev use 設置 back com 支付 技術 今天有空學習了下CardView的使用,既然是使用,不凡使用一個實例操作一下 CardView是Android5.0的新控件,所以我們需要在dependencies中添加支持: CardVie
webApp 使用mui 仿支付寶主頁面案例
效果: 原始碼: <!doctype html> <html> <head> &
android仿支付寶輸入車牌號
這個是iOS的效果圖,差異不大,樓主主攻OC,見諒 需要用到的xml檔案 需要用到的類 number_or_letters.xml <?xml version="1.0" encoding="UTF-8"?> <Keyboard an
css仿支付寶提現到賬過程時間軸
本來想找一個現成的仿支付寶提現的時間軸,才發現沒有,我覺得不應該啊,又找了一會還是沒喲,算了,自己寫一個吧,分享出來,有需要的朋友可以直接拿走。 需要:1、iconfont(阿里巴巴向量圖示庫找個圖示,我已經找下了,你不想用也可以自己再找) &nb
Android仿支付寶密碼輸入框(自定義數字鍵盤)
1.概述 Android自定義密碼輸入框,通過自定義輸入顯示框和自定義輸入鍵盤,實現仿支付寶數字鍵盤等。程式碼已託管到github,有需要的話可以去我的github下載。 可以自定義關閉圖示、文字內容、顏色、大小,彈框樣
react native 仿支付寶更多
公司要做一個支付寶更多的滑動效果。查詢react naive 沒有好的元件來實現。自己做了一個demo. 效果圖 程式碼實現: import React, {Component} from 'react'; import { StyleS
android仿支付寶螞蟻森林載入動畫效果
一圖勝千言 偷過別人能量的小夥伴都熟悉這個載入效果,下面就講解一下實現過程。 1,自定義view 2,這裡要用到螞蟻森林的圖示,如圖 通過canvas.drawBitmap()畫出圖片。 3,通過PorterDuff.Mode.SRC_IN,給圖片填充想要的
Android 仿支付寶之前一個什麼效果~思路
1.之前仿皮皮蝦的那種對RecyclerView 沒用,要說為什麼的話,主要有以下幾點 . . . . .
仿支付寶密碼輸入以及細節總結
網上已經有很多現成的輪子了,雖然說重複造輪子不好,但是對於初學者還是多寫多實現,瞭解原理最重要。 首先看下效果: 需求 主要有以下幾個點: 密碼輸入框由幾個方框組成 當在軟鍵盤上輸入密碼時,在對應的方框內會用圓點作為代替 當輸入完成以後,自
仿支付寶錢包:帶分割線的GridView
需求: 本文記錄了我嘗試實現支付寶錢包樣式帶分割線GridView的過程。首先看一下高大上的支付寶錢包首頁:
自定義View——仿支付寶支付彈窗介面
上面這個是採用自定view方式實現的一個仿支付寶支付彈窗的效果; 1、自定義view並初始化自定義屬性 public class PasswordEditText extends EditText{ //一個密碼所佔的寬度 priva