2.Android高仿网易云音乐-引导界面和广告界面实现

效果图

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

系列文章目录导航

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"><!--图片广告--><ImageViewandroid:id="@+id/image"android:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop" /><!--视频播放器VideoView默认没法设置视频填充整个控件，所以不用他--><com.tencent.rtmp.ui.TXCloudVideoViewandroid:id="@+id/video"android:layout_width="match_parent"android:layout_height="match_parent"android:visibility="gone" /><!--/播放器--><!--广告控制层--><RelativeLayoutandroid:id="@+id/ad_control"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid: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" /><!--跳过广告按钮--><TextViewandroid: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" /><!--打开广告按钮--><TextViewandroid: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 对象与界面 viewplayer.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() {@Overridepublic void onClick(View v) {//取消倒计时cancelCountDown();next();}
});

点击广告

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

引导界面布局

//点击广告按钮
binding.primary.setOnClickListener(new View.OnClickListener() {@Overridepublic 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.ViewPagerandroid:id="@+id/list"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" />...<!--按钮容器--><LinearLayoutandroid:layout_marginBottom="@dimen/d30"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><!--占位控件--><Viewandroid:layout_width="0dp"android:layout_height="0dp"android:layout_weight="1" /><!--登录注册按钮--><com.google.android.material.button.MaterialButtonandroid: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.MaterialButtonandroid: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() {@Overridepublic 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高仿网易云音乐-引导界面和广告界面实现相关推荐

Android高仿网易云音乐OkHttp+Retrofit+RxJava+Glide+MVC+MVVM
简介这是一个使用Java(以后还会推出Kotlin版本)语言,从0开发一个Android平台,接近企业级的项目(我的云音乐),包含了基础内容,高级内容,项目封装,项目重构等知识:主要是使用系统功能, ...
1.Android高仿网易云音乐-启动界面实现和动态权限处理
0.效果效果图依次为启动界面,第一次显示用户协议对话框,动态获取权限. 系列文章目录导航目录 1.实现分析启动基本上没有什么难点,但在真实项目逻辑还是比较多:就是布局,然后显示用户协议对话框,动 ...
3.Android高仿网易云音乐-首页复杂发现界面布局和功能
0.效果图效果图依次为发现界面顶部,包含首页轮播图,水平滚动的按钮,推荐歌单:然后是发现界面推荐单曲,点击单曲就是直接进入播放界面:最后是全局播放控制条上点击播放列表按钮显示的播放列表弹窗. 1.整 ...
Android高仿网易云音乐播放界面
现在很多的播放器的播放界面都是采用光盘的转动,下面是我仿造网易的播放界面.先上两张图: 第一张为播放前的界面,第二张为点击播放按钮的图片.布局文件如下: <RelativeLayout xmln ...
android 仿网易标签切换,高仿网易云音乐客户端的Home页面切换Tabhost-IT蓝豹
1.高仿网易云音乐客户端的Home页面切换Tabhost 高仿网易云音乐客户端的Home页面切换Tabhost,并且三角形是透明的, 实现方式,自定义AnimTabsView继承 RelativeLa ...
Flutter+FishRedux高仿网易云音乐
flutter_netease_cloud_music 采用FishRedux框架与开源网易云音乐api开发的高仿网易云音乐APP,技术栈主要是:Flutter+FishRedux,目前主要是偏重AP ...
新鲜出炉高仿网易云音乐 APP
我的引语晚上好,我是吴小龙同学,我的公众号「菜鸟翻身」会推荐 GitHub 上好玩的项目,一分钟 get 一个优秀的开源项目,挖掘开源的价值,欢迎关注我. 项目中成长是最快的,如何成长,就是解决问题 ...
Vue3.0 + typescript 高仿网易云音乐 WebApp
Vue3.0 + typescript 高仿网易云音乐 WebApp 前言 Vue3.0 的正式发布,让我心动不已,于是尝试用 vue3 实现一个完整的项目,整个项目全部使用了 composition ...
高仿网易云音乐(vue实战项目)
高仿网易云音乐(Vue实战项目)