Modify_List_Item_Layout Udacity English Chinese (China)

Modify_List_Item_LayoutYouTube↗ IA↗(long shot)
Education 979 views 6 likes 2 dislikes 22 Apr 2016

Udacity 651K subscribers United States YouTube↗

Click to Play Video

Now to add an image to the list item layout,

要向列表项布局中添加图片

I'm going to open up the list item dot XML layout file.

我将打开 list_item.xml 布局文件

We see here that it already has two text views.

在这里可以看到它已经有两个 TextView

One that holds Miwok word and another for the English translation.

一个用于存储米沃克单词一个用于存储英语翻译

So let's go ahead and insert an image view here.

我们在这里插入一个 ImageView

I'm going to sign a view ID called image because we were for to this in the Java

我将分配一个视图 ID 叫做图片因为我们需要

code reader, in order to make changes to the image source and

稍后添加到 Java 代码中以便对图片来源做出更改

as a note we don't need to do that in this coding task particular, but

注意我们不需要在这个编程任务中这么操作

we will in the future one.

但是将在下个任务里执行

Next let's set the layout width and height to be both wrapped content.

接着将布局宽度和高度设为 wrapped_content

And lastly let's set the Android source attribute to use

最后将 Android 来源属性设为

the app icon as the placeholder image like we mention of the quiz.

使用应用图标作为占位符图片正如在测试题中提到的一样

So we refer to the app icon using the syntax @mipmap/ic_launcher.

我们使用语法 @mipmap/ic_launcher 来引用该应用图标

All right, that looks good so let's test it by running our device now.

看起来一切正常我们在设备上运行并测试下应用

So with our device running let's tap into the numbers activity.

在这个运行的应用中我们点按 NumbersActivity

All right cool so it's running and we have the image on our screen.

很棒应用能运行屏幕上出现了图片

However the icon and the spacing doesn't look quite like we wanted to just yet.

但是图标和间隔与我们期望的还有点差距

So from the quiz we saw that we want the image on the left and

在测试题中可以看出我们希望图片在左侧

our text on the right.

文字在右侧

So we'll need to make a few adjustments to our layout.

所以我们需要对布局做出一些调整

So to modify this list item layout, first I can see that we can build this

要修改这个列表项布局首先可以看出我们可以用

list item with the horizontal linear layout.

水平线性布局来构建这个列表项

So the first child is the image and

第一个子视图是图片

the second child is all the text on the right.

第二个子视图是右侧的所有文字

So we can do this with the horizontal linear layout with two child views.

我们可以用两个子视图来构建这个水平线性布局

We also notice that the second child is made up of two text views

我们还注意到第二个子视图由两个文本视图构成

that are vertically stacked.

并且垂直堆叠

So this can be created with a vertical linear layout.

所以这个可以用垂直线性布局来创建

So here we see that we have a vertical linear layout

在这里可以看出有一个垂直线性布局

nested within the horizontal linear layout.

嵌入水平线性布局中

This is a concept called nested view groups.

这一概念就叫做嵌套视图

So view groups contained within other view groups.

即某些视图包含在其他视图内

And remember that we learned this topic back in lesson two of the last course.

其实我们在上一门课程的第二节课里学过这个概念

Now back in Android studio, let's make those changes to our listItem layout.

现在回到 Android studio 并对我们的列表项布局做出这些更改

First I'm going to modify a linear layout to change it orientation from

首先我将修改线性布局使其从垂直方向变成

vertical to horizontal.

And then next I'm going to wrap our two text views inside a new

接着将这两个 TextView 封装在

vertical LinearLayout and then add the closing tag.

新的垂直 LinearLayout 内然后添加结束标记

Notice here in the new LinearLayout I just added

注意在这个我刚刚添加的新 LinearLayout 内

that there is some padding on the left here.

这里添加了一些向左内边距

So 16 dbs of space between the text and the image.

即文字和图片之间的间隔是 16 dbs

Now let's preview to see what that looks like so

现在预览下效果如何

click the preview button over here.

点击这里的“预览”按钮

So from the preview pane I can see that the layout looks a lot better.

从预览面板里可以看出布局看起来好多了

So we have the best icon on the left and our two text views on our right.

左侧是篮子图标右侧是两个文本视图

Now let's go ahead and run the app on our device and see what it looks like.

现在在设备上运行下该应用看看效果如何

So first I want to close up the preview pane and run our app.

先关闭预览面板然后运行应用

So here's the current version of the app running on our device now I'm

这就是当前版本的应用在设备上的运行效果

going to tap into the NumbersActivity perfect.

点按 NumbersActivity 一切正常

So it looks like a screenshot from the quiz with our basket icon on the left

看起来和测试题中的屏幕截图是一样的篮子图标位于左侧

and showing for each list item.

并且每个列表项都显示了该图标

Now, things aren't exactly looking the same as our design marks but

虽然和设计模型还不太相似

we can worry about these little details such as font size, colors, and

但是我们可以在这节课快结束时再处理这些小细节

padding at the end of this lesson.

例如字体大小颜色和内边距

Similar videos:

Modify_List_Item_Layout
Udacity
30.2K views 8 likes 4 dislikes 22 Apr 201631% match

List View and Array Adapter Code
Udacity
927 views 5 likes 7 dislikes 21 Apr 201630% match

Modify_the_WordAdapter_Class
Udacity
27.2K views 10 likes 9 dislikes 22 Apr 201628% match

User On Click Listeners for All Users Missing Tablet Phone
Udacity
971 views 8 likes 14 dislikes 11 May 201627% match

Build Quantity Picker Layout - Solution
Udacity
1.6K views 16 likes 0 dislikes 27 May 201525% match

Use an Intent to Open Another Activity
Udacity
52.8K views 9 likes 0 dislikes 11 May 201625% match

Settings Privacy About Contact Donate