仿淘宝首页的淘宝头条View垂直滚动

Posted 2022-11-30 changhaiSmile

之前本来是打算做TextView垂直向上滚动的，后来发现一位大神做得很好，https://github.com/sfsheng0322/MarqueeView 孙福生大神，然后自己要用到多个View向上滚动，也就是类似淘宝首页头条的那种滚动，所以就按照那个思路想了系啊，可以把View拿来滚动，这样可以自己随意的修改View里面的内容，还比较简单一些。所以这个整个思路就是把View就行循环滚动。

看一下循环滚动View的内容咋写的吧，非常简单。

import android.content.Context;  
import android.util.AttributeSet;  
import android.view.View;  
import android.view.animation.Animation;  
import android.view.animation.AnimationUtils;  
import android.widget.ViewFlipper;  
  
import java.util.List;  
  
/**  
 * 仿淘宝首页的 淘宝头条滚动的自定义View  
 *  
 * Created by dreamlive on 2016/7/20.  
 */  
public class UPMarqueeView extends ViewFlipper   
  
    private Context mContext;  
    private boolean isSetAnimDuration = false;  
    private int interval = 2000;  
    /**  
     * 动画时间  
     */  
    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);  
      
  
  
    /**  
     * 设置循环滚动的View数组  
     *  
     * @param views  
     */  
    public void setViews(List<View> views)   
        if (views == null || views.size() == 0) return;  
        removeAllViews();  
        for (int i = 0; i < views.size(); i++)   
            addView(views.get(i));  
          
        startFlipping();  
      
  
  
  

MainActivity的内容：

import android.os.Bundle;  
import android.support.v7.app.AppCompatActivity;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.widget.LinearLayout;  
import android.widget.TextView;  
  
import com.dreamlive.upmarqueeview.UPMarqueeView;  
  
import java.util.ArrayList;  
import java.util.List;  
  
/**  
 * 仿淘宝首页的 淘宝头条滚动的自定义View  
 * Created by dreamlive on 2016/7/20.  
 */  
public class MainActivity extends AppCompatActivity   
  
  
    private UPMarqueeView upview1;  
    List<String> data = new ArrayList<>();  
    List<View> views = new ArrayList<>();  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState)   
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        initParam();  
        initdata();  
        initView();  
      
  
    /**  
     * 实例化控件  
     */  
    private void initParam()   
        upview1 = (UPMarqueeView) findViewById(R.id.upview1);  
      
  
    /**  
     * 初始化界面程序  
     */  
    private void initView()   
        setView();  
        upview1.setViews(views);  
      
  
    /**  
     * 初始化需要循环的View  
     * 为了灵活的使用滚动的View，所以把滚动的内容让用户自定义  
     * 假如滚动的是三条或者一条，或者是其他，只需要把对应的布局，和这个方法稍微改改就可以了，  
     */  
    private void setView()   
        for (int i = 0; i < data.size(); i = i + 2)   
            //设置滚动的单个布局  
            LinearLayout moreView = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.item_view, null);  
            //初始化布局的控件  
            TextView tv1 = (TextView) moreView.findViewById(R.id.tv1);  
            TextView tv2 = (TextView) moreView.findViewById(R.id.tv2);  
            //进行对控件赋值  
            tv1.setText(data.get(i).toString());  
            if (data.size() > i + 1)   
                //因为淘宝那儿是两条数据，但是当数据是奇数时就不需要赋值第二个，所以加了一个判断，还应该把第二个布局给隐藏掉  
                tv2.setText(data.get(i + 1).toString());  
            else   
                moreView.findViewById(R.id.rl2).setVisibility(View.GONE);  
              
  
            //添加到循环滚动数组里面去  
            views.add(moreView);  
          
      
  
    /**  
     * 初始化数据  
     */  
    private void initdata()   
        data = new ArrayList<>();  
        data.add("家人给2岁孩子喝这个，孩子智力倒退10岁!!!");  
        data.add("iPhone8最感人变化成真，必须买买买买!!!!");  
        data.add("简直是白菜价！日本玩家33万甩卖15万张游戏王卡");  
        data.add("iPhone7价格曝光了！看完感觉我的腰子有点疼...");  
        data.add("主人内疚逃命时没带够，回废墟狂挖30小时！");  
//        data.add("竟不是小米乐视！看水抢了骁龙821首发了！！！");  
  
      
  

github地址：https://github.com/dreamlivemeng/UpMarqueeTextView-master