从UI适配上,我们能学到什么

作者: 咸鱼正翻身 | 来源:发表于2019-07-08 10:29 被阅读18次

    前言

    UI适配,一直都是开发过程中极其恶心的问题。不过一旦吃透适配的原理,这块“食之无味,弃之可惜”的鸡肋问题就可以迎刃而解。比如前段时间,我司的解决方案:字节跳动:一种极低成本的Android屏幕适配方式

    时间过了这么久,为啥单独搞了一篇关于UI适配的文章了?一是因为最近工作需求;二是在适配的过程中学到了一些其他布局的用法,所以算是一篇近期工作总结性质的文章。

    OK,开整。

    一、为什么需要适配

    我们都知道由于Android手机分辨率碎片化及其严重,即使Google推出了dp效果也同样不尽如人意。那么咱们先来明确第一个问题:为什么dp效果并不好。

    提到dp,咱们不得不提到几个公式:

    • px = density * dp;
    • density = dpi / 160;
    • px = dp * (dpi / 160);

    我们可以看到,dp和px之间的转换和dpi有着密不可分的关系。那么它又是怎么算出来的呢?上一张图:

    image.png

    说白了,dpi就是手机斜边除以屏幕尺寸

    从上述的公式,我们可以看出,dpi的本质和手机屏幕的物理宽高有着直接的关系。

    接下来我们看俩款手机:

    1、屏幕分辨率:1920*1080,屏幕尺寸:5吋的话,那么dpi约为440。

    那么这种情况下1dp=2.75px。

    2、屏幕分辨率:1920*1080,屏幕尺寸:6吋的话,那么dpi约为367。

    那么这种情况下1dp=2.3px。

    因此我们可以看出来,对于不同的手机来说,如果它们的分辨率相同,但屏幕尺寸不同。那么即使dp相同,真正到手机上去展示时仍然会出现问题。

    因此我们就需要进行适配...

    二、百分比布局(ConstraintLayout)

    最初为了适配,各种以百分比为核心的适配思想层出不穷。百分比布局的出现就是其中之一。这次咱们通过ConstraintLayout来聊一聊百分比。

    ConstraintLayout,可以通过各种约束关系将复杂的布局简单化,极大的降低layout的层级关系(减少UI绘制所带来的时间消耗)。

    ConstraintLayout同样拥有极强的百分比布局能力。

    比如:

    • layout_constraintHorizontal_bias
    • layout_constraintVertical_bias
    <android.support.constraint.ConstraintLayout ...>
         <Button android:id="@+id/button" ...
             app:layout_constraintHorizontal_bias="0.3"
             app:layout_constraintLeft_toLeftOf="parent"
             app:layout_constraintRight_toRightOf="parent/>
    </android.support.constraint.ConstraintLayout>
    

    简单来说现在的Buttom拥有父布局宽度30%的左边距

    还有一种有趣的方式,那就是使用Guideline,比如这样:

     <androidx.constraintlayout.widget.Guideline
        android:id="@+id/effect_guideline"
        android:layout_width="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.66"
        android:layout_height="wrap_content" />
    

    创建一个拥有左间距66%的Guideline

    有了Guideline我们可以随意基于这个约束进行布局,当然如果需要横向的Guideline,只需要改android:orientation=""即可。

    当然还有:

    • layout_constraintWidth_percent
    • layout_constraintHeight_percent

    直接将宽高设置为父级的百分比。

    注意android:layout_width、android:layout_height的优先级会高于它们俩。

    尾声

    今天写聊的东西就这么多,应该很通俗易懂而且个人感觉比较有实战意义。虽然内容有些少,哈哈。

    这周比较忙,一直没抽出时间好好写写文章。一步步来吧~

    我是一个应届生,最近和朋友们维护了一个公众号,内容是我们在从应届生过渡到开发这一路所踩过的坑,以及我们一步步学习的记录,如果感兴趣的朋友可以关注一下,一同加油~

    个人公众号:咸鱼正翻身

    相关文章

      网友评论

        本文标题:从UI适配上,我们能学到什么

        本文链接:https://www.haomeiwen.com/subject/uygnhctx.html