Adding a CheckBox - Solution Udacity Japanese English

Adding a CheckBox - SolutionYouTube↗ IA↗(long shot)
Education 1.3K views 10 likes 0 dislikes 14 Jul 2015

Udacity 651K subscribers United States YouTube↗

Click to Play Video

このレイアウトにするのに必要なViewを考えてみましょう。

To build out this layout let's first think about the views that we need.

これらはビルド済みとして

I'm going to assume that all of this is already built, and we're just

レイアウトに必要なものだけ説明します。

going to talk about the new things that we need to add to our layout.

新しく追加しなければならないViewは ToppingsのTextViewと

The two new views that we need to add are a TextView for Toppings and

Whipped creamのチェックボックスです。

CheckBox view for the Whipped cream item.

AndroidにこのViewがあることを知らない方もいるでしょう。

You probably didn't know that this view existed in Android, but

その場合は、Googleで調べてみてください。

hopefully doing a Google search helped you find this answer.

ステップ2に進みます。 Viewを位置付けなければいけません。

Moving on to Step 2, we need to position the views.

これらのViewが正確な位置にあるとすると、

Assuming these views are already correctly positioned,

必要なのは「Topping」と「Whipped Cream」を同じ列に縦に並べることです。

we just need to add Toppings and Whipped cream, vertically, in the same row.

基本的に画面が縦なので

Since the root view is a vertical,

やるべきことはこの2つのViewを上に追加するだけ。

linear layout, we can just add these two Views at the top of it.

ステップ3では、Viewのスタイルを整えます。

For the third step, we need to style the views.

Toppingsのヘッダーのスタイルは、

The style at the Toppings header is the same as the Quantity and

QuantityとOrder Summaryと同じなので

Order Summary headers, so we'll be able to just copy and

コピー&ペーストします。

paste the headers that already exist.

チェックボックスは新しいので、スタイリングしなければなりません。

The CheckBox view is new though so we need to style it accordingly.

ボックスとテキストの間のスペースは24 dp、

We should allow for 24 dp of space in between the box and the text,

Whipped Creamのフォントサイズは 16 spにします。

and we should change the font size of Whipped cream to be font size of 16 sp.

それではアプリを変更しましょう。

Let's make these changes to our app now.

Toppingsのヘッダーは、 Quantityと同じなので、

To add a Toppings header that looks like the Quantity header, I can just copy and

このコードをコピー＆ペースト。

paste this code.

コピーしたら、このLinearLayout上に追加します。

I copy it and then add it to the top of this vertical LinearLayout.

すると、Quantityが2つ表示されます。

Okay, so now it says Quantity twice here.

ここをToppingsに変えます。

I'm going to change the text so that it says Toppings.

marginBottomもコピーして、

I also copied the margin bottom over so

このヘッダーの間にスペースを作ります。

that there's some space in between this header and the content below it.

チェックボックスを作るのは初めてなので

Now we haven't added a CheckBox to our app before, so

やり方をGoogleで調べます。

I'm going to Google search for how to do it.

「checkbox android」で検索します。

I'm going to search for checkbox android.

必ず「android」を含めてください。

Remember to add android because there could be checkboxes for

Webや携帯のプラットフォームのチェックボックスと混同させないためです。

other platforms, like for the web or other mobile platforms,

これでAndroidの検索結果が得られます。

this will help you get to a specific result for Android.

最初のサイトを試しましょう。

Let's try the first link.

CheckBoxのクラスに関する情報です。

This is the reference documentation for the CheckBox class.

スクロールしてみると、クラスの概観や

I scroll through and I see a nice class overview and

XMLの属性が書かれています。

then it goes straight into the XML attributes.

ここで確認したいのは CheckBoxのXMLのサンプルです。

What I'd really like though is an example of some XML for CheckBox.

もう一度、検索結果画面に戻りましょう。

So let's go back to the search results.

2つ目をクリックします。

Let's click on the second link.

素晴らしい、ここにチェックボックスの画像や

Cool, now it shows some pictures of Checkboxes.

XMLもあります。

And here's some XML.

良さそうですね。

This looks pretty good.

LinearLayoutに CheckBoxが2つあります。

It has two CheckBoxes within a LinearLayout.

最初のCheckBoxをコピーして

I'm just going to copy this first CheckBox, and

アプリにペーストしましょう。

then I'm going to paste it into our app.

ToppingsとQuantityの間、

Back in our app, I'm going to paste it after the Toppings text, but

ここにペーストします。

before the Quantity text, so right here.

このXMLは、私たちのアプリに合っていないので修正します。

I'm going to modify the XML because it doesn't exactly quite fit our use case.

IDとこのテキストも消します。

I'm going to remove the id and also the text here.

カフェで肉は売らないので、meatの代わりに

Instead of meat, because our coffee shop doesn't sell meat,

Whipped Creamを入力します。

I'm going to type in Whipped cream.

ところで@string/meatは

By the way, what you saw before, @string/meat,

strings.xmlファイルの文字列を参照していました。

was referring to a resource string in the strings.xml file.

これついては後ほど説明します。

We'll talk about that a little more later, but for now,

ここに直接文字列を入力します。

you can just type the string in directly here.

Whipped Creamのチェックボックスができました。

And look, the preview updates, so now we have a Checkbox that says Whipped cream.

このCheckBox Viewの良い点は、ボックスとテキストを同時に作れ、

What's cool about the Checkbox view is that it gives you a box,

他にテキストを入力する必要がないことです。

as well as some text, so you don't have to add another text view here.

onClickの部分は必要ありません。

We also don't need this line here that talks about onClick.

ここで一番重要なのは、チェックボックスがここに表示されることです。

All we care about for this coding task is making the CheckBox appear here.

このXMLを作成する他の方法としては、

The other way you could've arrived at this XML is by checking the common

Android Viewのチートシートです。

Android views cheat sheet.

ここには、よく使うAndroidViewが記載されています。

This cheat sheet lists a bunch of common Android views and

XMLのサンプルもあります。

it has examples for the XML as well.

CheckBox Viewもあり、そのXMLに応じた

Here's the CheckBox view and here's an example of what it would look like and

サンプル画像もあります。

the corresponding XML.

このXMLをコピーして、自分のアプリにペーストします。

You could have copied the XML from here and pasted it into the app.

Android Studioに戻って、見栄えを確認しましょう。

Going back to Android Studio let's run the app to see how it looks.

どうでしょう。

And here it is.

良さそうですね。

It looks pretty good.

Toppings、 Whipped Creamのボックス

We have the Toppings header and a Whipped cream CheckBox.

チェックすると、アニメーションもあります。

We also get this cool animation when we check the box.

問題は、スペース設定がなくなっていることです。

The only problem I see though is that the spacing is off.

Quantityとチェックボックスの間が狭く、

For example, it's too tight in between the Quantity header and

十分にスペースがありません。

the Whipped cream CheckBox, and there's also not enough space in between here.

もう一度、設定を振り返りましょう。

Going back to the red lines that were provided,

ここのスペースは24 dp、フォントサイズは16 sp

we should add 24 dp of space here, and change the font size to be 16 sp.

まずフォントサイズを変更しましょう。

First I'm going to change the font size.

android:textSize、そして"16 sp"を入力します。

I'm going to type in android:textSize and then put in a 16sp.

フォントサイズが反映されたかどうかプレビューで確認します。

I'm going to open up the preview here to check that it actually increased in font

できています。

size, and it did.

更新されたかどうか不安な場合は、このボタンをクリックしましょう。

If you're not sure if it refreshed or not you can always hit this button.

スペースについてさらに詳しく見てみましょう。

Now to figure out the spacing I actually got it to work

そのために練習と失敗が必要です。

by doing a bunch of trial and error.

正しい余白の値を設定し、

I tried to set the margin values and

パディング値も設定しましたが、

then I tried to set the padding values, and it turned out that paddingLeft

左側のパディングがボックスとテキストの間隔に影響することが判明しました。

does control the spacing in between the box and the text here.

パディングを追加しましょう。

Let's add the padding now.

これでテキストが移動しました。

Cool, the text moved over.

ただし、問題がもう一つあります。

I still see one more problem, though.

ここには十分スペースがありますが、こっちにはありません。

There's enough vertical space here, but there's not enough vertical space here.

これを調整するためには、 Quantityヘッダーの下のパディングかボックスのマージンを追加するか

I either need to add bottom padding, or bottom margin to this CheckBox view, or

上のパディングかマージンを追加する必要があります。

I need to add top padding, or top margin to this Quantity header.

どちらでもOKです。

Either way would work,

今回は、Quantityヘッダーの上のマージンを追加します。

I'm just going to add a top margin to this Quantity header.

これで改善されました！

There, that looks better!

スペースが均等になりました。

Now things appear more equally spaced.

これから端末でアプリを起動してみます。

I'm going to run this app on my device.

こちらがアプリです。

And here's the app.

バッチリですね。

It looks really good.

とてもよくできました。

さらにアプリのUIを変更したい場合は、

When you need to add more UI changes to your app, you can follow this pattern

Googleで調べて自分のアプリに適用しましょう。

of Google searching for the information online and then applying it to your app.

Similar videos:

Build_Layout
Udacity
3.3K views 15 likes 0 dislikes 22 May 201533% match

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

String Data Type
Udacity
78.9K views 30 likes 0 dislikes 28 May 201531% match

06c_q_Add_TextView_for_Price
Udacity
81.8K views 26 likes 1 dislikes 22 May 201531% match

Boolean Data Type
Udacity
54.7K views 21 likes 0 dislikes 17 Jul 201530% match

Padding vs. Margin
Udacity
114.7K views 75 likes 3 dislikes 21 Jul 201530% match

Procurar View pelo Id
Udacity
5K views 34 likes 1 dislikes 14 Jul 201530% match

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

Mac El Capitan Split Screen and Mission Control
Ceadd L
204.2K views 950 likes 79 dislikes 08 Jun 201529% match

An Introduction to the Jamboard App (First Day of Jamboard)
Google for Education
27.7K views 107 likes 9 dislikes 16 Nov 201829% match

Practice Calling Object Methods
Udacity
40K views 10 likes 2 dislikes 14 Jul 201529% match

Documentation
Udacity
203.9K views 114 likes 0 dislikes 27 Jul 201529% match

Combining String and Integer Variables
Udacity
43.4K views 13 likes 1 dislikes 27 May 201528% match

Cara Merubah Tema Whatsapp Original Menjadi Pink Tanpa Aplikasi Tambahan
IsTiN Ok
16.8K views 240 likes 23 dislikes 02 Sep 201928% match

Add or Remove Parameters
Udacity
63.6K views 27 likes 0 dislikes 14 Jul 201528% match

06a_q_Modifying_First_Line_of_Java_Code
Udacity
87.4K views 21 likes 2 dislikes 22 May 201528% match

Using Variables
Udacity
40.1K views 14 likes 2 dislikes 04 Jun 201528% match

Inputs to a Method
Udacity
42.5K views 18 likes 2 dislikes 14 Jul 201528% match

Solidworks2020 part mechanical + rendering beginner Exercise Photoview360
Simply 3D
4.4K views 94 likes 1 dislikes 28 May 202028% match

COMPUTER BOY ENTRY COMMANDS (THE CODE IS CRACKED)
Repzilla
15.6K views 533 likes 39 dislikes 23 Jun 201727% match

Debugging a Crash
Udacity
81.8K views 43 likes 1 dislikes 23 May 201527% match

Width and Height
Udacity
120.6K views 97 likes 1 dislikes 27 May 201527% match

Libgdx for Android | Tutorial 27 | Jumps | How to make Android games
Programming Tutorials
5.1K views 77 likes 2 dislikes 13 Oct 201527% match

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

Pre-scaling Bitmaps (100 Days of Google Dev)
Google for Developers
50K views 531 likes 2 dislikes 30 Jul 201527% match

Como instalar Plexus en Kodi

78.6K views 536 likes 78 dislikes 31 Aug 201727% match

What is a Java Class?
Udacity
8.4K views 68 likes 2 dislikes 07 Jul 201527% match

Create the String Variable
Udacity
71.9K views 28 likes 0 dislikes 27 May 201527% match

A Quick Tour of Android Studio
Udacity
18.1K views 71 likes 3 dislikes 06 Jun 201627% match

3-Note Sliding Guitar Lick Trick
Steve Stine Guitar Lessons
45.1K views 1.7K likes 18 dislikes 09 Aug 201927% match

Settings Privacy About Contact Donate