[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.

What:

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
interval.

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).

How:

Realization:

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)
            animIn.setDuration(animDuration);
        setInAnimation(animIn);
        //Exit animation
        Animation animOut = AnimationUtils.loadAnimation(mContext, R.anim.anim_out);
        if (isSetAnimDuration)
            animOut.setDuration(animDuration);
        setOutAnimation(animOut);
    }

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

1.2 Introduction in Layout File

 <com.veyron.www.viewflipperdemo.View.UpView
            android:id="@+id/upview1"
            android:layout_marginLeft="20dp"
            android:layout_width="match_parent"
            android:layout_toRightOf="@+id/tbtv"
            android:layout_centerVertical="true"
            android:layout_marginTop="10dp"
            android:layout_height="match_parent">
            </com.veyron.www.viewflipperdemo.View.UpView>

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

<ViewFlipper
            android:id="@+id/upview2"
            android:autoStart="true"
            android:background="#fff"
            android:inAnimation="@anim/anim_in"
            android:outAnimation="@anim/anim_out"
            android:flipInterval="3000">
            </ViewFlipper>

Specific implementation of the above two ways

MainActivity.java

/**
 * 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

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            initdata();
            initView();
        }

    private void initView() {
        //Self defined
        upview1 = (UpView) findViewById(R.id.upview1);
        setView();
        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() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(MainActivity.this,  data.get(position).toString(), Toast.LENGTH_SHORT).show();
                    Log.d("TAG",data.get(position).toString());
                    /**
                     * Add business code
                     */
                }
            });
            /**
             * Set up monitoring
             */
            moreView.findViewById(R.id.rl2).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(MainActivity.this,  data.get(position+1).toString(), Toast.LENGTH_SHORT).show();
                    Log.d("TAG",data.get(position+1).toString());
                    /**
                     * Add business code
                     */
                }
            });


            //Assignment of controls
            tv1.setText(data.get(i).toString());
            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 {
                moreView.findViewById(R.id.rl2).setVisibility(View.GONE);
            }

            //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:

ViewFlipperDemo

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