Android Basics Getting Started tutorial--2.4.13 viewflipper (flip view) Basic use

<span id="Label3"></p>Android Basics Getting Started tutorial--2.4.13 viewflipper (flip view) Basic use<p><p>Tags (space delimited): android basics Getting Started Tutorial</p></p>Introduction to this Section: <blockquote> <blockquote> <p>This section gives you a viewflipper, which is a multi-page management control that comes with android, and it can be played automatically!<br>Unlike viewpager, Viewpager is a page, and Viewflipper is a layer, and viewpager, many times,<br>Used to implement the boot page after entering the app, or for a picture carousel, we'll use Viewflipper to write a simple picture<br>Carousel Example Bar ~ official Api:viewflipper</p> </blockquote> </blockquote>1. Two ways to add a view to Viewflipper 1) static import <blockquote> <blockquote> <p>The so-called static import is like in the picture, the page is added to the middle of the viewflipper!</p> </blockquote> </blockquote><p><p></p></p>2) Dynamic Import <blockquote> <blockquote> <p>Populating the view with the AddView method</p> </blockquote> </blockquote><p><p></p></p>2. Some common methods <blockquote> <blockquote> <ul> <li><strong>setinanimation</strong>: Set the animation used when view enters the screen</li> <li><strong>setoutanimation</strong>: Set the animation used when view exits the screen</li> <li><strong>Shownext</strong>: Call this method to display the next view in Viewflipper</li> <li><strong>showprevious</strong>: Call this method to display the previous view of Viewflipper</li> <li><strong>setfilpinterval</strong>: Set the time interval between view transitions</li> <li><strong>setflipping</strong>: Use the time interval set above to start switching all view, the switch loops</li> <li><strong>stopflipping</strong>: Stop View Toggle</li> </ul> </blockquote> </blockquote>3. Using instance 1) example 1: implement picture carousel with Viewflipper (static import)<p><p><strong>Implementation</strong> :</p></p><p><p></p></p><p><p><strong>Implementation Code</strong> :</p></p><p><p>The layout of each page is a simple imageview, where it is not affixed to the first two entry and<br>Leave the Animation:</p></p><p><p><strong>right_in.xml</strong>:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class="language-XML 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:duration</span>=<span class="hljs-value">"2000"</span> <span class="hljs-attribute">android:fromXDelta</span>=<span class="hljs-value">"100%p"</span> <span class="hljs-attribute">android:toXDelta</span>=<span class="hljs-value">"0"</span> /></span><span class="hljs-tag"></<span class="hljs-title">set</span>></span></code></pre></pre><p><p><strong>right_out.xml</strong>:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class="language-XML 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:duration</span>=<span class="hljs-value">"2000"</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">"-100%p"</span> /></span><span class="hljs-tag"></<span class="hljs-title">set</span>></span></code></pre></pre><p><p>Then the <strong>activity_main.xml</strong> layout file:</p></p><pre class="prettyprint"><code class="language-XML hljs xml"><span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">relativelayout </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 ">tools:context </span> =<span class=" hljs-value ">". Mainactivity "</span>; </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">viewflipper</span> <span class="hljs-attribute">android:id</span>= "<span class="hljs-value">@+id/vflp_help"</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:inanimation</span>=<span class="hljs-value">" @ Anim/right_in "</span> <span class="hljs-attribute">android:outanimation</span>=<span class="hljs-value">" @anim/right_out "</span> <span class="hljs-attribute">android:flipinterval</span> =<span class="hljs-value">"</span>></span> "</span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">include</span> <span class="hljs-attribute">layout</span>=<span class="hljs-value">"@layout/page_help_one"</span> /></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">include</span> <span class="hljs-attribute">layout</span>=<span class="hljs-value">"@layout/page_help_two"</span> /></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">include</span> <span class="hljs-attribute">layout</span>=<span class="hljs-value">"@layout/page_help_three"</span> /></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">include</span> <span class="hljs-attribute">layout</span>=<span class="hljs-value">"@layout/page_help_four"</span> /></span></span> <span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">viewflipper</span>></span></span><span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">relativelayout</span>></span></span></code></pre><p><p>Here we set the Flipinterval = 3000, that is, every 3000ms cut also a ~<br>Finally we just call Viewflipper's startflipping () method in Mainactivity.java to start sliding!</p></p><p><p><strong>Mainactivity.java</strong>:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class="language-Java hljs java"><span class="hljs-keyword">public</span><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MainActivity</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">AppCompatActivity</span> {</span> <span class="hljs-keyword">private</span> ViewFlipper vflp_help; <span class="hljs-annotation">@Override</span> <span class="hljs-keyword">protected</span><span class="hljs-keyword">void</span><span class="hljs-title">onCreate</span>(Bundle savedInstanceState) { <span class="hljs-keyword">super</span>.onCreate(savedInstanceState); setContentView(R.layout.activity_main); vflp_help = (ViewFlipper) findViewById(R.id.vflp_help); vflp_help.startFlipping(); }}</code></pre></pre>2) example 2: viewflipper (dynamic import) that supports gesture swipe<p><p><strong>Implementation</strong> :</p></p><p><p></p></p><p><p><strong>Code Implementation</strong> :</p></p><p><p>Because we are divided into the previous page, go to the next page, so in addition to the above two animations, we add two more animations:</p></p><p><p><strong>left_in.xml</strong>:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class="language-XML 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:duration</span>=<span class="hljs-value">"500"</span> <span class="hljs-attribute">android:fromXDelta</span>=<span class="hljs-value">"-100%p"</span> <span class="hljs-attribute">android:toXDelta</span>=<span class="hljs-value">"0"</span> /></span><span class="hljs-tag"></<span class="hljs-title">set</span>></span></code></pre></pre><p><p><strong>left_out.xml</strong>:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class="language-XML 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:duration</span>=<span class="hljs-value">"500"</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">"100%p"</span> /></span><span class="hljs-tag"></<span class="hljs-title">set</span>></span></code></pre></pre><p><p><strong>Mainactivity.java</strong>:</p></p><pre class="prettyprint"><code class="language-Java hljs java"><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">mainactivity</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">appcompatactivity</span> {</span></span> <span class="hljs-keyword"><span class="hljs-keyword">Private</span></span>Context mcontext;<span class="hljs-keyword"><span class="hljs-keyword">Private</span></span>Viewflipper vflp_help;<span class="hljs-keyword"><span class="hljs-keyword">Private</span></span> <span class="hljs-keyword"><span class="hljs-keyword">int</span></span>[] resId = {r.mipmap.ic_help_view_1,r.mipmap.ic_help_view_2, r.mipmap.ic_help_view_3,r.mipmap.ic_help_view_4};<span class="hljs-keyword"><span class="hljs-keyword">Private</span></span> <span class="hljs-keyword"><span class="hljs-keyword">Final</span></span> <span class="hljs-keyword"><span class="hljs-keyword">Static</span></span> <span class="hljs-keyword"><span class="hljs-keyword">int</span></span>Min_move =<span class="hljs-number"><span class="hljs-number"></span> $</span>;<span class="hljs-comment"><span class="hljs-comment">//min Distance</span></span> <span class="hljs-keyword"><span class="hljs-keyword">Private</span></span>Mygesturelistener mglistener;<span class="hljs-keyword"><span class="hljs-keyword">Private</span></span>Gesturedetector mdetector;<span class="hljs-annotation"><span class="hljs-annotation">@Override</span></span> <span class="hljs-keyword"><span class="hljs-keyword">protected</span></span> <span class="hljs-keyword"><span class="hljs-keyword">void</span></span> <span class="hljs-title"><span class="hljs-title">onCreate</span></span>(Bundle Savedinstancestate) {<span class="hljs-keyword"><span class="hljs-keyword">Super</span></span>. onCreate (savedinstancestate); Setcontentview (r.layout.activity_main); Mcontext = Mainactivity.<span class="hljs-keyword"><span class="hljs-keyword"></span> this</span>;<span class="hljs-comment"><span class="hljs-comment">//instantiate Simpleongesturelistener with Gesturedetector object</span></span>Mglistener =<span class="hljs-keyword"><span class="hljs-keyword">New</span></span>Mygesturelistener (); Mdetector =<span class="hljs-keyword"><span class="hljs-keyword">New</span></span>Gesturedetector (<span class="hljs-keyword"><span class="hljs-keyword"></span> this</span>, mglistener); Vflp_help = (viewflipper) Findviewbyid (r.id.vflp_help);<span class="hljs-comment"><span class="hljs-comment">//dynamic Import Add sub View</span></span> <span class="hljs-keyword"><span class="hljs-keyword"></span> for</span>(<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>i =<span class="hljs-number"><span class="hljs-number">0</span></span>; I < Resid.length;i++) {vflp_help.addview (getimageview (resid[i])); } }<span class="hljs-comment"><span class="hljs-comment">//rewrite Ontouchevent Trigger Mygesturelistener method</span></span> <span class="hljs-annotation"><span class="hljs-annotation">@Override</span></span> <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-keyword"><span class="hljs-keyword">return</span></span>Mdetector.ontouchevent (event); }<span class="hljs-comment"><span class="hljs-comment">//customize A gesturelistener, This is the view class, don't write wrong oh!!! </span></span> <span class="hljs-keyword"><span class="hljs-keyword">Private</span></span> <span class="hljs-class"><span class="hljs-class"> <span class="hljs-keyword">class</span> <span class="hljs-title">mygesturelistener</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">gesturedetector</span>. <span class="hljs-title">Simpleongesturelistener</span> {</span></span> <span class="hljs-annotation"><span class="hljs-annotation">@Override</span></span> <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">onfling</span></span>(motionevent e1, motionevent e2,<span class="hljs-keyword"><span class="hljs-keyword">float</span></span>V<span class="hljs-keyword"><span class="hljs-keyword">float</span></span>V1) {<span class="hljs-keyword"><span class="hljs-keyword">if</span></span>(e1.getx ()-e2.getx () > Min_move) {vflp_help.setinanimation (mcontext,r.anim.right_in); Vflp_help.setoutanimation (mcontext, r.anim.right_out); Vflp_help.shownext (); }<span class="hljs-keyword"><span class="hljs-keyword">Else</span></span> <span class="hljs-keyword"><span class="hljs-keyword">if</span></span>(e2.getx ()-e1.getx () > Min_move) {vflp_help.setinanimation (mcontext,r.anim.left_in); Vflp_help.setoutanimation (mcontext, r.anim.left_out); Vflp_help.showprevious (); }<span class="hljs-keyword"><span class="hljs-keyword">return</span></span> <span class="hljs-keyword"><span class="hljs-keyword">true</span></span>; } }<span class="hljs-keyword"><span class="hljs-keyword">Private</span></span>ImageView<span class="hljs-title"><span class="hljs-title">Getimageview</span></span>(<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>ResId) {ImageView img =<span class="hljs-keyword"><span class="hljs-keyword">New</span></span>ImageView (<span class="hljs-keyword"><span class="hljs-keyword"></span> this</span>); Img.setbackgroundresource (resId);<span class="hljs-keyword"><span class="hljs-keyword">return</span></span>img }}</code></pre><p><p><strong>Code Essentials parsing</strong> :</p></p> <blockquote> <blockquote> <p>1. Here we add the view through the dynamic method, here is simply the imageview, can expand according to own demand!<br>2. Believe that careful you find that our gestures are not directly judged by ontouchevent, and then rewritten<br>Ontouch event, The ACTION is judged, and then if it is motionevent.action_move, execute the following code:</p> <p> </p> <p>Later found that the simulator because of the mouse relationship, and not frequent jitter, while the real machine, because the fingers have been trembling<br>So the action_move will always be triggered, then the view is switched, and later considered the <strong>Berial (B-GOD)</strong> proposal, added<br>A value to judge is to add a flag:</p> <p> </p> <p>Can be, but the feeling is still a little fluid, strange, later think or use gesture class, directly in the onfling processing<br>good, so there is the above code, run up the lever drop ~<br>of course, If you are unfamiliar with gesture gestures, you can refer to an article previously written:<br>Android Basics Getting Started tutorial--3.8 Gesture (gesture)</p> </blockquote> </blockquote>4. code Sample Download<p><p>Viewflipperdemo.zip<br>Viewflipperdemo2.zip</p></p>This section summarizes: <blockquote> <blockquote> <p>ok, This section explains the basic use of Viewflipper (flip view), and later do the picture Carousel and guide page,<br>You have one more choice ~ well, say so much, thank you ~</p> </blockquote> </blockquote> <p style="font-size:12px;"><p style="font-size:12px;">Copyright Notice: This article for Bo Master original article, without Bo Master permission not Reproduced.</p></p> <p><p>Android Basics Getting Started tutorial--2.4.13 viewflipper (flip view) Basic use</p></p></span>