继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Android Studio 中 Preview 常见问题和技巧

守着星空守着你
关注TA
已关注
手记 359
粉丝 39
获赞 267

原文链接

Android Studio提供了一个强大的“Preview”工具,可以帮助您预览您的布局文件将如何在用户的设备上呈现。XML布局可能是Android开发中最常用的资源。 您的项目中每个活动至少有一个布局文件。 Android Studio的预览工具可帮助您实现这些伟大的设计,并快速迭代它们,甚至不需要运行您的应用程序。它还允许您查看布局的不同配置,例如在纵向或横向时的外观,或者TextView在多个语言环境(如英语,德语或希腊语)上的外观。

即使预览工具是强大的,可以使你的发展日子轻而易举,与此同时,它也有一些缺点会让程序猿抓狂。这篇文章谈论Preview的常见问题和技巧。

这里是最常见的关于Preview的问题列表和解决方案(图片请右键用新标签放大查看):

问题1:Preview看起来为空

假设你有一个布局,其内容将从后端获得的数据填充…你很快意识到,由于内容是动态的,预览工具不能填充屏幕,你什么也看不到。对这个问题的一个较为简单解决方案是在真机上测试,那时你有这些数据,但是这样Preview的意义就失去了。

在这种情况下的问题是TextViewImageView没有任何内容可供显示。 这是处理动态内容时的常见问题。即使代码编译没有问题,没有人可以在不查看XML代码的情况下理解该布局。

当创建使用任何后端数据相关视图的布局时,一个好的做法是仅在预览时填充它。通过使用tools命名空间而不是android来声明xml属性,这将允许您指定只在预览时使用的属性。例如我们使用tools:text =“Title”tools:src =“@ drawable / cool_pic”,大功告成!

这里写图片描述
使用tools前缀声明的属性完全与android一样,但仅用于预览。使用tools:text 而不是Android:text,保证了你所有的内容都只是在预览的时候会出现,程序运行起来不会出现所有tools相关的东西。

如果你没有足够的符合所有ImageView要求的宽高比的图片(jpg等),会发生什么? 您可以让设计狮提供一些资源来测试各种适配,不过这可能需要一些额外的努力和维护;这时也可以使用tools:rcs或者tools:layout_heighttools:layout_width来测试显示效果,而不必修改真实属性。

问题2:测试最大宽高

或者当您的布局旨在显示来自外部源的一些内容时,它有时被要求具有一些最大宽度或/和高度(也就是使用了maxHeight属性),来确保您的布局看起来美观,即使外部源发送大于预期或某些宽高比未被同意的图像。这时可以使用tools:layout_heighttools:layout_width,并且设置一个固定颜色的toos:background来预览各个尺寸下的图片可以在ImageView中占用的空间。

这里写图片描述

问题3:修复损坏的预览

如下图所示的错误经常发生:创建自定义View时,务必确保您的视图可以实例化,而不使用任何在预览期间可能不存在的外部依赖项。请记住,预览不会在应用程序中运行,而是在IDE中的JVM上运行。 这将模拟在Android设备上的工作原理,你应该假设你不能访问任何数量的不在View框架内的依赖。使用例如Glide的图像加载器将是不可能的。 出于同样的原因,任何依赖注入框架将不工作,因为它不会在预览上下文中初始化,导致视图在被扩充时抛出异常。

这里写图片描述

在这种情况下可以使用View.isInEditMode()。 使用它来检查您是否是正在预览,并跳过在Preview时不可用的依赖:

public ImageWithCaptionView(Context context, AttributeSet attrs) {        super(context, attrs);        if (!isInEditMode()) {
            ArticlesApplication.getInjector().inject(this);
        }
}

问题4:merge布局重叠

merge标签可以帮助您减少布局代码的重复。

然而,merge的问题是,它内部的所有组件将被折叠在一起,同时显示在预览里,造成视觉混乱。如下图所示,TextView覆盖在ImageView的上面:

这里写图片描述

您可以使用工具:tools:showIn=”layout”来显示使用它的一些其他现有布局内的布局的内容。 请注意,如果您在多个地方使用不同的父布局,则只能选择一个布局进行预览。

从Android Studio 2.2开始,您现在可以使用工具:parentTag =“LinearLayout”例如将渲染布局为LinearLayout。下图是使用后的效果,不再有重叠:

这里写图片描述

问题5:在预览时显示隐藏的视图

你的活动可能包含一些在onCreat时需要隐藏的View,但在一些事件后显示它们。通过设置这些视图在布局中的visibility:”GONE”,可以确保它们永远不会在预览时可见。

问题是,这些视图将从预览中消失,如果一些其他开发人员打开布局,并在预览中查找它们,他们将无法找到它。这是一个问题,因为它需要更多的精力和时间来了解屏幕上发生了什么。

您可以使用tools:visibility =“visible”属性,以仅在预览面板中显示它。

问题6:ListView的Item和Header/Footer预览

使用tools:listitem / tools:listheader / tools:listfooter可以实现在预览中增加item、header、footer的效果。例如:

<ListView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@android:id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:listitem="@layout/sample_list_item"
    tools:listheader="@layout/sample_list_header"
    tools:listitem="@layout/sample_list_footer" />

此特性在AS2.2有bug(无效),并在2.3中修复。


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP