一张图搞定APP启动页广告

之前我们产品里的启动页比较简单，就是背景色加上我们的logo、slogan等，这种形式适配起来比较容易，把元素切出来交给开发写出来就行。最近由于运营的需求，我们需要在APP启动页展示广告，广告图更新频繁、样式复杂，不可能交给开发适配，也不可能让设计师每次手动做多个尺寸（光想想就要抓狂），所以我开始思考用一个尺寸适配所有屏幕的方法。

我们主要适配的是Android和iPhone这两个主流平台，常见分辨率如下。

从上表可以看出，iPhone 5/5s、iPhone 6/7/8、iPhone 6/7/8 Plus都是等比例的，屏幕的长宽比大约是1.77；而Android目前最主流的1080P、720P也都是这个比例。所以，为了兼顾两个平台，我采用这个比例下的最大尺寸，即iPhone 6/7/8 Plus的1242*2204为基础尺寸做图，其他尺寸用这张图去适配，这样可以最大限度地让尽可能多的屏幕完美显示，同时在较高分辨率下又不至于模糊。

想用一张图适配不同尺寸的屏幕，图片肯定会被裁剪，那么图片是怎样被裁剪的呢？

为了填满屏幕的空间，图片需要按照一定的比例去等比放大或缩小，缩放的中心点为图片的中心点。当遇到  长宽比  比自己大（即高瘦）的屏幕时，为了填满屏幕高度，图片需要放大到与屏幕等高的大小，此时就会裁剪掉图片的左右两侧；而反过来，当遇到  长宽比  比自己小（即矮胖）的屏幕时，就会裁剪掉图片上下超出的部分。如下图示例。

简而言之， 由矮胖往高瘦适配，裁剪掉左右；反过来则裁剪掉上下。

确定了基础尺寸，弄清楚了裁剪的规则，那我们可以在图片上确定一块「安全区域」。所谓「安全区域」，就是适配时确保不会被裁掉的区域，设计师在设计时可以把文字、logo、slogan等重要内容安排在该区域内，从而保证核心内容不会被裁掉。

从上面的裁剪规则我们知道了，长宽比越小（越矮胖）的屏幕，上下部分会被裁剪得更多；长宽比越大（越高瘦）的屏幕，左右两侧则被裁剪得更多。因此，按照长宽比最小的屏幕尺寸和长宽比最大的屏幕尺寸，可以分别确定上下左右的裁剪边界，边界里的即为安全区域。

而在我们适配的范围内，长宽比最小的尺寸是320x480（mdpi，iPhone4），最大的是375x812（iPhoneX），因此最终确定的安全区域是1020x1863，如下图所示。

最终同一张图在各个分辨率下的适配效果如图，为了方便查看，图中对安全区域的四个角做了标记。

如果你的启动页除了展示广告外，还需要固定展示品牌信息（如网易云音乐的启动页，下面会固定有一块区域展示logo、版权信息等），可以在下面留出固定比例的空间，如留出15%的高度，剩下的空间按照上面的方法确定尺寸和安全区域就好啦。

首先肯定是注册百度广告联盟的账号，和下载sdk。地址：http://munion.baidu.com/

第二步，打开eclipse，把里面的jar文件导入库中。 .

将百度推广的jar包复制到您工程的Libs目录下，并按如下步骤将其导入：

右键点击你的工程，然后选择“Properties”；

在工程属性对话框左边选择“Java Build Path”；

在工程属性对话框主窗口选择“Libraries”；

点击“Add JARs”，添加百度推广jar包。

（其实我试了，直接复制那个jar粘贴到lib中也可以）

第三步，在AndroidMainfest.xml中进行权限修改等。（加注释的地方是填加的地方）

[java]

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.example.adtest"

android:versionCode="1"

android:versionName="1.0" >

<uses-sdk

android:minSdkVersion="8"

android:targetSdkVersion="18" />

<span style="color:#ff6666"><uses-permission android:name="android.permission.INTERNET" /> </span><span style="color:#ff6666">

<uses-permission android:name="android.permission.READ_PHONE_STATE" />

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /></span>

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme" >

<span style="color:#3366ff"><meta-data android:name="BaiduMobAd_APP_ID" android:value="debug" />

<meta-data android:name="BaiduMobAd_APP_SEC" android:value="debug" />

</span><span style="color:#33ff33"><activity android:name="com.baidu.mobads.AppActivity"

android:configChanges="keyboard|keyboardHidden|orientation" />

</span>

<activity

android:name="com.example.adtest.MainActivity"

android:label="@string/app_name" >

<intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

</activity>

</application>

</manifest>

permission区域是填加权限。meta-data是添加百度的账号，建议value填debug用于调试，调试完换成自己的。

[java]

<span style="color:rgb(51,255,51)"><activity android:name="com.baidu.mobads.AppActivity"

android:configChanges="keyboard|keyboardHidden|orientation" /></span>

区域直接添加就可以。

获取APPSID和APPSEC。点击上图的“上传应用”，可以看到下图的“应用版本列表”

第四步，百度提供多种广告模式，这里选择轮盘状，感觉是最简单的一种。就是在creat()中修改。

[java]

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

RelativeLayout rlMain=new RelativeLayout(this)

setContentView(rlMain)

IconsAd iconsAd=new IconsAd(this)

iconsAd.loadAd(this)

}

1、在StartLoadingActivity中去后台检查，有没有广告的配置

2、如果没有，1s后直接进入主页，如果有，就去下载广告图片，并存储广告的其他信息

3、app下次打开的时候，去检查本地缓存，和数据库，如果有广告的信息，并且没有过期，就显示广告。

---