ListView 实现类似电话薄标题碰撞效果

原创 2016年08月30日 17:41:08
/*
 * Copyright (C) 2013 Sergej Shafarenka, halfbit.de
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file kt in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


package com.example.listviewdemo;


import android.content.Context;
import android.database.DataSetObserver;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.PointF;
import android.graphics.Rect;
import android.graphics.drawable.GradientDrawable;
import android.graphics.drawable.GradientDrawable.Orientation;
import android.os.Parcelable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.SoundEffectConstants;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.accessibility.AccessibilityEvent;
import android.widget.AbsListView;
import android.widget.HeaderViewListAdapter;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.SectionIndexer;


/**
 * ListView, which is capable to pin section views at its top while the rest is
 * still scrolled.
 */
public class PinnedSectionListView extends ListView {


// -- inner classes


/**
* List adapter to be implemented for being used with PinnedSectionListView
* adapter.
*/
public static interface PinnedSectionListAdapter extends ListAdapter {
/**
* This method shall return 'true' if views of given type has to be
* pinned.
*/
boolean isItemViewTypePinned(int viewType);
}


/** Wrapper class for pinned section view and its position in the list. */
static class PinnedSection {
public View view;
public int position;
public long id;
}


// -- class fields


// fields used for handling touch events
private final Rect mTouchRect = new Rect();
private final PointF mTouchPoint = new PointF();
private int mTouchSlop;
private View mTouchTarget;
private MotionEvent mDownEvent;


// fields used for drawing shadow under a pinned section
private GradientDrawable mShadowDrawable;
private int mSectionsDistanceY;
private int mShadowHeight;


/** Delegating listener, can be null. */
OnScrollListener mDelegateOnScrollListener;


/** Shadow for being recycled, can be null. */
PinnedSection mRecycleSection;


/** shadow instance with a pinned view, can be null. */
PinnedSection mPinnedSection;


/**
* Pinned view Y-translation. We use it to stick pinned view to the next
* section.
*/
int mTranslateY;


/** Scroll listener which does the magic */
private final OnScrollListener mOnScrollListener = new OnScrollListener() {


@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
if (mDelegateOnScrollListener != null) { // delegate
mDelegateOnScrollListener.onScrollStateChanged(view,
scrollState);
}
}


@Override
public void onScroll(AbsListView view, int firstVisibleItem,
int visibleItemCount, int totalItemCount) {


if (mDelegateOnScrollListener != null) { // delegate
mDelegateOnScrollListener.onScroll(view, firstVisibleItem,
visibleItemCount, totalItemCount);
}


// get expected adapter or fail fast
ListAdapter adapter = getAdapter();
if (adapter == null || visibleItemCount == 0)
return; // nothing to do


final boolean isFirstVisibleItemSection = isItemViewTypePinned(
adapter, adapter.getItemViewType(firstVisibleItem));


if (isFirstVisibleItemSection) {
View sectionView = getChildAt(0);
if (sectionView.getTop() == getPaddingTop()) { // view sticks to
// the top, no
// need for
// pinned shadow
destroyPinnedShadow();
} else { // section doesn't stick to the top, make sure we have
// a pinned shadow
ensureShadowForPosition(firstVisibleItem, firstVisibleItem,
visibleItemCount);
}


} else { // section is not at the first visible position
int sectionPosition = findCurrentSectionPosition(firstVisibleItem);
if (sectionPosition > -1) { // we have section position
ensureShadowForPosition(sectionPosition, firstVisibleItem,
visibleItemCount);
} else { // there is no section for the first visible item,
// destroy shadow
destroyPinnedShadow();
}
}
};


};


/** Default change observer. */
private final DataSetObserver mDataSetObserver = new DataSetObserver() {
@Override
public void onChanged() {
recreatePinnedShadow();
};


@Override
public void onInvalidated() {
recreatePinnedShadow();
}
};


// -- constructors


public PinnedSectionListView(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}


public PinnedSectionListView(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
initView();
}


private void initView() {
setOnScrollListener(mOnScrollListener);
mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
initShadow(true);
}


// -- public API methods


public void setShadowVisible(boolean visible) {
initShadow(visible);
if (mPinnedSection != null) {
View v = mPinnedSection.view;
invalidate(v.getLeft(), v.getTop(), v.getRight(), v.getBottom()
+ mShadowHeight);
}
}


// -- pinned section drawing methods


public void initShadow(boolean visible) {
if (visible) {
if (mShadowDrawable == null) {
mShadowDrawable = new GradientDrawable(Orientation.TOP_BOTTOM,
new int[] { Color.parseColor("#ffa0a0a0"),
Color.parseColor("#50a0a0a0"),
Color.parseColor("#00a0a0a0") });
mShadowHeight = (int) (8 * getResources().getDisplayMetrics().density);
}
} else {
if (mShadowDrawable != null) {
mShadowDrawable = null;
mShadowHeight = 0;
}
}
}


/** Create shadow wrapper with a pinned view for a view at given position */
void createPinnedShadow(int position) {


// try to recycle shadow
PinnedSection pinnedShadow = mRecycleSection;
mRecycleSection = null;


// create new shadow, if needed
if (pinnedShadow == null)
pinnedShadow = new PinnedSection();
// request new view using recycled view, if such
View pinnedView = getAdapter().getView(position, pinnedShadow.view,
PinnedSectionListView.this);


// read layout parameters
LayoutParams layoutParams = (LayoutParams) pinnedView.getLayoutParams();
if (layoutParams == null) {
layoutParams = (LayoutParams) generateDefaultLayoutParams();
pinnedView.setLayoutParams(layoutParams);
}


int heightMode = MeasureSpec.getMode(layoutParams.height);
int heightSize = MeasureSpec.getSize(layoutParams.height);


if (heightMode == MeasureSpec.UNSPECIFIED)
heightMode = MeasureSpec.EXACTLY;


int maxHeight = getHeight() - getListPaddingTop()
- getListPaddingBottom();
if (heightSize > maxHeight)
heightSize = maxHeight;


// measure & layout
int ws = MeasureSpec.makeMeasureSpec(getWidth() - getListPaddingLeft()
- getListPaddingRight(), MeasureSpec.EXACTLY);
int hs = MeasureSpec.makeMeasureSpec(heightSize, heightMode);
pinnedView.measure(ws, hs);
pinnedView.layout(0, 0, pinnedView.getMeasuredWidth(),
pinnedView.getMeasuredHeight());
mTranslateY = 0;


// initialize pinned shadow
pinnedShadow.view = pinnedView;
pinnedShadow.position = position;
pinnedShadow.id = getAdapter().getItemId(position);


// store pinned shadow
mPinnedSection = pinnedShadow;
}


/** Destroy shadow wrapper for currently pinned view */
void destroyPinnedShadow() {
if (mPinnedSection != null) {
// keep shadow for being recycled later
mRecycleSection = mPinnedSection;
mPinnedSection = null;
}
}


/** Makes sure we have an actual pinned shadow for given position. */
void ensureShadowForPosition(int sectionPosition, int firstVisibleItem,
int visibleItemCount) {
if (visibleItemCount < 2) { // no need for creating shadow at all, we
// have a single visible item
destroyPinnedShadow();
return;
}


if (mPinnedSection != null
&& mPinnedSection.position != sectionPosition) { // invalidate
// shadow,
// if
// required
destroyPinnedShadow();
}


if (mPinnedSection == null) { // create shadow, if empty
createPinnedShadow(sectionPosition);
}


// align shadow according to next section position, if needed
int nextPosition = sectionPosition + 1;
if (nextPosition < getCount()) {
int nextSectionPosition = findFirstVisibleSectionPosition(
nextPosition, visibleItemCount
- (nextPosition - firstVisibleItem));
if (nextSectionPosition > -1) {
View nextSectionView = getChildAt(nextSectionPosition
- firstVisibleItem);
final int bottom = mPinnedSection.view.getBottom()
+ getPaddingTop();
mSectionsDistanceY = nextSectionView.getTop() - bottom;
if (mSectionsDistanceY < 0) {
// next section overlaps pinned shadow, move it up
mTranslateY = mSectionsDistanceY;
} else {
// next section does not overlap with pinned, stick to top
mTranslateY = 0;
}
} else {
// no other sections are visible, stick to top
mTranslateY = 0;
mSectionsDistanceY = Integer.MAX_VALUE;
}
}


}


int findFirstVisibleSectionPosition(int firstVisibleItem,
int visibleItemCount) {
ListAdapter adapter = getAdapter();


int adapterDataCount = adapter.getCount();
if (getLastVisiblePosition() >= adapterDataCount)
return -1; // dataset has changed, no candidate


if (firstVisibleItem + visibleItemCount >= adapterDataCount) {// added
// to
// prevent
// index
// Outofbound
// (in
// case)
visibleItemCount = adapterDataCount - firstVisibleItem;
}


for (int childIndex = 0; childIndex < visibleItemCount; childIndex++) {
int position = firstVisibleItem + childIndex;
int viewType = adapter.getItemViewType(position);
if (isItemViewTypePinned(adapter, viewType))
return position;
}
return -1;
}


int findCurrentSectionPosition(int fromPosition) {
ListAdapter adapter = getAdapter();


if (fromPosition >= adapter.getCount())
return -1; // dataset has changed, no candidate


if (adapter instanceof SectionIndexer) {
// try fast way by asking section indexer
SectionIndexer indexer = (SectionIndexer) adapter;
int sectionPosition = indexer.getSectionForPosition(fromPosition);
int itemPosition = indexer.getPositionForSection(sectionPosition);
int typeView = adapter.getItemViewType(itemPosition);
if (isItemViewTypePinned(adapter, typeView)) {
return itemPosition;
} // else, no luck
}


// try slow way by looking through to the next section item above
for (int position = fromPosition; position >= 0; position--) {
int viewType = adapter.getItemViewType(position);
if (isItemViewTypePinned(adapter, viewType))
return position;
}
return -1; // no candidate found
}


void recreatePinnedShadow() {
destroyPinnedShadow();
ListAdapter adapter = getAdapter();
if (adapter != null && adapter.getCount() > 0) {
int firstVisiblePosition = getFirstVisiblePosition();
int sectionPosition = findCurrentSectionPosition(firstVisiblePosition);
if (sectionPosition == -1)
return; // no views to pin, exit
ensureShadowForPosition(sectionPosition, firstVisiblePosition,
getLastVisiblePosition() - firstVisiblePosition);
}
}


@Override
public void setOnScrollListener(OnScrollListener listener) {
if (listener == mOnScrollListener) {
super.setOnScrollListener(listener);
} else {
mDelegateOnScrollListener = listener;
}
}


@Override
public void onRestoreInstanceState(Parcelable state) {
super.onRestoreInstanceState(state);
post(new Runnable() {
@Override
public void run() { // restore pinned view after configuration
// change
recreatePinnedShadow();
}
});
}


@Override
public void setAdapter(ListAdapter adapter) {


// assert adapter in debug mode
if (BuildConfig.DEBUG && adapter != null) {
if (!(adapter instanceof PinnedSectionListAdapter))
throw new IllegalArgumentException(
"Does your adapter implement PinnedSectionListAdapter?");
if (adapter.getViewTypeCount() < 2)
throw new IllegalArgumentException(
"Does your adapter handle at least two types"
+ " of views in getViewTypeCount() method: items and sections?");
}


// unregister observer at old adapter and register on new one
ListAdapter oldAdapter = getAdapter();
if (oldAdapter != null)
oldAdapter.unregisterDataSetObserver(mDataSetObserver);
if (adapter != null)
adapter.registerDataSetObserver(mDataSetObserver);


// destroy pinned shadow, if new adapter is not same as old one
if (oldAdapter != adapter)
destroyPinnedShadow();


super.setAdapter(adapter);
}


@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
if (mPinnedSection != null) {
int parentWidth = r - l - getPaddingLeft() - getPaddingRight();
int shadowWidth = mPinnedSection.view.getWidth();
if (parentWidth != shadowWidth) {
recreatePinnedShadow();
}
}
}


@Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);


if (mPinnedSection != null) {


// prepare variables
int pLeft = getListPaddingLeft();
int pTop = getListPaddingTop();
View view = mPinnedSection.view;


// draw child
canvas.save();


int clipHeight = view.getHeight()
+ (mShadowDrawable == null ? 0 : Math.min(mShadowHeight,
mSectionsDistanceY));
canvas.clipRect(pLeft, pTop, pLeft + view.getWidth(), pTop
+ clipHeight);


canvas.translate(pLeft, pTop + mTranslateY);
drawChild(canvas, mPinnedSection.view, getDrawingTime());


if (mShadowDrawable != null && mSectionsDistanceY > 0) {
mShadowDrawable.setBounds(mPinnedSection.view.getLeft(),
mPinnedSection.view.getBottom(),
mPinnedSection.view.getRight(),
mPinnedSection.view.getBottom() + mShadowHeight);
mShadowDrawable.draw(canvas);
}


canvas.restore();
}
}


// -- touch handling methods


@Override
public boolean dispatchTouchEvent(MotionEvent ev) {


final float x = ev.getX();
final float y = ev.getY();
final int action = ev.getAction();


if (action == MotionEvent.ACTION_DOWN && mTouchTarget == null
&& mPinnedSection != null
&& isPinnedViewTouched(mPinnedSection.view, x, y)) { // create
// touch
// target


// user touched pinned view
mTouchTarget = mPinnedSection.view;
mTouchPoint.x = x;
mTouchPoint.y = y;


// copy down event for eventually be used later
mDownEvent = MotionEvent.obtain(ev);
}


if (mTouchTarget != null) {
if (isPinnedViewTouched(mTouchTarget, x, y)) { // forward event to
// pinned view
mTouchTarget.dispatchTouchEvent(ev);
}


if (action == MotionEvent.ACTION_UP) { // perform onClick on pinned
// view
super.dispatchTouchEvent(ev);
performPinnedItemClick();
clearTouchTarget();


} else if (action == MotionEvent.ACTION_CANCEL) { // cancel
clearTouchTarget();


} else if (action == MotionEvent.ACTION_MOVE) {
if (Math.abs(y - mTouchPoint.y) > mTouchSlop) {


// cancel sequence on touch target
MotionEvent event = MotionEvent.obtain(ev);
event.setAction(MotionEvent.ACTION_CANCEL);
mTouchTarget.dispatchTouchEvent(event);
event.recycle();


// provide correct sequence to super class for further
// handling
super.dispatchTouchEvent(mDownEvent);
super.dispatchTouchEvent(ev);
clearTouchTarget();


}
}


return true;
}


// call super if this was not our pinned view
return super.dispatchTouchEvent(ev);
}


private boolean isPinnedViewTouched(View view, float x, float y) {
view.getHitRect(mTouchRect);


// by taping top or bottom padding, the list performs on click on a
// border item.
// we don't add top padding here to keep behavior consistent.
mTouchRect.top += mTranslateY;


mTouchRect.bottom += mTranslateY + getPaddingTop();
mTouchRect.left += getPaddingLeft();
mTouchRect.right -= getPaddingRight();
return mTouchRect.contains((int) x, (int) y);
}


private void clearTouchTarget() {
mTouchTarget = null;
if (mDownEvent != null) {
mDownEvent.recycle();
mDownEvent = null;
}
}


private boolean performPinnedItemClick() {
if (mPinnedSection == null)
return false;


OnItemClickListener listener = getOnItemClickListener();
if (listener != null && getAdapter().isEnabled(mPinnedSection.position)) {
View view = mPinnedSection.view;
playSoundEffect(SoundEffectConstants.CLICK);
if (view != null) {
view.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_CLICKED);
}
listener.onItemClick(this, view, mPinnedSection.position,
mPinnedSection.id);
return true;
}
return false;
}


public static boolean isItemViewTypePinned(ListAdapter adapter, int viewType) {
if (adapter instanceof HeaderViewListAdapter) {
adapter = ((HeaderViewListAdapter) adapter).getWrappedAdapter();
}
return ((PinnedSectionListAdapter) adapter)
.isItemViewTypePinned(viewType);
}


}



---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

package com.example.listviewdemo;


import java.util.ArrayList;


import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;


import com.example.listviewdemo.PinnedSectionListView.PinnedSectionListAdapter;


public class MainActivity extends Activity {


private ArrayList<Data> data;


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);


String[] s = { "家人", "朋友", "同事", "同学", "基友", "情人", "老婆" };


data = new ArrayList<Data>();
for (String n : s) {
Data group = new Data();
group.type = Data.GROUP;
group.text = n;
data.add(group);
for (int i = 0; i < 10; i++) {
Data child = new Data();
child.type = Data.CHILD;
child.text = "联系人" + i;
data.add(child);
}
}


PinnedSectionListView pslv = (PinnedSectionListView) findViewById(R.id.pslv);
MyAdapter mMyAdapter = new MyAdapter(this, -1);
pslv.setAdapter(mMyAdapter);
}


// 定义一个存放数据类型的类
private class Data {
public static final int GROUP = 0;
public static final int CHILD = 1;
public int type;
public String text;
// 2个type child和group
public static final int TYPE_COUNT = 2;


}


// 定义适配器要实现PinnedSectionListAdapter接口 来调用isItemViewTypePinned(int
// viewType)方法
private class MyAdapter extends ArrayAdapter implements
PinnedSectionListAdapter {
private LayoutInflater flater;


public MyAdapter(Context context, int resource) {
super(context, resource);


flater = LayoutInflater.from(context);
}


@Override
public int getCount() {
return data.size();
}


@Override
public View getView(int position, View convertView, ViewGroup parent) {
int type = getItemViewType(position);
switch (type) {
case Data.GROUP:
if (convertView == null)
convertView = flater.inflate(
android.R.layout.simple_list_item_1, null);


TextView tv1 = (TextView) convertView
.findViewById(android.R.id.text1);


tv1.setText(data.get(position).text);
tv1.setBackgroundColor(Color.BLUE);
tv1.setTextSize(35);
break;


case Data.CHILD:
if (convertView == null)
convertView = flater.inflate(
android.R.layout.simple_list_item_1, null);
TextView tv2 = (TextView) convertView
.findViewById(android.R.id.text1);
tv2.setText(data.get(position).text);
tv2.setTextSize(15);
break;
default:
break;
}
return convertView;
}


// 返回列表类型 两种 child和group
@Override
public int getViewTypeCount() {


return Data.TYPE_COUNT;
}


// 获取列表类型
@Override
public int getItemViewType(int position) {
return data.get(position).type;
}


@Override
public Object getItem(int position) {
return data.get(position);
}


// 假设此方法返回皆为false。那么PinnedSectionListView将退化成为一个基础的ListView.
// 只不过退化后的ListView只是一个拥有两个View Type的ListView。
// 从某种角度上讲,此方法对于PinnedSectionListView至关重要,因为返回值true或false,将直接导致PinnedSectionListView是一个PinnedSectionListView,还是一个普通的ListView。
@Override
public boolean isItemViewTypePinned(int viewType) {
boolean type = false;
switch (viewType) {
case Data.GROUP:
type = true;
break;
case Data.CHILD:
type = false;
break;
default:
type = false;
break;
}
return type;
}


}


}

Android地址选择(类似手机通讯录)

感觉比较好的一个地址选择设计,而且发现有的App中也用到了。还是先上效果图思路: 1.效果是仿照网上大神实现的类似通讯录样式做的; 2.右边a-z是自定义的一个bar,设置了点击监听事件,以及对话...
  • u014733374
  • u014733374
  • 2015年04月09日 12:56
  • 1262

实现带标题的ListView

在一些项目中,往往有要求为ListView里的内容分类,比如按日期分类,就要把相同日期的项目放在一起。可以看一些示例图,会清楚一些: 以上根据标题来进行分类,实现代码如下:首先是数据项的模型:p...
  • u010429311
  • u010429311
  • 2016年04月25日 21:06
  • 4604

初学者对于UIScrollView类似于新闻头条的标题栏滚动效果

#import "TaskColumnView.h"   @interface TaskColumnView : UIScrollView   - (instancetype)initWi...
  • xcp_123
  • xcp_123
  • 2016年12月06日 11:34
  • 475

开发有标题的ListView

第一步: 老生常谈, 首先定义相关的布局文件, 和普通的ListView一样, 不再赘述;                               第二步: 定义一个实体类, 用该实体类来存储一个...
  • gaoxueyi551
  • gaoxueyi551
  • 2015年02月05日 18:06
  • 4234

(浅谈)监听ListView滑动实现标题背景Alpha渐变

最近同事问了我一个关于仿“QQ空间”或者“美团首页”标题背景Alpha渐变的问题,在向我求救之前,听他说查遍了百度各种帖子,要么是太复杂,要么是写法不如意。首先说下同事用的是网络框架XListView...
  • crazywolfteam
  • crazywolfteam
  • 2016年08月05日 17:32
  • 1806

如何实现例如iOS的listview 的弹性效果

首先介绍一下实现的基本原理。主要的实现机制是为ListView添加一个headerView,   该headerView的原始高度为0,监听触摸事件,根据下拉的距离动态改变headerView的高度,...
  • sd19871122
  • sd19871122
  • 2016年01月07日 14:46
  • 617

Android textview和listview实现水平自动滚动的走马灯效果

当我们遇到需要在一个textview里显示较长文字时候,往往有以下几种考虑:           1.换行,Android里本身也是这样在考虑;           2.可以进行水平或者垂直滑动;  ...
  • bit_kaki
  • bit_kaki
  • 2017年04月13日 16:19
  • 2878

Android 简单实现ListView顶部悬浮效果

首先上效果图,实现如下效果: 起初在网上搜了下实现这样的效果,美团网,大众点评的“购买框”悬浮效果也是这样的,不过作者实现比较麻烦,自己想了想就根据ListView提供的一些...
  • u010015108
  • u010015108
  • 2016年07月14日 09:59
  • 413

滑动效果——ListView 滑动中标题固定&标题缩放效果

概述今天说一个比较简单的效果,很多应用都用到了这个效果,其实实现思路蛮简单的。就是Listview在滑动过程中,它的头上有一个往上滑能固定,往下滑能随listview移动的头,或者是根据滑动缩放大小。...
  • u011200844
  • u011200844
  • 2015年03月27日 11:12
  • 2569

使用RecyclerView实现GridView和ListView混排的效果

单位在做股票相关的app,美工切出一个图,是一个GridView和ListView混排的效果图,而且在滚动的时候,还要实现相关类别名有推动的效果,如下图:        录制的效果不是很好,因为csd...
  • chenguang79
  • chenguang79
  • 2016年08月19日 10:25
  • 5439
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ListView 实现类似电话薄标题碰撞效果
举报原因:
原因补充:

(最多只允许输入30个字)