[Android Advancement] Taobao Headline: Scroll up the Advertising Bar ViewFlipper

The so-called predecessors planted trees and later generations took a cool place. Thank you for your contribution.
Reference blog:
Vertical Scroll of Taobao Headline View Imitating Taobao Home Page

I have done the following work on the basis of bloggers:

  • Fixed the bug that could not be triggered by the second click event of the scroll bar.
  • The code of custom ViewFlipper class is simplified.
  • Adding ViewFlipper control directly to achieve the same effect;

Firstly, the effect map is shown.

A less-used control is used here: ViewFlipper
The first step in learning something unknown is to understand what it is: what it is and what effect it can achieve! The second step is to understand How: How to use this thing.


Official introduction of the control:

Simple ViewAnimator that will animate between two or more views that
have been added to it. Only one child is shown at a time. If
requested, can automatically flip between each child at a regular

My translation:

The Simple View Animator implementer will have been added between its two or more views to achieve animation effects. Show only one child at a time (sub-view).
If necessary, it can be automatically flipped periodically between each child (sub-view).



1. Inherit ViewFlipper class to set animation interval time and animation effect through code

1.1 Custom ViewFlipper

 * Created by Veyron on 2017/2/20.
 * Function: Custom ViewFlipper Control

public class UpView extends ViewFlipper {

    private Context mContext;
    private boolean isSetAnimDuration = false;
    private int interval = 2000;
     * Animation time
    private int animDuration = 500;

    public UpView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);

    private void init(Context context, AttributeSet attrs, int defStyleAttr) {
        this.mContext = context;
        setFlipInterval(interval);//Set a time interval of 2000 milliseconds
        //Coming in animation
        Animation animIn = AnimationUtils.loadAnimation(mContext, R.anim.anim_in);
        if (isSetAnimDuration)
        //Exit animation
        Animation animOut = AnimationUtils.loadAnimation(mContext, R.anim.anim_out);
        if (isSetAnimDuration)

     * Setting the View array for circular scrolling
     * @param views
    public void setViews(final List<View> views) {
        if (views == null || views.size() == 0) return;
        for ( int i = 0; i < views.size(); i++) {
            final int position=i;
            //Setting the rollover child view
        startFlipping();    //Turn on and roll

1.2 Introduction in Layout File


2. In addition to mode 1, the same effect can be achieved by setting the properties of ViewFlipper in the layout file.


Specific implementation of the above two ways


 * Created by Veyron on 2017/2/20.
 * Function: Main interface, loading layout
public class MainActivity extends AppCompatActivity {
        private UpView upview1;   //Customized ViewFlipper
        private ViewFlipper mViewFlipper;  //Direct use of the control

        List<String> data = new ArrayList<>();   //Text Data Collection
        List<View> views = new ArrayList<>();    //Scrolling view set

        protected void onCreate(Bundle savedInstanceState) {

    private void initView() {
        //Self defined
        upview1 = (UpView) findViewById(R.id.upview1);
        upview1.setViews(views);//Set a scrolling view for a custom ViewFlipper

        //Non-customized, direct-use controls
        mViewFlipper = (ViewFlipper) findViewById(R.id.upview2);
        //Add rollover child view
        mViewFlipper.addView(View.inflate(this, R.layout.view1, null));
        mViewFlipper.addView(View.inflate(this, R.layout.view2, null));

     * Initialization of View s requiring loops
     * In order to use the scrolling View flexibly, let the user customize the scrolling content
     * If the scroll is three or one, or something else, you just need to change the layout and the method slightly.
    private void setView() {
        for (int i = 0; i < data.size(); i = i + 2) {
            final int position = i;
            //Setting a single layout for scrolling
            LinearLayout moreView = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.item_view, null);
            //Initialize the controls in the layout, as long as the two controls are set to listen for the purpose
            TextView tv1 = (TextView) moreView.findViewById(R.id.tv1);
            TextView tv2 = (TextView) moreView.findViewById(R.id.tv2);

             * Set up monitoring
            moreView.findViewById(R.id.rl).setOnClickListener(new View.OnClickListener() {
                public void onClick(View view) {
                    Toast.makeText(MainActivity.this,  data.get(position).toString(), Toast.LENGTH_SHORT).show();
                     * Add business code
             * Set up monitoring
            moreView.findViewById(R.id.rl2).setOnClickListener(new View.OnClickListener() {
                public void onClick(View view) {
                    Toast.makeText(MainActivity.this,  data.get(position+1).toString(), Toast.LENGTH_SHORT).show();
                     * Add business code

            //Assignment of controls
            if (data.size() > i + 1) {
                //Because there are two data in Taobao, but when the data is odd, there is no need to assign the second, so add a judgment, and should also hide the second layout.
                tv2.setText(data.get(i + 1).toString());
            } else {

            //Add to the circular scrolling array
            views.add(moreView);   //That's the scrolling view set.
     * Initialization data
    private void initdata() {
        data = new ArrayList<>();
        data.add("The American TV series "Walking Dead" is on the line Steam Price per episode 2.99...");
        data.add("2017 April new animation preview! You look forward to that one");
        data.add("After giving birth to a baby, my husband has done these things, but you have not added the wrong person!");
        data.add("Gas Consumption for Automobile Air Conditioning? Just because you pressed the wrong key");
        data.add("Heartache S7 edge Samsung official'Machine abuse'Video on line");

API introduction

Common attributes:

  • autoStart: ture, then automatically starts scrolling
  • In Animation: Scroll-in animation
  • Out Animation: Rolling Out Animation
  • flipInterval: Time interval

Common methods:

  • startFlipping(): Start rolling
  • setOutAnimation(): A scroll-out animation
  • setInAnimation(): Scroll in animation
  • setFlipInterval(): Set the time interval - milliseconds
  • ViewFlipper object addView(): Load view objects that need to scroll

The specific attributes of ViewFlipper are detailed in: The official api of the ViewFlipper control

Source code:


If you like this project, welcome fork, and click Star!!

Tags: Android less Java Steam

Posted on Sun, 31 Mar 2019 16:03:29 -0700 by adcripps