记得之前京东首页有一个效果,有一个画轴,然后可以滚动画轴,去打开画(不知道怎么去形容这个效果,就叫做画轴效果吧- -!),然后去做相关 *** 作,刚开始看到这个效果,想法是动态的去改变一个ImageVIEw的高度,基本效果也就出来了,不过滚动部分的内容,当时接触的也不是很多,只是看过一些大牛的博客,略微了解了一点,当时也忙着写项目,也就没去多想,前些天忽然想到这个效果,就想着实现一下,不过京东新版本好像去掉这个东西了,只能凭着自己的记忆来大概搞一下,也是对滑动这部分内容的一个小练习吧.
先看一下效果图:
一、需求分析
看到效果之后,先来分析一下:
首先是需要一个可以滑动的画轴,并且这个画轴需要一定的滑动空间,有滑动的效果,这个用Scroller帮助完成就可以了.
然后看一下画轴点击移动时候的背景图,是跟随画轴移动,动态改变高度的.这个用一个ImageVIEw来搞定,设置ImageVIEw的scaleType就可以了,不过这个地方有一些小问题,下面会说.
二、具体实现
简单分析完,来实现一下,先来做一下画轴.创建一个ScrollPaintVIEw继承自relativeLayout,因为需要一定的滑动空间,所以需要是一个VIEwGroup.
ScrollPaintVIEw的一些基本属性:
public class ScrollPaintVIEw extends relativeLayout { /** * TAG */ private static final String TAG = "ScrollPaintVIEw"; /** * 默认滚轴高度 */ private final int DEFAulT_PAINT_SCRolL_HEIGHT = 25; /** * 默认滚动的速度 */ private final int DEFAulT_SCRolL_SPEED = 1000; /** * 默认分割点高度 */ private final int DEFAulT_PARTITION_NODE = 150; /** * 默认画轴文字大小 */ private final int DEFAulT_PAINT_SCRolL_TXT_SIZE = 16; /** * Scroller */ private Scroller mScroller; /** * 滚轴Iv */ private ImageVIEw mPaintScrollimageVIEw; /** * 滚轴Tv */ private TextVIEw mPaintScrollTextVIEw; /** * 图画Iv */ private ImageVIEw mPaintVIEw; /** * 画轴图 */ private Bitmap mPaintScrollBp; /** * 画轴高度 */ private int mPaintIvHeight; /** * 画轴文字 */ private String mPaintScrollTxt; /** * 画轴文字大小 */ private float mPaintScrollTxtSize; /** * 画轴文字颜色 */ private int mPaintScrollTxtcolor; /** * 图画开始时的高度 */ private int mPaintStartHeight; /** * 上一次获取的Y */ private int mLastY; /** * 滚动速度 */ private int mScrollSpeed; /** * 分隔节点 */ private int partitionNode; /** * 是否是向上滚动 */ private boolean isScrllertop = false; /** * 是否正在点击 */ private boolean isClick = false; /** * 布局参数 */ private LayoutParams lpp; /** * 屏幕高度 */ private int screenHeight; /** * 屏幕宽度 */ private int screenWIDth; /** * 回调监听 */ private ScrollPaintCompleteListener Listener; /** * 上一次滚动的Y值 */ private int lastScrollY; /** * 构造方法 */ public ScrollPaintVIEw(Context context,AttributeSet attrs,int defStyleAttr) { super(context,attrs,defStyleAttr); // 获取属性 TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.ScrollPaintVIEw); mPaintIvHeight = (int) ta.getDimension(R.styleable.ScrollPaintVIEw_paintScrollHeight,TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP,DEFAulT_PAINT_SCRolL_HEIGHT,getResources().getdisplayMetrics())); mScrollSpeed = ta.getInteger(R.styleable.ScrollPaintVIEw_scrollSpeed,DEFAulT_SCRolL_SPEED); partitionNode = ta.getInteger(R.styleable.ScrollPaintVIEw_scrollPartitionNode,DEFAulT_PARTITION_NODE); mPaintScrollBp = drawabletoBitamp(ta.getDrawable(R.styleable.ScrollPaintVIEw_paintScrollSrc)); mPaintScrollTxt = ta.getString(R.styleable.ScrollPaintVIEw_paintScrollTxt); mPaintScrollTxtcolor = ta.getcolor(R.styleable.ScrollPaintVIEw_paintScrollTxtcolor,color.BLACK); mPaintScrollTxtSize = px2sp(ta.getDimensionPixelSize(R.styleable.ScrollPaintVIEw_paintScrollTxtSize,DEFAulT_PAINT_SCRolL_TXT_SIZE)); ta.recycle(); }}看一下创建画轴:
/** * 创建滚轴 */ private voID makePaintScroll() { // 如果已经存在,则不再创建 if (null != mPaintScrollimageVIEw || null != mPaintScrollTextVIEw) { return; } // 创建滚轴 mPaintScrollimageVIEw = new ImageVIEw(getContext()); LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT); lp.height = mPaintIvHeight; mPaintScrollimageVIEw.setLayoutParams(lp); mPaintScrollimageVIEw.setScaleType(ImageVIEw.ScaleType.FIT_XY); mPaintScrollimageVIEw.setimageBitmap(null == mPaintScrollBp ? makeDefaultScroll() : mPaintScrollBp); addVIEw(mPaintScrollimageVIEw); // 创建文字 mPaintScrollTextVIEw = new TextVIEw(getContext()); LayoutParams lpt = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT); lpt.height = mPaintIvHeight; mPaintScrollTextVIEw.setLayoutParams(lpt); mPaintScrollTextVIEw.setText(null == mPaintScrollTxt ? "" : mPaintScrollTxt); mPaintScrollTextVIEw.setTextSize(mPaintScrollTxtSize); mPaintScrollTextVIEw.setTextcolor(mPaintScrollTxtcolor); mPaintScrollTextVIEw.setGravity(Gravity.CENTER); addVIEw(mPaintScrollTextVIEw); } /** * 设置默认的滚轴 * * @return */ private Bitmap makeDefaultScroll() { Bitmap defaultBp = Bitmap.createBitmap(screenWIDth,mPaintIvHeight,Bitmap.Config.ARGB_8888); //填充颜色 defaultBp.erasecolor(color.parsecolor("#FF0000")); return defaultBp; }创建了一个画轴ImageVIEw和一个文字TextVIEw作为初始的画轴,如果没有传入画轴的图片,则默认去创建一个画轴.不难理解,接着去配合Scroller,让画轴滚动起来.
简单滚动:
/** * 处理VIEw */ private voID handleVIEw() { // 初始化Scroller mScroller = new Scroller(getContext()); // 画轴点击效果 mPaintScrollimageVIEw.setontouchListener(new OntouchListener() { @OverrIDe public boolean ontouch(VIEw vIEw,MotionEvent event) { int x = (int) event.getRawX(); int y = (int) event.getRawY(); int action = event.getAction(); switch (action) { case MotionEvent.ACTION_DOWN: isClick = true; mLastY = y; if (!mScroller.isFinished()) { // 如果上次的调用没有执行完就取消。 mScroller.abortAnimation(); } return true; case MotionEvent.ACTION_MOVE: // 移动的距离 int dy = y - mLastY; mLastY = y; // 滑动 scrollBy(0,-dy); return true; case MotionEvent.ACTION_UP: mScroller.startScroll(getScrollX(),getScrollY(),-getScrollX(),-getScrollY(),1000); invalIDate(); return true; } return false; } }); } /** * 滑动处理 */ @OverrIDe public voID computeScroll() { if (mScroller.computeScrollOffset()) { // 计算新位置，并判断上一个滚动是否完成。 scrollTo(mScroller.getCurrX(),mScroller.getCurrY()); invalIDate(); } }这样滑动处理就做完了,在布局中引用一下,看一下效果
activity_main:
<?xml version="1.0" enCoding="utf-8"?><relativeLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" xmlns:app="http://schemas.androID.com/apk/res-auto" xmlns:tools="http://schemas.androID.com/tools" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" androID:background="#eeeeee" tools:context="com.example.junweiliu.scrollpaintdemo.MainActivity"> <!--画轴控件--> <com.example.junweiliu.scrollpaintdemo.Widget.ScrollPaintVIEw androID:ID="@+ID/spv_paint" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" app:paintScrollHeight="25dp" app:paintScrollSrc="@mipmap/paint_scroll_img" app:paintScrollTxt="拉我看看" app:paintScrollTxtcolor="#FF000000" app:paintScrollTxtSize="16sp" > </com.example.junweiliu.scrollpaintdemo.Widget.ScrollPaintVIEw></relativeLayout>
效果图:
滚动条基本能用了,接着来设置一个ImageVIEw来配合使用下,先获取到一个ImageVIEw,然后拖动画轴时,来动态改变ImageVIEw的高度,在做这部分内容前,先来考虑下,因为需求需要的是图画整体不会变形,是一点一点拉开的感觉,就像是打开一幅画一样,那么用哪种scaleType能满足呢.试了好多种,来分别看一下:
相关代码:
提供一个设置ImageVIEw的方法
在MotionEvent.ACTION_MOVE:中动态改变ImageVIEw的高度
滑动时动态改变ImageVIEw的高度
/** * 设置paintVIEw * * @param paintVIEw */ public voID setPaintVIEw(ImageVIEw paintVIEw) { if (null == paintVIEw) { Log.e(TAG,"设置的VIEw为空"); return; } mPaintVIEw = paintVIEw; }MotionEvent.ACTION_MOVE:
// 滑动处理 case MotionEvent.ACTION_MOVE: ... // 动态改变高度 if (Math.abs(getScrollY()) > 0) { lpp.height = mPaintStartHeight + Math.abs(getScrollY()); mPaintVIEw.setLayoutParams(lpp); }滑动处理:
/** * 滑动处理 */ @OverrIDe public voID computeScroll() { if (mScroller.computeScrollOffset()) { // 计算新位置，并判断上一个滚动是否完成。 // 请求处理点击事件,防止父控件滑动 requestdisallowIntercepttouchEvent(true); scrollTo(mScroller.getCurrX(),mScroller.getCurrY()); // 重新设置显示的控件高度 if (0 < Math.abs(mScroller.getCurrY())) { if (!isScrllertop) { lpp.height = mPaintStartHeight + Math.abs(mScroller.getCurrY()) + mPaintIvHeight / 2; } else { lpp.height = mPaintStartHeight + Math.abs(mScroller.getCurrY()) - mPaintIvHeight / 2; } } else { lpp.height = mPaintStartHeight; } mPaintVIEw.setLayoutParams(lpp); invalIDate(); }}设置不同scaleType效果,简单试几个效果:
fitXY:
centerCrop:
matrix:
观察一下,好像那个效果都不是很好,不过matrix拉开的效果和预期需要的是一样的,不过用matrix之后,就没有办法设置其他scaleType了,没办法把图片进行缩放了,这肿么办呢,其实很简单,只需要把显示的图片提前进行一下缩放就可以了.
处理图片相关:
/** * 设置paintVIEw * * @param paintVIEw */ public voID setPaintVIEw(ImageVIEw paintVIEw) { if (null == paintVIEw) { Log.e(TAG,"设置的VIEw为空"); return; } // 处理图片,对图片按照屏幕宽高比进行缩放 Bitmap bp = drawabletoBitamp(paintVIEw.getDrawable()); paintVIEw.setimageBitmap(scaleBitmal(bp)); // 设置缩放形式 paintVIEw.setScaleType(ImageVIEw.ScaleType.MATRIX); mPaintVIEw = paintVIEw; } /** * drawable转bitmap * * @param drawable * @return */ private Bitmap drawabletoBitamp(Drawable drawable) { if (null == drawable) { return null; } if (drawable instanceof BitmapDrawable) { BitmapDrawable bd = (BitmapDrawable) drawable; return bd.getBitmap(); } int w = drawable.getIntrinsicWIDth(); int h = drawable.getIntrinsicHeight(); Bitmap bitmap = Bitmap.createBitmap(w,h,Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap); drawable.setBounds(0,w,h); drawable.draw(canvas); return bitmap; } /** * 按照屏幕宽高缩放图片 * * @param bp * @return */ private Bitmap scaleBitmal(Bitmap bp) { // 宽度比例 float scaleW = (float) screenWIDth / (float) bp.getWIDth(); // 高度比例 float scaleH = (float) screenHeight / (float) bp.getHeight(); // 矩阵,用于缩放图片 Matrix matrix = new Matrix(); matrix.postscale(scaleW,scaleH); // 缩放后的图片 Bitmap scaleBp = Bitmap.createBitmap(bp,bp.getWIDth(),bp.getHeight(),matrix,true); return scaleBp; }看一下效果:
效果还不错,接下来就是做一下细节上的处理,设置一个临界点,让画轴向上或者向下滚动,设置边界点,让画轴不越界等等.还有一般都是在ScrollVIEw中使用到这个效果,所以要去处理一下事件冲突,当然还有去重写一下onMeasure方法,不然会出现不显示的情况.(相信大家也遇到过ScrollVIEw里边嵌套ListVIEw导致ListVIEw显示不全)这里就不再详细介绍了.直接贴下代码.
三、完整代码
MainActivity:
package com.example.junweiliu.scrollpaintdemo;import androID.content.Intent;import androID.os.Bundle;import androID.os.Handler;import androID.os.Message;import androID.support.v7.app.AppCompatActivity;import androID.vIEw.VIEw;import androID.Widget.ImageVIEw;import androID.Widget.TextVIEw;import androID.Widget.Toast;import com.example.junweiliu.scrollpaintdemo.Widget.ScrollPaintVIEw;public class MainActivity extends AppCompatActivity { private static final String TAG = "MainActivity"; /** * 需要显示的IV */ private ImageVIEw mPaintIv; /** * 画轴 */ private ScrollPaintVIEw mScrollPaintVIEw; @OverrIDe protected voID onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentVIEw(R.layout.activity_main); initVIEw(); } /** * 初始化控件 */ private voID initVIEw() { mPaintIv = (ImageVIEw) findVIEwByID(R.ID.iv_paint); mScrollPaintVIEw = (ScrollPaintVIEw) findVIEwByID(R.ID.spv_paint); mScrollPaintVIEw.setPaintVIEw(mPaintIv); mPaintIv.setonClickListener(new VIEw.OnClickListener() { @OverrIDe public voID onClick(VIEw vIEw) { Toast.makeText(MainActivity.this,"功夫!",Toast.LENGTH_SHORT).show(); } }); mScrollPaintVIEw.setScrollPaintCompleteListener(new ScrollPaintVIEw.ScrollPaintCompleteListener() { @OverrIDe public voID onScrolltouch(TextVIEw tv) { mPaintIv.setVisibility(VIEw.VISIBLE); } @OverrIDe public voID onScrolltop(TextVIEw tv) {// Log.e(TAG,"收缩了"); tv.setText("拉我看看"); if (VIEw.VISIBLE == mPaintIv.getVisibility()) { mPaintIv.setVisibility(VIEw.GONE); } } @OverrIDe public voID onScrollBottom(TextVIEw tv) {// Log.e(TAG,"展开了"); tv.setText("到底了"); Intent intent = new Intent(MainActivity.this,DetailActivity.class); startActivity(intent); // 延迟800毫秒重置位置 new Handler(new Handler.Callback() { @OverrIDe public boolean handleMessage(Message message) { mScrollPaintVIEw.replaceScroll(); return false; } }).sendEmptyMessageDelayed(0,600); } @OverrIDe public voID onScrollMove(TextVIEw tv) {// Log.e(TAG,"移动了"); tv.setText("请上下拖动"); } }); }}ScrollPaintVIEw:
package com.example.junweiliu.scrollpaintdemo.Widget;import androID.app.Activity;import androID.content.Context;import androID.content.res.TypedArray;import androID.graphics.Bitmap;import androID.graphics.Canvas;import androID.graphics.color;import androID.graphics.Matrix;import androID.graphics.Rect;import androID.graphics.drawable.BitmapDrawable;import androID.graphics.drawable.Drawable;import androID.util.AttributeSet;import androID.util.displayMetrics;import androID.util.Log;import androID.util.TypedValue;import androID.vIEw.Gravity;import androID.vIEw.MotionEvent;import androID.vIEw.VIEw;import androID.Widget.ImageVIEw;import androID.Widget.relativeLayout;import androID.Widget.Scroller;import androID.Widget.TextVIEw;import com.example.junweiliu.scrollpaintdemo.R;/** * Created by junweiliu on 16/12/10. */public class ScrollPaintVIEw extends relativeLayout { /** * TAG */ private static final String TAG = "ScrollPaintVIEw"; /** * 默认滚轴高度 */ private final int DEFAulT_PAINT_SCRolL_HEIGHT = 25; /** * 默认滚动的速度 */ private final int DEFAulT_SCRolL_SPEED = 1000; /** * 默认分割点高度 */ private final int DEFAulT_PARTITION_NODE = 150; /** * 默认画轴文字大小 */ private final int DEFAulT_PAINT_SCRolL_TXT_SIZE = 16; /** * Scroller */ private Scroller mScroller; /** * 滚轴Iv */ private ImageVIEw mPaintScrollimageVIEw; /** * 滚轴Tv */ private TextVIEw mPaintScrollTextVIEw; /** * 图画Iv */ private ImageVIEw mPaintVIEw; /** * 画轴图 */ private Bitmap mPaintScrollBp; /** * 画轴高度 */ private int mPaintIvHeight; /** * 画轴文字 */ private String mPaintScrollTxt; /** * 画轴文字大小 */ private float mPaintScrollTxtSize; /** * 画轴文字颜色 */ private int mPaintScrollTxtcolor; /** * 图画开始时的高度 */ private int mPaintStartHeight; /** * 上一次获取的Y */ private int mLastY; /** * 滚动速度 */ private int mScrollSpeed; /** * 分隔节点 */ private int partitionNode; /** * 是否是向上滚动 */ private boolean isScrllertop = false; /** * 是否正在点击 */ private boolean isClick = false; /** * 布局参数 */ private LayoutParams lpp; /** * 屏幕高度 */ private int screenHeight; /** * 屏幕宽度 */ private int screenWIDth; /** * 回调监听 */ private ScrollPaintCompleteListener Listener; /** * 上一次滚动的Y值 */ private int lastScrollY; /** * 回调接口 */ public interface ScrollPaintCompleteListener { /** * 点击时的回调 */ public voID onScrolltouch(TextVIEw tv); /** * 收缩时的回调 */ public voID onScrolltop(TextVIEw tv); /** * 展开时的回调 */ public voID onScrollBottom(TextVIEw tv); /** * 滚动中的回调 */ public voID onScrollMove(TextVIEw tv); } public ScrollPaintVIEw(Context context) { this(context,null); } public ScrollPaintVIEw(Context context,AttributeSet attrs) { this(context,0); } public ScrollPaintVIEw(Context context,int defStyleAttr) { super(context,defStyleAttr); // 获取属性 TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.ScrollPaintVIEw); mPaintIvHeight = (int) ta.getDimension(R.styleable.ScrollPaintVIEw_paintScrollHeight,TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP,getResources().getdisplayMetrics())); mScrollSpeed = ta.getInteger(R.styleable.ScrollPaintVIEw_scrollSpeed,DEFAulT_SCRolL_SPEED); partitionNode = ta.getInteger(R.styleable.ScrollPaintVIEw_scrollPartitionNode,DEFAulT_PARTITION_NODE); mPaintScrollBp = drawabletoBitamp(ta.getDrawable(R.styleable.ScrollPaintVIEw_paintScrollSrc)); mPaintScrollTxt = ta.getString(R.styleable.ScrollPaintVIEw_paintScrollTxt); mPaintScrollTxtcolor = ta.getcolor(R.styleable.ScrollPaintVIEw_paintScrollTxtcolor,color.BLACK); mPaintScrollTxtSize = px2sp(ta.getDimensionPixelSize(R.styleable.ScrollPaintVIEw_paintScrollTxtSize,DEFAulT_PAINT_SCRolL_TXT_SIZE)); ta.recycle(); init(); makePaintScroll(); handleVIEw(); } /** * 设置paintVIEw * * @param paintVIEw */ public voID setPaintVIEw(ImageVIEw paintVIEw) { if (null == paintVIEw) { Log.e(TAG,"设置的VIEw为空"); return; } // 处理图片,对图片按照屏幕宽高比进行缩放 Bitmap bp = drawabletoBitamp(paintVIEw.getDrawable()); paintVIEw.setimageBitmap(scaleBitmal(bp)); // 设置缩放形式 paintVIEw.setScaleType(ImageVIEw.ScaleType.MATRIX); mPaintVIEw = paintVIEw; } /** * 设置回调 */ public voID setScrollPaintCompleteListener(ScrollPaintCompleteListener Listener) { if (null != Listener) { this.Listener = Listener; } } /** * 初始化 */ private voID init() { mScroller = new Scroller(getContext()); lpp = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT); // 获取屏幕信息 displayMetrics displayMetrics = new displayMetrics(); ((Activity) getContext()).getwindowManager().getDefaultdisplay() .getMetrics(displayMetrics); // 屏幕高度 screenHeight = displayMetrics.heightPixels; // 屏幕宽度 screenWIDth = displayMetrics.wIDthPixels; } /** * 创建滚轴 */ private voID makePaintScroll() { // 如果已经存在,则不再创建 if (null != mPaintScrollimageVIEw || null != mPaintScrollTextVIEw) { return; } // 创建滚轴 mPaintScrollimageVIEw = new ImageVIEw(getContext()); LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT); lp.height = mPaintIvHeight; mPaintScrollimageVIEw.setLayoutParams(lp); mPaintScrollimageVIEw.setScaleType(ImageVIEw.ScaleType.FIT_XY); mPaintScrollimageVIEw.setimageBitmap(null == mPaintScrollBp ? makeDefaultScroll() : mPaintScrollBp); addVIEw(mPaintScrollimageVIEw); // 创建文字 mPaintScrollTextVIEw = new TextVIEw(getContext()); LayoutParams lpt = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT); lpt.height = mPaintIvHeight; mPaintScrollTextVIEw.setLayoutParams(lpt); mPaintScrollTextVIEw.setText(null == mPaintScrollTxt ? "" : mPaintScrollTxt); mPaintScrollTextVIEw.setTextSize(mPaintScrollTxtSize); mPaintScrollTextVIEw.setTextcolor(mPaintScrollTxtcolor); mPaintScrollTextVIEw.setGravity(Gravity.CENTER); addVIEw(mPaintScrollTextVIEw); } /** * 测量方法 * * @param wIDthMeasureSpec * @param heightmeasureSpec */ @OverrIDe protected voID onMeasure(int wIDthMeasureSpec,int heightmeasureSpec) { super.onMeasure(wIDthMeasureSpec,heightmeasureSpec); if (null != mPaintVIEw && gettop() + mPaintIvHeight != mPaintVIEw.getHeight()) { // 重新设置图画高度 mPaintStartHeight = gettop() + mPaintIvHeight / 2; lpp.height = mPaintStartHeight; mPaintVIEw.setLayoutParams(lpp); } // 测量状态栏高度 Rect frame = new Rect(); ((Activity) getContext()).getwindow().getDecorVIEw().getwindowVisibledisplayFrame(frame); int statusbarHeight = frame.top; // 高度为屏幕高度减去状态栏高度和top的高度 setMeasuredDimension(screenWIDth,screenHeight - gettop() - statusbarHeight); } /** * 处理VIEw */ private voID handleVIEw() { mPaintScrollimageVIEw.setontouchListener(new OntouchListener() { @OverrIDe public boolean ontouch(VIEw vIEw,MotionEvent event) { if (null == mPaintVIEw) { Log.e(TAG,"设置的VIEw为空"); return true; } // 获取点击的XY坐标 int x = (int) event.getRawX(); int y = (int) event.getRawY(); int action = event.getAction(); switch (action) { case MotionEvent.ACTION_DOWN: { // 请求处理点击事件 requestdisallowIntercepttouchEvent(true); isClick = true; mLastY = y; if (!mScroller.isFinished()) { // 如果上次的调用没有执行完就取消。 mScroller.abortAnimation(); } if (null != Listener) { Listener.onScrolltouch(mPaintScrollTextVIEw); } return true; } case MotionEvent.ACTION_MOVE: { // 移动的距离 int dy = y - mLastY; mLastY = y; // 滑动 scrollBy(0,-dy); // 如果是向上滑动并且是在初始位置,则不去做处理 if (getScrollY() >= 0 && dy <= 0) { lpp.height = mPaintStartHeight; mPaintVIEw.setLayoutParams(lpp); scrollTo(0,0); return true; } // 如果是向下滑动并且超过屏幕高度,则不去处理 if (Math.abs(getScrollY()) >= getHeight() - mPaintIvHeight && dy >= 0) { lpp.height = mPaintStartHeight + getHeight() - mPaintIvHeight; mPaintVIEw.setLayoutParams(lpp); scrollTo(0,-(getHeight() - mPaintIvHeight)); return true; } // 滚动回调 if (null != Listener) { Listener.onScrollMove(mPaintScrollTextVIEw); } // 重新设置显示的控件高度 if (Math.abs(getScrollY()) > 0) { lpp.height = mPaintStartHeight + Math.abs(getScrollY()); mPaintVIEw.setLayoutParams(lpp); } return true; } case MotionEvent.ACTION_UP: // 恢复事件处理 requestdisallowIntercepttouchEvent(false); isClick = false; // 没有发生移动 if (getScrollY() >= 0) { if (null != Listener) { Listener.onScrolltop(mPaintScrollTextVIEw); } return true; } if (-getScrollY() < partitionNode) { // 如果小于临界值,则返回起始坐标 // XY都从滑动的距离回去，最后一个参数是多少毫秒内执行完这个动作。 isScrllertop = true; mScroller.startScroll(getScrollX(),mScrollSpeed); } else { // 如果大于临界值,则展开 isScrllertop = false; mScroller.startScroll(getScrollX(),-(getHeight() - (-getScrollY()) - mPaintIvHeight),mScrollSpeed); } invalIDate(); return true; } return false; } }); } /** * 滑动处理 */ @OverrIDe public voID computeScroll() { if (mScroller.computeScrollOffset()) { // 计算新位置，并判断上一个滚动是否完成。 // 请求处理点击事件,防止父控件滑动 requestdisallowIntercepttouchEvent(true); scrollTo(mScroller.getCurrX(),mScroller.getCurrY()); // 重新设置显示的控件高度 if (0 < Math.abs(mScroller.getCurrY())) { if (!isScrllertop) { lpp.height = mPaintStartHeight + Math.abs(mScroller.getCurrY()) + mPaintIvHeight / 2; } else { lpp.height = mPaintStartHeight + Math.abs(mScroller.getCurrY()) - mPaintIvHeight / 2; } } else { lpp.height = mPaintStartHeight; } mPaintVIEw.setLayoutParams(lpp); invalIDate(); } else { // 重新设置画图高度,防止高度异常 if (mPaintVIEw.getHeight() > mPaintStartHeight + Math.abs(mScroller.getCurrY()) && !isScrllertop && mScroller.getStartY() > 0) { lpp.height = mPaintStartHeight + Math.abs(mScroller.getCurrY()); mPaintVIEw.setLayoutParams(lpp); } } // 防止多次调用 if (lastScrollY != mScroller.getCurrY()) { // 收缩完成 if (mScroller.getCurrY() >= 0 && !isClick) { if (null != Listener) { Listener.onScrolltop(mPaintScrollTextVIEw); } } // 展开完成 if (-mScroller.getCurrY() >= getHeight() - mPaintIvHeight && !isClick) { if (null != Listener) { Listener.onScrollBottom(mPaintScrollTextVIEw); } } lastScrollY = mScroller.getCurrY(); } } /** * 重置滚动 */ public voID replaceScroll() { // 重置信息 scrollTo(0,0); mScroller.setFinalY(0); lastScrollY = 0; lpp.height = mPaintStartHeight; mPaintVIEw.setLayoutParams(lpp); if (null != Listener) { Listener.onScrolltop(mPaintScrollTextVIEw); } } /** * drawable转bitmap * * @param drawable * @return */ private Bitmap drawabletoBitamp(Drawable drawable) { if (null == drawable) { return null; } if (drawable instanceof BitmapDrawable) { BitmapDrawable bd = (BitmapDrawable) drawable; return bd.getBitmap(); } int w = drawable.getIntrinsicWIDth(); int h = drawable.getIntrinsicHeight(); Bitmap bitmap = Bitmap.createBitmap(w,Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap); drawable.setBounds(0,h); drawable.draw(canvas); return bitmap; } /** * 按照屏幕宽高缩放图片 * * @param bp * @return */ private Bitmap scaleBitmal(Bitmap bp) { // 宽度比例 float scaleW = (float) screenWIDth / (float) bp.getWIDth(); // 高度比例 float scaleH = (float) screenHeight / (float) bp.getHeight(); // 矩阵,用于缩放图片 Matrix matrix = new Matrix(); matrix.postscale(scaleW,scaleH); // 缩放后的图片 Bitmap scaleBp = Bitmap.createBitmap(bp,true); return scaleBp; } /** * 设置默认的滚轴 * * @return */ private Bitmap makeDefaultScroll() { Bitmap defaultBp = Bitmap.createBitmap(screenWIDth,Bitmap.Config.ARGB_8888); //填充颜色 defaultBp.erasecolor(color.parsecolor("#FF0000")); return defaultBp; } /** * 将px值转换为sp值，保证文字大小不变 */ public int px2sp(float pxValue) { final float FontScale = getContext().getResources().getdisplayMetrics().scaledDensity; return (int) (pxValue / FontScale + 0.5f); }}activity_main:
<?xml version="1.0" enCoding="utf-8"?><relativeLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" xmlns:app="http://schemas.androID.com/apk/res-auto" xmlns:tools="http://schemas.androID.com/tools" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" androID:background="#eeeeee" tools:context="com.example.junweiliu.scrollpaintdemo.MainActivity"> <ScrollVIEw androID:layout_wIDth="match_parent" androID:layout_height="match_parent"> <relativeLayout androID:layout_wIDth="match_parent" androID:layout_height="match_parent"> <!--头部图片部分--> <ImageVIEw androID:ID="@+ID/iv_banner" androID:layout_wIDth="match_parent" androID:layout_height="200dp" androID:scaleType="fitXY" androID:src="@mipmap/show_banner"/> <!--中间内容部分--> <linearLayout androID:ID="@+ID/ll_first" androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:layout_below="@+ID/iv_banner" androID:layout_margintop="20dp" androID:orIEntation="horizontal" androID:padding="16dp"> <linearLayout androID:layout_wIDth="0dp" androID:layout_height="match_parent" androID:layout_marginRight="16dp" androID:layout_weight="1" androID:gravity="center_horizontal" androID:orIEntation="vertical"> <ImageVIEw androID:layout_wIDth="80dp" androID:layout_height="120dp" androID:scaleType="fitXY" androID:src="@mipmap/movIE_playbill_a"/> <TextVIEw androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:layout_margintop="10dp" androID:gravity="center" androID:text="艺术片" androID:textcolor="#666666"/> </linearLayout> <linearLayout androID:layout_wIDth="0dp" androID:layout_height="match_parent" androID:layout_marginRight="16dp" androID:layout_weight="1" androID:gravity="center_horizontal" androID:orIEntation="vertical"> <ImageVIEw androID:layout_wIDth="80dp" androID:layout_height="120dp" androID:scaleType="fitXY" androID:src="@mipmap/movIE_playbill_b"/> <TextVIEw androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:layout_margintop="10dp" androID:gravity="center" androID:text="怀旧片" androID:textcolor="#666666"/> </linearLayout> <linearLayout androID:layout_wIDth="0dp" androID:layout_height="match_parent" androID:layout_marginRight="16dp" androID:layout_weight="1" androID:gravity="center_horizontal" androID:orIEntation="vertical"> <ImageVIEw androID:layout_wIDth="80dp" androID:layout_height="120dp" androID:scaleType="fitXY" androID:src="@mipmap/movIE_playbill_c"/> <TextVIEw androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:layout_margintop="10dp" androID:gravity="center" androID:text="科幻片" androID:textcolor="#666666"/> </linearLayout> <linearLayout androID:layout_wIDth="0dp" androID:layout_height="match_parent" androID:layout_weight="1" androID:gravity="center_horizontal" androID:orIEntation="vertical"> <ImageVIEw androID:layout_wIDth="80dp" androID:layout_height="120dp" androID:scaleType="fitXY" androID:src="@mipmap/movIE_playbill_d"/> <TextVIEw androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:layout_margintop="10dp" androID:gravity="center" androID:text="动画片" androID:textcolor="#666666"/> </linearLayout> </linearLayout> <linearLayout androID:ID="@+ID/ll_sencond" androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:layout_below="@+ID/ll_first" androID:layout_margintop="20dp" androID:orIEntation="horizontal" androID:padding="16dp"> <linearLayout androID:layout_wIDth="0dp" androID:layout_height="match_parent" androID:layout_marginRight="16dp" androID:layout_weight="1" androID:gravity="center_horizontal" androID:orIEntation="vertical"> <ImageVIEw androID:layout_wIDth="80dp" androID:layout_height="120dp" androID:scaleType="fitXY" androID:src="@mipmap/movIE_playbill_a"/> <TextVIEw androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:layout_margintop="10dp" androID:gravity="center" androID:text="艺术片" androID:textcolor="#666666"/> </linearLayout> <linearLayout androID:layout_wIDth="0dp" androID:layout_height="match_parent" androID:layout_marginRight="16dp" androID:layout_weight="1" androID:gravity="center_horizontal" androID:orIEntation="vertical"> <ImageVIEw androID:layout_wIDth="80dp" androID:layout_height="120dp" androID:scaleType="fitXY" androID:src="@mipmap/movIE_playbill_b"/> <TextVIEw androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:layout_margintop="10dp" androID:gravity="center" androID:text="怀旧片" androID:textcolor="#666666"/> </linearLayout> <linearLayout androID:layout_wIDth="0dp" androID:layout_height="match_parent" androID:layout_marginRight="16dp" androID:layout_weight="1" androID:gravity="center_horizontal" androID:orIEntation="vertical"> <ImageVIEw androID:layout_wIDth="80dp" androID:layout_height="120dp" androID:scaleType="fitXY" androID:src="@mipmap/movIE_playbill_c"/> <TextVIEw androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:layout_margintop="10dp" androID:gravity="center" androID:text="科幻片" androID:textcolor="#666666"/> </linearLayout> <linearLayout androID:layout_wIDth="0dp" androID:layout_height="match_parent" androID:layout_weight="1" androID:gravity="center_horizontal" androID:orIEntation="vertical"> <ImageVIEw androID:layout_wIDth="80dp" androID:layout_height="120dp" androID:scaleType="fitXY" androID:src="@mipmap/movIE_playbill_d"/> <TextVIEw androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:layout_margintop="10dp" androID:gravity="center" androID:text="动画片" androID:textcolor="#666666"/> </linearLayout> </linearLayout> <linearLayout androID:ID="@+ID/ll_threeth" androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:layout_below="@+ID/ll_sencond" androID:layout_margintop="20dp" androID:orIEntation="horizontal" androID:padding="16dp"> <linearLayout androID:layout_wIDth="0dp" androID:layout_height="match_parent" androID:layout_marginRight="16dp" androID:layout_weight="1" androID:gravity="center_horizontal" androID:orIEntation="vertical"> <ImageVIEw androID:layout_wIDth="80dp" androID:layout_height="120dp" androID:scaleType="fitXY" androID:src="@mipmap/movIE_playbill_a"/> <TextVIEw androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:layout_margintop="10dp" androID:gravity="center" androID:text="艺术片" androID:textcolor="#666666"/> </linearLayout> <linearLayout androID:layout_wIDth="0dp" androID:layout_height="match_parent" androID:layout_marginRight="16dp" androID:layout_weight="1" androID:gravity="center_horizontal" androID:orIEntation="vertical"> <ImageVIEw androID:layout_wIDth="80dp" androID:layout_height="120dp" androID:scaleType="fitXY" androID:src="@mipmap/movIE_playbill_b"/> <TextVIEw androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:layout_margintop="10dp" androID:gravity="center" androID:text="怀旧片" androID:textcolor="#666666"/> </linearLayout> <linearLayout androID:layout_wIDth="0dp" androID:layout_height="match_parent" androID:layout_marginRight="16dp" androID:layout_weight="1" androID:gravity="center_horizontal" androID:orIEntation="vertical"> <ImageVIEw androID:layout_wIDth="80dp" androID:layout_height="120dp" androID:scaleType="fitXY" androID:src="@mipmap/movIE_playbill_c"/> <TextVIEw androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:layout_margintop="10dp" androID:gravity="center" androID:text="科幻片" androID:textcolor="#666666"/> </linearLayout> <linearLayout androID:layout_wIDth="0dp" androID:layout_height="match_parent" androID:layout_weight="1" androID:gravity="center_horizontal" androID:orIEntation="vertical"> <ImageVIEw androID:layout_wIDth="80dp" androID:layout_height="120dp" androID:scaleType="fitXY" androID:src="@mipmap/movIE_playbill_d"/> <TextVIEw androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:layout_margintop="10dp" androID:gravity="center" androID:text="动画片" androID:textcolor="#666666"/> </linearLayout> </linearLayout> <linearLayout androID:ID="@+ID/ll_fourth" androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:layout_below="@+ID/ll_threeth" androID:layout_margintop="20dp" androID:orIEntation="horizontal" androID:padding="16dp"> <linearLayout androID:layout_wIDth="0dp" androID:layout_height="match_parent" androID:layout_marginRight="16dp" androID:layout_weight="1" androID:gravity="center_horizontal" androID:orIEntation="vertical"> <ImageVIEw androID:layout_wIDth="80dp" androID:layout_height="120dp" androID:scaleType="fitXY" androID:src="@mipmap/movIE_playbill_a"/> <TextVIEw androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:layout_margintop="10dp" androID:gravity="center" androID:text="艺术片" androID:textcolor="#666666"/> </linearLayout> <linearLayout androID:layout_wIDth="0dp" androID:layout_height="match_parent" androID:layout_marginRight="16dp" androID:layout_weight="1" androID:gravity="center_horizontal" androID:orIEntation="vertical"> <ImageVIEw androID:layout_wIDth="80dp" androID:layout_height="120dp" androID:scaleType="fitXY" androID:src="@mipmap/movIE_playbill_b"/> <TextVIEw androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:layout_margintop="10dp" androID:gravity="center" androID:text="怀旧片" androID:textcolor="#666666"/> </linearLayout> <linearLayout androID:layout_wIDth="0dp" androID:layout_height="match_parent" androID:layout_marginRight="16dp" androID:layout_weight="1" androID:gravity="center_horizontal" androID:orIEntation="vertical"> <ImageVIEw androID:layout_wIDth="80dp" androID:layout_height="120dp" androID:scaleType="fitXY" androID:src="@mipmap/movIE_playbill_c"/> <TextVIEw androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:layout_margintop="10dp" androID:gravity="center" androID:text="科幻片" androID:textcolor="#666666"/> </linearLayout> <linearLayout androID:layout_wIDth="0dp" androID:layout_height="match_parent" androID:layout_weight="1" androID:gravity="center_horizontal" androID:orIEntation="vertical"> <ImageVIEw androID:layout_wIDth="80dp" androID:layout_height="120dp" androID:scaleType="fitXY" androID:src="@mipmap/movIE_playbill_d"/> <TextVIEw androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:layout_margintop="10dp" androID:gravity="center" androID:text="动画片" androID:textcolor="#666666"/> </linearLayout> </linearLayout> <!--需要显示的图--> <ImageVIEw androID:ID="@+ID/iv_paint" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" androID:scaleType="matrix" androID:src="@mipmap/show_img" androID:visibility="gone"/> <!--画轴控件--> <com.example.junweiliu.scrollpaintdemo.Widget.ScrollPaintVIEw androID:ID="@+ID/spv_paint" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" androID:layout_below="@+ID/iv_banner" app:paintScrollHeight="25dp" app:paintScrollSrc="@mipmap/paint_scroll_img" app:paintScrollTxt="拉我看看" app:paintScrollTxtcolor="#FF000000" app:paintScrollTxtSize="16sp" > </com.example.junweiliu.scrollpaintdemo.Widget.ScrollPaintVIEw> </relativeLayout> </ScrollVIEw></relativeLayout>
attr:
<?xml version="1.0" enCoding="utf-8"?><resources> <!--画轴的高度--> <attr name="paintScrollHeight" format="dimension"/> <!--画轴的图片--> <attr name="paintScrollSrc" format="reference"/> <!--画轴文字--> <attr name="paintScrollTxt" format="string"/> <!--画轴文字颜色--> <attr name="paintScrollTxtcolor" format="color"/> <!--画轴文字大小--> <attr name="paintScrollTxtSize" format="dimension"/> <!--滚动速度--> <attr name="scrollSpeed" format="integer"/> <!--分割节点--> <attr name="scrollPartitionNode" format="integer"/> <declare-styleable name="ScrollPaintVIEw"> <attr name="paintScrollHeight"/> <attr name="paintScrollSrc"/> <attr name="paintScrollTxt"/> <attr name="paintScrollTxtcolor"/> <attr name="paintScrollTxtSize"/> <attr name="scrollSpeed"/> <attr name="scrollPartitionNode"/> </declare-styleable></resources>
四、问题
滚动的时间不宜设置太短,因为动态设置ImageVIEw高度时可能出现绘制速度赶不上滚动的速度,会出现错位,当然时间设置太短,也看不到这种滑动的效果了.暂时想到的做法就是这样,应该还会有更好的方法.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。
总结以上是内存溢出为你收集整理的Android仿京东首页画轴效果全部内容，希望文章能够帮你解决Android仿京东首页画轴效果所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）