Android custom Control Banner scrolling effect _android

On some e-commerce sites can often see a number of scrolling banner, many software in the first use of the same advertising bar, as shown:

In fact, there are controls to implement this effect on the GitHub, but it's also very simple to do, so let's see what we can do today.

Let's take a look at the layout file:

<relativelayout 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 "Tools:context"
    = "Com.example.customwidget2.MainActivity" > <android.support.v4.view.viewpager android:id= "@+id/viewpager" Android:layout_width= "Wrap_content" android:layout_height= "200DP"/> <linearlayout android:layout_width = "Match_parent" android:layout_height= "wrap_content" android:layout_alignbottom= "@id/viewpager" android:backgr Ound= "#33000000" android:orientation= "vertical" android:padding= "5DP" > <textview android:id= "@+i" D/image_description "android:layout_width=" wrap_content "android:layout_height=" Wrap_content "Android:la" Yout_gravity= "Center_horizontal" android:text= "Huai left, Zhousi good place, the saddle less in the beginning." "Android:textcolor=" @android: Color/white "/> <linearlayout android:id=" @+id/Show_pointer "android:layout_width=" wrap_content "android:layout_height=" Wrap_content "Android:orientati"

on= "Horizontal" android:layout_gravity= "Center_horizontal" ></LinearLayout> </LinearLayout>

 </RelativeLayout>

The top of the layout file is a viewpager, using Viewpager to achieve the scrolling effect of the picture, Viewpager below is a linearlayout, this layout file has two things, one is TextView, which is used to show the line below the word, There is also a linearlayout, which is used to show the bottom of the word small dots, the number of small points we need to dynamically add according to the number of pictures, so now the first empty.

Mainactivity.java

public class Mainactivity extends activity {private Viewpager Mviewpager;
  The pictures are stored here private list<imageview> imageviewlist;
  Private ImageView IV;
  Private TextView imgdes;
  Thread switch, when the activity is destroyed, the thread should also stop running private Boolean isstop = false;
  private int previouspoint = 0;
  Store a small point layout file private LinearLayout layoutpgroup; Private string[] Imagedescription = {"Huai Left, Zhousi good place, to solve the saddle less in the initial journey." "," The Spring Breeze ten Li. Do the chestnut green. "," from the horses after the river, waste pool trees, still tired of words soldiers. "," Gradually dusk, the Qing Kok blowing cold. are in the empty city. "," Durongjun reward, Count now, heavy to be surprised.

  " };
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
    Setcontentview (R.layout.activity_main);
    Initialize init ();
        Set Picture Auto Scroll new Thread (new Runnable () {@Override public void run () {//If the activity is not destroyed keep executing
          while (!isstop) {//Rest 5 Seconds First systemclock.sleep (5000);
              The following code is sent to the main thread to execute Runonuithread (new Runnable () {@Override public void run () { MvieWpager.setcurrentitem (Mviewpager. Getcurrentitem () + 1);
        }
          });
  }}). Start ();
    private void Init () {Mviewpager = (Viewpager) This.findviewbyid (R.id.viewpager);
    Layoutpgroup = (linearlayout) This.findviewbyid (r.id.show_pointer);
    Imgdes = (TextView) This.findviewbyid (r.id.image_description);

    Imageviewlist = new arraylist<imageview> ();
    First get picture ID int[] Ivids = new int[] {r.drawable.a, r.drawable.b, r.drawable.c, R.DRAWABLE.D, R.DRAWABLE.E};
      Traverses the picture ID for (int id:ivids) {//Constructs a new picture object and sets the background to the picture based on ID IV = new ImageView (this);
      Iv.setbackgroundresource (ID);

      All the pictures are stored in the Imageviewlist Imageviewlist.add (iv);
      Construct a small point view v = new View (this);
      Set the small point width and height layoutparams params = new Layoutparams (8, 8);
      Set the left margin of a small point params.leftmargin = 12;
      V.setlayoutparams (params); Set whether the small point is available, default is unavailable, when not available, the small point is transparent, otherwise it is white v.SetEnabled (FALSE);
      Set the background of a small point, this background is a small dot v.setbackgroundresource (r.drawable.pointer_selector) drawn using an XML file;
    Add a small point to its layout file Layoutpgroup.addview (v);
    }//The first item INTEGER.MAX_VALUE/2-3=0 int index = INTEGER.MAX_VALUE/2-3 is displayed when the calculation application is opened;
    Set the data mviewpager.setadapter to Mviewpager (new Mypageradapter ());

    Set the page sliding event Mviewpager.setonpagechangelistener (new Myonpagechangelistener ()) to Mviewpager;
    Set the first item that is displayed when the application is opened, the value of index is 0//0 in this way, and what is the difference between writing 0 directly? Write directly 0, the application can not be opened directly to the right, because the Viewpager image position can not be negative, only to the left to slide//This way to get 0, you can implement the application one open, you can slide to the right mviewpager.setcurrentitem (in
  DEX); Private class Myonpagechangelistener implements Onpagechangelistener {//start @Override public void Onpag  escrollstatechanged (int arg0) {}//is in progress @Override public void onpagescrolled (int arg0, float arg1, int ARG2) {}//end @Override public void onpageselected (int position) {//When page slide is finished, take the page position first PO Sition = position% imageviewlist.size ();
      Sets the text content of the TextView Imgdes.settext (Imagedescription[position]);
      Sets the availability of the last point to False Layoutpgroup.getchildat (Previouspoint). SetEnabled (false);
      Sets the availability of the current point to true Layoutpgroup.getchildat (position). SetEnabled (True);
    Assigning the current position value to previouspoint previouspoint = position; } private class Mypageradapter extends Pageradapter {/** * Returns the total number of pictures, the Integer.max_value value is 2147483647 this number is 2.1 billion , which means that our viewpager * Theoretically can slide 2.1 billion times per application, of course, no one is actually going to do this, and we do this in order to achieve the effect of viewpager circular sliding-that is, when you slide to the last page of Viewpager, continue
    Sliding can go back to the first page * */@Override public int GetCount () {return integer.max_value;
    @Override public boolean isviewfromobject (View arg0, Object arg1) {return arg0 = = Arg1;
      ///When a page slips out, destroy it @Override public void Destroyitem (ViewGroup container, int position, object) {
         Container.removeview (Imageviewlist.get (position % imageviewlist.size ())); ///Add a picture to the container, because we want to implement the effect of circular sliding, so we have to position modulo @Override public Object instantiateitem (ViewGroup container, int
      Position) {container. AddView (imageviewlist.get (position% imageviewlist.size ()));
    Return Imageviewlist.get (position% imageviewlist.size ());
    }///When the activity is destroyed, let the thread stop @Override protected void OnDestroy () {isstop = true;
  Super.ondestroy ();

 }

}

The comments in the code are very detailed and I will not repeat them.

Unselected Small dot pointer_disable.xml:

<?xml version= "1.0" encoding= "Utf-8"?> <shape xmlns:android=
"http://schemas.android.com/apk/res/" Android "
  android:shape=" Oval >

  <!--set fillet radius-->
  <corners android:radius= "0.5dip"/>

  <!--set the color of the fill-->
  <solid android:color= "#55000000"/>

</shape>

Small dot Pointer_focus.xml When selected:

<?xml version= "1.0" encoding= "Utf-8"?> <shape xmlns:android=
"http://schemas.android.com/apk/res/" Android "
  android:shape=" Oval >

  <corners android:radius= "0.5dip"/>

  <solid android: Color= "#aaFFFFFF"/>

</shape>

Selector for small dots:

<?xml version= "1.0" encoding= "Utf-8"?> <selector xmlns:android=
"http://schemas.android.com/apk/res/" Android ">
  <!--When selected, the dot is white-->
  <item android:state_enabled=" true "android:drawable=" @drawable/ Pointer_focus ></item>
  <!--unchecked, the dots are transparent-->
  <item android:state_enabled= "false" Android: drawable= "@drawable/pointer_disable" ></item>
</selector>

SOURCE Download: Http://xiazai.jb51.net/201606/yuanma/Androidmove (jb51.net). rar

Original link: http://blog.csdn.net/u012702547/article/details/45845613

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.