模仿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的代码
isneedTitle是中涉及到HeaderListView的方法,稍后再讲。
还要实现OnScrollListener接口,用来监听用户的操作。
3.编写自定义的listview,主要就是这个类。
这个类中要实现刚刚说的那三个方法来绘制标题。
通过自定义Adapter的监听到的用户活动,我们需要自己写一个接口,用来回调listview的方法来改变自定义listview中的标题栏。接口的定义以及方法的实现可以自己设计,就不多讲了。
在HeaderListView中我们需要对接口所传来的值进行操作,主要是隐藏标题,以及滚动标题。
下面提供滚动的代码:
思路差不多是这样 下面是我做的一个Demo,有点丑,莫怪。
首先我们需要了解自定义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,有点丑,莫怪。
相关文章推荐
- Android 抽屉效果和滚动标题的实现
- JavaScript-html标题滚动效果的简单实现
- 如何用javascript实现 网页标题的滚动效果
- Android PinnedSectionListView实现滚动标题置顶/联系人列表效果
- android TextView向上滚动(模仿滚动文字广告效果)
- JavaScript-html标题滚动效果
- 模仿QQ的菜单滚动效果
- unity3D中GUI标题内文字滚动效果
- 用js实现网页标题的字体滚动效果
- JavaScript-html标题滚动效果
- 标题栏里的打字效果标题滚动效果
- [转载] 模仿淘宝列表页面的工具栏随屏幕滚动效果
- jquery banner广告幻灯片图片轮播切换,模仿实现当当网滚动广告效果
- 论坛源码推荐(9月2日):创建和管理复杂结构的tableView,类似Instagram的自动滚动效果
- setInterval的使用练习——实现网页标题title的滚动效果。
- 文章标题滚动效果
- 模仿 LED 灯的滚动文字效果
- JavaScript-html标题滚动效果
- JavaScript学习摘记(实现标题左右滚动效果)
- HTML 常用小技巧 【标题图标】【锚点】【插入音乐,视频】【滚动效果】【嵌入网页】