效果图



效果图依次为图片广告,视频广告,引导界面。

系列文章目录导航

目录

1.实现分析

广告界面就是显示图片和视频,所以可以放一个图片控件,视频控件,然后跳过按钮,提示按钮,WiFi预加载提示都是放到最上层容器。

2.广告界面布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".component.ad.activity.AdActivity">
<!--图片广告-->
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop" /> <!--视频播放器
VideoView默认没法设置视频填充整个控件,所以不用他-->
<com.tencent.rtmp.ui.TXCloudVideoView
android:id="@+id/video"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" />
<!--/播放器--> <!--广告控制层-->
<RelativeLayout
android:id="@+id/ad_control"
android:layout_width="match_parent"
android:layout_height="match_parent"> <TextView
android:id="@+id/preload"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/padding_meddle"
android:layout_marginTop="@dimen/d50"
android:layout_marginBottom="@dimen/d50"
android:background="@drawable/shape_button_transparent_radius_small"
android:gravity="center"
android:padding="@dimen/d5"
android:text="@string/wifi_preload"
android:textColor="?attr/colorLightWhite"
android:textSize="@dimen/text_small"
android:visibility="gone" /> <!--跳过广告按钮-->
<TextView
android:id="@+id/skip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="@dimen/d50"
android:layout_marginRight="@dimen/padding_large"
android:layout_marginBottom="@dimen/d50"
android:background="@drawable/shape_button_transparent_radius_small"
android:gravity="center"
android:padding="@dimen/padding_meddle"
android:textColor="?attr/colorLightWhite"
android:textSize="@dimen/text_meddle"
app:cornerRadius="@dimen/d30"
tools:text="@string/skip_ad_count" />
<!--打开广告按钮-->
<TextView
android:id="@+id/primary"
android:layout_width="match_parent"
android:layout_height="@dimen/d60"
android:background="@drawable/shape_button_transparent_radius_large"
android:gravity="center"
android:text="@string/ad_click_tip"
android:textColor="?attr/colorLightWhite"
android:textSize="@dimen/text_large"
app:cornerRadius="@dimen/d30" />
</com.facebook.shimmer.ShimmerFrameLayout>
</RelativeLayout>
</RelativeLayout>

3.显示广告

广告数据是在首页提前缓存到本地了,目的是本地显示更快,因为广告界面本来就几秒钟,还要去网络请求数据,就很浪费时间。

@Override
protected void initDatum() {
super.initDatum(); //获取广告信息
data = sp.getSplashAd();
if (data == null) {
next();
return;
} //显示广告信息
show();
} private void show() {
File targetFile = FileUtil.adFile(getHostActivity(), data.getIcon());
if (!targetFile.exists()) {
//记录日志,因为正常来说,只要保存了,文件不能丢失
next();
return;
} SuperViewUtil.show(binding.adControl); switch (data.getStyle()) {
case Constant.VALUE0:
showImageAd(targetFile);
break;
case Constant.VALUE10:
showVideoAd(targetFile);
break;
}
} /**
* 显示视频广告
*
* @param data
*/
private void showVideoAd(File data) {
SuperViewUtil.show(binding.video);
SuperViewUtil.show(binding.preload); //在要用到的时候在初始化,更节省资源,当然播放器控件也可以在这里动态创建
//设置播放监听器 //创建 player 对象
player = new TXVodPlayer(getHostActivity()); //静音,当然也可以在界面上添加静音切换按钮
player.setMute(true); //关键 player 对象与界面 view
player.setPlayerView(binding.video); //设置播放监听器
player.setVodListener(this); //铺满
binding.video.setRenderMode(TXLiveConstants.RENDER_MODE_FULL_FILL_SCREEN); //开启硬件加速
player.enableHardwareDecode(true); player.startPlay(data.getAbsolutePath());
} /**
* 显示图片广告
*
* @param data
*/
private void showImageAd(File data) {
ImageUtil.showLocalImage(getHostActivity(), binding.image, data.getAbsolutePath()); startCountDown(5000);
}

跳过广告

跳过广告就是取消倒计时,直接进入下一个界面。

//跳过广告按钮
binding.skip.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//取消倒计时
cancelCountDown(); next();
}
});

点击广告

点击广告就是取消倒计时,进入主界面,然后再显示广告界面。


引导界面布局

//点击广告按钮
binding.primary.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//取消倒计时
cancelCountDown(); action = Constant.ACTION_AD; next();
}
});

引导界面逻辑

顶部左右滚动ViewPager容器,也可以使用ViewPager2,中间就是指示器,底部就是按钮。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ixuea="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"> <!--左右滚动控件-->
<androidx.viewpager.widget.ViewPager
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" /> ... <!--按钮容器-->
<LinearLayout
android:layout_marginBottom="@dimen/d30"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"> <!--占位控件-->
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" /> <!--登录注册按钮-->
<com.google.android.material.button.MaterialButton
android:id="@+id/login_or_register"
style="@style/SuperButton.Primary"
android:layout_width="wrap_content"
android:minWidth="@dimen/d130"
android:text="@string/login_or_register" /> <include layout="@layout/fill" /> <!--立即体验按钮-->
<com.google.android.material.button.MaterialButton
android:id="@+id/experience_now"
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
android:layout_width="wrap_content"
android:layout_height="@dimen/d55"
android:layout_centerVertical="true"
android:layout_marginHorizontal="@dimen/d5"
android:layout_toRightOf="@+id/select_image"
android:backgroundTint="?attr/colorLightWhite"
android:minWidth="@dimen/button_width_large"
android:text="@string/experience_now"
android:textColor="@color/black80"
android:textSize="@dimen/text_small"
ixuea:strokeColor="?attr/colorPrimary"
ixuea:strokeWidth="@dimen/d1" /> <include layout="@layout/fill" />
</LinearLayout>
</LinearLayout>

下载广告

不论是图片,还是视频都按照文件方式下,当然下载前还要判断是WiFi,以及没有下载才下载。

private void downloadAd(Ad data) {
if (SuperNetworkUtil.isWifiConnected(getHostActivity())) {
sp.setSplashAd(data); //判断文件是否存在,如果存在就不下载
File targetFile = FileUtil.adFile(getHostActivity(), data.getIcon());
if (targetFile.exists()) {
return;
} new Thread(
new Runnable() {
@Override
public void run() { try {
//FutureTarget会阻塞
//所以需要在子线程调用
FutureTarget<File> target = Glide.with(getHostActivity().getApplicationContext())
.asFile()
.load(ResourceUtil.resourceUri(data.getIcon()))
.submit(); //获取下载的文件
File file = target.get(); //将文件拷贝到我们需要的位置
FileUtils.moveFile(file, targetFile); } catch (Exception e) {
e.printStackTrace();
}
}
}
).start();
}
}

总结

不论是那个界面,都没有很难,但就像我们说的,写代码就像艺术,要写好细节还挺麻烦,例如:下载广告是否应该登录网络空闲时才下载,避免影响正常网络请求,同时下载下来后,要添加一定的机制,防止很容易的跳过广告等;如果要产生收益,大公司就是有自己的广告平台,中小型项目可以使用聚合SDK更方便。

2.Android高仿网易云音乐-引导界面和广告界面实现的更多相关文章

  1. Android高仿网易云音乐-启动界面实现和动态权限处理

    效果 实现分析 基本上没有什么难点,就是布局,然后显示用户协议对话框,动态处理权限,判断是否显示引导界面,是否显示广告界面等. 布局 <?xml version="1.0" ...

  2. 3.Android高仿网易云音乐-首页复杂发现界面布局和功能/RecyclerView复杂布局

    0.效果图 效果图依次为发现界面顶部,包含首页轮播图,水平滚动的按钮,推荐歌单:然后是发现界面推荐单曲,点击单曲就是直接进入播放界面:最后是全局播放控制条上点击播放列表按钮显示的播放列表弹窗. 1.整 ...

  3. 新鲜出炉高仿网易云音乐 APP

    我的引语 晚上好,我是吴小龙同学,我的公众号「一分钟GitHub」会推荐 GitHub 上好玩的项目,一分钟 get 一个优秀的开源项目,挖掘开源的价值,欢迎关注我. 项目中成长是最快的,如何成长,就 ...

  4. android仿网易云音乐引导页、仿书旗小说Flutter版、ViewPager切换、爆炸菜单、风扇叶片效果等源码

    Android精选源码 复现网易云音乐引导页效果 高仿书旗小说 Flutter版,支持iOS.Android Android Srt和Ass字幕解析器 Material Design ViewPage ...

  5. Android项目实战之高仿网易云音乐项目介绍

    这一节我们来讲解这个项目所用到的一些技术,以及一些实现的效果图,让大家对该项目有一个整体的认识,推荐大家收藏该文章,因为我们发布文章后会在该文章里面加入链接,这样大家找着就很方便. 目录 第1章 前期 ...

  6. Android项目实战之高仿网易云音乐创建项目和配置

    这一节我们来讲解创建项目:说道大家可能就会说了,创建项目还有谁不会啊,还需要讲吗,别急听我慢慢到来,肯定有你不知道的. 使用项目Android Studio创建项目我们这里就不讲解了,主要是讲解如何配 ...

  7. 《云阅》一个仿网易云音乐UI,使用Gank.Io及豆瓣Api开发的开源项目

    CloudReader 一款基于网易云音乐UI,使用GankIo及豆瓣api开发的符合Google Material Desgin阅读类的开源项目.项目采取的是Retrofit + RxJava + ...

  8. 瓣呀,一个基于豆瓣api仿网易云音乐的开源项目

    整体采用material design 风格,本人是网易云音乐的粉丝,所以界面模仿了网页云音乐,另外,项目中尽量使用了5.0之后的新控件. 项目整体采用mvp+rxjava+retrofit 框架,使 ...

  9. C# WPF 低仿网易云音乐(PC)Banner动画控件

    原文:C# WPF 低仿网易云音乐(PC)Banner动画控件 由于技术有限没能做到一模一样的动画,只是粗略地做了一下.动画有点生硬,还有就是没做出网易云音乐的立体感.代码非常简单粗暴,而且我也写有很 ...

随机推荐

  1. 『忘了再学』Shell基础 — 13、环境变量(一)

    目录 1.用户自定义的环境变量 (1)环境变量设置 (2)查询自定义环境变量 (3)删除自定义环境变量 2.系统自带的环境变量--PATH环境变量 (1)PATH环境变量 (2)PATH环境变量的作用 ...

  2. 125_Power BI 中 DAX 的性能测试

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 最近在看DAX"圣经"第二版<The Definitive Guide to DAX ...

  3. Vue基础篇 之 v-model 模拟

    我们知道vue中 为简化表单输入 提供了v-model 的语法绑定 将 vue的属性和表单元素进行了双向绑定 大大简化了表单数据操作的数据绑定 那么v-model 是如何实现双向绑定的呢? 今天我们来 ...

  4. Python中的类变量和成员变量

    类变量 定义 在类里面定义,且不位于构造或者成员函数里面,同时没有" self. " 的前缀:或者在类外定义,用 类名.类变量名 来新增加类变量. 使用 两种使用方法: (1)类名 ...

  5. python中 OS模块中 os.path.join() 函数用法简介

    基础用法 os.path.join() 用于拼接文件的路径,可以传入多个待拼接的路径 若各个路径之间不存在 " / ", 则其会自动为各个路径之间增加连接符 " / &q ...

  6. java标识符 identifier

    1,标识符 --> 类名 方法名  变量名 常量名 接口名   为程序员自己命名的内容 main也是标识符但是不能修改 2, 命名规则 只能以   数字 字母(中文) 下划线 美元符号      ...

  7. Redis的内存淘汰策略(八)

    一:Redis的AOF是什么? 以日志的形式来记录每个写操作(读操作不记录),将Redis执行过的所有写指令记录下来(读操作不记录),只许追加文件但不可以改写文件,redis启动之初会读取该文件重新构 ...

  8. 重学ES系列之新型数据结构Map应用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. js 表面学习 - 认识结构

    JavaScript 语句由以下构成: 值.运算符.表达式.关键词和注释. 这条语句告诉浏览器在 id="demo" 的 HTML 元素中输出 "Hello Kitty. ...

  10. RPA-UiPath视频教程1

    UiPath下载.安装.激活.第一个案例Helloworld!.参数类型.变量的介绍和使用 https://www.bilibili.com/video/av92816532 RPA直播公开课2020 ...