您的位置:首页 > 其它

模仿instagram的标题替换滚动的效果

2014-08-01 15:34 155 查看
我只说下实现的思路以及一些重要的代码,具体就不贴了。

首先我们需要了解自定义view的调用过程,这篇博客写地很好,可以看看 http://blog.csdn.net/qinjuning/article/details/7110211

主要是三个流程:

1. mesarue()过程

2.onLayout过程

3.dispatchDraw过程 就是绘图过程。

具体可以参照上面链接的博客深入了解。

接下来是实现的步骤:

1.那些布局就不用讲了,包括item的布局,主页面布局,还有一个重要的是listview头部的布局(暂且命名为HeaderListView,这个布局主要是为了替换头部的标题栏)

2.HeaderListViewAdapter类,自定义的adapter 贴上getview的代码

public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder = null;
if (null == convertView) {
convertView = mLayoutInflater.inflate(R.layout.listview_item, null);

viewHolder = new ViewHolder();
viewHolder.title = (TextView) convertView.findViewById(R.id.title);
viewHolder.contentIcon = (ImageView) convertView
.findViewById(R.id.content_icon);

convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
}

ItemEntity itemEntity = (ItemEntity) getItem(position);
viewHolder.contentIcon.setBackgroundResource(R.drawable.cat);

if (isneedTitle(position)) {
viewHolder.title.setText(itemEntity.getTitle());
viewHolder.title.setVisibility(View.VISIBLE);
} else {
viewHolder.title.setVisibility(View.GONE);
}

return convertView;
}


isneedTitle是中涉及到HeaderListView的方法,稍后再讲。

还要实现OnScrollListener接口,用来监听用户的操作。

3.编写自定义的listview,主要就是这个类。

这个类中要实现刚刚说的那三个方法来绘制标题。

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);

if (null != mHeaderView) {
measureChild(mHeaderView, widthMeasureSpec, heightMeasureSpec);
mMeasuredWidth = mHeaderView.getMeasuredWidth();
mMeasuredHeight = mHeaderView.getMeasuredHeight();
}
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);

if (mHeaderView != null) {
mHeaderView.layout(0, 0, mMeasuredWidth, mMeasuredHeight);

}
}

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

if (null != mHeaderView && mDrawFlag) {
drawChild(canvas, mHeaderView, getDrawingTime());
}
}
三个类的基本功能代码是这样的。然后是主要的一些处理代码。
通过自定义Adapter的监听到的用户活动,我们需要自己写一个接口,用来回调listview的方法来改变自定义listview中的标题栏。接口的定义以及方法的实现可以自己设计,就不多讲了。
<span style="font-family:Microsoft YaHei;font-size:18px;"><span style="line-height: 26px;">public interface HeaderAdapter {

public static final int </span><span style="line-height: 26px; font-family: 'Microsoft YaHei';">ListViewHEADER_GONE</span></span><span style="font-family: 'Microsoft YaHei'; font-size: 18px;"><span style="line-height: 26px;"> </span></span><span style="font-family:Microsoft YaHei;font-size:18px;"><span style="line-height: 26px; font-family: 'Microsoft YaHei';">= 0;</span><span style="line-height: 26px;">

public static final int </span><span style="line-height: 26px; font-family: 'Microsoft YaHei';">ListView</span><span style="line-height: 26px;">HEADER_VISIBLE = 1;

public static final int </span><span style="line-height: 26px; font-family: 'Microsoft YaHei';">ListView</span><span style="line-height: 26px;">HEADER_PUSHED_UP = 2;

int GetHeaderListViewState(int position);

void ConfigureListViewHeader(View headerView, int position, int alpaha);
}</span></span>
这个是我写的一个接口。

在HeaderListView中我们需要对接口所传来的值进行操作,主要是隐藏标题,以及滚动标题。
下面提供滚动的代码:
<span style="font-size:18px;"><strong>View topItem = getChildAt(0);

if (null != topItem) {
int bottom = topItem.getBottom();
int height = mHeaderView.getHeight();

int y;
if (bottom < height) {
y = bottom - height;
} else {
y = 0;
}

if (mHeaderView.getTop() != y) {
mHeaderView.layout(0, y, mMeasuredWidth, mMeasuredHeight
+ y);
}

}</strong></span>


思路差不多是这样 下面是我做的一个Demo,有点丑,莫怪。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息