signal的屏幕适配方案

最新推荐文章于 2023-06-17 20:08:10 发布
最新推荐文章于 2023-06-17 20:08:10 发布
阅读量405 收藏
点赞数
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yzpbright/article/details/115519262
版权

mdpi 是1倍图
hdpi 是1.5倍图
xhdpi 是2倍图
xxhdpi 是3倍图
xxxhdpi 是4倍图

在这里插入图片描述
drawable-ldrtl-*的之类的资源目录是布局方向的，可以先不看，所以适配的图片都在
drawable-mdpi 、drawable-hdpi、drawable-xhdpi、drawable-xxhdpi、drawable-xxxhdpi

drawable-mdpi 是1倍图
drawable-hdpi 是1.5倍图
drawable-xhdpi 是2倍图
drawable-xxhdpi 是3倍图
drawable-xxxhdpi 是4倍图

drawable资源目录放的都是xml文件，并没有放适配的图片。

可以在文件夹中看这些文件夹中资源的数量：
drawable 含有533项
drawable-mdpi 含有155项
drawable-hdpi 含有152项
drawable-xhdpi 含有155项
drawable-xxhdpi 含有153项
drawable-xxxhdpi 含有102项

drawable-xxxhdpi这个资源目录比较特殊，资源数量比较少，因为这个 资源目录的分辨率比较高，机型比较少，很多资源图片就没有在这个资源目录做适配了。

以 baseline_account_circle_white_24.webp 图片为例：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在drawable-mdpi 、drawable-hdpi、drawable-xhdpi、drawable-xxhdpi、drawable-xxxhdpi 这五个资源目录下的尺寸分别为：2424、3636、4848、7272、96*96，即尺寸大小是1倍、1.5倍、2倍、3倍、4倍的关系。

使用 baseline_account_circle_white_24.webp 这张图片的控件：
在这里插入图片描述

是id为contact_field_icon的这个ImageView：

    <ImageView
        android:id="@+id/contact_field_icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_margin="16dp"
        android:tint="@color/grey_600"
        tools:src="@drawable/ic_phone_right_unlock_solid_24" />

注意到这个ImageView的宽和高设置的尺寸是：
android:layout_width=“24dp”
android:layout_height=“24dp”
那是怎么适配的？注意ImageView设置图片用的是src属性而不是background属性，ImageView中的background属性会根据ImageView组件设定的长宽进行拉伸图片(即图片适应ImageView的大小)，而src属性就存放的是原图的大小，不会进行拉伸ImageView(即ImageView适应图片的大小，图片什么尺寸，ImageView就是什么尺寸)。src是图片内容（前景），background是背景，可以同时使用。

所以最终显示的时候，ImageView是按照读取的图片的尺寸大小进行显示的，而图片的大小已经在drawable-mdpi 、drawable-hdpi、drawable-xhdpi、drawable-xxhdpi、drawable-xxxhdpi 这些资源目录中适配了，所以实现了适配。

再来看ic_arrow_right.webp这张图片：
在这里插入图片描述
使用在

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:layout_marginStart="2dp"
        android:src="@drawable/ic_arrow_right"
        android:tint="@color/core_white"/>

这个布局控件中。
也在五个资源目录中做了适配，大小分别为2424，3636，4848，7272，96*96

再看一个ic_caption_28.webp图片：
在这里插入图片描述
也在五个资源目录中做了适配，大小分别为2828，4242，5656，8484，112*112

再看一个conversation_list_empty_state.webp的图片：
在这里插入图片描述
是首页会话列表为空的显示图片，也在五个资源目录中做了适配，ImageView的layout_width和layout_height都是设置为wrap_content

总结下signal的适配方案：
1.ImageView设置图片使用src属性，这样ImageView的大小根据图片的大小进行自适应
2.图片的大小怎么适配？在drawable-mdpi 、drawable-hdpi、drawable-xhdpi、drawable-xxhdpi、drawable-xxxhdpi资源目录中放对应大小的图片，因此需要5套切图
3.利用Android系统的drawable资源寻找规则，找到最符合当前手机屏幕密度的drawable下的图片资源

一般适配的方案总体分为两种：

  1. 适配ImageView的宽和高。即按照UI稿设置ImageView的宽度和高度，然后设置ImageView的图片时用的是background属性，而不是src属性，这样让图片的大小来自适应ImageView的大小，这种适配方案只需要一套切图即可，一般是用2倍的切图，放在drawable-xhdpi文件夹下，这样遇到屏幕密度比320dpi低的手机时Android系统会压缩图片，遇到屏幕密度比320dpi高的手机时Android系统会放大图片，取中间的320dpi既不会缩小的太多，也不会放大的太多。
  2. 适配图片的宽和高。即ui切图一般要切5套，分别放在drawable-mdpi 、drawable-hdpi、drawable-xhdpi、drawable-xxhdpi、drawable-xxxhdpi资源目录中，然后Android系统根据当前手机的屏幕密度去取最匹配的文件夹下的图片，然后设置ImageView的图片时用的是src属性，而不是background属性，从而让ImageView的大小自适应图片的大小。

Android屏幕非常多，当然常见的屏幕尺寸比例，比如7201280，10801920，14402560都是16：9=1.78的比例，但是很多屏幕并不是这个比例，比如：
Samsung Galaxy S是480800，比例是5：3=1.67
Samsung Galaxy S8(2017年发布)是14402960，5.8inch，比例是：37：18=2.06
Samsung Galaxy S8+(2017年发布)是14402960，6.2inch，比例是：37：18=2.06

字体的适配

在这里插入图片描述
看下首页的这行字 Give your inbox something to write home about. Get started by messaging a friend. 是如何适配的：
在这里插入图片描述
是显示在这个TextView：

    <TextView
        style="@style/Signal.Text.Body"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="32dp"
        android:layout_marginBottom="20dp"
        android:gravity="center"
        android:text="@string/conversation_list_fragment__give_your_inbox_something_to_write_home_about_get_started_by_messaging_a_friend" />

使用的style是Signal.Text.Body ，看下这个样式：

    <style name="Signal.Text.Body" parent="Base.TextAppearance.AppCompat.Body1">
        <item name="android:textSize">16sp</item>
        <item name="android:lineSpacingExtra">2sp</item>
        <item name="android:fontFamily">sans-serif</item>
        <item name="android:letterSpacing" tools:ignore="NewApi">0.01</item>
    </style>

是固定的16sp

看下在几个设备的页面效果图：

在Pixel XL，5.5inch 1440*2560 560dpi 上的效果图：
在这里插入图片描述

在Nexus S，4.0inch 480*800 hdpi(233dpi) 上的效果图：
在这里插入图片描述
可以看到页面元素的尺寸比例明显差异比较大。

我们把两者放在一起对比下：
在这里插入图片描述
对比查看，可以看到，差异还是非常明显的。跟UI设计同学一起看后，UI同学也表示差异很明显。

颜色的适配

			<EmojiTextView
                android:id="@+id/conversation_item_body"
                style="@style/Signal.Text.Body"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/message_bubble_horizontal_padding"
                android:layout_marginTop="@dimen/message_bubble_top_padding"
                android:layout_marginEnd="@dimen/message_bubble_horizontal_padding"
                android:layout_marginBottom="@dimen/message_bubble_collapsed_footer_padding"
                android:ellipsize="end"
                android:textColor="?conversation_item_sent_text_primary_color"
                android:textColorLink="?conversation_item_sent_text_primary_color"
                app:emoji_maxLength="1000"
                app:scaleEmojis="true"
                tools:text="Mango pickle lorem ipsum" />

可以看到字体的颜色是使用引用的方式来设置颜色的：android:textColor="?conversation_item_sent_text_primary_color"

values/themes.xml文件:

...

    <style name="TextSecure.BaseLightTheme" parent="@style/Theme.MaterialComponents.Light.Bridge">
        <item name="theme_type">light</item>
        <item name="icon_tint">@color/core_grey_75</item>
        <item name="icon_tint_dark">@color/core_grey_15</item>

        <item name="insight_modal_background">@drawable/insights_modal_background</item>
        <item name="insight_modal_button_background">@color/core_grey_10</item>
        <item name="insight_title">@color/core_grey_90</item>
        <item name="insight_body_2">@color/core_grey_60</item>
        <item name="insight_dashboard_bottom_bar_background">@color/core_grey_02</item>
        <item name="insight_progress_background">@color/core_grey_15</item>

		...
	    <item name="conversation_item_sent_text_primary_color">@color/core_grey_90</item>
		...
		
        <item name="recipient_message_circle_icon">@drawable/ic_message_outline_ultramarine_24</item>
        <item name="recipient_call_circle_icon">@drawable/ic_phone_right_outline_ultramarine_24</item>
        <item name="recipient_insecure_call_circle_icon">@drawable/ic_phone_right_unlock_outline_ultramarine_24</item>
        <item name="recipient_video_call_circle_icon">@drawable/ic_video_outline_ultramarine_24</item>
        <item name="recipient_contact_button_color">@color/core_grey_02</item>
    </style>

    <style name="TextSecure.DarkTheme" parent="@style/TextSecure.BaseDarkTheme">
        <!-- leave empty to allow overriding -->
    </style>


    <style name="TextSecure.BaseDarkTheme" parent="@style/Theme.MaterialComponents.Bridge">
        <item name="theme_type">dark</item>
        <item name="icon_tint">@color/core_grey_15</item>
        <item name="icon_tint_dark">?icon_tint</item>

        <item name="insight_modal_background">@drawable/insights_modal_background_dark</item>
        <item name="insight_modal_button_background">@color/core_grey_60</item>
        <item name="insight_title">@color/core_grey_25</item>
        <item name="insight_body_2">@color/core_grey_25</item>
        <item name="insight_progress_background">@color/core_grey_60</item>
        <item name="insight_dashboard_bottom_bar_background">@color/core_grey_80</item>

		...
		<item name="conversation_item_sent_text_primary_color">@color/core_grey_05</item>
		...


        <item name="chipStyle">@style/Signal.Chip.Action</item>

        <item name="colorControlNormal">@color/core_white</item>

        <item name="circular_progress_button_state">@drawable/progress_button_state_dark</item>

        <item name="recipient_message_circle_icon">@drawable/ic_message_solid_ultramarine_light_24</item>
        <item name="recipient_call_circle_icon">@drawable/ic_phone_right_solid_ultramarine_light_24</item>
        <item name="recipient_insecure_call_circle_icon">@drawable/ic_phone_right_unlock_solid_ultramarine_light_24</item>
        <item name="recipient_video_call_circle_icon">@drawable/ic_video_solid_ultramarine_light_24</item>
        <item name="recipient_contact_button_color">@color/core_grey_80</item>
    </style>

在TextSecure.BaseLightTheme 和 TextSecure.BaseDarkTheme 中都定义了对应的颜色，android:textColor="?conversation_item_sent_text_primary_color" 使用的conversation_item_sent_text_primary_color颜色也都在其中定义了。

参考：
Android src和background的区别

yzpyzp
关注
专栏目录
基于STM32设计的智能门锁(微信小程序+手机APP等多种方式开锁)(188)
07-17 8528
当前智能门锁项目是基于STM32微控制器、ESP8266-WIFI模块、OLED显示屏、指纹模块、蓝牙模块、门禁刷卡模块、烟雾检测模块、火光检测模块、温湿度检测模块等硬件设备开发的一种智能门锁系统
基于GEC6818开发板+Linux+Qt设计的智能养老院出入管理系统(195)
最新发布
07-29 251
当前，传统的养老院出入管理模式普遍存在信息更新滞后、数据统计繁琐、实时监控能力不足等问题，难以满足现代养老机构对安全管理与服务质量提升的需求。本系统设计正是针对这些问题，通过集成先进的硬件设备如高性能GEC6818开发板以及RFID刷卡模块，结合稳定高效的嵌入式Linux操作系统和QT开发框架，构建一套功能齐全、操作直观、响应迅速的智能出入管理系统。 该系统能自动记录并实时显示老人的进出时间，方便管理人员及时了解每位老人的活动轨迹，同时具备强大的后台管理功能，支持管理员便捷地进行老人信息的增删改查操作。通
由浅入深、详解Android中Drawable的那些事
大模型训练
11-09 927
对于 `Drawable` ，一直没有专门记录，日常开发中，也是属于忘记了再搜一下。主要是使用程度有限(仅仅只是`shape`或者 `layer` 等冰山一角)，另一方面是 `Android` 对其的高度抽象，导致从没去关注过细节，从而对于 `Drawable` 没有真正的理解其设计与存在的意义。 反而是偶尔一次发现其他同学的运用，才明白了自己的狭隘，为此，怀着无比惭愧的心情，写下此篇，与君共勉。 鉴于此，本篇将完整的描述开发中常见各种 `Drawable` ,以及在工程化项目的背景下，如何更好的运用。
android 常用机型尺寸_Android中图片大小与各种hdpi
weixin_29123281的博客
02-15 1833
前言大家都知道开发android会涉及到UI的涉及，一般都是给到通用的分辨率进行设计，但是具体适配是需要代码控制的，由于网上分辨率dp的文章实在太多，对这些不了解的朋友可以去自行百度，这里主要是对UI的设计过程与原理进行一个简要的分析术语首先阐释一些术语和概念屏幕尺寸(screen size): 屏幕的对角线测量。为了方便，Android把所有的屏幕尺寸分为了4个广义的大小：小、正常、大、更大屏幕...
Android使用矢量图（SVG, VectorDrawable）实践篇
chitinwu的博客
08-03 3358
前言 本文是以读者对SVG有一定了解为前提的，否则请先百（谷）度（歌）了解下。 实践都是从坑里爬出来的，因此本文的子题目也可叫做Android使用矢量图填坑记。 文章开始前，先墙裂安利一个网站，阿里的iconfont，海量在线矢量图，早收藏早致富。本文主要涉及到的矢量图资源均来自该网站。放图镇楼： iconfont首页 相关背景 Why SVG 可缩放矢量图形（英语：
UI设计师不可不知的安卓屏幕知识
xc605098599的专栏
03-21 2187
 UI设计师不可不知的安卓屏幕知识(不少设计师和工程师都被安卓设备纷繁的屏幕搞得晕头转向，我既做UI设计，也做一部分安卓界面布局，刚好对这块内容比较熟悉，也曾在公司内部做过相关的讲座，在此，我将此部分知识重新梳理出来分享给大家！ 1、了解几个概念 （1）分辨率。分辨率就是手机屏幕的像素点数，一般描述成屏幕的“宽×高”，安卓手机屏幕常见的分辨率有480×800、720×12
(2019.5.29)关于drawable你可能不知道的一些事
Jaydenx的博客
07-15 525
（转载公司内部论坛本人文章2019.5.29） 导读： Android项目中，官方建议将不同分辨率的资源图片分别放在drawable-mdpi，drawable-hdpi，drawable-xhdpi等不同的drawable文件夹下，以便不同分辨率的手机加载不同的图片资源，从而实现不同手机上图片显示大小一致。那么，不同的手机是根据什么来决定加载哪个drawable文件夹下的资源图片呢？加载不同drawable文件夹下的图片对图片宽高和内存会有影响吗？假设手机对应的drawable文件夹下没有该图片资源，又该
Android-NDK开发Crash错误定位，android适配方案
flutter001的博客
12-31 637
01-01 17:59:38.586: I/DEBUG(253): r8 75226d08 r9 00000000 sl 417c5c38 fp bedbf134 01-01 17:59:38.586: I/DEBUG(253): ip 41705910 sp bedbf0f0 lr 4012e169 pc 4013d10c cpsr 000f0010 // 省略部份日志 。。。。。。 01-01 17:59:38.596: I/DEBUG(253): backtrace: 0
基于STM32+OneNet设计的物联网智慧路灯
06-17 5789
本次设计的智能路灯采用STM32芯片和OneNet物联网平台进行连接，开发出支持太阳能充电锂电池供电、GPS定位上传位置信息、手动/自动控制路灯开关、环境光照调节、红外传感器检测周围人员、空气质量监测等多项功能。同时，当路灯发生异常情况时，系统可以自动发送邮件或短信到指定邮箱或电话。
iOS开发－记录下在开发过程中遇到的问题的解决方案及经验总结-1
iOS学堂
07-05 2664
iOS 开发中的总结，小技巧，小思路的拓展，如有不当之处欢迎指正
android 1x 2x,dpi、ppi、dp、px、分辨率、@1x、@2x、@3x
weixin_32421193的博客
05-28 1984
px：像素分辨率：屏幕水平方向上的像素 × 垂直方向上的像素，单位为px；例：iphone5的分辨率为：640 × 1136 pxppi：Pixel per inch，每英寸像素数，为像素密度，单位：像素/每英寸针对显示器设计时，ppi=dpidpi：dots per inch，每英寸像素点，为像素密度，单位：像素/每英寸；dpi=√ (屏幕水平像素^2 + 屏幕垂直像素^2) / 屏幕英寸数dp...
玩转Android drawable图片适配
指数渐近线
01-05 2万+
众所周知，Android机型众多，屏幕尺寸、分辨率各有不同。对于Android开发人员来说，如何提高APP中图片对各种机型的适配是基本技能之一。借着项目中遇到的图片适配问题，在总结项目时，就想着顺带把这部分好好捋一捋，作为一个记录，也为不是很清楚这部分的人提供一个参考。先说mipmap采用Android Studio开发Android APP，在项目的res目录下，会多出几个以mipmap开头的文件
Android drawable微技巧，你所不知道的drawable的那些细节
热门推荐
郭霖的专栏
04-28 11万+
大家都知道，在Android项目当中，drawable文件夹都是用来放置图片资源的，不管是jpg、png、还是9.png，都可以放在这里。除此之外，还有像selector这样的xml文件也是可以放在drawable文件夹下面的。 但是如果你现在使用Android Studio来新建一个项目，你会发现有如下的目录结构：
Android 硬布局item的高级写法，搭建android开发环境
m0_64604893的博客
12-22 619
android:orientation=“horizontal” android:padding="@dimen/dp_20"> <ImageView android:layout_width=“wrap_content” android:layout_height=“wrap_content” android:contentDescription="@string/app_name" android:src="@mipmap/ic_agreement" /> <TextView a
什么是二倍图?什么是三倍图?
打死你个标题党
06-20 3万+
啥是二倍图和三杯图什么时候会需要比如你需要一个30pt*30pt的图标，那么这时你就需要跟美工（美术工程师）要三个文件： 一个是30px*30px的PNG图片，用原名来命名即可，例如sample.png。 一个是60px*60px的PNG图片，这个要用原名@2x来命名，例如sample@2x.png。 一个是90px*90px的PNG图片，这个要用原强调内容名@3x来命名，例如sample@3
android 屏幕适配,hdpi,xhdpi,xxhdpi理解,常见出图
林锐波
12-15 1万+
屏幕适配首先理解下各个尺寸单位代表的意思 尺寸含义 px： 像素 dip: Density-independent pixel 独立像素密度 dpi: dot per inch 分辨率 ppi: pixel per inch 指每英寸所拥有的像素 ppi计算:（宽度的平方 + 高度的平方）开根号 / 对角线的长度 Density： density值表示每英
彻底理解ldpi、mdpi、hdpi、xhdpi、xxhdpi，图片到底放在哪个目录
Levin的专栏
05-23 4884
转载：http://www.eoeandroid.com/thread-565562-1-1.html Levin：任何美工做图，他/她都会以特定的分辨率的屏为基础来做的，比如1080*1920、iphone5的分辨率。安卓的图，按照最大的分辨率1080*1920出图，然后放到xxhdpi下，还是很好用的。   这个问题我相信困惑了好多人包括很多老鸟，而且有的人以为自己理解其实是错误的，包括
Android 屏幕适配
wangqing830414的专栏
05-19 1万+
众所周知，Android机型尺寸各种各样，于是屏幕适配就成了Android开发中很重要的一环。Android屏幕适配可能一些开发者都会遇到这样的问题，今天就来分享下屏幕适配，其实Android屏幕适配也可以很简单。 基本概念 Android屏幕适配必须要理解的一些概念： px 是英文单词pixel的缩写，意为像素，屏幕上的点。我们通常所说的分辨率如480X800就是指的像素
教你来彻底理解ldpi、mdpi、hdpi、xhdpi、xxhdpi
筱艾云的专栏
07-04 1万+
1 首先你得知道 相信很多人都不是很理解ldpi、mdpi、hdpi、xhdpi、xxhdpi里面到底是根据什么来进行划分的，其实我一直以为是根据分辨率来区分，其实这四个文件夹和具体的屏幕分辨率是没直接关系的，上面说的做法也有一定道理，因为大部分的720*1280的手机都是高密度手机，1080*1920都是超高密度手机，但是这四个文件夹之和屏幕密度有关，和具体分辨率无关。 1 An
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值