Implementation of the cyclic ad space component and the cyclic ad space component

Implementation of the cyclic ad space component and the cyclic ad space component
The implementation of the cyclic ad space component is written in front

I haven't written a blog for a long time. Many friends asked me why my blog is not updated. This is because I am doing other things and have not updated my blog because I have not enough time, but now I am updating my blog! Next, I will update some articles, including the following:
1. Some in-depth knowledge points of Android
2. My path to technological growth
3. My subsequent technical plans
4. How to Learn Android well and become a senior engineer
5. Career Planning

Preface

This article is a technical article. Why do I choose to introduce the ad space component of loop playback? This is because when I first came into contact with Android two years ago I wrote an article about the ad space components (http://blog.csdn.net/singwhatiwanna/article/details/8875241), to be honest, the article implementation is more complex, basically equivalent to rewriting a ViewPager, but the complexity is complicated, and its encapsulation is still very good, so many people asked me for code, but I did not have the source code later. Through this incident, I found that the ad space component is still quite necessary, so now I decided to rewrite the ad space component again. Of course, this time I will not choose the previous method because it is too complicated, this time, the blogger chose ViewPager to implement the ad space component. To meet the actual project needs, I added the automatic and loop playback functions for it, this can be used directly in the project. Here we will describe the concept of loop playback. Loop playback refers to "sliding forward from the first screen to the last screen, and sliding backward from the last screen to the first screen ".

Effect

Here is a static image, which can be played cyclically.

Technical details

The technical details of this advertising space component are as follows:
1. How to Use ViewPager
2. How to Implement loop playback
3. How to enable automatic playback
The three points are described below.

How to Use ViewPager

ViewPager is a class provided by the support-v4, which is mainly used to achieve the sliding screen effect, IT and Fragment is a perfect combination, through FragmentPagerAdapter, ViewPager can easily manage multiple Fragment. In this example, because Fragment is not required, we need to use another more common Adapter of ViewPager: PagerAdapter. PagerAdapter is the parent class of FragmentPagerAdapter, which provides more general functional interfaces. Of course, this also means that PagerAdapter is a little more complex to use.

Generally, using PagerAdapter requires at least four methods:
1. int getCount ()
Number of ViewPager screens
2. boolean isViewFromObject (View view, Object o)
Indicates whether key: o and value: view belong to the same key-value pair, that is, whether the value of o is view
3. Object instantiateItem (ViewGroup container, int position)
On the screen where the initialization position is position, the return value is the key of the key-value pair, and the real View is the value corresponding to the key. This concept is a bit abstract. Generally, we use View as the key, that is, the key and value are both the same View object. In this method, we need to load the View and return it as the return value. Considering the differences between ViewPager and AdapterView, the View reuse mechanism is not used in this article. This is because ViewPager does not have much content as AdapterView does, in addition, the PagerAdapter of ViewPager does not expose reusable interfaces during design. Meanwhile, the ad space components are generally composed of pictures and the layout is relatively simple, therefore, it is acceptable to reload the layout every time.
4. void destroyItem (ViewGroup container, int position, Object object)
When the screen at position is no longer used, destroy it. A typical action is to remove the View object from the container.

For the example in this article, the implementation of the four methods is as follows:

        @Override        public int getCount() {            return FAKE_BANNER_SIZE;        }        @Override        public boolean isViewFromObject(View view, Object o) {            return view == o;        }        @Override        public Object instantiateItem(ViewGroup container, int position) {            position %= DEFAULT_BANNER_SIZE;            View view = mInflater.inflate(R.layout.item, container, false);            ImageView imageView = (ImageView) view.findViewById(R.id.image);            imageView.setImageResource(mImagesSrc[position]);            final int pos = position;            view.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View v) {                    Toast.makeText(MainActivity.this, "click banner item :" + pos, Toast.LENGTH_SHORT).show();                }            });            container.addView(view);            return view;        }        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView((View) object);        }

How to Use loop playback

Loop playback will become complicated if we consider it from the conventional idea, but the new idea will become open-minded. Consider one situation: Suppose we need to have 5 screens for ViewPager, however, if we return 100 in the getCount method of PagerAdapter, that is, to tell ViewPager that we have 100 screens, what will happen? Think about it. If the current screen is 5th, because ViewPager thinks there are 100 screens, we can still slide backwards. When sliding to 6th screens, what if we return the View of the 1st screen to it in instantiateItem? It is easy to understand. This achieves the effect of sliding from the 5th screen to the 1st screen, that is, sliding from the last screen to the first screen. Similarly, when the first screen slides forward, we can also return the View of the last screen, but there is a problem here, the first screen cannot slide forward, because the position of the first screen is 0, viewPager cannot slide to the position of-1, which is indeed a problem! However, it is still difficult to think about it. If ViewPager slides to 0, what will happen when we quickly switch it to the 6th screen? Because the content of the 6th screen is actually the content of the 1st screen, there is no change in the interface, but in this case, the subscript of the ViewPager current screen has changed from 0 to 5. What does this mean? This means that ViewPager can slide forward.

In this way, the problem of loop playback is solved. For this example, the code is implemented as follows:

        @Override        public int getCount() {            return FAKE_BANNER_SIZE;        }        @Override        public Object instantiateItem(ViewGroup container, int position) {            position %= DEFAULT_BANNER_SIZE;            View view = mInflater.inflate(R.layout.item, container, false);            ImageView imageView = (ImageView) view.findViewById(R.id.image);            imageView.setImageResource(mImagesSrc[position]);            final int pos = position;            view.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View v) {                    Toast.makeText(MainActivity.this, "click banner item :" + pos, Toast.LENGTH_SHORT).show();                }            });            container.addView(view);            return view;        }

From the code above, we can see that getCount returns a constant FAKE_BANNER_SIZE, which is defined as 100 by me. Of course, 50, 200, and 1000 can all be used, but cannot be too large, such as Integer. MAX_VALUE, a large number will lead to ANR with a great probability. In the instantiateItem method, the following sentence is critical:

Position % = DEFAULT_BANNER_SIZE

This completes the ing from 100 to 5, that is, ult_banner_size is defined as 5, indicating the actual number of screens of ViewPager.

In addition, in order to achieve the effect of moving forward from the first screen to the last screen, you need to do the following:

        @Override        public void finishUpdate(ViewGroup container) {            int position = mBanner.getCurrentItem();            Log.d(TAG, "finish update before, position=" + position);            if (position == 0) {                position = DEFAULT_BANNER_SIZE;                mBanner.setCurrentItem(position, false);            } else if (position == FAKE_BANNER_SIZE - 1) {                position = DEFAULT_BANNER_SIZE - 1;                mBanner.setCurrentItem(position, false);            }            Log.d(TAG, "finish update after, position=" + position);        }

FinishUpdate indicates that the update of ViewPager is about to be completed. Therefore, we can quietly replace some things, such as switching screen 0 to screen 5, and at the same time, in order to achieve infinite loop sliding, when the current number reaches 99, switch it to the 4th screen, so that the sliding can be carried out infinitely, otherwise, when the ViewPager reaches 100th, it will no longer be able to move backward.

How to enable automatic playback

This problem is a little simpler. For example, Timer, Alarm, and even Handler can be used. The idea is to trigger the sliding of ViewPager at a certain interval, the lightweight Timer is used in this article. The reason is as follows: Alarm is too heavyweight and a little useless, while Handler is a little more complicated to use. The following are specific implementation details. automatic playback is triggered every Ms.

    private TimerTask mTimerTask = new TimerTask() {        @Override        public void run() {            if (!mIsUserTouched) {                mBannerPosition++;                runOnUiThread(MainActivity.this);                Log.d(TAG, "tname:" + Thread.currentThread().getName());            }        }    };    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();        mTimer.schedule(mTimerTask, 5000, 3000);    }    @Override    public void run() {        mBanner.setCurrentItem(mBannerPosition);    }

Source code download

For the complete source code, please check my Github, as shown below:
Https://github.com/singwhatiwanna/banner)

In addition, we invite you to join our technical exchange group.
3: 29969245
(Note: If you have already added group 1 and group 2, do not add group again because the number of groups is limited)