Implementing Redlines - Developing Android Apps Udacity English Chinese (Simplified)

Implementing Redlines - Developing Android AppsYouTube↗ IA↗(long shot)
Education 917 views 1 likes 0 dislikes 23 Feb 2015

Udacity 651K subscribers United States YouTube↗

Click to Play Video

It's time to implement the redlines for the main activity.

现在是时候在主活动项中加入红线了，

We can do one part together so that you get the hang of it.

我们可以一起做一部分以便于你能理解。

We begin by styling the list item Forecast Layout.

我们可以从设计主列表栏目 “天气预报布局”开始

The redline specifies that the image should be 32dp by 32dp.

红线指定了图像大小为32x32dp,

We could hard code the image view to be 32 by 32dp,

我们可以把图片视图硬编码为32x32dp

but it's actually the same as leaving it as wrapped content for height and width.

但这其实跟把它当成被包裹的内容来处理高和宽是一回事

To know what the icon size would be if we wrap content,

想要知道如果我们包裹内容图标应该是多大

we open up the MDPI version of the icon,

我们可以打开MDPI版本的图标

and we do verify that it is 32 pixels by 32 pixels.

并且确认它是32x32像素

Whether we hard code it or just add wrap content,

不管我们是将它硬编码还是添加包裹内容

visually, the image will still look the same,

图像看起来还是一样的

but in the future it will be more flexible

但今后，如果我们指定包裹内容

if we just specify wrap content in case the image size changes.

万一图像的大小有变化，操作起来会更方便一点。

Next we style the text.

接着我们设计文字

On Ice Cream Sandwich and above, Roboto is the default font for text views.

在“冰激凌三明治”及以上, Roboto是文本视图自选的字体

It is created specifically to satisfy the requirements of UI

它是为满足用户界面的要求而特制的，

and to optimize for high density screens.

并且是为高密度屏幕而优化的。

The redline indicates that the font family is Roboto sans serif condensed,

红线标示字体家族是 Roboto sans serif浓缩体，

so we add that to the code.

所以我们把这加到编码中.

On the topic of font sizes, having too many font sizes in your app,

说起字号，应用程序里有太多字号的话

can confuse your user about the visual hierarchy of your app,

可能会让用户混淆应用程序里的视觉层次，

as to what's important and what's not important.

不知道什么重要什么不重要。

The Android design guide recommends these four type sizes

安卓设计手则推荐这四种字号

for consistency with a platform and for user experience.

为保证与平台的统一性和更好的用户体验。

In our app, we stick to the standard type sizes.

在这里，我们保持标准字号

Unless it's an intentional part of the design, such as the large temperature values.

除非它是特意设计的部分，比如最高的气温数值。

Hence, when the redline says that the date text

所以，当红线认为日期文字

should be 22sp for font size,

的字号应该是22sp时，

we could specify Android text size to be 22sp,

我们可以指定安卓字号为22sp

but the text appearance large attribute already maps to that value.

不过字体外形较大这一属性已经计划在那个数值之中。

Note that the font sizes are specified in sp, and not dp.

注意字号是以sp标注的，而非dp。

Sp stands for scaled pixels, so you can scale with the device font size.

sp代表的是比例像素，能够和设备字号成比例调整。

In our app we specify text appearance large,

在我们的应用程序中，我们指定

and text appearance small, which will give us

字体外形较大时是22sp

22sp and 14sp respectively.

而字体外形较小的是14sp。

The default font color is black, so we don't need to specify

自选字体的颜色是黑色，

the android text color attribute on our text views.

所以我们不需要在安卓文字视图外再指定颜色属性。

Let's look at the spacing for the elements within the list item now.

来看看列表栏目中各元素的间距

We have three children.

我们有三个子视图

The first one is 60dp wide, with the image centered inside of it.

第一个宽60dp，以图像为中心

So we can add a frame layout around the image view

所以我们可以在图片视图周围加一个框架布局

and set the gravity to be center on the image,

然后把重力设在图片上,

that way the image centers itself within the parent.

这样图片会把自身作为母视图内的中心

For the other two columns, we shouldn't hard code

对于其他两个栏

such high dp values.

我们不该硬编码这么高的dp值，

Because otherwise the layout won't scale across other devices.

因为布局不能在其他设备上按比例缩放。

Instead, we can use linear layout weights,

合适的方法是使用线性布局权重，

with the weight of seven here, and the weight of five.

这里用的是权重七，这是五

We just tried different values until we got approximately equal

我们就一直试用不同的数值，

to these values.

直到得出约等于这些数值的权重为止。

The trick in doing redlines is that you want to match the visual specs,

制作红线的窍门在于匹配视觉规格

but you also want to be flexible in the code,

但是也别忘了代码中的灵活性

so that it adapts to different screen sizes.

这样它能适应不同的屏幕大小

And this is what the code looks like for the list_items_forecast layout.

这就是列表项预报布局的代码的样子 list_items_

We have a horizontal linear layout,

这是一个水平线性布局,

containing the frame layout with the image view.

包含框架布局及图片视图,

Then we have a vertical linear layout with weight seven.

然后就有了一个权重为七的纵向线性布局。

And then we have another vertical linear layout with weight five.

之后是另一个权重为五的纵向线性布局.

We can check the link below for the full code file.

你可以在下面的链接中查看完整的代码文件

This is what it should look like when you're done.

完工后看起来应该是这样.

These items looks polished

下面的栏目看起来是经过了精心设计。

but we haven't gotten to the today item yet.

不过我们还没完成今天的项目。

Similar videos:

Start to Build the App - Developing Android Apps
Udacity
42.2K views 31 likes 6 dislikes 23 Feb 2015100% match

Add ListItem XML - Developing Android Apps
Udacity
40.4K views 29 likes 17 dislikes 23 Feb 2015100% match

ScrollViews vs ListViews - Developing Android Apps
Udacity
35.8K views 34 likes 5 dislikes 23 Feb 2015100% match

Finish Creating a New Project - Developing Android Apps
Udacity
15.8K views 14 likes 1 dislikes 23 Feb 2015100% match

Implementing a SyncAdapter - Developing Android Apps
Udacity
24.2K views 59 likes 36 dislikes 23 Feb 2015100% match

Select a Target SDK - Developing Android Apps
Udacity
49.2K views 25 likes 0 dislikes 23 Feb 2015100% match

Finding Views findViewById() - Developing Android Apps
Udacity
22.8K views 16 likes 9 dislikes 23 Feb 2015100% match

Launch Sunshine and Create an AVD - Developing Android Apps
Udacity
47.2K views 39 likes 1 dislikes 23 Feb 2015100% match

Main Thread vs Background Thread - Developing Android Apps
Udacity
19.3K views 43 likes 7 dislikes 23 Feb 2015100% match

Introdução ao Design Responsivo
Udacity
35K views 17 likes 0 dislikes 23 Feb 2015100% match

Installing Android Studio - Developing Android Apps
Udacity
66K views 126 likes 2 dislikes 23 Feb 2015100% match

Find the Query We Want - Developing Android Apps
Udacity
14.6K views 7 likes 1 dislikes 23 Feb 2015100% match

Great Work! - Developing Android Apps
Udacity
20.1K views 9 likes 4 dislikes 23 Feb 2015100% match

Create Some Fake Data - Developing Android Apps
Udacity
31.6K views 19 likes 21 dislikes 23 Feb 2015100% match

Select a Target SDK Solution - Developing Android Apps
Udacity
44.6K views 25 likes 1 dislikes 23 Feb 2015100% match

Install HAXM - Developing Android Apps
Udacity
52K views 57 likes 2 dislikes 23 Feb 2015100% match

Layout Managers - Developing Android Apps
Udacity
29.5K views 25 likes 4 dislikes 23 Feb 201564% match

Are you ready for this course? - Developing Android Apps
Udacity
80K views 66 likes 4 dislikes 23 Feb 201564% match

Introducing More Sunshine - Developing Android Apps
Udacity
63.8K views 91 likes 0 dislikes 23 Feb 201564% match

ListView and Recycling - Developing Android Apps
Udacity
47.7K views 149 likes 3 dislikes 23 Feb 201564% match

Initialize the Adapter - Developing Android Apps
Udacity
28.7K views 34 likes 8 dislikes 23 Feb 201564% match

Developing Android Apps
Udacity
650.6K views 428 likes 22 dislikes 15 Jul 201460% match

Add ListView to layout - Developing Android Apps
Udacity
35.7K views 33 likes 9 dislikes 23 Feb 201558% match

Introducing Project Sunshine - Developing Android Apps
Udacity
112.9K views 205 likes 8 dislikes 15 Jul 201458% match

Course Goals and Prerequisites - Developing Android Apps
Udacity
96.2K views 231 likes 4 dislikes 15 Jul 201458% match

Add ListView to layout - Developing Android Apps
Udacity
31.4K views 21 likes 2 dislikes 23 Feb 201558% match

Build Layout
Udacity
147.7K views 27 likes 0 dislikes 29 May 201528% match

Layout Weight
Udacity
3.8K views 26 likes 1 dislikes 22 May 201527% match

Simple ImageView
Udacity
150K views 82 likes 1 dislikes 26 May 201527% match

LinearLayout
Udacity
206K views 104 likes 0 dislikes 26 May 201527% match

Settings Privacy About Contact Donate