仿淘宝首页的淘宝头条垂直滚动
这篇文章主要为大家详细介绍了Android仿淘宝首页头条View垂直滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
之前本来是打算做TextView垂直向上滚动的，后来发现一位大神做得很好，https://github.com/sfsheng0322/MarqueeView 孙福生大神，然后自己要用到多个View向上滚动，也就是类似淘宝首页头条的那种滚动，所以就按照那个思路想了系啊，可以把View拿来滚动，这样可以自己随意的修改View里面的内容，还比较简单一些。所以这个整个思路就是把View就行循环滚动。
看一下循环滚动View的内容咋写的吧，非常简单。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
package
com.dreamlive.upmarqueeview;
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 extendsViewFlipper {
privateContext mContext;
privateboolean
isSetAnimDuration =false;
privateint
interval = 2000;
/**
* 动画时间
*/
privateint
animDuration = 500;
publicUPMarqueeView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs,0);
}
privatevoid
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
*/
publicvoid
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的内容：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
package
com.dreamlive.upmarqueeviewdemo;
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 extendsAppCompatActivity {
privateUPMarqueeView upview1;
List<String> data =new
ArrayList<>();
List<View> views =new
ArrayList<>();
@Override
protectedvoid
onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initParam();
initdata();
initView();
}
/**
* 实例化控件
*/
privatevoid
initParam() {
upview1 = (UPMarqueeView) findViewById(R.id.upview1);
}
/**
* 初始化界面程序
*/
privatevoid
initView() {
setView();
upview1.setViews(views);
}
/**
* 初始化需要循环的View
* 为了灵活的使用滚动的View，所以把滚动的内容让用户自定义
* 假如滚动的是三条或者一条，或者是其他，只需要把对应的布局，和这个方法稍微改改就可以了，
*/
privatevoid
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);
}
}
/**
* 初始化数据
*/
privatevoid
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 欢迎star，fork，提pr，issues。
效果图：