仿QQ空间打造可拉伸头部组件

本章没有什么难点和技术点，主要是大晚上的没啥事写着玩 -.-
首先先上一个效果图

全代码文件不超过150行所以说超简单~ ~(当然前提是布局简单只写了一个类似的效果而已)

进入正题
下面是布局文件得xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.example.administrator.qqzone.MainActivity"><com.example.administrator.qqzone.MyPullList
        android:id="@+id/main_list"android:layout_width="match_parent"android:layout_height="match_parent"></com.example.administrator.qqzone.MyPullList>
</RelativeLayout>

这里的MyPullList是自定义的listView
下面是头部的xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><ImageView
        android:id="@+id/head_img"android:layout_width="match_parent"android:layout_height="@dimen/head_img_defualt_size_dp"android:scaleType="centerCrop"android:src="@mipmap/dog" /><ImageView
        android:id="@+id/head_leftimg"android:layout_width="50dp"android:layout_height="50dp"android:layout_alignParentBottom="true"android:layout_marginBottom="30dp"android:layout_marginLeft="30dp"android:scaleType="centerCrop"android:src="@mipmap/tz" />
</RelativeLayout>

布局文件已经写完在适配数据源之前我们先把这个自定义ListView写出来

public class MyPullList extends ListView {public MyPullList(Context context, AttributeSet attrs) {super(context, attrs, 0);mImageViewHeigth = context.getResources().getDimensionPixelOffset(R.dimen.head_img_defualt_size_dp);}

适配数据源不在做过多解释贴代码看就行

public class MainActivity extends AppCompatActivity {private MyPullList mainlist;private View headView;private ImageView iv;private ImageView leftIv;private List<String> list;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);this.mainlist = (MyPullList) findViewById(R.id.main_list);headView = View.inflate(this, R.layout.listview_head, null);iv = (ImageView) headView.findViewById(R.id.head_img);leftIv = (ImageView) headView.findViewById(R.id.head_leftimg);//消除阴影mainlist.setOverScrollMode(View.OVER_SCROLL_NEVER);initData();mainlist.setImageBig(iv);}private void initData() {list = new ArrayList<>();for (int i = 0; i < 26; i++) {list.add("嗯哼嗯哼蹦擦擦~" + (i + 1));}initAdapter();}private void initAdapter() {ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, list);mainlist.addHeaderView(headView);mainlist.setAdapter(adapter);}
}

14行的head是我们要添加的头部接下来的效果也只要是针对头部的
我们在initAdapter()方法中将头部添加进去然后setAdapter
接下来主要在自定义的listView中做操作
首先我们需要重写overScrollBy方法监听滑动的事件

@Overrideprotected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {//这里的deltaY代表的是Y偏移量if (deltaY < 0) {//这里将图片的高度变大  为什么deltaY要除2呢? 是因为防止用户从头拉到底部 图片高度过大不好看mIv.getLayoutParams().height = mIv.getHeight() - deltaY / 2;mIv.requestLayout();} else {//这里的代码是当你上滑的时候缩放图片的if (mIv.getHeight() > mImageViewHeigth) {mIv.getLayoutParams().height = mIv.getHeight() + deltaY / 2;mIv.requestLayout();}}return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);}

接着要重写onScrollChanged方法

 @Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt) {//让Imageview上滑时放大监听View head = (View) mIv.getParent();//拿到父容器与顶部的高度if (head.getTop() < 0 && mIv.getHeight() > mImageViewHeigth) {mIv.getLayoutParams().height = mIv.getHeight() + head.getTop();head.layout(head.getLeft(), 0, head.getRight(), head.getHeight());mIv.requestLayout();}super.onScrollChanged(l, t, oldl, oldt);}

主要的作用与父容器与顶部的距离这里有一个mImageViewHeigth的变量是什么意思呢? 他代表的是图片的初始高度我定义在了成员变量内
最后需要重写的是onTouchEvent方法

    @Overridepublic boolean onTouchEvent(MotionEvent ev) {//注意  这里只监听了ACTION_UP方法  是因为只有当用户抬起手指的时候才会让顶部回弹switch (ev.getAction()) {case MotionEvent.ACTION_UP://自定义了一个动画  下面直接贴代码ResetAnimation animation = new ResetAnimation(mIv, mImageViewHeigth);animation.setDuration(300);mIv.startAnimation(animation);break;}return super.onTouchEvent(ev);}

动画代码————>

class ResetAnimation extends Animation {private ImageView iv;private int targetHeigth; //最终恢复的高度private final int height;private final int endHeigth;//这个iv的参数也许用不到  可加可不加public ResetAnimation(ImageView iv, int targetHeigth) {this.iv = iv;this.targetHeigth = targetHeigth;this.height = mIv.getHeight();this.endHeigth = height - targetHeigth;}@Overrideprotected void applyTransformation(float interpolatedTime, Transformation t) {//不断调用  这个的代码比较关键  当手指抬起回调动画方法的时候这个方法是会被一直调用的mIv.getLayoutParams().height = (int) (height - endHeigth * interpolatedTime);mIv.requestLayout();super.applyTransformation(interpolatedTime, t);}

基本代码就只有这一些
github地址

https://github.com/Huazhiling/DivQQZone

仿QQ空间打造可拉伸头部组件相关推荐

iOS传感器集锦、飞机大战、开发调试工具、强制更新、Swift仿QQ空间头部等源码
iOS精选源码飞机大作战 MUPhotoPreview -简单易用的图片浏览器 image LLDebugTool是一款针对开发者和测试者的调试工具,它可以帮... image 多个UIScroll ...
【Android UI设计与开发】第09期：底部菜单栏（四）Fragment+PopupWindow仿QQ空间最新版底部菜单栏
转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9023451 在今天的这篇文章当中,我依然会以实战加理论结合 ...
java 仿qq空间_仿QQ空间和微信朋友圈，高解耦高复用高灵活
先看看效果: 用极少的代码实现了动态详情及二级评论的数据获取与处理和 UI显示与交互,并且高解耦.高复用.高灵活. 动态列表界面MomentListFragment支持下拉刷新与上拉加载 ...
java仿qq空间音乐播放_完美实现仿QQ空间评论回复特效
评论回复是个很常见的东西,但是各大网站实现的方式却不尽相同.大体上有两种方式 1. 像优酷这种最常见,在输入框中@要回复的人,这种方式下,用www.cppcns.com户可以修改@. 新浪微博则是在这 ...
html5仿qq空间,JS实现的仿QQ空间图片弹出效果代码
本文实例讲述了JS实现的仿QQ空间图片弹出效果代码.分享给大家供大家参考,具体如下: function imageShow(which_click) { var image_path = which_ ...
php 朋友圈留言,php实例-PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（上）...
我们大部分人都发过动态,想必都知道发动态.回复评论.删除动态的整个过程,那么这个功能是如何实现的呢?下面小编给大家带来了实例代码,对PHP仿qq空间或朋友圈发布动态.评论动态.回复评论.删除动态或评论 ...
仿QQ空间图片放缩查看
仿QQ空间图片放缩查看仿QQ空间图片放缩查看,点击图片从原位置放大到全屏,后退从全屏缩小到原位置,效果非常好. 下载地址:http://www.devstore.cn/code/info/830.h ...
Java 仿QQ空间评论后台代码实现一张表
因为项目业务需要,特此写出此仿QQ空间的评论功能,项目如下图所示,records下的是一级评论里面的commentList是二级评论,前端根据此数据格式渲染即可表结构如下,其中father_id与 ...
android弹窗使用总结，高仿QQ空间操作弹窗
android弹窗一共有两种方式,一种是dialog及其子类,另一种是popupwindow:Dialog及其子类尤其AlertDialog是最常用的,也是最自由的一种. **Popupwindow与 ...

仿QQ空间打造可拉伸头部组件

仿QQ空间打造可拉伸头部组件

仿QQ空间打造可拉伸头部组件相关推荐

最新文章

热门文章