"Android Notes" toggle picture (bottom with dot effect)

Here's how we're going to achieve this effect:

We will implement this effect in two ways: 1. Use Viewpager:Idea: Viewpager provides support for left and right sliding picture operations, the lower dots are dynamically created in the code, and the entire layout is framelayout. Look at the layout first:

<framelayout 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:backg Round= "@android: Color/black" tools:context= ". Mainactivity "> <android.support.v4.view.viewpager android:id=" @+id/viewpager "android:layout_width = "Match_parent" android:layout_height= "wrap_content" ></android.support.v4.view.ViewPager> <r Elativelayout android:layout_width= "match_parent" android:layout_height= "Wrap_content" > & Lt LinearLayout android:id= "@+id/viewgroup" android:layout_width= "Match_parent" Android:lay             out_height= "Wrap_content" android:layout_alignparentbottom= "true" android:layout_marginbottom= "30DP" Android:gravity= "Center_horizontal" android:orientation= "Horizontal" ></linearlAyout> </RelativeLayout></FrameLayout> 

look at the code again:

Package Com.example.splash_viewpager;import Android.app.activity;import Android.content.res.resources;import Android.graphics.bitmap;import Android.graphics.bitmapfactory;import Android.os.bundle;import Android.support.v4.view.pageradapter;import Android.support.v4.view.viewpager;import Android.support.v4.view.viewpager.onpagechangelistener;import Android.view.view;import Android.view.ViewGroup; Import Android.view.viewgroup.layoutparams;import Android.widget.imageview;import android.widget.LinearLayout;    public class Mainactivity extends Activity implements onpagechangelistener{private Viewpager Mviewpager = null;        Private LinearLayout mviewgroup = null; Private int[] Mimageids = {r.drawable.bg1,r.drawable.bg2, R.drawable.bg3,r.drawable.bg4, r.drawable.        Bg5,r.drawable.bg6, R.drawable.bg7};        Private imageview[] mimageviews = null;        Private imageview[] mtips = null; @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);                Setcontentview (R.layout.main);        Mviewgroup = (linearlayout) Findviewbyid (R.id.viewgroup);                Mviewpager = (Viewpager) Findviewbyid (R.id.viewpager);        Mtips = new Imageview[mimageids.length];            dynamically creates a dot and adds it to the layout for (int i = 0; i < mtips.length; i++) {ImageView IV = new ImageView (this);            Iv.setlayoutparams (New Layoutparams (10,10));                        Mtips[i] = IV;            if (i = = 0) {iv.setbackgroundresource (r.drawable.page_indicator_focused);            }else {iv.setbackgroundresource (r.drawable.page_indicator_unfocused); } linearlayout.layoutparams LP = new Linearlayout.layoutparams (New Layoutparams (layoutparams.wrap_content,layou            Tparams.wrap_content));            Lp.leftmargin = 5;            Lp.rightmargin = 5;        Mviewgroup.addview (IV,LP); } MimagevieWS = new Imageview[mimageids.length];            for (int i = 0; i < mimageviews.length; i++) {ImageView IV = new ImageView (this);            Mimageviews[i] = IV;            int reqwidth = Getwindowmanager (). Getdefaultdisplay (). GetWidth ();            int reqheight = Getwindowmanager (). Getdefaultdisplay (). GetHeight ();        Iv.setimagebitmap (Decodesampledbitmapfromresource (Getresources (), Mimageids[i], Reqwidth, reqHeight));        } mviewpager.setadapter (New Mypageradapter ());            Mviewpager.setonpagechangelistener (this);            } class Mypageradapter extends Pageradapter {@Override public int getcount () {        return mimageids.length;         } @Override public boolean isviewfromobject (View arg0, Object arg1) {return arg0 = = Arg1;             } @Override Public Object instantiateitem (viewgroup container, int position) {Try          {      Container.addview (Mimageviews[position]);        } catch (Exception e) {} return mimageviews[position];     } @Override public void Destroyitem (ViewGroup container, int position, Object object) {}}            @Override public void onpageselected (int. arg0) {for (int i = 0; i < mtips.length; i++) {            if (arg0 = = i) {mtips[i].setbackgroundresource (r.drawable.page_indicator_focused);            }else {mtips[i].setbackgroundresource (r.drawable.page_indicator_unfocused); }}} @Override public void onpagescrollstatechanged (int. arg0) {} @Override public void O npagescrolled (int arg0, float arg1, int arg2) {} private static Bitmap Decodesampledbitmapfromresource (Resou  RCEs res,int resid,int reqwidth,int reqheight) {bitmapfactory.options opts = new Bitmapfactory.options ();      Opts.injustdecodebounds = true;        Bitmapfactory.decoderesource (res, resId);        int insamplesize = Cacluateinsampledsize (opts, reqwidth, reqheight);        Opts.insamplesize = insamplesize;        Opts.injustdecodebounds = false;    Return Bitmapfactory.decoderesource (res,resid,opts); } private static int cacluateinsampledsize (bitmapfactory.options opts,int width,int height) {if (opts = =        NULL) {return 1;        } int insamplesize = 1;        int realwidth = Opts.outwidth;                int realheight = Opts.outheight;            if (Realwidth > Width | | realheight > height) {int heightratio = Realheight/height;                        int widthRatio = Realwidth/width; Insamplesize = (WidthRatio > HeightRatio)?        Heightratio:widthratio;    } return insamplesize; }}

2. Using Viewflipper Ideas: Fill multiple ImageView in Viewflipper, then use Gesturedetector to detect gestures, and the dots are still generated dynamically. Layout:

<framelayout 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:backg Round= "@android: Color/black" tools:context= ". Mainactivity "> <viewflipper android:id=" @+id/vf "android:layout_width=" Match_parent "a ndroid:layout_height= "Wrap_content" ></ViewFlipper> <relativelayout android:layout_width= "Ma Tch_parent "android:layout_height=" wrap_content "> <linearlayout android:id=" @+id/v Iewgroup "android:layout_width=" match_parent "android:layout_height=" Wrap_content "Androi d:orientation= "Horizontal" android:layout_alignparentbottom= "true" android:layout_marginbottom= "30DP "Android:gravity=" Center_horizontal "></LinearLayout> &LT;/RELATIVELAYOUT&GT;&LT;/framelayout> 

Code:

Package Com.example.splash_viewflipper;import Android.app.activity;import Android.content.res.resources;import Android.graphics.bitmap;import Android.graphics.bitmapfactory;import Android.os.bundle;import Android.view.gesturedetector;import Android.view.gesturedetector.ongesturelistener;import Android.view.motionevent;import Android.view.animation.animation;import android.view.animation.AnimationUtils; Import Android.widget.imageview;import Android.widget.linearlayout;import Android.widget.linearlayout.layoutparams;import Android.widget.toast;import Android.widget.viewflipper;public    Class Mainactivity extends Activity implements ongesturelistener{private viewflipper mviewflipper = null;        Private LinearLayout mviewgroup = null;        Private Gesturedetector mgesturedetector = null;            Private int[] Mimageids = {r.drawable.bg1,r.drawable.bg2, R.drawable.bg3,r.drawable.bg4,        R.drawable.bg5,r.drawable.bg6, R.drawable.bg7}; prIvate imageview[] mimageviews = null;        Private imageview[] mtips = null;        private int currentindex = 0;        @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);                Setcontentview (R.layout.activity_main);        Mviewflipper = (viewflipper) Findviewbyid (R.ID.VF);                Mviewgroup = (linearlayout) Findviewbyid (R.id.viewgroup);                Mgesturedetector = new Gesturedetector (this,this);        Mimageviews = new Imageview[mimageids.length];            for (int i = 0; i < mimageviews.length; i++) {ImageView IV = new ImageView (this);            int reqwidth = Getwindowmanager (). Getdefaultdisplay (). GetWidth ();            int reqheight = Getwindowmanager (). Getdefaultdisplay (). GetHeight ();            Iv.setimagebitmap (Decodesampledbitmapfromresource (Getresources (), Mimageids[i], Reqwidth, reqHeight)); Linearlayout.layoutparams LP = new Linearlayout.layoutparams (layoutparamS.match_parent,layoutparams.match_parent);        Mviewflipper.addview (IV,LP);        } mtips = new imageview[mimageids.length];            for (int i = 0; i < mtips.length; i++) {ImageView IV = new ImageView (this);            Iv.setlayoutparams (New Layoutparams (10,10));                        Mtips[i] = IV;            if (i = = 0) {iv.setbackgroundresource (r.drawable.page_indicator_focused);            }else {iv.setbackgroundresource (r.drawable.page_indicator_unfocused); } linearlayout.layoutparams LP = new Linearlayout.layoutparams (New Layoutparams (layoutparams.wrap_content,layou            Tparams.wrap_content));            Lp.leftmargin = 5;            Lp.rightmargin = 5;        Mviewgroup.addview (IV,LP); }} @Override public boolean ontouchevent (Motionevent event) {return mgesturedetector.ontouchevent    (event); } private static Bitmap decodesAmpledbitmapfromresource (Resources res,int resid,int reqwidth,int reqheight) {Bitmapfactory.options opts = new        Bitmapfactory.options ();        Opts.injustdecodebounds = true;        Bitmapfactory.decoderesource (res, resId);        int insamplesize = Cacluateinsampledsize (opts, reqwidth, reqheight);        Opts.insamplesize = insamplesize;        Opts.injustdecodebounds = false;    Return Bitmapfactory.decoderesource (res,resid,opts); } private static int cacluateinsampledsize (bitmapfactory.options opts,int width,int height) {if (opts = =        NULL) {return 1;        } int insamplesize = 1;        int realwidth = Opts.outwidth;                int realheight = Opts.outheight;            if (Realwidth > Width | | realheight > height) {int heightratio = Realheight/height;                        int widthRatio = Realwidth/width; Insamplesize = (WidthRatio > HeightRatio)?        Heightratio:widthratio;} return insamplesize;         } @Override public boolean onfling (Motionevent E1, motionevent E2, float Velocityx, float velocityy) {                if (E1.getx ()-e2.getx () > 120)//Show Next {if (currentindex! = mtips.length-1) {                currentindex++;                Setimagebackground (Currentindex);                Animation in_right = animationutils.loadanimation (This,r.anim.in_right_);                Animation out_left = animationutils.loadanimation (This,r.anim.out_left_);                Mviewflipper.setinanimation (In_right);                Mviewflipper.setoutanimation (Out_left);            Mviewflipper.shownext ();            }else {Toast.maketext (this, "Already the last one:", 0). Show ();                }}else if (E1.getx ()-E2.getx () <-120)//Display Previous {if (Currentindex! = 0) {                currentindex--;                Setimagebackground (Currentindex); Animation In_left = Animationutils.loadanimation (This,r.anim.in_left_);                Animation out_right = animationutils.loadanimation (This,r.anim.out_right_);                Mviewflipper.setinanimation (In_left);                Mviewflipper.setoutanimation (Out_right);            Mviewflipper.showprevious ();            }else {Toast.maketext (this, "Already the first one:", 0). Show ();    }} return true;                private void Setimagebackground (int selectitems) {for (int i = 0; i < mtips.length; i++) { if (i = = Selectitems) {Mtips[i].setbackgroundresource (r.drawable.page_indicator                _focused);                }else {mtips[i].setbackgroundresource (r.drawable.page_indicator_unfocused);    }}} @Override public boolean ondown (Motionevent e) {return false; } @Override public void onshowpress (Motionevent e) {}   @Override public boolean onsingletapup (Motionevent e) {return false;    } @Override public boolean onscroll (Motionevent E1, motionevent E2, float Distancex, float distancey)    {return false; } @Override public void onlongpress (Motionevent e) {}}