Android仿淘宝最新向上滚动广告条，给后辈的一点建议

于 2022-02-05 11:21:41 发布
阅读量190 收藏
点赞数
分类专栏： 程序员 文章标签： 架构 移动开发 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_66264169/article/details/122788902
版权
本文介绍了如何在Android中创建一个仿淘宝的自动向上滚动广告条，使用Glide加载图片，并通过Otto进行消息传递。详细讲解了实现滚动效果的代码逻辑，包括布局设计、图片控件创建、动画设置以及使用Otto进行组件间通信。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

android:layout_gravity=“center_vertical”

android:ellipsize=“end”

android:gravity=“center_vertical”

android:lines=“2”

android:text="@string/app_name"

android:textColor="#2F4F4F"

android:textSize=“16sp” />

  • 创建自动滚动的图片控件

引入图片加载框架：

compile ‘com.github.bumptech.glide:glide:3.7.0’

package tsou.cn.loopview.view;

import android.content.Context;

import android.util.AttributeSet;

import android.view.LayoutInflater;

import android.view.View;

import android.view.animation.Animation;

import android.view.animation.DecelerateInterpolator;

import android.view.animation.TranslateAnimation;

import android.widget.FrameLayout;

import android.widget.ImageView;

import com.bumptech.glide.Glide;

import java.util.List;

import tsou.cn.loopview.R;

import tsou.cn.loopview.bean.LooperBean;

public class LooperImageView extends FrameLayout {

private List tipList;

private int curTipIndex = 0;

private long lastTimeMillis;

private static final int ANIM_DELAYED_MILLIONS = 3 * 1000;

/**

  • 动画持续时长

*/

private static final int ANIM_DURATION = 1 * 1000;

private View tv_tip_out, tv_tip_in;

private Animation anim_out, anim_in;

private int nowPosition;

public LooperImageView(Context context) {

super(context);

initTipFrame();

initAnimation();

}

public LooperImageView(Context context, AttributeSet attrs) {

super(context, attrs);

initTipFrame();

initAnimation();

}

public LooperImageView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

initTipFrame();

initAnimation();

}

private void initTipFrame() {

tv_tip_out = newView();

tv_tip_in = newView();

addView(tv_tip_in);

addView(tv_tip_out);

}

private View newView() {

View inflate = LayoutInflater.from(getContext()).inflate(R.layout.item_looper_image, null);

return inflate;

}

private void initAnimation() {

anim_out = newAnimation(0, -1);

anim_in = newAnimation(1, 0);

anim_in.setAnimationListener(new Animation.AnimationListener() {

@Override

public void onAnimationStart(Animation animation) {

}

@Override

public void onAnimationRepeat(Animation animation) {

}

@Override

public void onAnimationEnd(Animation animation) {

updateTipAndPlayAnimationWithCheck();

}

});

}

private Animation newAnimation(float fromYValue, float toYValue) {

Animation anim = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0,

Animation.RELATIVE_TO_SELF, fromYValue, Animation.RELATIVE_TO_SELF, toYValue);

anim.setDuration(ANIM_DURATION);

anim.setStartOffset(ANIM_DELAYED_MILLIONS);

anim.setInterpolator(new DecelerateInterpolator());

return anim;

}

private void updateTipAndPlayAnimationWithCheck() {

if (System.currentTimeMillis() - lastTimeMillis < 1000) {

return;

}

lastTimeMillis = System.currentTimeMillis();

updateTipAndPlayAnimation();

}

private void updateTipAndPlayAnimation() {

if (curTipIndex % 2 == 0) {

updateTip(tv_tip_out);

tv_tip_in.startAnimation(anim_out);

tv_tip_out.startAnimation(anim_in);

this.bringChildToFront(tv_tip_in);

} else {

updateTip(tv_tip_in);

tv_tip_out.startAnimation(anim_out);

tv_tip_in.startAnimation(anim_in);

this.bringChildToFront(tv_tip_out);

}

}

private void updateTip(View tipView) {

final ImageView imageView = (ImageView) tipView.findViewById(R.id.image_view);

Glide.with(tipView.getContext())

.load(tipList.get(curTipIndex % tipList.size()).getUrl())

.placeholder(R.mipmap.app_loading_pic)

.error(R.mipmap.app_loading_pic)

.into(imageView);

getNextTip();

}

/**

  • 获取下一条消息

  • @return

*/

private LooperBean getNextTip() {

if (isListEmpty(tipList)) return null;

int nextPostion = curTipIndex++ % tipList.size();

if (tipList.size() == 1) {

setNowPosition(0);

} else if (nextPostion == 0) {

setNowPosition(tipList.size() - 1);

} else {

setNowPosition(nextPostion - 1);

}

return tipList.get(nextPostion);

}

public boolean isListEmpty(List list) {

return list == null || list.isEmpty();

}

public void setTipList(List tipList, int index) {

this.tipList = tipList;

curTipIndex = index;

updateTip(tv_tip_out);

updateTipAndPlayAnimation();

}

private void setNowPosition(int position) {

this.nowPosition = position;

}

private int getNowPosition() {

return nowPosition;

}

public int getNowTip() {

if (isListEmpty(tipList)) return -1;

return getNowPosition();

}

}

  • 滚动的图片布局
<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android=“http://schemas.android.com/apk/res/android”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:orientation=“horizontal”>

<ImageView

android:id="@+id/image_view"

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_gravity=“center_vertical”

android:scaleType=“fitXY”

android:src="@mipmap/app_loading_pic" />

  • 主页面布局
<?xml version="1.0" encoding="utf-8"?>

<FrameLayout 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=“tsou.cn.loopview.MainActivity”>

<RelativeLayout

android:id="@+id/rl_marquee_view"

android:layout_width=“match_parent”

android:layout_height=“80dp”

android:background="#ffffff"

android:padding=“5dp”>

<ImageView

android:id="@+id/image"

android:layout_width=“80dp”

android:layout_height=“80dp”

android:src="@mipmap/home_message" />

<tsou.cn.loopview.view.LooperImageView

android:id="@+id/marquee_image_view"

android:layout_width=“80dp”

android:layout_height=“match_parent”

android:layout_alignParentRight=“true”

android:layout_marginLeft=“5dp”

android:background="#fff" />

<tsou.cn.loopview.view.LooperTextView

android:id="@+id/marquee_text_view"

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:layout_marginLeft=“5dp”

android:layout_toLeftOf="@id/marquee_image_view"

android:layout_toRightOf="@id/image"

android:background="#fff" />

  • 实现滚动效果

package tsou.cn.loopview;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.view.View;

import android.widget.RelativeLayout;

import com.squareup.otto.Subscribe;

import java.util.ArrayList;

import java.util.List;

import tsou.cn.loopview.bean.LooperBean;

import tsou.cn.loopview.otto.AppBus;

import tsou.cn.loopview.otto.bean.Looper;

import tsou.cn.loopview.util.UIUtils;

import tsou.cn.loopview.view.LooperImageView;

import tsou.cn.loopview.view.LooperTextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

private List looperBeenList;

private LooperImageView mMarqueeImageView;

private LooperTextView mMarqueeTextView;

private RelativeLayout mRlMarqueeView;

private int position;

@Override

protected void onDestroy() {

super.onDestroy();

AppBus.getInstance().unregister(this);

}

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

AppBus.getInstance().register(this);

initView();

looperBeenList = generateTips();

}

@Override

public void onStart() {

super.onStart();

mMarqueeImageView.setTipList(looperBeenList, position);

mMarqueeTextView.setTipList(looperBeenList, position);

}

@Subscribe

public void setPostion(Looper looper) {

this.position = looper.getPosition();

}

private void initView() {

mMarqueeImageView = (LooperImageView) findViewById(R.id.marquee_image_view);

mMarqueeTextView = (LooperTextView) findViewById(R.id.marquee_text_view);

mRlMarqueeView = (RelativeLayout) findViewById(R.id.rl_marquee_view);

mRlMarqueeView.setOnClickListener(this);

}

private List generateTips() {

List tips = new ArrayList<>();

for (int i = 0; i < 10; i++) {

LooperBean looperBean = new LooperBean();

looperBean.setId(i);

looperBean.setName(“huangxiaoguo” + i);

looperBean.setUrl(“https://unsplash.it/200/200?random&” + i);

looperBean.setPath(“http://blog.youkuaiyun.com/huangxiaoguo1”);

tips.add(looperBean);

}

return tips;

}

@Override

public void onClick(View v) {

switch (v.getId()) {

default:

break;

case R.id.rl_marquee_view:

position = mMarqueeTextView.getNowTip();

UIUtils.showToast(String.valueOf(position));

if (position > -1) {

WebViewActivity.actionStart(this, looperBeenList.get(position).getPath());

}

break;

}

}

}

  • 使用otto进行消息传递

最后

针对Android程序员，我这边给大家整理了一些资料，包括不限于高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术；希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！

资料领取：点赞免费获取Android IOC架构设计

领取获取往期Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、混合式开发（ReactNative+Weex）全方面的Android进阶实践技术，群内还有技术大牛一起讨论交流解决问题。

WebViewActivity.actionStart(this, looperBeenList.get(position).getPath());

}

break;

}

}

}

  • 使用otto进行消息传递

最后

针对Android程序员，我这边给大家整理了一些资料，包括不限于高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术；希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！

资料领取：点赞免费获取Android IOC架构设计

领取获取往期Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、混合式开发（ReactNative+Weex）全方面的Android进阶实践技术，群内还有技术大牛一起讨论交流解决问题。

[外链图片转存中…(img-BOg9Sten-1644031284848)]

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值