Android Custom Control App Homepage Carousel diagram

Now basically most of the Android app's home page has a carousel diagram, which is like this (pictured in a posted blog post, which is used directly):

Components like this I believe most of the applications will be used, this article is to customize one such component, you can dynamically set the number of pictures. Let's start with this custom tour, and first look at the layout file for your custom control:

<?xml version= "1.0" encoding= "Utf-8"? ><relativelayout xmlns:android= "http://schemas.android.com/apk/res/ Android "    android:layout_width=" match_parent "    android:layout_height=" match_parent ">    < Android.support.v4.view.ViewPager        android:id= "@+id/viewpager"        android:layout_width= "Match_parent        " android:layout_height= "Match_parent"/><span style= "White-space:pre" ></span><!-- This linearlayout is used for small dots--    <linearlayout        android:id= "@+id/linearlayout"        android:layout_width= " Match_parent "        android:layout_height=" wrap_content "        android:layout_alignparentbottom=" true "        android:gravity= "center"        android:orientation= "horizontal"        android:padding= "5DP" >    </ Linearlayout></relativelayout>

After the layout file has been read, let's look at the Java class for the custom control:
The specific code is as follows:

Package Com.gc.view;import Java.util.arraylist;import Java.util.list;import java.util.concurrent.executors;import Java.util.concurrent.scheduledexecutorservice;import Java.util.concurrent.timeunit;import Com.gc.image.imageloaderwraper;import Com.gc.testviewpagerfragment.r;import Android.annotation.SuppressLint; Import Android.content.context;import Android.graphics.drawable.drawable;import Android.os.handler;import Android.os.message;import Android.os.parcelable;import Android.support.v4.view.pageradapter;import Android.support.v4.view.viewpager;import Android.support.v4.view.viewpager.onpagechangelistener;import Android.util.attributeset;import Android.view.layoutinflater;import Android.view.view;import Android.widget.framelayout;import Android.widget.imageview;import Android.widget.imageview.scaletype;import  Android.widget.linearlayout;import android.widget.relativelayout;/** * Viewpager Implementation of the Carousel map ad customized view; Support both automatic Carousel page and gesture swipe switch page, can dynamically set the number of pictures * @author Android General * */@SuppressLint ("HandlerleAK ") public class SlideShowView extends Framelayout {private Imageloaderwraper Imageloaderwraper;//uil Open source framework use,     Used primarily to load pictures to prevent Oom private final static Boolean isautoplay = true;    Private list<string> Imageuris;    Private list<imageview> imageviewslist;    Private list<imageview> dotviewslist;      Private LinearLayout mlinearlayout;    Private Viewpager Mviewpager;    private int currentitem = 0;    Private Scheduledexecutorservice Scheduledexecutorservice; @SuppressLint ("Handlerleak") private Handler Handler = new Handler () {@Override public void Handlemessage (Mes            Sage msg) {//TODO auto-generated Method Stub super.handlemessage (msg);        Mviewpager.setcurrentitem (CurrentItem);    }            };    Public SlideShowView (Context context) {this (context,null);    } public SlideShowView (context context, AttributeSet Attrs) {This (context, attrs, 0); } public SlideShowView (context context, AttribUteset attrs, int defstyle) {Super (context, attrs, Defstyle);        TODO auto-generated Constructor stub initui (context); if (! (         Imageuris.size () <=0) {System.out.println ("xxxxxxxxxxxx");        Setimageuris (Imageuris);        } if (Isautoplay) {startplay ();          }} private void Initui (context context) {imageviewslist = new arraylist<imageview> ();          Dotviewslist = new arraylist<imageview> ();          Imageuris=new arraylist<string> ();          Imageloaderwraper=imageloaderwraper.getinstance (Context.getapplicationcontext ());          Layoutinflater.from (context). Inflate (R.layout.layout_slideshow, this, true);          mlinearlayout= (LinearLayout) Findviewbyid (r.id.linearlayout);                       Mviewpager = (Viewpager) Findviewbyid (R.id.viewpager); } public void Setimageuris (list<string> imageuris) {for (int i=0;i<imageuris.size ();i++) {Imageuris.add (Imageuris.get (i));    System.out.println ("yyyyyyyyyy"); } linearlayout.layoutparams lp=new Linearlayout.layoutparams (LinearLayout.LayoutParams.WRAP_CONTENT,        LinearLayout.LayoutParams.WRAP_CONTENT);        Lp.setmargins (5, 0, 0, 0);        for (int i=0;i<imageuris.size (); i++) {ImageView imageview=new ImageView (GetContext ());        Imageview.setscaletype (SCALETYPE.FIT_XY);//Full Screen System.out.println ("GGGGG:" +imageuris.get (i));        Imageloaderwraper.displayimage (Imageuris.get (i), imageView);//loading images with an open source framework, readers can change themselves, use Setsetbackgroundresource.        System.out.println ("JJJJJJ");        Imageviewslist.add (ImageView);        System.out.println ("JJJJJJ55555");        ImageView Viewdot = new ImageView (GetContext ());          System.out.println ("JJJJJJ88888");                if (i = = 0) {viewdot.setbackgroundresource (r.drawable.dot_black);                }else{Viewdot.setbackgroundresource (R.drawable.dot_white); }          Viewdot.setimageresource (R.drawable.dot_white);        System.out.println ("JJJJJJ9999");        VIEWDOT.SETLAYOUTPARAMS (LP);        Dotviewslist.add (Viewdot);                     Mlinearlayout.addview (Viewdot);        } mviewpager.setfocusable (True);        Mviewpager.setadapter (New Mypageradapter ());    Mviewpager.setonpagechangelistener (New Mypagechangelistener ());        } private void Startplay () {scheduledexecutorservice = Executors.newsinglethreadscheduledexecutor ();    Scheduledexecutorservice.scheduleatfixedrate (New Slideshowtask (), 1, 4, timeunit.seconds);    } @SuppressWarnings ("unused") private void Stopplay () {Scheduledexecutorservice.shutdown ();          }/** * Sets the background of the selected Tip * @param selectitems */private void Setimagebackground (int selectitems) { for (int i=0; i<dotviewslist.size (); i++) {if (i = = Selectitems) {dotviewslist.get (i). Setba Ckgroundresource (R.drawable.dot_black);             }else{Dotviewslist.get (i). Setbackgroundresource (R.drawable.dot_white); }}} Private class Mypageradapter extends pageradapter{@Override public void Destroyit EM (View container, int position, object object) {//TODO auto-generated Method Stub//((Viewpag.er)            Container). Removeview ((View) object);                    ((Viewpager) container). Removeview (Imageviewslist.get (position)); } @Override Public Object instantiateitem (View container, int position) {//TODO auto-generated            Method Stub ((Viewpager) container). AddView (Imageviewslist.get (position));        return Imageviewslist.get (position); } @Override public int getcount () {//TODO auto-generated method stub return Imagevie        Wslist.size (); } @Override public boolean isviewfromobject (View arg0, Object arg1) {//TODO Auto-generated Method stub return arg0 = = Arg1; } @Override public void Restorestate (parcelable arg0, ClassLoader arg1) {//TODO auto-generated             Method stub} @Override public Parcelable saveState () {//TODO auto-generated method stub        return null;        } @Override public void Startupdate (View arg0) {//TODO auto-generated method stub}                    @Override public void Finishupdate (View arg0) {//TODO auto-generated method stub }} Private Class Mypagechangelistener implements onpagechangelistener{Boolean isautoplay = f        Alse;            @Override public void onpagescrollstatechanged (int arg0) {//TODO auto-generated method stub                Switch (arg0) {case 1:isautoplay = false;            Break                Case 2:isautoplay = true;Break                     Case 0:if (mviewpager.getcurrentitem () = = Mviewpager.getadapter (). GetCount ()-1 &&!isautoplay) {                Mviewpager.setcurrentitem (0); } else if (mviewpager.getcurrentitem () = = 0 &&!isautoplay) {MV                Iewpager.setcurrentitem (Mviewpager.getadapter (). GetCount ()-1);        } break; }} @Override public void onpagescrolled (int arg0, float arg1, int arg2) {//TODO Auto-ge nerated method stub} @Override public void onpageselected (int pos) {//TODO          auto-generated Method Stub setimagebackground (pos% imageuris.size ());             }} Private class Slideshowtask implements runnable{@Override public void run () { TODO auto-generated Method stub synchronized (Mviewpager) {currentItem = (currentitem+1)%imageviewslist.size ();            Handler.obtainmessage (). Sendtotarget (); }}} @SuppressWarnings ("unused") private void Destorybitmaps () {for (int i = 0; i < i Mageviewslist.size ();            i++) {ImageView ImageView = Imageviewslist.get (i);            drawable drawable = imageview.getdrawable ();            if (drawable! = null) {drawable.setcallback (null); }        }    }    }

After talking about the layout of the custom control and the corresponding class, we're going to use it, so how do we use it, see below.
In your project, if you want to use this custom control, you need to copy the layout file of the custom control to your layout folder, then copy the above class to your project and refer to the control in your own layout file as follows:

<com.gc.view.slideshowview       android:id= "@+id/slideshowview"       android:layout_width= "Fill_parent       " android:layout_height= "140DP"        android:layout_margintop= "10DP"        android:layout_marginleft= "5DP"        android:layout_marginright= "5DP"             /><!--Com.gc.view is the package name of SlideShowView, you need to change this package name to your own package name--

Then dynamically set up the picture in the corresponding activity or fragment:
(1) First obtain the control through Findviewbyid "

(2) method to invoke the Setimageuris of the control

The specific code looks like this:

<span style= "White-space:pre" ></span>List<String> imageuris=new arraylist<string> (); Imageuris.add ("http://e.hiphotos.baidu.com/image/pic/item/d6ca7bcb0a46f21ffac59520f4246b600d33aed4.jpg"); Imageuris.add ("http://a.hiphotos.baidu.com/image/pic/item/ac345982b2b7d0a2549f27eac9ef76094b369a76.jpg"); Imageuris.add ("http://b.hiphotos.baidu.com/image/pic/item/d52a2834349b033b12e5c3c317ce36d3d539bdbd.jpg"); Imageuris.add ("assets://one.jpg"); Imageuris.add ("assets://two.jpg"); Imageuris.add ("assets://three.jpg");// The above code is the URI path that initializes the picture <span style= "font-family:arial, Helvetica, Sans-serif;" ><span style= "White-space:pre" ></span>     mslideshowview= (slideshowview) Findviewbyid ( R.id.slideshowview); </span><span style= "font-family:arial, Helvetica, Sans-serif;" ><span style= "White-space:pre" ></span>     mslideshowview.setimageuris (imageuris);</span>

Then the effect in the application is as follows:

Well, this is how the custom control is used. I believe we should understand that if there is a wrong place to welcome the point, or have not understood can reply message.

Reprint Please specify source: http://blog.csdn.net/android_jiangjun/article/details/39638129

Android Custom Control App Homepage Carousel diagram