Android can scroll up and down using TextView ViewFlipper, mimicking Taobao headlines by vertically scrolling AD bars

preface

The project requires an imitation of Taobao today’s toutiao turn effect

Take a look at the original picture of Taobao

Do you feel like you see this all the time? What today’s headlines? Netease’s headlines are all like this. So how does it work? Today I did it in the project

The first way to implement this is the Android native component ViewFlipper, which I just looked at the effect and then saw the custom View method, so I changed the native method and felt that the custom method is easier. Here is the code for reference

Custom View class

public class UPMarqueeView extends ViewFlipper { private Context mContext; private boolean isSetAnimDuration = false; private int interval = 3000; /** * private int animDuration = 800; 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); } / circulating scrolling the View will be * * * * * @ param array views * / public void setViews (List < View > views) {if (views = = null | | views. The size () = = 0) return; removeAllViews(); for (int i = 0; i < views.size(); i++) { addView(views.get(i)); } startFlipping(); }}Copy the code

Code implementation

private UPMarqueeView mUPMarqueeView; // Initialize List<String> data = new ArrayList<>(); // List<View> views = new ArrayList<>(); // single view //onCreate(); initUPMarqueeView(); // Initialize the custom ViewCopy the code

methods

private void initUPMarqueeView() { mUPMarqueeView = findViewById(R.id.view_flipper); // Initialize the home page headline findViewById(r.i.iv_headline).setonClickListener (this); mUPMarqueeView.setOnClickListener(this); initData(); initView(); }Copy the code

Initialize the View

private void initView() {
        setView();
        mUPMarqueeView.setViews(views);
    }
Copy the code

Initialization data is just dead data right now because we don’t have a write interface in the background yet and we need to get the printed data from the background

Private void initData() {data = new ArrayList<>(); Data. Add (" in midsummer, why litchi can not be eaten on an empty stomach?" ); Data. Add (" Drink your tea at your age, and never drink it wrong!" ); Data. Add (" In winter, why can't grapes be eaten on an empty stomach?" ); Data. Add (" what age to drink what plain boiled water, do not drink wrong!" ); }Copy the code

setView

private void setView() { for (int i = 0; i < data.size(); i = i + 2) { final int position = i+1; LinearLayout moreView = (LinearLayout) LayoutInflater. From (getContext()).inflate (R.layout.item_headline_advertisement, null); TextView mTvTitle1 = moreview.findViewById (R.id.first_headline_content); TextView mTvTitle2 = moreView.findViewById(R.id.second_headline_content); Moreview.findviewbyid (r.id.first_headline).setonClickListener (new OnClickListener() {@override Public void onClick(View View) {ToastUtils. ShowShort (getContext(), position + "you click" + data.get(position)); }}); SetOnClickListener (new OnClickListener() {@override public void key {// moreview.findViewById (r.id.econd_headline).setonClickListener (new OnClickListener() {@override public void key OnClick (View View) {toastutils.showshort (getContext(), position + "you clicked" + data.get(position)); }}); Mtvtitle1.settext (data.get(I)); mtvtitle1.settext (data.get(I)); Mtvtitle2.settext (data.get(I + 1)); if (data.size() > I + 1) {// If (data.size() > I + 1) {mtvtitle2.settext (data.get(I + 1)); } else { moreView.findViewById(R.id.second_headline).setVisibility(View.GONE); } // Add views.add(moreView); }}Copy the code

The renderings are as follows

Layout resource

<? The XML version = "1.0" encoding = "utf-8"? > <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/title_bg"> <ImageView android:id="@+id/iv_headline" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="20dp" android:layout_marginLeft="24dp" android:layout_marginStart="24dp" android:layout_marginTop="16dp" android:src="@drawable/logo_title" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" /> <com.jxty.app.garden.main.headline.UPMarqueeView android:id="@+id/view_flipper" android:layout_width="250dp" android:layout_height="48dp" android:layout_marginLeft="8dp" android:layout_marginStart="8dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toRightOf="@+id/iv_headline" app:layout_constraintTop_toTopOf="parent"/> </android.support.constraint.ConstraintLayout>Copy the code

<? The XML version = "1.0" encoding = "utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <RelativeLayout android:id="@+id/first_headline" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/title_tv1" android:layout_width="34dp" android:layout_height="18dp" android:background="@drawable/home_headline_tag_bg" Android :gravity="center" Android :text=" @color/colorGreenText" Android :textSize="14sp"/> <TextView  android:id="@+id/first_headline_content" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="8dp" android:layout_marginStart="8dp" android:layout_toEndOf="@+id/title_tv1" android:layout_toRightOf="@+id/title_tv1" android:ellipsize="end" android:maxLines="1" android:minHeight="18dp" android:textColor="@color/colorNormalText" android:textSize="14sp"/> </RelativeLayout> <RelativeLayout android:id="@+id/second_headline" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="5dp"> <TextView android:id="@+id/title_tv2" android:layout_width="34dp" android:layout_height="18dp" android:background="@drawable/home_headline_tag_bg" android:gravity="center" Android :text=" @color/colorGreenText" Android :textSize="14sp"/> <TextView android:id="@+id/second_headline_content" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="8dp" android:layout_marginStart="8dp" android:layout_toEndOf="@+id/title_tv2" android:layout_toRightOf="@+id/title_tv2" android:ellipsize="end" android:maxLines="1" android:textColor="@color/colorNormalText" android:textSize="14sp"/> </RelativeLayout> </LinearLayout>Copy the code

Share with you