So how did you break up the UI
into smaller components?
Well, you might've thought that
this could be two columns.
But then it would be hard to
position the elements here.
You could center them vertically
within the height of the screen.
But it wouldn't necessarily line up
with the temperature views on the left
hand side.
Instead this looks more like
a horizontal linear layout.
Then the rest of the elements could
be laid out by using a vertical
linear layout.
The vertical linear layout
would have six children.
The third element would be a horizontal
linear layout composed of two children.
The first would be another vertical
linear layout with these two text views
and the second element would be another
vertical linear layout composed of.
These two elements.
To make the contents of the whole
screen vertically scrollable
we put it inside a scroll view.
Using a list view her would be overkill
because we don't need to scale
to an infinite number of item and
we don't need recycling.
There's a fixed number of
fields on the screen so
the scroll view is the perfect choice.
I can show you our implementation for
the fragment detail XML layout.
We hardcoded some data in the layout.
So that it would show up as
a preview in the Design pane.
At the root of the view hierarchy,
we have a ScrollView.
ScrollViews can only have max one child.
So we set that to be
the vertical LinearLayout.
Inside of this layout, we have
a TextView for the day of the week.
The calendar date and
then a horizontal linear layout.
This is followed by
the humidity text view,
wind text view, and pressure text view.
In the XMO code we see the scroll
view with the child linear layout.
We give it some padding of 16 dips so
that the content is not flesh up
against the edge of the screen.
Then we see the text views followed
by the horizontal linear layout.
We specify layout margin top of 16 dip
to give it some more space from
the bottom of this text view.
Within this horizontal linear layout
we have one vertical linear layout.
Which has a width of 0 and
a weight of 1, and
another linear layout with
a width of 0 and a weight of 1.
That means that both of these
children have equal width.
For this linear layout, we specify
gravity to be center horizontal.
That means that the contents inside
of it will be centered horizontally.
Which includes the icon as well
as the forecast text view.
Lastly we have the remaining text
views for the other weather details.
When the layout looks good,
we update the detail fragment.
At this point,
we also move it into its own file.
In the unload finish method,
we used to have a find view by
ID call to find the text view.
Now that the detail fragment
has a lot more views
we don't want to continue adding even
more fine view by ID calls here.
Because it will have to traverse
the view hierarchy every time that
the loader refreshes.
Instead we modify the on create method.
Once the fragment is
inflated we go ahead and
find a reference to all the views
we are going to need later on.
We store these views as member
variables of the class,
which is why the name
starts with the letter m.
In the on create loader method we
make sure that the projection for
our content provider query contains
all the information that we need.
It's declared at the top of the file.
Before we had it called
forecast columns, but
we just renamed it to detail columns.
And we also added some more columns
because now we're displaying more
information on the screen.
Then in the onLoadFinished method we get
a cursor back with the data we need.
We read the weather
condition ID from the cursor
because we're going to need it to
determine which image to display but for
now we can use a place order icon.
We continue reading from the cursor
to get the date, the description and
the other fields.
To format the data properly for the user
we also copied over the strings and
the utility method from the gist.
إذًا كيف قمت بتقسيم واجهة المستخدم
إلى مكونات أصغر؟
حسنًا، ربما تكون قد اعتقدت أن
.هذين عمودين
ولكن بعد ذلك، سيكون من الصعوبة بمكان
.وضع العناصر هنا
يمكنك تحديد مركزها رأسيًا
.ضمن حدود ارتفاع الشاشة
ولكن لن يكون من الضروري نظمها
مع مشاهدات درجة الحرارة على
.اليسار
وبدلاً من ذلك، فهي تبدو
.على الأرجح نموذجًا يتكون من تخطيط خطي أفقي
ومن ثم فإنه يمكن وضع بقية العناصر
باستخدام نموذج يتكون من
.تخطيط خطي
قد يتكون النموذج المؤلف من تخطيط خطي عمودي
.من ستة عناصر تابعة
وقد يكون العنصر الثالث تخطيطًا خطيًا
.أفقيًا يتألف من عنصرين تابعين
وقد يكون الأول تخطيطًا خطيًا عموديًا
آخر به هذان العرضان للنص
وقد يكون العنصر الثاني
.تخطيطًا خطيًا عموديًا آخر يتكون من
.هذين العنصرين
لجعل محتويات الشاشة بالكامل
قابلة للتمرير رأسيًا
.يتم وضعها داخل عرض مع التمرير
قد يكون استخدام عرض القائمة هنا مبالغة شديدة
لأننا لا نحتاج إلى قياس
عدد لا نهائي منها و
.لا نحتاج إلى إعادة استخدامها
هناك عدد ثابت من
الحقول على الشاشة، وبالتالي
.فإن العرض مع التمرير يعتبر اختيارًا مثاليًا
أستطيع أن أعرض لكم تنفيذنا
.لتخطيط XML لتفاصيل التجزئة
.تعذر تغييرنا لبعض البيانات في المخطط
وبالتالي يمكن عرضها كمعاينة
.في لوحة التصميم
،وفي جذر التدرج الهرمي للعرض
.لدينا ScrollView
.يمكن أن تتضمن ScrollViews تابعًا واحدًا كحد أقصى
وبالتالي فإن هذا ما وضعناه ليكون
.LinearLayoutالعمودي
وداخل هذا التخطيط، لدينا
.TextView لأيام الأسبوع
تاريخ التقويم
.ثم تخطيط خطي أفقي
ويلي ذلك
عرض نص humidity
.وعرض نص wind وعرض نص pressure
في الرمز XMO رأينا
.عرض التمرير مع التخطيط الخطي للعنصر التابع
قمنا بإعطائها مساحة من 16 وحدة dips وبالتالي
فإنه ليس من المعتاد أن يتكون المحتوى في
.الجهة المقابلة من الشاشة
وبالتالي فإننا نرى عروض النص متبوعة
.بتخطيط خطي أفقي
لقد قمنا بتحديد هامش تخطيط في الأعلى من 16 وحدة dip
لإعطائه مزيدًا من المساحة من
.الجزء السفلي من عرض النص
وداخل هذا التخطيط الخطي الأفقي
.لدينا تخطيط خطي عمودي
عرضه 0
ووزنه 1
وتخطيط خطي آخر
.عرضه 0 ووزنه 1
وهذا يعني أن كلا التابعين
.لهما عرض متساوي
في هذا التخطيط الخطي، قمنا بتحديد أن تكون
.الجاذبية نحو المركز الأفقي
وهذا يعني أنه سيتم وضع المحتويات
.بالداخل مركزيًا في شكل أفقي
وهذا يشمل الأيقونة وكذلك
.التنبؤ بعرض النص
وأخيرًا لدينا عروض النص
.المتبقية والخاصة بتفاصيل الطقس الأخرى
،عندما يبدو النموذج في حالة جيدة
.نقوم بتحديث تجزئة detail
،وعند هذه النقطة
.قمنا بنقلها أيضًا إلى الملف الخاص بها
،وفي طريقة التحميل الأخيرة
كنا معتادين على أن يكون لدينا عرض للبحث عن طريق
.طلب ID للبحث عن عرض النص
أما وأن تجزئة detail
تشتمل على المزيد من العروض
فإننا لا نرغب في الاستمرار في إضافة
.المزيد من عروض البحث عن طريق طلبات ID هناك
ولأنه سيتوجب اجتياز
التدرج الهرمي للعرض في كل مرة
.يتم فيها تحديث أداة التحميل
.وبدلاً من ذلك نقوم بتعديل أسلوب onCreate
وبمجرد أن يتم تضخيم
الجزء فإننا نمضي قدمًا
ونبحث عن مرجع لكافة العروض
.التي سنحتاجها في وقت لاحق
نحفظ هذه العروض كمتغيرات
،member(أعضاء) لهذه الفئة
وهو السبب في بدأ الاسم
.بالحرف m
في الأسلوب on create loader، نتحقق
من أن التصور
الخاص باستعلام موفر المحتوى يحتوي على
.جميع المعلومات التي نحتاجها
.وهي معلنة في الجزء العلوي من الملف
كانت تُسمى من قبل
بأعمدة التنبؤ، لكننا
.قمنا للتو بإعادة تسميتها بأعمدة التفاصيل
وقمنا أيضًا بإضافة المزيد من الأعمدة الأخرى
لأننا نقوم بعرض المزيد
.من المعلومات على الشاشة
ومن ثم فإننا نقوم في طريقة onLoadFinished
.بإرجاع المؤشر إلى الخلف مع البيانات التي نحتاجها
قمنا بقراءة معرف
حالة الطقس من خلال المؤشر
لأننا سنحتاج إلى
تحديد أي صورة نقوم بعرضها ولكن
.من الآن فصاعدًا يمكننا استخدام أيقونة ترتيب الأماكن
وسوف نستمر في القراءة عن طريق المؤشر
للحصول على البيانات والأوصاف
.والحقول الأخرى
ولتنسيق البيانات الخاصة بالمستخدم بشكل ملائم
قمنا بعمل عدة نسخ من السلاسل
.وأسلوب الأداة المساعدة من gist
このUIはどのように分割できるでしょうか
縦に2列に分割できると思うかもしれませんが
それではこの要素の配置が難しくなります
垂直方向の画面中央に配置したとしても
気温のViewの横には並ばないからです
この部分には横方向のLinearLayoutを使い
残りの要素は縦方向のLinearLayoutで配置します
縦方向のLinearLayoutでは子の要素が6つ並びます
3つ目の要素は2つの子要素で構成される
横方向のLinearLayoutになっています
その左側の要素はさらに縦に2つに分けられ
右側の要素も同様に
縦に2つに分けることができます
縦スクロールできるコンテンツを作るには
ScrollViewの内側に収めればいいのです
ここでListViewを使う必要はありません
項目数が限られており
Viewの再利用も不要だからです
画面上のフィールド数が固定されているので
ScrollViewを利用するのが一番いいでしょう
fragment_detail_xmlのレイアウトの実装は
いくつかのデータをハードコードしたので
Designペインで
プレビューとして見ることができます
View階層のルートにScrollViewがあります
ScrollViewは子を1つしか持てないので
縦方向のLinearLayoutになるよう設定します
このレイアウトには曜日や日付のTextViewの他に
横方向のLinearLayoutが含まれています
さらに湿度、風、気圧のTextViewが続きます
XMLコードの中にお試しのLinearLayoutと共に
ScrollViewが確認できます
まずLinearLayoutに16dpのパディングを与えて
コンテンツが端に寄り過ぎないようにします
次に2つのTextViewが並び
続いて横方向のLinearLayoutがあります
ここでlayout_marginTopを16dpに指定して
TextViewとの間の距離を広げてください
このレイアウトの中にある
縦方向のLinearLayoutですが
最初の方は幅がゼロ、ウェイトが1で
2つ目も幅がゼロ、ウェイトが1です
つまりこの2つのLinearLayoutは同じ幅になります
またgravityをcenter_horizontalと指定したので
コンテンツは横方向の中央に配置されます
これは予報のTextViewだけでなく
アイコンにも適応されます
残るのはその他の気象情報のTextViewです
レイアウトが整ったら
DetailFragmentをアップデートします
この時点でこれを別のファイルに移動します
onLoadFinishedメソッドでは
findViewById呼び出しを何度も行っていました
ところがDetailFragmentには
多くのViewがあるので
取得するのは一度で十分です
ローダがリフレッシュする度に
View階層をさかのぼる必要があるからです
その代わりonCreateメソッドを修正します
fragmentがインフレートされたら
あとで必要になるすべてのビューを参照できます
Viewはクラスのmember変数として保存されるため
名前が“m”で始まるのです
onCreateLoaderメソッドが
コンテンツプロバイダに要求する射影に必要な
情報を すべて含むことを確認します
これはファイルの最初に宣言されます
FORECAST_COLUMNSの前に呼び出しましたが
DETAIL_COLUMNSにリネームしています
画面にはさらに情報を表示するので
COLUMNSをいくつか足しています
次にonLoadFinishedメソッドでは
Cursorから必要なデータを取得します
あとでアイコンを決定するため
CursorからWEATHER_CONDITION_IDを
読み取りますが
ひとまず使うのはplaceholderのアイコンです
dateやdescriptionなどの情報を
Cursorから読み取り続けます
データのプロパティをフォーマットするには
Gistから文字列やUtilityメソッドの
上書きもしてください
Então como você divide a IU
em componentes menores?
Bom, você poderia pensar que
estas poderiam ser duas colunas.
Mas então seria difícil
posicionar os elementos aqui.
Você poderia centralizá-los verticalmente
dentro da altura da tela.
Mas eles não necessariamente se alinhariam
com as exibições de temperatura
no lado esquerdo.
Em vez disso, isto se parece mais com
layout linear horizontal.
Então, os outros elementos poderiam
ser colocados usando um layout
linear vertical.
O layout linear vertical
teria seis filhos.
O terceiro elemento seria um layout linear
horizontal composto por dois filhos.
O primeiro seria outro layout linear
vertical com estas duas textViews
e o segundo elemento seria outro
layout linear vertical composto.
estes dois elementos.
Para fazer com o conteúdo de toda
a tela tenha rolagem vertical,
colocamos ele em uma scroll view.
Usar uma listView aqui seria muito,
porque não precisamos dimensionar
para um número infinito de itens
nem precisamos de reciclagem.
Há um número fixo de
campos na tela, então
a scroll view é perfeita.
Posso mostrar a você a implementação para
o layout XML do menu do fragmento detail.
Fixamos um valor no código de alguns dados no layout.
para que eles aparecessem como
uma pré-visualização no painel Design.
Na raiz da hierarquia de exibição
temos uma ScrollView.
ScrollViews podem ter no máximo um filho.
então definimos para que seja
o layout linear vertical.
Dentro desse layout, temos
uma textView para o dia da semana,
a data do calendário e
um layout linear horizontal.
Em seguida temos
a textView da umidade,
a textView do vento e a da pressão.
No código XMO, vemos a scroll
view com o layout linear filho.
Damos a ele um preenchimento de 16 DPIs para
que o conteúdo não seja espremido
contra a borda da tela.
Depois vemos as textViews seguidas
pelo layout linear horizontal.
Especificamos layout_marginTop como 16 DIPs
para dar a ele mais espaço da
parte inferior desta textView.
Dentro deste layout linear horizontal
temos um layout linear vertical.
que tem largura 0 e
peso 1, e
outro layout linear com
largura 0 e peso 1.
Isso significa que estes dois
filhos têm largura igual.
Para este layout linear, especificamos
que a gravidade será center_horizontal.
Isso significa que o conteúdo nele
será centralizado horizontalmente,
o que inclui o ícone e
a textView da previsão.
Por fim, temos as textViews
restantes para os outros detalhes de previsão do tempo.
Quando o layout estiver bom,
atualizamos o fragmento detail.
Neste ponto,
também o movemos para seu próprio arquivo.
No método onLoadFinish,
costumávamos ter uma exibição de localização por
ID de chamadas para localizar a textView.
Agora que o fragmento detail
tem muito mais exibições,
não queremos continuar adicionando
ainda mais ID de chamadas aqui.
porque elas teriam que passar pela
hierarquia de exibição sempre que
o carregador atualizar.
Em vez disso, modificamos o método onCreateView.
Com o fragmento
preenchido, prosseguimos e
localizamos uma referência para todas as exibições
de que precisaremos mais tarde.
Armazenamos essas exibições como variáveis
de membro da classe,
motivo pelo qual o nome
começa com a letra m.
No método onCreateLoader,
verificamos se a projeção da
consulta do provedor de conteúdo contém
todas as informações de que precisamos.
Isso é mostrado no topo do arquivo.
Antes isso era chamado de
colunas de previsão, mas
renomeamos para colunas de detalhes.
E também adicionamos mais algumas colunas
porque agora estamos exibindo mais
informações na tela.
Em seguida, no método onLoadFinished, temos um
cursor com os dados de que precisamos.
Lemos o ID de condição da
previsão do tempo do cursor
porque precisaremos dele para
determinar que imagem será exibida, mas por
enquanto podemos usar um ícone de placeholder.
Continuamos a ler do cursor
para obter a data, a descrição e
os outros campos.
Para formatar corretamente os dados para o usuário,
também copiamos as strings e
o método de utilitário do gist.
Làm thế nào để bẻ UI này thành nhiều mảnh nhỏ hơn
Well, bạn có thể nghĩ là dùng 2 cột như thế này
Nhưng nó sẽ khó để xác định vị tri cho các thành phần ở đây
Bạn có thể để chúng ở trung tâm theo chiều dọc màn hình
Nhưng nó sẽ không nhất thiết phải thẳng hàng với temperature view ở
Bên tay trái
Thay vào đó, như thế này thì giống linear layout ngang hơn
rồi các phần còn lại có thể sử dụng một
linear layout dọc
linear layout dọc có 6 đứa người con :v
Người con thứ 3 là một linear layout ngang, và có 2 người con nữa :3
Người con cả sẽ là một linear layout dọc (giống ông nó :v ) với 2 người con là 2 text view
và người con thứ 2 cũng như vậy, cũng là linear layout và có
2 người con
Để làm cho nội dung chạy dọc theo màn hình
ta đặt chúng vào trong một scroll view
Dùng một list view thì hơi thừa
vì chúng ta không cần tăng
tới vô hạn các item và
chúng ta không cần tái chế
Khi có một lượng field cố định trên màn hình
scroll view là lựa chọn hoàn hảo
Tôi có thế cho bạn xem code của fragment detail layout
Chúng ta hardcođe một số dữ liệu trong layout
Vì thế nó sẽ hiển thị ở khung Design
Ở gốc của view hierarchy (phân cấp view),
chúng ta có một Scroll view
ScrollView có thể chỉ có một con
Nên chúng ta set nó cho vertical Linear layout
Trong layout này, chúng ta có một TextView cho một ngày trong tuần
ngày tháng và
một horizontal linear layout
Và theo sau là
text view độ ẩm
text view gió và áp suất
trong XML code chúng ta thấy scroll view với linear layout con
Chúng ta cho nó padding là 16dp
vì thế nội dung không bị phình ra cạnh màn hình
Rồi chúng ta thấy text view, theo sau
là horizontal linear layout
Chúng ta xác định layout margin top là 16dp
để cho nó thêm khoảng trống
với đáy của text view này
Trong horizontal layout này
chúng ta có một vertical linear layout.
nó có width là 0 và weight là 1, và
linear layout khác với width là 0
và weight là 1
Nghĩa là cả 2 layout con đều có cùng chiều rộng
Với linear layout này, chúng ta để gravity là center horizontal
Nghĩa là nội dung trong nó sẽ được căn giữa theo chiều ngang
Cái mà chứa icon cũng như forecast text view
Cuối cũng chúng ta có các textview còn lại cho các chi tiết khác về thời tiết
Khi layout trông ổn,
chúng ta update detail fragment
Ở thời điểm này,
Chúng ta cũng chuyển nó vào trong file của nó
Trong onLoadFinished
chúng ta đã từng có một find view by id để tìm text view
Giờ detail fragment
có rất là nhiều text view
Chúng ta không muốn
tiếp tục thêm lệnh find view by id ở đây nữa
vì nó sẽ phải đi qua
view hierarchy mỗi khi
loader refresh
Thay vào đó ta sẽ sửa phương thức onCreate
Một khi fragment
đã inflate ta sẽ tiếp tục
tìm một tham chiếu đến tất cả các view
mà chúng ta sẽ cần sau này
ta lưu nhưng view này như là
biến thành viên của class
Vì thế nên nó bắt đầu bằng chữ m
Trong on create loader chúng ta
đảm bảo là cái projection đó
cho content provider query của chúng ta chứa
tất cả thông tin mà chúng ta cần
Nó khai báo ở trên đầu file
Lúc trước chúng ta gọi nó là forecast column, nhưng
giờ ta sửa tên nó thành detail column
Và chúng ta cũng thêm một số column nữa
vì giờ ta phải hiển thị nhiều
thông tin hơn trên màn hình
trong onLoadFinished chúng ta lấy
một con trỏ trả về với dữ liệu mà ta cần
chúng ta đọc weather condition ID từ cursor
vì chúng ta sẽ cần nó
để xác định ảnh nào cần hiển thị nhưng
giờ chúng ta có thể dùng một place holder icon
Chúng ta tiếp tục đọc từ cursor
để lấy data, description và
những field khác
Để format data đúng cách cho người dùng
chúng ta cũng chép những chuỗi và
utility từ gist
你是如何将 UI 拆分成更小的组件的?
你可能想到将其分为两列
但是这样就很难将元素放到这里
你可以在屏幕的高度范围内将它们居中垂直放置
但这样就无法与左侧气温视图
对齐了
相反 这样看起来更像水平线性布局
而剩余的元素可以通过垂直线性布局
进行布置
垂直线性布局包含六个子元素
第三个元素是水平线性布局 由两个子元素组成
第一个是一个垂直线性布局 包含两个文本视图
第二个则是另外一个垂直线性布局
由这两个元素组成
为使整个屏幕中的内容可以垂直滚动
我们将其放置在一个滚动视图中
在此处没有必要使用列表视图 因为我们不需要无限扩展
条目数量 而且不需要重复循环
屏幕上的字段数量是固定的
因此滚动视图是最佳选择
我可以向大家展示我们是如何实施 fragment_detail.XML 布局的
我们对布局中的某些数据进行了硬编码
使其在“设计”窗格中以预览形式呈现
在视图层级的根部是 ScrollView
ScrollView 最多仅可拥有一个子元素
因此我们将其设置为垂直 LinearLayout
在该布局内 我们的 TextView 会依次显示一周的某天、
日历日期以及水平线性布局
接下来是湿度文本视图、
风力文本视图和气压文本视图
在 XMO 代码中 我们看到了此子线性布局滚动视图
我们将内边距设为 16 dip
这样内容就不会超出屏幕边缘了
然后是文本视图 之后是水平线性布局
我们将 Layout_marginTop 指定为 16 dip
使其与该文本视图底部隔开更多空间
在该水平线性布局中 我们设置了一个垂直线性布局
该布局的宽度为 0 权重为 1
另一个线性布局也是宽度为 0 权重为 1
也就是说 这两个子布局宽度相等
对于该线性布局 我们将重力方向指定为水平居中
也就是说 该布局中的内容采用水平居中的对齐方式
包括图标和天气预报文本视图
最后这些是其他天气详情的剩余文本视图
布局正常显示后 我们会更新 DetailFragment
此时 我们也会将其放入其本身的文件中
在 onLoadFinished 方法中
过去 我们常常通过调用 findViewById 方法来查找视图
现在 DetailFragment 提供了更多的视图
我们不想再继续在此添加更多的 findViewById 调用了
因为每次加载器刷新时
它都要遍历视图层级
我们修改了 onCreateView 方法
Fragment 扩充后 我们便可
继续查找之后需要的所有视图的引用
我们将这些视图存储为类的成员变量
这也是名称以字母 m 开头的原因
在 onCreateLoader 方法中 我们确保内容提供器查询的
Projection 包含所有必需的信息
这在文件顶部已得到声明
将其称作天气预报列之前
我们先将其重命名为详情列
而且我们还添加了更多列 因为我们现在
要在屏幕上显示更多信息
然后 在 onLoadFinished 方法中 我们获得了包含所需数据的光标
我们从光标中读取天气状况 ID
因为我们需要通过该 ID 来确定要显示的图片
但现在 我们可以使用占位符图标
我们继续从光标中读取日期、说明和
其他字段
要为用户正确地设置数据格式 我们还从 Gist 中复制了
字符串和工具方法