Android仿淘宝头条滚动广告条
下载地址：点击打开链接
代码：
private ViewFlipper vf;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
vf = findViewById(R.id.vf);
vf.setFlipInterval(2000);//设置时间间隔
setData();
}
String datas[] = {"对Kotlin的第一印象"
,"Android.Kotlin的杀手锏"
,"Kotlin很简洁"
,"Kotlin很擅长“拿来主义"
,"其实我也就是走马观花"};
private void setData() {
for (int i = 0; i < datas.length; i++) {
TextView tv = new TextView(this);
tv.setText(datas[i]);
vf.addView(tv); //把需要滚动布局添加到ViewFlipper
}
vf.startFlipping(); //开始滚动
}
XML布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.admin.viewflipperdemo.MainActivity"> <ViewFlipper
android:id="@+id/vf"
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="50dp"
/> </RelativeLayout>
只不过没有动画的效果，下面我再给它加上从下面滑进来和向上滑出去的动画；
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--进场动画-->
<translate
android:duration="300"
android:fromYDelta="100%p"
android:toYDelta="0"/>
<alpha
android:duration="500"
android:fromAlpha="0.0"
android:toAlpha="1.0"/>
</set>
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--滑出动画-->
<translate
android:duration="400"
android:fromYDelta="0"
android:toYDelta="-100%p"/>
<alpha
android:duration="500"
android:fromAlpha="1.0"
android:toAlpha="0.0"/>
</set>
vf.setInAnimation(this,R.anim.in); //设置动画效果
vf.setOutAnimation(this,R.anim.out);
哈哈，这下效果就很像了；
不过淘宝是双条的，这个怎么实现呢？
private ViewFlipper vf;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
vf = findViewById(R.id.vf);
vf.setFlipInterval(2000);//设置时间间隔
vf.setInAnimation(this,R.anim.in);
vf.setOutAnimation(this,R.anim.out);
setData();
}
String datas[] = {"鹿皮绒高腰小西装裤子女九分阔腿裤侧边条纹"
,"显瘦休闲运动裤女春秋薄款直筒长裤宽松卫裤"
,"春季浅色格子裤女九分裤松紧腰捆绳宽松显瘦千鸟格哈伦休闲裤"
,"秋冬新款宽松毛呢小脚哈伦裤休闲裤女显瘦呢子长裤加厚款大码潮"
,"春秋季新款心型碎花松紧腰长袖中长款连衣裙女宽松显瘦波点裙"
,"运动服套装女春秋时尚2018新款修身韩版卫衣春季休闲跑步两件套潮"
,"职业装女装套装时尚西装连衣裙ol气质工作服女春秋正装套装裙"
,"秋季卫衣女韩版学生百搭上衣宽松显瘦连帽2017时尚新款长袖外套潮"
,"2鹿皮绒高腰小西装裤子女九分阔腿裤侧边条纹"};
private void setData() {
for (int i = 0; i < datas.length; i= i+2) { //一次遍历两条数据
View v = View.inflate(this,R.layout.item,null);
TextView tv1 = v.findViewById(R.id.tv1);
TextView tv2 = v.findViewById(R.id.tv2);
tv1.setText(datas[i]);
if (datas.length > i+1){
tv2.setText(datas[i+1]);
}else {
tv2.setVisibility(View.GONE);
}
vf.addView(v); //把需要滚动布局添加到ViewFlipper
}
vf.startFlipping(); //开始滚动
}
布局文件：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools">
<ImageView
android:id="@+id/iv"
android:layout_width="45dp"
android:layout_height="45dp"
android:src="@mipmap/icon"
/>
<TextView
android:id="@+id/tv1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="@string/app_name"
android:textColor="#fd6300"
android:lines="1"
android:layout_toRightOf="@id/iv"
android:paddingLeft="12dp"
/>
<TextView
android:id="@+id/tv2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="@string/app_name"
android:textColor="#fd6300"
android:layout_toRightOf="@id/iv"
android:paddingLeft="12dp"
android:lines="1"
android:layout_below="@id/tv1"
android:layout_marginTop="8dp"
/> </RelativeLayout>
很容易看懂的，轻松完成；
属性介绍:
android:autoStart： 设置自动加载下一个View
android:flipInterval：设置View之间切换的时间间隔
android:inAnimation： 设置切换View的进入动画
android:outAnimation：设置切换View的退出动画
方法介绍：
isFlipping： 判断View切换是否正在进行
setFilpInterval：设置View之间切换的时间间隔
startFlipping： 开始View的切换，而且会循环进行
stopFlipping： 停止View的切换
setOutAnimation：设置切换View的退出动画
setInAnimation： 设置切换View的进入动画
showNext： 显示ViewFlipper里的下一个View
showPrevious： 显示ViewFlipper里的上一个View
随便抽取一下，方便使用：
public class UpView extends ViewFlipper {
private Context content;
public UpView(Context context) {
super(context);
init(context);
}
private int Interval = 3000;
public UpView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
private void init(Context context) {
this.content = context;
setFlipInterval(Interval);//设置时间间隔
setInAnimation(context,R.anim.in);
setOutAnimation(context,R.anim.out);
}
public void setInterval(int i){
Interval = i;
}
/**
* 设置循环滚动的View数组
*/
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 finalposition=i;
//设置监听回调
views.get(i).setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (onItemClickListener != null) {
onItemClickListener.onItemClick(finalposition, views.get(finalposition));
}
}
});
addView(views.get(i));
}
startFlipping();
}
private OnItemClickListener onItemClickListener;
public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
this.onItemClickListener = onItemClickListener;
}
public interface OnItemClickListener {
void onItemClick(int position, View view);
}
}
使用：
public class MainActivity extends AppCompatActivity implements UpView.OnItemClickListener {
private UpView vf;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
vf = findViewById(R.id.vf);
setData();
vf.setOnItemClickListener(this);
}
String datas[] = {
"鹿皮绒高腰小西装裤子女九分阔腿裤侧边条纹"
,"显瘦休闲运动裤女春秋薄款直筒长裤宽松卫裤"
,"春季浅色格子裤女九分裤松紧腰捆绳宽松显瘦千鸟格哈伦休闲裤"
,"秋冬新款宽松毛呢小脚哈伦裤休闲裤女显瘦呢子长裤加厚款大码潮"
,"春秋季新款心型碎花松紧腰长袖中长款连衣裙女宽松显瘦波点裙"
,"运动服套装女春秋时尚2018新款修身韩版卫衣春季休闲跑步两件套潮"
,"职业装女装套装时尚西装连衣裙ol气质工作服女春秋正装套装裙"
,"秋季卫衣女韩版学生百搭上衣宽松显瘦连帽2017时尚新款长袖外套潮"};
private void setData() {
List<View> views = new ArrayList<>();
for (int i = 0; i < datas.length; i= i+2) { //一次遍历两条数据
View v = View.inflate(this,R.layout.item,null);
TextView tv1 = v.findViewById(R.id.tv1);
TextView tv2 = v.findViewById(R.id.tv2);
tv1.setText(datas[i]);
if (datas.length > i+1){
tv2.setText(datas[i+1]);
}else {
tv2.setVisibility(View.GONE);
}
views.add(v);
}
vf.setViews(views);
}
@Override
public void onItemClick(int position, View view) {
Log.i("TAG",position+"");
}
}
Android仿淘宝头条滚动广告条的更多相关文章
- Android 仿淘宝头条竖直跑马灯式新闻标题及“分页思想
在淘宝App的首页中间位置,有一块小小的地方在不知疲倦地循坏滚动着头条标题(见下图的红框区域),这样的设计无疑能够在有限的手机屏幕上展示更丰富的内容.而实现这一功能需要用到的控件就是我在上一篇文章中提 ...
- JS仿淘宝详情页菜单条智能定位效果
类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...
- 【angularjs】使用angularjs模拟淘宝首页-淘宝头条滚动效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Android仿淘宝继续上拉进入商品详情页的效果，使用双Fragment动画切换；
仿淘宝继续上拉进入商品详情页的效果,双Fragment实现: 动画效果: slide_above_in.xml <?xml version="1.0" encoding=&q ...
- Android -- 仿淘宝广告条滚动
1,在赶项目的时候我们经常会实现下面这个功能,及添加滚动条广告广播,先看一下淘宝的效果 2,这次实现效果主要使用Android自带的ViewFlipper控件,先来看一下我们的它的基本属性和基本方法吧 ...
- Android仿淘宝购物车demo
夏的热情渐渐退去,秋如期而至,丰收的季节,小编继续着实习之路,走着走着,就走到了购物车,逛过淘宝或者是京东的小伙伴都知道购物车里面的宝贝可不止一件,对于爱购物的姑娘来说,购物车里面的商品恐怕是爆满,添 ...
- Android 仿淘宝属性标签页
直接看效果图相信这样的效果很多,我之前在网上找了很久没找到自己想要的! <?xml version="1.0" encoding="utf-8"?> ...
- 自定义控件 淘宝头条【ViewFlipper】
简易版 代码 ); tv.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Acti ...
- Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片
Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...
随机推荐
- 我发起了一个 .Net 平台上的 直播平台 开源项目 BalaBala
直播平台, 需要解决的 技术点 是 2 个: 1 直播数据 的 传输 和 在 客户端 的 播放 2 大并发 关于 网络通信, 数据传输, 可以参考 <利用 MessageRPC 和 Shar ...
- ML（5）——神经网络2（BP反向传播）
上一章的神经网络实际上是前馈神经网络(feedforward neural network),也叫多层感知机(multilayer perceptron,MLP).具体来说,每层神经元与下一层神经元全 ...
- 查看Linux系统版本信息（转）
一.查看Linux内核版本命令(两种方法): 1.cat /proc/version [root@S-CentOS home]# cat /proc/version Linux version 2.6 ...
- py-day1-4 python基本数据类型2
# replace 替换 text = 'xiaomafafafahaoyunlianlian' v = text.replace('fa','shun') x = text.replace('fa' ...
- ML: 降维算法-LDA
判别分析(discriminant analysis)是一种分类技术.它通过一个已知类别的“训练样本”来建立判别准则,并通过预测变量来为未知类别的数据进行分类.判别分析的方法大体上有三类,即Fishe ...
- js for dwg viewer in B/S
https://github.com/autodesk-forge/ https://sharecad.org/zh/DWGOnlinePlugin http://3d-viewers.com/lic ...
- 【巷子】---react-redux---【react】
一.Redux与组件 react-redux是一个第三方插件使我们在react上更方便的来使用redux这个数据架构 React-Redux提供connect方法,用于从UI组件生成容器组件,conn ...
- git 强行pull并覆盖本地文件
git 强行pull并覆盖本地文件 git fetch --all git reset --hard origin/master git pull
- 客户端负载均衡Ribbon之一：Spring Cloud Netflix负载均衡组件Ribbon介绍
Netflix:['netfliːks] ribbon:英[ˈrɪbən]美[ˈrɪbən]n. 带; 绶带; (打印机的) 色带; 带状物;v. 把…撕成条带; 用缎带装饰; 形成带状; L ...
- Java NIO系列教程（三） Channel之Socket通道
目录: <Java NIO系列教程(二) Channel> <Java NIO系列教程(三) Channel之Socket通道> 在<Java NIO系列教程(二) Ch ...