自定义控件

Android自定义控件实战——仿淘宝商品浏览界面

转载出处http://blog.csdn.net/zhongkejingwang/article/details/38656929 用手机淘宝浏览商品详情时，商品图片是放在后面的，在第一个ScrollView滚动到最底下时会有提示，继续拖动才能浏览图片。仿照这个效果写一个出来并不难，只要定义一个Layout管理两个ScrollView就行了，当第一个ScrollView滑到底部时，再次向上滑动进入第二个ScrollView。效果如下：需要注意的地方是： 1、如果是手动滑到底部需要再次按下才能继续往下滑，自动滚动到底部则不需要 2、在由上一个ScrollView滑动到下一个ScrollView的过程中多只手指相继拖动也不会导致布局的剧变，也就是多个pointer的滑动不会导致move距离的剧变。这个Layout的实现思路是：在布局中放置两个ScrollView，并为其设置OnTouchListener，时刻判断ScrollView的滚动距离，一旦第一个ScrollView滚动到底部，则标识改为可向上拖动，此时开始记录滑动距离mMoveLen，根据mMoveLen重新layout两个ScrollView；同理，监听第二个ScrollView是否滚动到顶部，以往下拖动。 OK，明白了原理之后可以看代码了： **[java]** [view plain](http://blog.csdn.net/zhongkejingwang/article/details/38656929#)[copy](http://blog.csdn.net/zhongkejingwang/article/details/38656929#) <div> <embed id="ZeroClipboardMovie_1" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_1"> </embed> </div> </div> - package com.jingchen.tbviewer; - - import java.util.Timer; - import java.util.TimerTask; - - import android.content.Context; - import android.os.Handler; - import android.os.Message; - import android.util.AttributeSet; - import android.view.MotionEvent; - import android.view.VelocityTracker; - import android.view.View; - import android.widget.RelativeLayout; - import android.widget.ScrollView; - - /** - * 包含两个ScrollView的容器 - * - * @author chenjing - * - */ - public class ScrollViewContainer extends RelativeLayout { - - /** - * 自动上滑 - */ - public static final int AUTO_UP = ; - /** - * 自动下滑 - */ - public static final int AUTO_DOWN = 1; - /** - * 动画完成 - */ - public static final int DONE = 2; - /** - * 动画速度 - */ - public static final float SPEED = 6.5f; - - private boolean isMeasured = false; - - /** - * 用于计算手滑动的速度 - */ - private VelocityTracker vt; - - private int mViewHeight; - private int mViewWidth; - - private View topView; - private View bottomView; - - private boolean canPullDown; - private boolean canPullUp; - private int state = DONE; - - /** - * 记录当前展示的是哪个view，0是topView，1是bottomView - */ - private int mCurrentViewIndex = ; - /** - * 手滑动距离，这个是控制布局的主要变量 - */ - private float mMoveLen; - private MyTimer mTimer; - private float mLastY; - /** - * 用于控制是否变动布局的另一个条件，mEvents==0时布局可以拖拽了，mEvents==-1时可以舍弃将要到来的第一个move事件， - * 这点是去除多点拖动剧变的关键 - */ - private int mEvents; - - private Handler handler = new Handler() { - - @Override - public void handleMessage(Message msg) { - if (mMoveLen != ) { - if (state == AUTO_UP) { - mMoveLen -= SPEED; - if (mMoveLen <= -mViewHeight) { - mMoveLen = -mViewHeight; - state = DONE; - mCurrentViewIndex = 1; - } - } else if (state == AUTO_DOWN) { - mMoveLen += SPEED; - if (mMoveLen >= ) { - mMoveLen = ; - state = DONE; - mCurrentViewIndex = ; - } - } else { - mTimer.cancel(); - } - } - requestLayout(); - } - - }; - - public ScrollViewContainer(Context context) { - super(context); - init(); - } - - public ScrollViewContainer(Context context, AttributeSet attrs) { - super(context, attrs); - init(); - } - - public ScrollViewContainer(Context context, AttributeSet attrs, int defStyle) { - super(context, attrs, defStyle); - init(); - } - - private void init() { - mTimer = new MyTimer(handler); - } - - @Override - public boolean dispatchTouchEvent(MotionEvent ev) { - switch (ev.getActionMasked()) { - case MotionEvent.ACTION_DOWN: - if (vt == null) - vt = VelocityTracker.obtain(); - else - vt.clear(); - mLastY = ev.getY(); - vt.addMovement(ev); - mEvents = ; - break; - case MotionEvent.ACTION_POINTER_DOWN: - case MotionEvent.ACTION_POINTER_UP: - // 多一只手指按下或抬起时舍弃将要到来的第一个事件move，防止多点拖拽的bug - break; - case MotionEvent.ACTION_MOVE: - vt.addMovement(ev); - if (canPullUp && mCurrentViewIndex == && mEvents == ) { - // 防止上下越界 - if (mMoveLen > ) { - mMoveLen = ; - mCurrentViewIndex = ; - } else if (mMoveLen < -mViewHeight) { - mMoveLen = -mViewHeight; - mCurrentViewIndex = 1; - - } - // 防止事件冲突 - ev.setAction(MotionEvent.ACTION_CANCEL); - } - } else if (canPullDown && mCurrentViewIndex == 1 && mEvents == ) { - // 防止上下越界 - if (mMoveLen < -mViewHeight) { - mMoveLen = -mViewHeight; - mCurrentViewIndex = 1; - } else if (mMoveLen > ) { - mMoveLen = ; - mCurrentViewIndex = ; - } - // 防止事件冲突 - ev.setAction(MotionEvent.ACTION_CANCEL); - } - } else - mEvents++; - mLastY = ev.getY(); - requestLayout(); - break; - case MotionEvent.ACTION_UP: - mLastY = ev.getY(); - vt.addMovement(ev); - vt.computeCurrentVelocity(700); - // 获取Y方向的速度 - float mYV = vt.getYVelocity(); - if (mMoveLen == || mMoveLen == -mViewHeight) - break; - if (Math.abs(mYV) < 500) { - // 速度小于一定值的时候当作静止释放，这时候两个View往哪移动取决于滑动的距离 - if (mMoveLen <= -mViewHeight / 2) { - state = AUTO_UP; - } else if (mMoveLen > -mViewHeight / 2) { - state = AUTO_DOWN; - } - } else { - // 抬起手指时速度方向决定两个View往哪移动 - if (mYV < ) - state = AUTO_UP; - else - state = AUTO_DOWN; - } - mTimer.schedule(2); - try { - vt.recycle(); - } catch (Exception e) { - e.printStackTrace(); - } - break; - - } - super.dispatchTouchEvent(ev); - return true; - } - - @Override - protected void onLayout(boolean changed, int l, int t, int r, int b) { - topView.layout(, (int) mMoveLen, mViewWidth, - topView.getMeasuredHeight() + (int) mMoveLen); - bottomView.layout(, topView.getMeasuredHeight() + (int) mMoveLen, - mViewWidth, topView.getMeasuredHeight() + (int) mMoveLen - + bottomView.getMeasuredHeight()); - } - - @Override - protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { - super.onMeasure(widthMeasureSpec, heightMeasureSpec); - if (!isMeasured) { - isMeasured = true; - - mViewHeight = getMeasuredHeight(); - mViewWidth = getMeasuredWidth(); - - topView = getChildAt(); - bottomView = getChildAt(1); - - bottomView.setOnTouchListener(bottomViewTouchListener); - topView.setOnTouchListener(topViewTouchListener); - } - } - - private OnTouchListener topViewTouchListener = new OnTouchListener() { - - @Override - public boolean onTouch(View v, MotionEvent event) { - ScrollView sv = (ScrollView) v; - .getMeasuredHeight()) && mCurrentViewIndex == ) - canPullUp = true; - else - canPullUp = false; - return false; - } - }; - private OnTouchListener bottomViewTouchListener = new OnTouchListener() { - - @Override - public boolean onTouch(View v, MotionEvent event) { - ScrollView sv = (ScrollView) v; - if (sv.getScrollY() == && mCurrentViewIndex == 1) - canPullDown = true; - else - canPullDown = false; - return false; - } - }; - - class MyTimer { - private Handler handler; - private Timer timer; - private MyTask mTask; - - public MyTimer(Handler handler) { - this.handler = handler; - timer = new Timer(); - } - - public void schedule(long period) { - if (mTask != null) { - mTask.cancel(); - mTask = null; - } - mTask = new MyTask(handler); - timer.schedule(mTask, , period); - } - - public void cancel() { - if (mTask != null) { - mTask.cancel(); - mTask = null; - } - } - - class MyTask extends TimerTask { - private Handler handler; - - public MyTask(Handler handler) { - this.handler = handler; - } - - @Override - public void run() { - handler.obtainMessage().sendToTarget(); - } - - } - } - - } 注释写的很清楚了，有几个关键点需要讲一下： ...

Android 自定义控件打造史上最简单的侧滑菜单

转载出处：http://blog.csdn.net/lmj623565791/article/details/39185641 侧滑菜单在很多应用中都会见到，最近QQ5.0侧滑还玩了点花样对于侧滑菜单，一般大家都会自定义ViewGroup，然后隐藏菜单栏，当手指滑动时，通过Scroller或者不断的改变leftMargin等实现；多少都有点复杂，完成以后还需要对滑动冲突等进行处理今天给大家带来一个简单的实现，史上最简单有点夸张，但是的确是我目前遇到过的最简单的一种实现~~~ 1、原理分析既然是侧滑，无非就是在巴掌大的屏幕，塞入大概两巴掌大的布局，需要滑动可以出现另一个，既然这样，大家为啥不考虑使用Android提供的HorizontalScrollView呢~ 如果使用HorizontalScrollView，还需要在ACTION_DOWN , ACTION_MOVE里面去监听，判断，不断改变控件位置了么? NO！！！HorizontalScrollView本身就带了滑动的功能~~ 还需要自己的手动处理各种冲突么？NO！！！当然了，还是需要了解下事件分发机制的~~~ 2、效果图嗯，主界面搞了QQ一张图片，左边盗用了一兄弟的布局文件罪过谁有好看的布局、图片、图标神马的，可以给我发点，感激~ 3、布局文件 **[html]** [view plain](http://blog.csdn.net/lmj623565791/article/details/39185641#)[copy](http://blog.csdn.net/lmj623565791/article/details/39185641#) <div> <embed id="ZeroClipboardMovie_1" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_1"> </embed> </div> </div> - <com.example.zhy_slidingmenu.SlidingMenu xmlns:android=“http://schemas.android.com/apk/res/android” - xmlns:tools=“http://schemas.android.com/tools” - android:layout_width=“wrap_content” - android:layout_height=“fill_parent” - android:scrollbars=“none” > - - <LinearLayout - android:layout_width=“wrap_content” - android:layout_height=“fill_parent” - android:orientation=“horizontal” > - - <include layout=“@layout/layout_menu” /> - - <LinearLayout - android:layout_width=“fill_parent” - android:layout_height=“fill_parent” - android:background=“@drawable/qq” > - </LinearLayout> - </LinearLayout> - - </com.example.zhy_slidingmenu.SlidingMenu> 首先是我们的自定义View，里面一个方向水平的LinearLayout，然后就是一个是菜单的布局，一个是主布局了~ ...

Android 高仿 QQ 侧滑菜单效果自定义控件来袭

转载出处：http://blog.csdn.net/lmj623565791/article/details/39257409 上一篇博客带大家实现了：Android 自定义控件打造史上最简单的侧滑菜单，有兄弟看了以后说，你这滑动菜单过时了呀~QQ5.0的效果还不错嗯，的确，上一篇也承诺过，稍微修改上一篇的代码，实现QQ5.0侧滑菜单好了，下面就开始为大家展示写一个类QQ的侧滑有多easy ~! 1、原理分析首先对比一下我们上篇的实现距离QQ的效果还有多远：差距还是蛮大的区别1、QQ的内容区域会伴随菜单的出现而缩小区别2、QQ的侧滑菜单给人的感觉是隐藏在内容的后面，而不是拖出来的感觉区别3、QQ的侧滑菜单有一个缩放以及透明度的效果~ 那么我们如何能做到呢：对于区别1：这个好办，我们可以在滑动的时候，不断的改变内容区域的大小；如何改变呢？我们在菜单出现的整个过程中，不断记录菜单显示的宽度与其总宽度的比值，是个从0到1的过程，然后把01转化为10.7（假设内容区域缩小至0.7)；不断去缩小内容区域；对于区别3：也比较好办，上面已经可以得到0到1的这个值了，那么缩放和透明度的动画就不在话下了；对于区别2：我们使用的HorizontalScrollView，然后水平放置了菜单和内容，如何让菜单可以隐藏到内容的后面呢？其实也比较简单，在菜单出现的过程中，不断设置菜单的x方向的偏移量；0的时候完全隐藏，0.3的时候，隐藏x方向偏移量为0.7个宽度，类推~~~ 好了，分析完毕，那么对于这些动画用什么实现最好呢？想都不用想，属性动画哈，如果你对属性动画不了解，可以参：Android 属性动画（Property Animation）完全解析（上）和Android 属性动画（Property Animation）完全解析（下） 2、实现 1、初步的代码布局文件神马的，都和上一篇一模一样，这里就不重复贴代码了，不了解的，先看下上一篇；先看一下上一篇我们已经实现的完整代码： **[java]** [view plain](http://blog.csdn.net/lmj623565791/article/details/39257409#)[copy](http://blog.csdn.net/lmj623565791/article/details/39257409#)[![在CODE上查看代码片](https://code.csdn.net/assets/CODE_ico.png)](https://code.csdn.net/snippets/468874)[![派生到我的代码片](https://code.csdn.net/assets/ico_fork.svg)](https://code.csdn.net/snippets/468874/fork) <div> <embed id="ZeroClipboardMovie_1" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_1"> </embed> </div> </div> - package com.example.zhy_slidingmenu; - - import android.content.Context; - import android.content.res.TypedArray; - import android.util.AttributeSet; - import android.util.TypedValue; - import android.view.MotionEvent; - import android.view.ViewGroup; - import android.widget.HorizontalScrollView; - import android.widget.LinearLayout; - - import com.zhy.utils.ScreenUtils; - - public class SlidingMenu extends HorizontalScrollView - { - /** - * 屏幕宽度 - */ - private int mScreenWidth; - /** - * dp - */ - private int mMenuRightPadding; - /** - * 菜单的宽度 - */ - private int mMenuWidth; - private int mHalfMenuWidth; - - private boolean isOpen; - - private boolean once; - - public SlidingMenu(Context context, AttributeSet attrs) - { - this(context, attrs, ); - - } - - public SlidingMenu(Context context, AttributeSet attrs, int defStyle) - { - super(context, attrs, defStyle); - mScreenWidth = ScreenUtils.getScreenWidth(context); - - TypedArray a = context.getTheme().obtainStyledAttributes(attrs, - R.styleable.SlidingMenu, defStyle, ); - int n = a.getIndexCount(); - for (int i = ; i < n; i++) - { - int attr = a.getIndex(i); - switch (attr) - { - case R.styleable.SlidingMenu_rightPadding: - // 默认50 - mMenuRightPadding = a.getDimensionPixelSize(attr, - (int) TypedValue.applyDimension( - TypedValue.COMPLEX_UNIT_DIP, 50f, - getResources().getDisplayMetrics()));// 默认为10DP - break; - } - } - a.recycle(); - } - - public SlidingMenu(Context context) - { - this(context, null, ); - } - - @Override - protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) - { - /** - * 显示的设置一个宽度 - */ - if (!once) - { - LinearLayout wrapper = (LinearLayout) getChildAt(); - ViewGroup menu = (ViewGroup) wrapper.getChildAt(); - ViewGroup content = (ViewGroup) wrapper.getChildAt(1); - - mMenuWidth = mScreenWidth – mMenuRightPadding; - mHalfMenuWidth = mMenuWidth / 2; - menu.getLayoutParams().width = mMenuWidth; - content.getLayoutParams().width = mScreenWidth; - - } - super.onMeasure(widthMeasureSpec, heightMeasureSpec); - - } - - @Override - protected void onLayout(boolean changed, int l, int t, int r, int b) - { - super.onLayout(changed, l, t, r, b); - if (changed) - { - // 将菜单隐藏 - this.scrollTo(mMenuWidth, ); - once = true; - } - } - - @Override - public boolean onTouchEvent(MotionEvent ev) - { - int action = ev.getAction(); - switch (action) - { - // Up时，进行判断，如果显示区域大于菜单宽度一半则完全显示，否则隐藏 - case MotionEvent.ACTION_UP: - int scrollX = getScrollX(); - if (scrollX > mHalfMenuWidth) - { - this.smoothScrollTo(mMenuWidth, ); - isOpen = false; - } else - { - this.smoothScrollTo(, ); - isOpen = true; - } - return true; - } - return super.onTouchEvent(ev); - } - - /** - * 打开菜单 - */ - public void openMenu() - { - if (isOpen) - return; - this.smoothScrollTo(, ); - isOpen = true; - } - - /** - * 关闭菜单 - */ - public void closeMenu() - { - if (isOpen) - { - this.smoothScrollTo(mMenuWidth, ); - isOpen = false; - } - } - - /** - * 切换菜单状态 - */ - public void toggle() - { - if (isOpen) - { - closeMenu(); - } else - { - openMenu(); - } - } - - - - } 利用HorizontalScrollView，监听了ACTION_UP的事件，当用户抬起手指时，根据当前菜单显示的宽度值，判断是缩回还是完全展开；给用户提供了一个rightPadding属性，用于设置菜单离右屏幕的距离；以及对外提供了打开，关闭，切换的几个方法；具体的讲解看下上篇博客了； ...

Android开发实践：自定义ViewGroup的onLayout()分析

Android开发中，对于自定义View，分为两种，一种是自定义控件（继承View类），另一种是自定义布局容器（继承ViewGroup）。如果是自定义控件，则一般需要重载两个方法，一个是 onMeasure()，用来测量控件尺寸，另一个是onDraw()，用来绘制控件的UI。而自定义布局容器，则一般需要实现/重载三个方法，一个是 onMeasure()，也是用来测量尺寸；一个是onLayout()，用来布局子控件；还有一个是dispatchDraw()，用来绘制UI。本文主要分析自定义ViewGroup的onLayout()方法的实现。 ViewGroup 类的onLayout()函数是abstract型，继承者必须实现，由于ViewGroup的定位就是一个容器，用来盛放子控件的，所以就必须定义要以什么的方式来盛放，比如LinearLayout就是以横向或者纵向顺序存放，而RelativeLayout则以相对位置来摆放子控件，同样，我们的自定义ViewGroup也必须给出我们期望的布局方式，而这个定义就通过onLayout()函数来实现。我们通过实现一个水平优先布局的视图容器来更加深入地了解onLayout()的实现吧，效果如图所示（黑色方块为子控件，白色部分为自定义布局容器）。该容器的布局方式是，首先水平方向上摆放子控件，水平方向放不下了，则另起一行继续水平摆放。 ** 1. 自定义ViewGroup的派生类** 第一步，则是自定ViewGroup的派生类，继承默认的构造函数。 1 <div class="line number2 index1 alt1"> 2 </div> <div class="line number3 index2 alt2"> 3 </div> <div class="line number4 index3 alt1"> 4 </div> <div class="line number5 index4 alt2"> 5 </div> <div class="line number6 index5 alt1"> 6 </div> <div class="line number7 index6 alt2"> 7 </div> <div class="line number8 index7 alt1"> 8 </div> <div class="line number9 index8 alt2"> 9 </div> <div class="line number10 index9 alt1"> 10 </div> <div class="line number11 index10 alt2"> 11 </div> <div class="line number12 index11 alt1"> 12 </div> <div class="line number13 index12 alt2"> 13 </div> <div class="line number14 index13 alt1"> 14 </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"> `public` `class` `CustomViewGroup ``extends` `ViewGroup {` </div> <div class="line number2 index1 alt1"> ` ` </div> <div class="line number3 index2 alt2"> ` ``public` `CustomViewGroup(Context context) {` </div> <div class="line number4 index3 alt1"> ` ``super``(context); ` </div> <div class="line number5 index4 alt2"> ` ``}` </div> <div class="line number6 index5 alt1"> ` ` </div> <div class="line number7 index6 alt2"> ` ``public` `CustomViewGroup(Context context, AttributeSet attrs) {` </div> <div class="line number8 index7 alt1"> ` ``super``(context, attrs); ` </div> <div class="line number9 index8 alt2"> ` ``}` </div> <div class="line number10 index9 alt1"> ` ` </div> <div class="line number11 index10 alt2"> ` ``public` `CustomViewGroup(Context context, AttributeSet attrs, intdefStyle) {` </div> <div class="line number12 index11 alt1"> ` ``super``(context, attrs, defStyle);` </div> <div class="line number13 index12 alt2"> ` ``}` </div> <div class="line number14 index13 alt1"> `}` </div> </div> </td> </tr> </table> ...