Android View System (ii) Six ways to implement view swipe

<span id="Label3"></p><p><p>Related Articles:<br>Android View System (i) views coordinate system</p></p><strong><strong>Introduction to 1.View sliding</strong></strong><p><p>View sliding is the basis for Android to implement a custom control, and in development we will inevitably encounter the sliding processing of VIEW. In fact, no matter the way the basic idea of sliding is similar: when the touch event is uploaded to the view, the system notes the coordinates of the touch point, the system notes the coordinates of the moved touch and calculates the offset, and modifies the view coordinates by the Offset.<br>There are many ways to implement the view slide, this article mainly explains six kinds of sliding methods, namely: layout (), offsetleftandright () and Offsettopandbottom (), layoutparams, animation, Scollto and Scollby and scroller; in the next article we'll cover property animations in Detail.</p></p><strong><strong>2. Six ways to implement view swipe</strong></strong><strong><strong>Layout ()</strong></strong><p><p>When the view is drawn, the OnLayout () method is called to set the display position, so we can also control the View's coordinates by modifying the four properties of the View's left, top, right, and Bottom. First we want to customize a view to get the coordinates of the touch points in the ontouchevent () method:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs cs"> <span class="hljs-keyword">public</span><span class="hljs-title">onTouchEvent</span><span class="hljs-keyword">event</span>) { <span class="hljs-comment">//获取到手指处的横坐标和纵坐标</span> <span class="hljs-keyword">int</span> x = (<span class="hljs-keyword">int</span><span class="hljs-keyword">event</span>.getX(); <span class="hljs-keyword">int</span> y = (<span class="hljs-keyword">int</span><span class="hljs-keyword">event</span>.getY(); <span class="hljs-keyword">switch</span> (<span class="hljs-keyword">event</span>.getAction()) { <span class="hljs-keyword">case</span> MotionEvent.ACTION_DOWN: lastX = x; lastY = y; <span class="hljs-keyword">break</span>;...</code></pre></pre><p><p>Next we calculate the offset in the Action_move event, and then call the layout () method to reposition the custom view location:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs glsl"> <span class="hljs-keyword">case</span> MotionEvent.ACTION_MOVE: <span class="hljs-comment">//计算移动的距离</span> <span class="hljs-keyword">int</span> offsetX = x - lastX; <span class="hljs-keyword">int</span> offsetY = y - lastY; <span class="hljs-comment">//调用layout方法来重新放置它的位置</span> <span class="hljs-keyword">layout</span>(getLeft()+offsetX, getTop()+offsetY, getRight()+offsetX , getBottom()+offsetY); <span class="hljs-keyword">break</span>;</code></pre></pre><p><p>The layout () method is called each time we move to re-layout ourselves to achieve the effect of moving the VIEW.</p></p><p><p>All code for custom view (customview.java):</p></p><pre class="prettyprint"><code class=" hljs java"><span class="hljs-keyword"><span class="hljs-keyword"></span> package</span>com.example.liuwangshu.moonviewslide;<span class="hljs-keyword"><span class="hljs-keyword">Import</span></span>android.content.Context;<span class="hljs-keyword"><span class="hljs-keyword">Import</span></span>android.util.AttributeSet;<span class="hljs-keyword"><span class="hljs-keyword">Import</span></span>android.view.MotionEvent;<span class="hljs-keyword"><span class="hljs-keyword">Import</span></span>android.view.View;<span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-class"><span class="hljs-class"> <span class="hljs-keyword">class</span> <span class="hljs-title">customview</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">View</span> {</span></span> <span class="hljs-keyword"><span class="hljs-keyword">Private</span></span> <span class="hljs-keyword"><span class="hljs-keyword">int</span></span>lastx;<span class="hljs-keyword"><span class="hljs-keyword">Private</span></span> <span class="hljs-keyword"><span class="hljs-keyword">int</span></span>lasty;<span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-title"><span class="hljs-title">CustomView</span></span>(context context, AttributeSet attrs,<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>Defstyleattr) {<span class="hljs-keyword"><span class="hljs-keyword">Super</span></span>(context, attrs, defstyleattr); }<span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-title"><span class="hljs-title">CustomView</span></span>(context context, AttributeSet Attrs) {<span class="hljs-keyword"><span class="hljs-keyword">Super</span></span>(context, attrs); }<span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-title"><span class="hljs-title">CustomView</span></span>(context Context) {<span class="hljs-keyword"><span class="hljs-keyword">Super</span></span>(context); }<span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-keyword"><span class="hljs-keyword">Boolean</span></span> <span class="hljs-title"><span class="hljs-title">ontouchevent</span></span>(motionevent Event) {<span class="hljs-comment"><span class="hljs-comment">//get to the horizontal and vertical axis of the finger</span></span> <span class="hljs-keyword"><span class="hljs-keyword">int</span></span>x = (<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>) Event.getx ();<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>y = (<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>) Event.gety ();<span class="hljs-keyword"><span class="hljs-keyword">Switch</span></span>(event.getaction ()) {<span class="hljs-keyword"><span class="hljs-keyword"></span> case</span>MotionEvent.ACTION_DOWN:lastX = x; Lasty = y;<span class="hljs-keyword"><span class="hljs-keyword"></span> break</span>;<span class="hljs-keyword"><span class="hljs-keyword"></span> case</span>Motionevent.action_move:<span class="hljs-comment"><span class="hljs-comment">//calculate the distance traveled</span></span> <span class="hljs-keyword"><span class="hljs-keyword">int</span></span>OffsetX = x-lastx;<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>OffsetY = y-lasty;<span class="hljs-comment"><span class="hljs-comment">//call The layout method to reposition its location</span></span>Layout (getLeft () +offsetx, getTop () +offsety, getRight () +offsetx, getbottom () +offsety);<span class="hljs-keyword"><span class="hljs-keyword"></span> break</span>; }<span class="hljs-keyword"><span class="hljs-keyword">return</span></span> <span class="hljs-keyword"><span class="hljs-keyword">true</span></span>; }}</code></pre><p><p>To refer to a custom view in a layout:</p></p><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-pi"><span class="hljs-pi"><?xml version= "1.0" encoding= "utf-8"?></span></span><span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">linearlayout </span> <span class="hljs-attribute">xmlns: Android </span> =<span class="hljs-value"> "http://schemas.android.com/apk/res/android" </span> <span class=" Hljs-attribute ">xmlns:tools </span> =<span class=" hljs-value ">" http://schemas.android.com/tools "</span> <span class="hljs-attribute">android:layout_width </span> =<span class="hljs-value"> "match_parent" </span> <span class=" Hljs-attribute ">android:layout_height </span> =<span class=" hljs-value ">" match_parent "</span> <span class=" Hljs-attribute ">android:orientation </span> =<span class=" hljs-value " " vertical "< span>; </span></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">com.example.liuwangshu.moonviewslide.CustomView</span><span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/customview"</span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"80dp"</span><span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"80dp"</span><span class="hljs-attribute">android:layout_ Margin</span>=<span class="hljs-value">"50dp"</span><span class="hljs-attribute">android:background</span>=<span class="hljs-value">"@android: color/holo_red_light"</span> /> </span></span><span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">linearlayout</span>></span></span></code></pre><strong><strong>offsetleftandright () and Offsettopandbottom ()</strong></strong><p><p>These two methods are similar to the layout () method, and are similar in use, we replace the code in Action_move with the following code:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs cs"> <span class="hljs-keyword">case</span> MotionEvent.ACTION_MOVE: <span class="hljs-comment">//计算移动的距离</span> <span class="hljs-keyword">int</span> offsetX = x - lastX; <span class="hljs-keyword">int</span> offsetY = y - lastY; <span class="hljs-comment">//对left和right进行偏移</span> offsetLeftAndRight(offsetX); <span class="hljs-comment">//对top和bottom进行偏移</span> offsetTopAndBottom(offsetY); <span class="hljs-keyword">break</span>;</code></pre></pre><strong><strong>layoutparams (change Layout parameters)</strong></strong><p><p>Layoutparams mainly preserves the layout parameters of a view, so we can change the View's layout parameters by Layoutparams to change the view Position. In the same way, we replace the code in Action_move with the following code:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs avrasm"> LinearLayout<span class="hljs-preprocessor">.LayoutParams</span> layoutParams= (LinearLayout<span class="hljs-preprocessor">.LayoutParams</span>) getLayoutParams()<span class="hljs-comment">;</span> layoutParams<span class="hljs-preprocessor">.leftMargin</span> = getLeft() + offsetX<span class="hljs-comment">;</span> layoutParams<span class="hljs-preprocessor">.topMargin</span> = getTop() + offsetY<span class="hljs-comment">;</span> setLayoutParams(layoutParams)<span class="hljs-comment">;</span></code></pre></pre><p><p>Because the parent control is linearlayout, we use linearlayout.layoutparams, and if the parent control is relativelayout, use Relativelayout.layoutparams. In addition to using the layout of the layoutparams, we can also use Viewgroup.marginlayoutparams to Achieve:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs avrasm"> ViewGroup<span class="hljs-preprocessor">.MarginLayoutParams</span> layoutParams = (ViewGroup<span class="hljs-preprocessor">.MarginLayoutParams</span>) getLayoutParams()<span class="hljs-comment">;</span> layoutParams<span class="hljs-preprocessor">.leftMargin</span> = getLeft() + offsetX<span class="hljs-comment">;</span> layoutParams<span class="hljs-preprocessor">.topMargin</span> = getTop() + offsetY<span class="hljs-comment">;</span> setLayoutParams(layoutParams)<span class="hljs-comment">;</span></code></pre></pre><strong><strong>Animation</strong></strong><p><p>You can use the View animation to move, create a new Anim folder in the Res directory, and Translate.xml:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-pi"><?xml version="1.0" encoding="utf-8"?></span><span class="hljs-tag"><<span class="hljs-title">set</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span>></span> <span class="hljs-tag"><<span class="hljs-title">translate</span> <span class="hljs-attribute">android:fromXDelta</span>=<span class="hljs-value">"0"</span> <span class="hljs-attribute">android:toXDelta</span>=<span class="hljs-value">"300"</span> <span class="hljs-attribute">android:duration</span>=<span class="hljs-value">"1000"</span>/></span><span class="hljs-tag"></<span class="hljs-title">set</span>></span></code></pre></pre><p><p>Reference in Java code:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs avrasm"> mCustomView<span class="hljs-preprocessor">.setAnimation</span>(AnimationUtils<span class="hljs-preprocessor">.loadAnimation</span>(this, R<span class="hljs-preprocessor">.anim</span><span class="hljs-preprocessor">.translate</span>))<span class="hljs-comment">;</span></code></pre></pre><p><p>Of course it's much easier to move with property animations, so let's customview the x-axis 300 pixels in 1000 milliseconds:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs avrasm">ObjectAnimator<span class="hljs-preprocessor">.ofFloat</span>(mCustomView,<span class="hljs-string">"translationX"</span>,<span class="hljs-number">0</span>,<span class="hljs-number">300</span>)<span class="hljs-preprocessor">.setDuration</span>(<span class="hljs-number">1000</span>)<span class="hljs-preprocessor">.start</span>()<span class="hljs-comment">;</span></code></pre></pre><strong><strong>Scollto and Scollby</strong></strong><p><p>Scollto (x, Y) represents moving to a specific coordinate point, while Scollby (dx,dy) represents the increment of the move as dx, Dy. Where Scollby is finally going to call Scollto. scollto, Scollby moves the contents of the view, and if used in viewgroup, it moves all of his child view. We replace the code in Action_move with the following code:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs lasso"> ((View)getParent())<span class="hljs-built_in">.</span>scrollBy(<span class="hljs-attribute">-offsetX</span>,<span class="hljs-attribute">-offsetY</span>);</code></pre></pre><p><p>Here to achieve CustomView as we move the finger, we need to set the offset to a negative value.</p></p><strong><strong>Scroller</strong></strong><p><p>When we use the Scollto/scollby method to slide, the process is instantaneous, so the user experience is not very good. Here we can use the scroller to achieve the excessive effect of the slide, the process is not instantaneous, but at a certain time interval to Complete. Scroller itself is not able to realize the sliding of the view, it needs to match the view of the Computescroll () method in order to slide the effect of Elasticity.<br>Here we implement the CustomView smooth right Movement.</p></p> <ul> <ul> <li>First we want to initialize the Scroller:</li> </ul> </ul><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs java"> <span class="hljs-keyword">public</span><span class="hljs-title">CustomView</span>(Context context, AttributeSet attrs) { <span class="hljs-keyword">super</span>(context, attrs); <span class="hljs-keyword">new</span> Scroller(context); }</code></pre></pre> <ul> <ul> <li>Next rewrite the Computescroll () method, the system will call the method in the draw () method when the view is drawn, in which we call the parent Class's Scrollto () method and continue to get the current scroll value through Scroller. Each time we slide a short distance we call the invalidate () method to redraw continuously, and redraw calls the Computescroll () method, so that we can achieve smooth movement by moving a small distance and then coherent together:</li> </ul> </ul><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs java"> <span class="hljs-annotation">@Override</span> <span class="hljs-keyword">public</span><span class="hljs-keyword">void</span><span class="hljs-title">computeScroll</span>() { <span class="hljs-keyword">super</span>.computeScroll(); <span class="hljs-keyword">if</span>(mScroller.computeScrollOffset()){ ((View) getParent()).scrollTo(mScroller.getCurrX(),mScroller.getCurrY()); } <span class="hljs-comment">//通过不断的重绘不断的调用computeScroll方法</span> invalidate(); }</code></pre></pre> <ul> <ul> <li>Call the Scroller.startscroll () method. We write a Smoothscrollto () method in CustomView and call the Scroller.startscroll () method to translate the delta pixels along the x-axis within 2000 milliseconds:</li> </ul> </ul><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs cs"> <span class="hljs-keyword">public</span><span class="hljs-keyword">void</span><span class="hljs-title">smoothScrollTo</span>(<span class="hljs-keyword">int</span> destX,<span class="hljs-keyword">int</span> destY){ <span class="hljs-keyword">int</span> scrollX=getScrollX(); <span class="hljs-keyword">int</span> delta=destX-scrollX; <span class="hljs-comment">//1000秒内滑向destX</span> mScroller.startScroll(scrollX,<span class="hljs-number">0</span>,delta,<span class="hljs-number">0</span>,<span class="hljs-number">2000</span>); invalidate(); }</code></pre></pre> <ul> <ul> <li>Finally we call Customview's Smoothscrollto () method in Viewslideactivity.java:</li> </ul> </ul><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs cs"> <span class="hljs-comment">//使用Scroll来进行平滑移动</span> mCustomView.smoothScrollTo(-<span class="hljs-number">400</span>,<span class="hljs-number">0</span>);</code></pre></pre><p><p>Here we are setting the CustomView to pan right along the x-axis by 400 pixels.</p></p><p><p>GitHub Source Download</p></p> <p><p>Android View System (ii) Six ways to implement view swipe</p></p></span>