IOS与Android的UI设配方案

IOS与Android共用一套设计效果图 1242*2208

IOS与 Android常用的尺寸中，最大尺寸为6p的尺寸，即1242*2208px

IOS常用尺寸： 1242*2208    750*1334    640*1136    640*960，其中750*1334    640*1136    640*960 同为@2x    1242*2208为@3x，所以750*1334    640*1136    640*960只做一套640*1136就好。

Android 常用尺寸：1080*1920    720*1080    480*800，他们之间相邻是可以整除1.5的，也就是1080除以1.5等于720,720除以1.5等于480，即这三个尺寸可以等比缩放大小，只做一套1080*1920就可以。

那么问题来了。

IOS要做两套尺寸，1242*2208与640*1136

Android要做一套尺寸，1080*1920

这样不就是三套设计图了吗？设计师们会被气死的？

其实，6p的尺寸1242*2208整除1.15就刚好就等于1080*1920，也就是说，1242*2208与1080*1920是可以等比缩放的。

现在就剩下IOS的640*1136。

那么就有人问，那IOS的1242*2208可以直接等比缩放成640*1136。答案是不可以的，因为他们之间不能整除的，但是我们把1242*2208的设计图直接在Photoshop里面直接等不缩放到宽度为640的尺寸，我们会发现原本的2208变成了1138，也就是说比1136多了2个像素，2个像素的误差对于没有有强迫证的也就无所谓了，2个像素的误差我们会将1138硬改成1136，现在你会发现，里面的图标，1136跟1138大小其实是一样。

为什么提到图标呢？因为我们交付的物只需要一套效果图与五套切图就好了。即

一套效果图   1242*2208

五套切图  1242*2208   640*1136   1080*1920   720*1080   480*800

最后注意缩放的图标要细调一下，由于转换有误差，共用一套效果图是有一定风险的，例如UI细节上的风险。开发前，设计师与开发人员要先共同确认此适配方案，要全程沟通，及时改正UI方面的问题。

IOS与Android共用一套设计效果图 750*1334

上面提到过，750*1334    640*1136    640*960 同为@2x，所以750跟640用同一套图标，同一套字体，至于其他尺寸大小，只要跟着尺寸延伸就没问题啦。尺寸750*1334应用1242*2208，则需要把@2x导出成@3x，也就是把字体放大1.5倍，其余的直接放到1242就可以啦。

至于Android版本，我个人的做法是把750*1334直接换算成1080*1920，因为只有1PX像素只差，直接忽略。换算出1080*1920，Android的其他尺寸就按他们之间的规律处理就可以啦。

因为我们交付的物只需要一套效果图与五套切图就好了。即

一套效果图   750*1334

五套切图  1242*2208   640*1136   1080*1920   720*1080   480*800

IOS与Android各做两套设计效果图 

原理跟方案一、二差不多，但为了追求细节上的完美，可以多做一套设计图，即两套设计图：1242*2208和640*1136.

1242*2208适配6P、Android三种尺寸。

1242*2208整除1.5等于1080*1920：

1080*1920整除1.5等于720*1280：

720*1280整除1.5等于480*800：

640*1136适配6 5 5S等尺寸。

如果追求完美，那就需要三套图。即:

1242*2208       640*1136       1080*1920 

还可以加上一套640*960,总之分开做越多套，出来的效果图就会越精细，反之，你懂得，不过这也取决设计师本人和公司领导的决策，会不会给那么多时间。不说废话了，希望能帮到各位！

首先添加控件：

<Switch

    android:id="@+id/sw_sfktmmzf"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:layout_marginRight="15dp"

    android:showText="false"

    android:switchMinWidth="50dp"

    android:thumb="@drawable/thumb"

    android:track="@drawable/track" />

以下是该控件的常用属性：

textOn：控件打开时显示的文字

textOff：控件关闭时显示的文字

thumb：控件开关的图片（设置小圆圈颜色）

track：控件开关的轨迹图片（设置小圆圈背景颜色）

typeface：设置字体类型

switchMinWidth：开关最小宽度

switchPadding：设置开关 与文字的空白距离

switchTextAppearance：设置文本的风格

checked：设置初始选中状态

splitTrack：是否设置一个间隙，让滑块与底部图片分隔（API 21及以上）

showText：设置是否显示开关上的文字（API 21及以上）

创建北京控制文件在drawable文件下

1、thumb.xml

<?xml version="1.0" encoding="utf-8"?><!-- 按钮的选择器，可以设置按钮在不同状态下的时候，按钮不同的颜色 -->

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

    <item android:drawable="@drawable/green_thumb" android:state_checked="true" />

    <item android:drawable="@drawable/gray_thumb" />

颜色文件：

green_thumb.xml

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

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

    android:shape="rectangle" >

    <!-- 高度40 -->

    <size android:height="@dimen/switch_height" android:width="@dimen/switch_height"/>

    <!-- 圆角弧度 20 -->

<corners android:radius="20dp"/>

<!-- 变化率 -->

    <gradient

        android:endColor="#eeeeee"

        android:startColor="#eeeeee" />

<stroke android:width="1dp"

        android:color="@color/home_text1"/>

</shape>

gray_thumb.xml

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

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

    android:shape="rectangle" >

    <!-- 高度40 -->

    <size android:height="@dimen/switch_height" android:width="@dimen/switch_height"/>

    <!-- 圆角弧度 20 -->

<corners android:radius="20dp"/>

<!-- 变化率 -->

    <gradient

        android:endColor="#eeeeee"

        android:startColor="#eeeeee" />

    <stroke android:width="1dp"

        android:color="@color/text_color03"/>

</shape>

2、track.xml

<?xml version="1.0" encoding="utf-8"?><!-- 底层下滑条的样式选择器，可控制Switch在不同状态下，底下下滑条的颜色 -->

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

    <item android:drawable="@drawable/green_track" android:state_checked="true" />

    <item android:drawable="@drawable/gray_track" />

</selector>

颜色文件：

green_track.xml

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

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

    android:shape="rectangle">

    <!-- 高度40 -->

    <size android:height="@dimen/switch_height"/>

    <!-- 圆角弧度 20 -->

    <corners android:radius="15dp"/>

    <!-- 变化率 -->

    <gradient

        android:endColor="@color/home_text1"

        android:startColor="@color/home_text1" />

</shape>

gray_track.xml

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

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

    android:shape="rectangle">

    <!-- 高度30  此处设置宽度无效-->

    <size android:height="@dimen/switch_height" />

    <!-- 圆角弧度 15 -->

    <corners android:radius="15dp" />

    <!-- 变化率  定义从左到右的颜色不变 -->

    <gradient

        android:endColor="@color/text_color03"

        android:startColor="@color/text_color03" />

</shape>

switch 控件监听事件：

 aSwitch.setOnCheckedChangeListener(newCompoundButton.OnCheckedChangeListener() {

      @Override

    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

        //控制开关字体颜色

        if(isChecked) {

         //打开

        }else{

         //关闭

        }

      }

    })

1、最原始的dp+自适应布局+weight，多套dimens.xml

缺点：只能满足90%以上的手机，同一像素的手机，dpi不一样

2、smallestWidth适配,res 文件夹下创建各种屏幕分辨率对应的 values-sw{xxx}dp 文件夹

缺点: 1、包会增加500kb左右

2、只支持3.2及以上的系统

3、AutoSize今日头条屏幕适配方案

当前设备屏幕总宽度（单位为像素）/ 设计图总宽度（单位为 dp) = density

原理：调用Android API，根据设备某一维度（宽或高）的真实长度（单位是px）与这一维度在UI设计图上的dp值之间的关系，重新计算density来实现

缺点: 第三方库适配

---