Android仿QQ可拉伸头部控件

本文实例为大家分享了Android仿QQ可拉伸头部控件的具体实现代码,供大家参考,具体内容如下

该控件大致思路:

1.采用继承listview加入头部view。
2.监听listview滚动。
3.自定义动画回弹。

先看效果吧:

activity-main.xml布局如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="horizontal"
 tools:context=".MainActivity" >

 <com.example.headerlistview.HeaderListView
 android:id="@+id/header_lv"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:cacheColorHint="@android:color/transparent"
 android:divider="@android:color/darker_gray"
 android:dividerHeight="1dip"
 android:duplicateParentState="true"
 android:scrollbars="none" >
 </com.example.headerlistview.HeaderListView>

</LinearLayout>

headerview.xml布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical" >

 <ImageView
 android:id="@+id/header_image"
 android:layout_width="match_parent"
 android:layout_height="150dip"
 android:scaleType="centerCrop"
 android:src="@drawable/lifei987"
 />

</LinearLayout>

list_item布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="80dip"
 android:gravity="center_vertical"
 android:orientation="horizontal" >
"

 <ImageView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:src="@drawable/ic_launcher" />

 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="80dip"
 android:layout_marginLeft="10dip"
 android:orientation="vertical" >

 <TextView
 android:id="@+id/tv_name"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="10dip"
 android:text="lifei" />

 <TextView
 android:id="@+id/tv_describe"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="10dip"
 android:text="lifeiasdfasdfasfsadfasf" />
 </LinearLayout>

</LinearLayout>

activity代码:

package com.example.headerlistview;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.os.Bundle;
import android.app.Activity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.SimpleAdapter;

public class MainActivity extends Activity {

 private HeaderListView header_lv;

 private ImageView header_iv;

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

 private void initView() {
 // TODO Auto-generated method stub
 header_lv=(HeaderListView) findViewById(R.id.header_lv);
 header_lv.addHeaderView(getHeaderView());
 header_lv.setHeaderView(header_iv);
 header_lv.setAdapter(getSimpleAdapter());
 }

 public BaseAdapter getSimpleAdapter(){
 List<Map<String, Object>> data=new ArrayList<Map<String,Object>>();
 for(int i=0;i<15;i++){
 Map<String, Object> map=new HashMap<String, Object>();
 map.put("name", "郑州___"+i);
 map.put("describe", "asdfasdfasdfasdfasdfsadfsad");
 data.add(map);
 }

 SimpleAdapter simpleAdapter=new SimpleAdapter(this, data, R.layout.list_item, new String[]{"name","describe"}, new int[]{R.id.tv_name,R.id.tv_describe});
 return simpleAdapter;
 }

 public View getHeaderView(){
 View view= getLayoutInflater().inflate(R.layout.headerview, null);
 header_iv =(ImageView) view.findViewById(R.id.header_image);
 return view;
 }

}

自定义控件HeaderListView:

package com.example.headerlistview;

import java.security.spec.ECField;

import android.annotation.SuppressLint;
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;
import android.widget.ImageView;
import android.widget.ListView;

public class HeaderListView extends ListView {

 private ImageView headerView;

 private int headerView_initHeight;//imageview初始高度

 public void setHeaderView(ImageView headerView) {
 this.headerView = headerView;
 }

 public HeaderListView(Context context) {
 super(context);
 // TODO Auto-generated constructor stub
 }

 public HeaderListView(Context context, AttributeSet attrs, int defStyle) {
 super(context, attrs, defStyle);
 // TODO Auto-generated constructor stub
 }

 public HeaderListView(Context context, AttributeSet attrs) {
 super(context, attrs);
 // TODO Auto-generated constructor stub
 }

 /**
 * listview焦点改变时--获取iamgeview高度的初始值,该值不能在构造方法中获取
 */
 @Override
 public void onWindowFocusChanged(boolean hasWindowFocus) {
 // TODO Auto-generated method stub
 super.onWindowFocusChanged(hasWindowFocus);
 if(hasWindowFocus){
 this.headerView_initHeight=headerView.getHeight();
 }
 }

 @SuppressLint("NewApi") @Override
 protected boolean overScrollBy(int deltaX, int deltaY, int scrollX,
 int scrollY, int scrollRangeX, int scrollRangeY,
 int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
 // 滑动过头的时候调用
 boolean bl=resizeHeaderView(deltaY);

 return bl?true:super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX,
 scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
 }

 /**
 * 控制imageview高度的增加
 * @param deltaY 偏移量
 */
 private boolean resizeHeaderView(int deltaY) {
 if(Math.abs((double)deltaY)<200){
 if(deltaY<0){
 headerView.getLayoutParams().height=headerView.getHeight()-deltaY;
 //重新绘制
 headerView.requestLayout();
 }else{
 headerView.getLayoutParams().height=headerView.getHeight()-deltaY;
 headerView.requestLayout();
 }
 }

 return false;
 }

 @Override
 protected void onScrollChanged(int l, int t, int oldl, int oldt) {
 // TODO Auto-generated method stub
 super.onScrollChanged(l, t, oldl, oldt);
 //获取imageview父控件
 View parent=(View) headerView.getParent();
 //当父控件的top值小于零或者高度大于原始高度时触发
 if(parent.getTop()<0||headerView.getHeight()>headerView_initHeight){
 headerView.getLayoutParams().height=headerView.getHeight()+parent.getTop();
 parent.layout(parent.getLeft(),0, parent.getRight(), parent.getHeight());
 headerView.requestLayout();
 }
 }

 @Override
 public boolean onTouchEvent(MotionEvent ev) {
 // TODO Auto-generated method stub
 if(ev.getAction()==MotionEvent.ACTION_UP||ev.getAction()==MotionEvent.ACTION_CANCEL){
 MyAnimation animation=new MyAnimation(headerView, headerView_initHeight);
 animation.setDuration(200);
 headerView.startAnimation(animation);
 }
 return super.onTouchEvent(ev);
 }

 public class MyAnimation extends Animation{

 private ImageView header_iv;
 private int currentHeight;
 private int targetHeight;
 private int poorHeight;

 public MyAnimation(ImageView iv,int targetHeight){
 this.header_iv=iv;
 this.targetHeight=targetHeight;
 this.currentHeight=iv.getHeight();
 this.poorHeight=this.currentHeight-this.targetHeight;
 }

 /**
 * 动画执行期间执行该方法,不断执行
 * interpolatedTime:当前时间与duration的时间比(时间执行百分比)
 */
 @Override
 protected void applyTransformation(float interpolatedTime,
 Transformation t) {
 // TODO Auto-generated method stub
 super.applyTransformation(interpolatedTime, t);
 this.header_iv.getLayoutParams().height=(int)(currentHeight-poorHeight*interpolatedTime);
 this.header_iv.requestLayout();
 }
 }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android中关于自定义相机预览界面拉伸问题

    关于自定义相机预览界面拉伸问题 1.导致主要变形的原因是Camera预览界面旋转的角度和摄像头挂载的角度不同导致的 2.我们的Activity设置的方向是竖屏,这是手机的自然方向 所以宽比高短 3.角度:所谓屏幕和摄像头的角度,指的是相对于自然方向旋转过的角度,根据旋转角度即可获知当前的方向 4.假如说:手机是竖屏的情况下, 自然角度为0,但是Camera逆时针旋转90度,那咱们设置顺时针旋转90度,就正常 .手机是横屏的情况下Camera返回为0度 ,如果设置顺时针旋转90度,就回旋转 怎么设

  • Android中ImageView.src设置图片拉伸、填满控件的方法

    问题 ImageView.src设置图片资源,图片不拉伸了,却有空隙部分: <LinearLayout android:id="@+id/linearLayout1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" > <ImageView andro

  • 详解Android使用CoordinatorLayout+AppBarLayout实现拉伸顶部图片功能

    一.国际惯例,先看下效果图 二.不跟你多bb直接上布局文件代码 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tool

  • Android BottomSheet实现可拉伸控件

    一.简介 Bottom Sheet是Design Support Library23.2 版本引入的一个类似于对话框的控件. Bottom Sheet中的内容默认是隐藏起来的,只显示很小一部分,可以通过在代码中设置其状态或者手势操作将其完全展开,或者完全隐藏,或者部分隐藏. 二.使用 1.添加依赖: implementation 'com.android.support:design:28.0.0' 2.布局 <?xml version="1.0" encoding="

  • Android 仿高德地图可拉伸的BottomSheet的示例代码

    前言 最近项目中需要用到高德地图搜索结果后的结果展示的可拉伸控件. gaode.gif 而我看到这个效果图,觉得这个就是一个slidingpanel,但是翻阅了一些发现用google自带的bottomsheet实现更方便 什么是BottomSheet? Bottom Sheet是Design Support Library23.2 版本引入的一个类似于对话框的控件,可以暂且叫做底部弹出框吧. Bottom Sheet中的内容默认是隐藏起来的,只显示很小一部分,可以通过在代码中设置其状态或者手势操

  • Android仿QQ可拉伸头部控件

    本文实例为大家分享了Android仿QQ可拉伸头部控件的具体实现代码,供大家参考,具体内容如下 该控件大致思路: 1.采用继承listview加入头部view. 2.监听listview滚动. 3.自定义动画回弹. 先看效果吧: activity-main.xml布局如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schema

  • Android自定义View仿大众点评星星评分控件

    本文实例为大家分享了Android仿大众点评星星评分控件的具体代码,供大家参考,具体内容如下 话不多说,直接上代码,这里采用的是自定View public class RatingBar extends View { // 正常.半个和选中的星星 private Bitmap mStarNormal, mStarHalf, mStarSelected; //星星的总数 private int mStartTotalNumber = 5; //选中的星星个数 private float mSele

  • Android仿QQ空间顶部条背景变化效果

    本文给大家分享仿QQ空间页面顶部条随界面滑动背景透明度变化的效果,这个效果在其他应用程序中也很常见,技能+1. 一.上代码,具体实现 笔者之前的文章第二部分总是二话不说,直接上代码,很干脆,其实更好的方式是引导读者思考:这个效果如何实现.前期做好效果的功能分析,才能读者更好的理解. QQ空间的这个页面其实并不复杂,我们看看QQ空间的演示界面: 可以看见,整个页面其实只有两个根元素,一个是ListView,一个是标题栏,前者可以上下滑动,给用户呈现内容:后者固定位置不动,类似于一个导航栏,左边一个

  • Android仿QQ空间底部菜单示例代码

    之前曾经在网上看到Android仿QQ空间底部菜单的Demo,发现这个Demo有很多Bug,布局用了很多神秘数字.于是研究了一下QQ空间底部菜单的实现,自己写了一个,供大家参考.效果如下图所示:   1.实现原理很简单,底部菜单是一个水平分布的LinearLayout,里面又是五个LinearLayout,它们的layout_weight都为1,意味着底部菜单的子控件将屏幕宽度平均分为5部分.五个LinearLayout除了中间那个,其余都在里面放置ImageView和TextView(中间先空

  • android 仿QQ动态背景、视频背景的示例代码

    本文介绍了android 仿QQ动态背景.视频背景的示例代码,分享给大家,具体如下: 效果如下: 如上图类似效果图: 1, 自定义视频类 继承VideoView public class CustomVideoView extends VideoView { public CustomVideoView(Context context) { super(context); } public CustomVideoView(Context context, AttributeSet attrs)

  • Android仿qq消息拖拽效果

    本文实例为大家分享了Android仿qq消息拖拽效果展示的具体代码,供大家参考,具体内容如下 这是一个仿qq消息拖拽效果,View和拖拽实现了分离,TextView.Button.Imageview等都可以实现相应的拖拽效果:在触发的地方调用 MessageBubbleView.attach(findViewById(R.id.text_view), new MessageBubbleView.BubbleDisappearListener() { @Override public void d

  • Android仿qq顶部消息栏效果

    android仿照qq的顶部栏效果,主要就是利用fragment manager把fragment设置显示内容 (1)在activity_main.xml布局中添加控件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="

  • Android通过ImageView设置手指滑动控件缩放

    ImageView设置手指滑动缩放效果,具体实现步骤大家通过本文学习下吧! 实现步骤 1, imageview设置scaletype为 android:scaleType="matrix" 2, 设置imageview的setOnTouchListener,重写里面的代码 3, 新建一个matrix, matrix.postScale(scale,scale,缩放中心,缩放中心); image.setImageMatrix(matrix); 这样image的大小就会改变了. 需要注意的

  • 详解Android 裸眼3D效果View控件

    描述:这是一个裸眼3D效果的控件View. Tips:本项目代码部分逻辑参考于其他文章(自如的3D裸眼实现),众人拾柴火焰高,希望大家能多多补充. 项目代码:https://gitee.com/jiugeishere/uidesign 控件效果如下: 实现功能: 实现三层图片叠加效果(裸眼3D效果) 可设置每层图片移动速率 可设置每层图片移动的限制度数 可直接设置图片或引入图片 设计核心: 主要的设计核心是依赖于传感器对手机晃动的监听(重力感应监听器),对每层图片进行不同的移动,实现仿3D效果.

  • Android开发手册RatingBar星级评分控件实例

    目录 实践过程 初识 基本属性 点击事件 自定义样式 实践过程 初识 RatingBar是基于SeekBar和ProgressBar的扩展,用星型来显示等级评定. 通常应用场景是在用户评价那,如淘宝评价,打车订餐评价等等. 使用RatingBar的默认大小时,用户可以触摸/拖动或使用键来设置评分,它有两种样式(小风格用ratingBarStyleSmall,大风格用ratingBarStyleIndicator),其中大的只适合指示,不适合于用户交互. 基本属性 [android:isIndic

随机推荐