鸿蒙开源组件——全屏幕适配方案

jacksky
发布于 2021-12-14 18:17
浏览
2收藏

Rudeness

一种粗暴快速的全屏幕适配方案

本项目包括:

  • rudenesSdk。根据上述方案实现的一个非常简单的库。
  • rudenessDemo。这是demo。

项目介绍

  • 核心:使用vp作为长度单位,按照上述想法将其重定义与屏幕大小相关的相对单位。

  • 绘制:编写xml时完全对照设计稿的尺寸来写,单位换成vp。假如设计图宽度为200,一个控件在设计图上的标注长度为3,只需要在初始化时定义宽度为200,绘制该控件时长度写为3vp,那么在任何屏幕上该控件的长度都为屏幕宽度的3/200。

  • 预览:实时预览时绘制页面是很重要的一个环节。以1080*2340的设计图为例,为了实现于正常绘制时一样的预览功能,创建一个长为2340,宽为1080的设备作为预览,预览时选择这个设备即可。

集成

方法1: 直接使用har包
通过library生成har包,添加har包到要集成的libs文件夹内
在entry的gradle内添加如下代码
implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
方法2: gradle依赖
allprojects{
    repositories{
        mavenCentral()
    }
}
implementation "com.gitee.archermind-ti:rudeness:1.0.0"

使用说明

  1. 步骤一
    public class DensityHelper {
    
     /**
       * 获取屏幕宽度
       * @return 屏幕宽度
       */
       
      public static int getDisplayWidthInPx( Context context) {
          Display display = DisplayManager.getInstance().getDefaultDisplay(context).get();
          return display.getAttributes().width;
      }
      
      /**
       * 获取屏幕高度,不包含状态栏的高度
       * @return 屏幕高度,不包含状态栏的高度
       */
       
      public static int getDisplayHeightInPx( Context context) {
          Display display = DisplayManager.getInstance().getDefaultDisplay(context).get();
          return display.getAttributes().height;
      }
      
      /**
       * vp转像素
       *
       * @param vp
       * @return
       */
       
      public static float vp2px( float vp, Context context) {
          DisplayAttributes attributes = DisplayManager.getInstance().getDefaultDisplay(context).get().getAttributes();
          return  (attributes.densityPixels * vp);
      }
    }      ​
  2. 步骤二
public class RudeAbilitySlice extends AbilitySlice {

  protected void onStart(Intent intent) {
      initBottom();
  }

  public void initBottom() {
      //获取页面容器ID
      DirectionalLayout tab = (DirectionalLayout) findComponentById(ResourceTable.Id_rude_tab);
      //获取Text ID
      Text buttonLogin = (Text) tab.findComponentById(ResourceTable.Id_log_in);
      //设置文字大小
      buttonLogin.setTextSize((int) DensityHelper.vp2px(SEVENTEEN, getContext()));
  }
}

关于demo:

  • 正常编写的页面 是按照vp来编写的页面
  • 粗暴适配的页面 是按照本方案编写的页面

在真机与虚拟机下运行项目,可见粗暴适配的页面表现几乎一致,而正常编写的页面在大屏与小屏之间看起来差异较大。

正常编写的页面 :

鸿蒙开源组件——全屏幕适配方案-鸿蒙开发者社区

粗暴适配的页面

鸿蒙开源组件——全屏幕适配方案-鸿蒙开发者社区

Licence

Copyright [2019]

Licensed under the Apache License, Version 2.0; you may not use this file except in compliance with the License. You may obtain a copy of the License at

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

rudeness-master.zip 224.43K 6次下载
已于2021-12-14 18:17:34修改
1
收藏 2
回复
举报
1条回复
按时间正序
/
按时间倒序
qq5d575d51f2aa0
qq5d575d51f2aa0

请问这种方式,只能在代码里面调用方法,如果我用xml布局的话,该怎么适配屏幕呢?

回复
2022-2-19 21:55:16
回复
    相关推荐