Scroll ad bar for android custom control and android control AD bar

Scroll ad bar for android custom control and android control AD bar

On some e-commerce websites, you can often see some rolling ad strips. Many software also have similar ad strips for the first time,

In fact, there are controls to achieve this effect on github, but it is very easy to do. Let's take a look at how to do it 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 and Roid: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_alignBottom = "@ id/viewpager" android: background = "#33000000" android: orientation = "vertical" android: padding = "5dp"> <TextView android: id = "@ + id/image_description" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_horizontal" android: text = "Huai Zuo mingdu, ZhuXi jiaxiao, jiashou shaozhuchu. "Android: textColor =" @ android: color/white "/> <LinearLayout android: id =" @ + id/show_pointer "android: layout_width =" wrap_content "android: layout_height = "wrap_content" android: orientation = "horizontal" android: layout_gravity = "center_horizontal"> </LinearLayout> </RelativeLayout>

The top of the layout file is a Viewpager, which uses viewpager to implement the scrolling effect of the image. The bottom of viewpager is a linearlayout. There are two items in the layout file: textview, this is used to display the line below, and there is a linearlayout, which is used to display the smaller points below the word. We need to dynamically add the number of smaller points according to the number of images, so it is empty now.

MainActivity. java

Public class MainActivity extends Activity {private ViewPager mViewPager; // The images are stored here in private List <ImageView> imageViewlist; private ImageView iv; private TextView imgDes; // thread switch, after the activity is destroyed, the thread should also stop running private boolean isStop = false; private int previousPoint = 0; // store the small layout file private LinearLayout layoutPGroup; private String [] imageDescription = {"Left name of Huai du, ZhuXi Jia, solution saddle less in the beginning of the journey. "," Spring Breeze. Make all the difference. "," Since Hu Ma piaojiang went, the waste pool tree, not tired of words. "," Gradually evening, clear angle blow cold. All in the empty city. "," Du Lang junsheng, now, must be surprised. "}; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); // initialize init (); // sets automatic image scrolling new Thread (new Runnable () {@ Override public void run () {// if the activity is not destroyed, the while (! IsStop) {// wait for 5 seconds for SystemClock. sleep (5000); // the following code is sent to run 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. im Age_description); imageViewlist = new ArrayList <ImageView> (); // obtain the image id int [] ivIDs = new int [] {R. drawable. a, R. drawable. b, R. drawable. c, R. drawable. d, R. drawable. e}; // traverse the image id for (int id: ivIDs) {// create a new image object and set the background iv = new ImageView (this) for the Image Based on the id ); iv. setBackgroundResource (id); // All images are stored in the imageViewlist. add (iv); // construct a small View v = new View (this); // set the width and height of the small point LayoutParams params = New LayoutParams (8, 8); // set the left margin of the smaller part to params. leftMargin = 12; v. setLayoutParams (params); // sets whether a small point is available. It is unavailable by default. When unavailable, the small point is transparent; otherwise, it is white v. setEnabled (false); // set the background of a small dot. This background is a small dot v drawn using an xml file. setBackgroundResource (R. drawable. pointer_selector); // Add the dot to its layout file layoutPGroup. addView (v);} // The first Integer displayed when the computing application is opened. MAX_VALUE/2-3 = 0 int index = Integer. MAX_VALUE/2-3; // set mViewPager for mViewPager. setAdapter (New MyPagerAdapter (); // set the page slide event mViewPager for mViewPager. setOnPageChangeListener (new MyOnPageChangeListener (); // set the first item displayed when the application is opened. The index value is 0. // use this method to obtain 0, what is the difference between writing 0 directly? // Write 0 directly. The application cannot directly slide to the right after opening, because the position of the saved image in viewpager cannot be a negative value. You can only slide to the left to obtain 0 in this way, you can slide mViewPager to the right as soon as the application is opened. setCurrentItem (index);} private class MyOnPageChangeListener implements OnPageChangeListener {// start @ Override public void merge (int arg0) {}// @ Override public void onPageScrolled (int arg0, float arg1, int arg2) {}// end @ Override public void onPageSelected (int position) {// when the page slide ends, first, modulo position = position % imageViewlist for the page position. size (); // sets the text content imgDes of textview. setText (imageDescription [position]); // set the availability of the previous vertex to false layoutPGroup. getChildAt (previousPoint ). setEnabled (false); // set the availability of the current vertex to true layoutPGroup. getChildAt (position ). setEnabled (true); // assign the current position value to previousPoint = position;} private class MyPagerAdapter extends PagerAdapter {/*** the total number of returned images, Integer. the value of MAX_VALUE is 2147483647, which has 2.1 billion. That is to say, our viewpager * can slide 2.1 billion times every time we use an application. Of course, no one is actually doing this, we do this to achieve the effect of circular sliding of viewpager * that is, when sliding to the last page of viewpager, continue sliding to return 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 slides out, destroy @ Override public void destroyItem (ViewGroup container, int position, Object object Object) {container. removeView (imageViewlist. get (position % imageViewlist. size ();} // Add an image to the container. To achieve the effect of circular sliding, the 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, stop the thread @ Override protected void onDestroy () {isStop = true; super. onDestroy ();}}

The comments in the Code have already been described in detail, so I will not repeat them again.

Small dot pointer_disable.xml not selected:

<? Xml version = "1.0" encoding = "UTF-8"?> <Shape xmlns: android = "http://schemas.android.com/apk/res/android" android: shape = "oval"> <! -- Set the radius of the rounded corner --> <corners android: radius = "0.5dip"/> <! -- Set the fill color --> <solid android: color = "#55000000"/> </shape>

Pointer_focus.xml:

<?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>

Dot selector:

<? 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> <! -- When not selected, the light is transparent --> <item android: state_enabled = "false" android: drawable = "@ drawable/pointer_disable"> </item> </selector>

Download complete code for this project