“This is the 10th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Android animation generally uses animation, which includes three types: View animation, Drawable animation, Property animation. Property animation is easier to use, you can focus on it. Since it is to roll certainly want to press international roll standard — up pan!

Realize the principle of

Translate the animation up using translate animation translate

Create a new folder anim under res –

Creating an animation file

anim_marquee_in.xml

      
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromYDelta="100%p"
        android:toYDelta="0"/>
    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"/>
</set>
Copy the code

anim_marquee_out.xml

      
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromYDelta="0"
        android:toYDelta="-100%p"/>
    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"/>
</set>
Copy the code

Now that the animation file is ready, we can customize the view

First, let’s take a lookViewFlipper

ViewFlipper is a multi-page management control that comes with Android and can play automatically! Unlike a ViewPager, which is page by page, a ViewFlipper is layer by layer, which, like a ViewPager, is often used to implement a lead-in page after entering an application, or for image rotation.

Android :inAnimation // Sets the animation used by the View or ImageView when entering the screen android:outAnimation // Sets the animation used by the View or ImageView when exiting the screen Android :flipInterval // Set the time interval for switching between Views or imageViewsCopy the code

Common methods:

SetOutAnimation: Sets the animation to be used when the View or ImageView exits the screen. ShowNext: Call this method to display the next View or ImageView in the ViewFlipper showPrevious: Call this method to display the previous View or ImageView in the ViewFlipper setFilpInterval: StartFlipping: use the interval set above to startFlipping all views or imageviews, and the switching cycles to stopFlipping View or ImageViewCopy the code

Let’s rewrite the ViewFlipper

public class UPMarqueeView extends ViewFlipper
Copy the code

The complete code

There are comments in the code

/** * Created by JIULANG */
public class UPMarqueeView extends ViewFlipper {
    private Context mContext;
    private boolean isSetAnimDuration = false;
    private int interval = 3000;// Interval time
    /** ** animation time */
    private int animDuration = 500;

    public UPMarqueeView(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);
        Animation animIn = AnimationUtils.loadAnimation(mContext, R.anim.anim_marquee_in);
        if (isSetAnimDuration) animIn.setDuration(animDuration);
        setInAnimation(animIn);
        Animation animOut = AnimationUtils.loadAnimation(mContext, R.anim.anim_marquee_out);
        if (isSetAnimDuration) animOut.setDuration(animDuration);
        setOutAnimation(animOut);
    }


    /** * Sets the View array for loop scrolling **@param views
     */
    public void setViews(final List<View> views) {
        if (views == null || views.size() == 0) return;
        removeAllViews();
        // Iterate over all entries
        for ( int i = 0; i < views.size(); i++) {
            final int position=i;
            // Set the listening callback
            views.get(i).setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                // Bind the click event
                    if(onItemClickListener ! =null) { onItemClickListener.onItemClick(position, views.get(position)); }}}); ViewGroup viewGroup = (ViewGroup) views.get(i).getParent();if(viewGroup ! =null) {
                viewGroup.removeAllViews();
            }
            addView(views.get(i));
        }
        startFlipping();
    }

    /** * click */
    private OnItemClickListener onItemClickListener;

    /** * Set the listening interface *@param onItemClickListener
     */
    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        this.onItemClickListener = onItemClickListener;
    }

    /** * item_view interface */
    public interface OnItemClickListener {
        void onItemClick(int position, View view); }}Copy the code

Layout of entries

      
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="8dp">

    <ImageView
        android:id="@+id/iv_cup"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:src="@drawable/ic_vip5"
        android:paddingTop="9dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"/>


    <TextView
        android:id="@+id/name_type"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:textSize="16sp"
        android:textStyle="bold"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/iv_cup"/>

    <TextView
        android:id="@+id/rank_type"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:layout_marginLeft="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/name_type"/>

    <TextView
        android:id="@+id/no_data"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="hi"
        android:textColor="@color/black"
        android:textSize="14sp"
        android:visibility="gone"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>


    <ImageView
        android:id="@+id/iv_portrait"
        android:layout_width="26dp"
        android:layout_height="26dp"
        android:src="@drawable/ic_my"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

Method of use

List<View> mViewList = new ArrayList<>();
UPMarqueeView mUPMarqueeView = findViewById(R.id.upMarqueeView);

// Simulate loading data
for (int i = 0; i < 9; i++) {
    final View rankView = LayoutInflater.from(this).inflate(R.layout.view_main_rank, mUPMarqueeView, false);
    TextView nameType = rankView.findViewById(R.id.name_type);
    nameType.setText("Nine Wolf");
    TextView rankType = rankView.findViewById(R.id.rank_type);
    rankType.setText("Give it a thumbs up!);
    mViewList.add(rankView);
}
mUPMarqueeView.setViews(mViewList);
Copy the code

rendering