Once again, here's the design
we're looking to create.
What's great about this view is that
it uses mostly UI elements we've seen
before.
In order to prevent the number
of complex layouts from growing
explosively, we're going to
take advantage of three Android
layout features.
The first one we've seen before.
The only difference between
a forecast list item on the phone and
on the tablet is padding and
margins around the list items.
Fortunately, it's easy to add
this to the forecast list.
We can use dimensions to give the same
layout more space in tablet layouts.
In forecast list item layout, we can add
a padding dimension to the outer layout.
We use padding here instead of margin
because we just want the content in set.
If we used margin,
the row selector wouldn't be drawn
across the entire list item.
We also use a different dimension for
the space between the two temperatures.
Note that we use both right and
end to make sure that this layout is
ready for right to left mirroring.
So then in our resource's file we
create a dimension that updates
the extra padding and
the space between the two temperatures.
And that layout is updated.
I'm using sw600dp-port.
Which means that these changes will
only be applied Portrait Orientation
with devices and a view sides
with at least a width of 600 dp.
The second thing we take advantage of
is Layout Reuse using the include tag.
We can see that our portrait and
landscape detail fragment
use the same views.
The fragment detail view contains
these included lay outs already.
Note that we can assign new lay out
parameters when we include the lay out.
We're not using this in sunshine.
But we can avoid adding an extra
container when we include the layout by
using the merge tag in
the layout to be included.
Finally, we're going to
continue to make use of Refs.
Refs allow us to make aliases for
resources.
As you can see,
in tablet landscape mode,
the detail view should point to
a vertical version of the view.
We're going to create a Ref that
points to fragment_detail_start and
make sure that it points to the correct
detail fragment for all configurations.
This will come in handy
in the next lecture.
مرة أخرى، هذا هو التصميم
.الذي نسعى إلى إنشائه
الرائع في هذا العرض
هو استخدامه في الغالب لعناصر واجهة المستخدم التي رأيناها
.من قبل
لمنع عدد
التخطيطات المعقدة من التزايد
بصورة هائلة، سنستفيد
من ثلاث ميزات للتخطيط في
.Android
.الأولى رأيناها من قبل
الاختلاف الوحيد بين
أحد العناصر في قائمة التنبؤ على الهاتف
وبين الكمبيوتر اللوحي يتمثل في المساحة المتروكة
.والهوامش حول عناصر القائمة
ولحسن الحظ، يسهل إضافة
.هذا إلى قائمة التنبؤ
يمكننا استخدام الأبعاد لمنح نفس
.التخطيط مساحة أكبر في تخطيطات الكمبيوتر اللوحي
وفي تخطيط عناصر قائمة التنبؤ، يمكننا إضافة
.بُعد مساحة متروكة للتخطيط الخارجي
(نستخدم padding (ترك المساحة) هنا بدلاً من margin (الهامش
.لأن ما نريده هو أن يكون المحتوى مدرجًا فقط
،(إذا استخدمنا margin (الهامش
يتم رسم محدِّد الصف
.عبر عنصر القائمة بالكامل
ونستخدم أيضًا بُعدًا مختلفًا
.للمسافة بين درجتي الحرارة
(لاحظوا استخدامنا لكلٍّ من Right (اليمين
وEnd (النهاية) للتحقق من أن هذا التخطيط
.جاهز للانعكاس من اليمين إلى اليسار
،(ثم بعد ذلك في ملف resources (الموارد
ننشئ بُعدًا لتحديث
المساحة المتروكة الإضافية
.والمسافة بين درجتي الحرارة
.ويتم بذلك تحديث التخطيط
.أنا أستخدم sw600dp-port
وهو ما يعني تطبيق هذه التغييرات
فقط باتجاه عمودي
على الأجهزة وبضعة جوانب
.بعرض 600 dp على الأقل
الأمر الثاني الذي يتعين الاستفادة منه
.هو إعادة استخدام التخطيط بواسطة علامة التضمين
يمكننا رؤية أن تجزئة detail العمودية
والأفقية
.تستخدم نفس طرق العرض
يحتوي عرض detail التجزئة على
.تلك التخطيطات المضمنة بالفعل
ولاحظوا أن بإمكاننا تخصيص معلمات تخطيط جديدة
.عند تضمين التخطيط
.إننا لا نستخدم هذا في تطبيق Sunshine
لكن بإمكاننا تجنب إضافة حاوية إضافية
عند تضمين التخطيط باستخدام
علامة الدمج في
.التخطيط المطلوب تضمينه
وأخيرًا، نواصل
.(الاستفادة من Refs (المراجع
تتيح لنا Refs (المراجع) إنشاء أسماء مستعارة
.للموارد
،وكما ترون
،في الوضع العرضي للكمبيوتر اللوحي
يجب أن يشير عرض detail إلى
.إصدار رأسي من العرض
(سنقوم بإنشاء Ref (مرجع
يشير إلى fragment_detail_start
ونتأكد من أنه يشير إلى
.تجزئة detail الصحيحة لكل التكوينات
وهذا سيكون مفيدًا
.في المحاضرة المقبلة
Una vez más, aquí está el diseño
buscamos crear.
Lo bueno de este punto de vista es que
que utiliza elementos de interfaz
Antes de.
Con el fin de evitar que el número
diseños
explosivamente, vamos a
tomar ventaja de cada tres Android
características de diseño
El primero que hemos visto antes.
La única diferencia entre
un elemento de lista de previsión en el
en la tableta es el relleno y
márgenes alrededor de los elemen
Afortunadamente, es fácil añadir
esto a la lista de pronóstico.
Podemos utilizar las dimensiones para
En previsión de diseño elemento de la list
Utilizamos el relleno aquí en lugar de
Si utilizamos el
el selector de fila no se elaboraría
en todo el elemento de la lista.
También utilizamos una dimensión diferente
Tenga en cuenta que utilizamos
terminar para asegurarse de que esta
Así que en el expediente que de nuestro
el acolchado extra y
el espacio entre las dos temperaturas
Y ese diseño se actualiza.
Estoy usando sw600dp-puerto.
Lo que significa que estos cambios
Sólo se aplicará Orientación Retrato
con los dispositivos y una vista lados
con al menos una anchura
La segunda cosa que aprovechamos
es Layout Reutilización utilizando
Podemos ver que nuestro retrato
fragmento detalle del paisaje
utilizar los mismos puntos de vista.
La vista de detalle fragmento contiene
éstos incluyen laicos
Tenga en cuenta que podemos asignar nueva
No estamos usando esto en el sol.
Pero podemos evitar añadir un extra
recipiente cuando inclui
usando la etiqueta de combinación en
la disposición a ser
Por último, vamos a
seguir haciendo uso de las referencias.
Por último, vamos a
seguir haciendo uso de las referencias.
Como puedes ver,
en modo horizontal de la table
la vista de detalle debe apuntar a
una versión vertical de la
Vamos a crear una Ref que
puntos para fragment_detail_start y
asegúrese de que apunta a la correcta
fragmento de detalle para todas
Esto será muy útil
en la próxima conferencia.
Novamente, aqui está o design
que queremos criar.
O legal desta exibição é que
ela usa a maioria dos elementos de interface que vimos
anteriormente.
Para impedir que o número
de layouts complexos cresça
muito, vamos usar
três recursos de layout
do Android.
O primeiro já vimos antes.
A única diferença entre
um item de lista de previsão no celular e
um no tablet é o preenchimento e as
margens em volta dos itens da lista.
Felizmente, é fácil adicionar
isso à lista de previsão.
Podemos usar dimensões para dar ao mesmo
layout mais espaço quando usado em tablets.
No layout de item da lista de previsão, podemos adicionar
uma dimensão de preenchimento ao layout exterior.
Usamos o preenchimento aqui, em vez de margens,
porque queremos o conteúdo no conjunto.
Se usássemos margens,
o seletor de linha não seria desenhado
entre os itens da lista.
Também usamos uma dimensão diferente para
o espaço entre as duas temperaturas.
Note que usamos tanto Right quanto
End para ter certeza de que este layout está
pronto para espelhamento da direita para a esquerda.
Depois, no arquivo de recurso,
criamos uma dimensão que atualiza
o preenchimento extra e
o espaço entre as duas temperaturas.
E, assim, o layout está atualizado.
Estou usando a configuração sw600dp-port.
Isso significa que essas alterações só
serão aplicadas na orientação Retrato
com dispositivos que têm dois lados
com, pelo menos, 600 dp de largura.
O segundo recurso que aproveitamos
é a reutilização de layout usando a tag de inclusão.
Podemos ver que nosso fragmento detail usa,
na orientação Retrato e na orientação Paisagem,
as mesmas exibições.
A exibição de fragmento detail já contém
esses layouts.
Note que podemos atribuir novos parâmetros
de layout quando incluímos o layout.
Não estamos usando isso no Sunshine.
No entanto, podemos evitar a adição de outro
contêiner quando incluímos o layout
usando a tag de mesclagem no
layout a ser incluído.
Por fim, vamos
continuar a usar referências.
As referências nos permitem criar aliases para os
recursos.
Como você pode ver,
no modo paisagem de tablets,
a detail view deve apontar para
uma versão vertical da exibição.
Vamos criar uma referência
apontando para fragment_detail_start e
nos certificar de que ela aponte para o fragmento
detail correto para todas as configurações.
Isso será bastante útil
na próxima aula.
我们想要实现的是这里所示的设计方案
其优点在于 使用的大多数 UI 元素都是
我们之前见过的
为了防止复杂布局的数量爆炸性增长
我们将要利用三种
Android 布局功能
第一种我们以前见过
手机和平板电脑上预报列表的差别
只在于列表项周围的间距
好在这很容易添加到预报列表
我们可以使用维度来赋予平板电脑上的相同布局更多空间
在预报列表项布局中 我们可以向外围布局添加内间距维度
之所以使用内间距而非外间距 是因为我们希望将内容内嵌到布局中
如果使用外间距
行选择器将不会覆盖整个列表项
我们也为两个温度之间的空间使用不同维度
请注意 我们同时使用 right 和 end
以确保该布局支持从右向左的镜像
因此 在资源文件中 我们创建一个维度来更新
两个温度之间的额外内间距和空间
该布局也更新完毕
我使用了 sw600dp-port
也就是说 这些更改只会应用于纵向方向的设备
以及边界宽度至少为 600 dp 的视图
我们要利用的第二项功能是通过 include 标记实现的布局复用
我们可以看到
纵向和横向详细信息 Fragment 使用相同的视图
fragment.detail 视图已经包含这些布局
请注意 在 include 布局时 我们可以为其分配新的布局参数
在 Sunshine 里不会用到这个
在 include 布局时 若在该布局中使用 merge 标记
可以避免添加额外的容器
最后 我们要再次使用 Ref
Ref 可让我们为资源指定别名
可以看到 在平板电脑的横向模式中
详细信息视图应当指向视图的垂直版本
我们将创建一个指向 fragment_detail_start 的 Ref
并确保它指向正确的详细信息 Fragment 以获取正确配置
在下一课中 这对我们会有所帮助