Imitation apple Elastic layout

Source: Internet
Author: User

In Android Development, iOS apps and Android apps are often required to be consistent, so many controls need to be defined by the developer when it comes to Android, so let's share an elastic sliding scrollview that imitates apples.

Bouncescrollview Source:

Package Com.joke.widget;import Android.content.context;import Android.graphics.rect;import android.os.Build;import Android.util.attributeset;import Android.view.motionevent;import Android.view.view;import Android.view.animation.translateanimation;import android.widget.scrollview;/** * ScrollView Bounce Effect Implementation */public class Bouncescrollview extends ScrollView {Private View inner;//child view private float y;//Click Y-coordinate private Rect normal    = new Rect ();//Rectangle (This is just a form, just used to determine if animation is required.) Private Boolean iscount = false;//whether to begin computing public Bouncescrollview (context context, AttributeSet Attrs) {super (C        Ontext, Attrs); Cancels the yellow or blue shading of the edge when sliding to the top or bottom if (Build.VERSION.SDK_INT >= 9) {This.setoverscrollmode (view.over_scroll_ne        VER); }}/*** * The work is done based on the XML generation view. The function is called at the end of the build view, after all the child views have been added.     Even if the subclass overrides the Onfinishinflate * method, the method of the parent class should be called to enable the method to execute. */@Override protected void Onfinishinflate () {if (Getchildcount () > 0) {inner = geTchildat (0); }}/*** * Monitor Touch * * @Override public boolean ontouchevent (motionevent ev) {if (inner! = NULL        ) {commontouchevent (EV);    } return super.ontouchevent (EV); }/*** * Touch event * * @param EV */public void commontouchevent (motionevent ev) {int action = E        V.getaction ();        Switch (action) {case MotionEvent.ACTION_DOWN:break;            Case MOTIONEVENT.ACTION_UP://finger loosened.                if (Isneedanimation ()) {animation ();            Iscount = false;        } break; /*** * Excludes the first move calculation, because the y-coordinate is not known for the first time and is not available in Motionevent.action_down, * because this is the Myscrollview touch event passed to the child in the ListView Item above. So start with the second calculation. * However, we also want to initialize, that is, the first time to move the sliding distance to 0.         Then the records are accurate and executed normally. */Case MotionEvent.ACTION_MOVE:final Float PreY = y;//The y coordinate when pressed float Nowy = ev.gety ();//Always y-coordinate int deltay = (int) (PreY -Nowy);//sliding distance if (!iscount) {deltay = 0;//0 in this case.            } y = nowy; When scrolling to the top or bottom no longer scrolls, move the layout if (Isneedmove ()) {//Initialize the head rectangle if (Normal.isempty ()) {//Save normal layout position Normal.set (Inner.getleft (), Inner.gettop (), Inner.getright (), INNER.G                Etbottom ()); }//LOG.E ("JJ", "Rectangle:" + inner.getleft () + "," + inner.gettop ()//+ "," + inner.getright ()                + "," + Inner.getbottom ()); Mobile Layout Inner.layout (Inner.getleft (), Inner.gettop ()-DELTAY/2, Inner.getright (), Inner.getbottom ()-DE            LTAY/2);            } Iscount = true;        Break        Default:break; }}/*** * Retraction animation */public void animation () {//Turn on motion animation translateanimation ta = new Translat        Eanimation (0, 0, inner.gettop (), normal.top);        Ta.setduration (200); INner.startanimation (TA);        Set back to normal layout position inner.layout (Normal.left, Normal.top, Normal.right, Normal.bottom);        LOG.E ("JJ", "return:" + Normal.left + "," + Normal.top + "," +//normal.right//+ "," + Normal.bottom ");    Normal.setempty ();    }//Whether you need to turn on animation public boolean isneedanimation () {return!normal.isempty ();     }/*** * Whether you need to move the layout inner.getmeasuredheight (): Gets the total height of the control * * getheight (): Gets the height of the screen * * @return        */Public Boolean isneedmove () {int offset = inner.getmeasuredheight ()-getheight ();        int scrolly = getscrolly ();        LOG.E ("JJ", "scrolly=" + scrolly);        0 is the top, the back one is the bottom if (scrolly = = 0 | | scrolly = = offset) {return true;    } return false; }}

Instructions for use:
1, put the Bouncescrollview directly into the *.widget bag
2. Use Bouncescrollview to wrap other layouts directly in the layout file

<com.joke.widget.bouncescrollview 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:fadescrollbars=" false "    android:fadingedge=" None "    android:fadingedgelength=" 0dip "    tools:context= ". Mainactivity ">    <!--android:background=" @drawable/coversation_bg "-    <linearlayout        Android:layout_width= "Match_parent"        android:layout_height= "match_parent"        android:background= "#FF0000 "        android:orientation=" vertical "> ...        </LinearLayout></com.joke.widget.BounceView>

It is noteworthy that: Bouncescrollview is directly inherited from the ScrollView, then Bouncescrollview also need to follow the scrollview of the Convention, it only allows a child view inside, So other layouts need to be wrapped using a viewgroup.

In addition: can also give Bouncescrollview background, use: android:background= "@drawable/coversation_bg"
For example: Coversation_bg.xml can also achieve the image overlay effect

<?xml version= "1.0" encoding= "Utf-8"? ><layer-list xmlns:android= "http://schemas.android.com/apk/res/ Android ">    <item>        <bitmap            android:src=" @drawable/cover_default_bg "            Android:tilemode = "Repeat"/>    </item>    <item android:top= "10.0dip" >        <bitmap            android:gravity= "top |center "            android:src=" @drawable/conversation_bg_logo "/>    </item></layer-list>

Imitation apple Elastic layout

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.