1. 程式人生 > >Android_仿支付寶賬單列表(頭部停留及分頁資料載入)

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