All right!
Your done.
Lets go over my solution.
Before we actually go to lay out
the bottom half of our details view
lets strategize.
We have two columns,
one that contains these headers, and
one that contains data.
The headers column is pretty
easy it's all left justified,
32 dp away from the edge.
The other column is also justified
right from the other edge but all three
of those elements are aligned left.
This would be very tricky to do with
anything else other then a grid lay out.
We're going to let these three elements
actually take up the expanded space.
Let's look at how we implemented that.
All right, so
let's take a look at our grid layout.
As you can see, the padding in
the bottom and top is 16DPR.
Abc_action_bar_content_inset_material.
Our padding in left and
right, in start at end, for
right to left languages,
is forecase_detail_horizontal_padding.
Or 32DP as we defined
it in our dimensions.
Let's take a look at our first row and
column.
As you can see,
we're using columnWeight 1.
Let the layout manager know
that this text view is actually going to
expand to take up any additional space.
We use a rowWeight of 1 to also show
this row is going to participate in any
additional space that
the layout manager may have.
And here's our first column.
And here's our second column.
Notice that we're not using
any weights here at all.
Other than that this is pretty simple,
all of our rows have
a row weight of one, so
they'll all participate in the extra
space, so they'll all be spaced evenly.
This gives the layout a nice even look.
And that's it.
That's pretty straight forward.
Again, there's not necessarily
one solution to this.
One of the things I like about layouts,
is that each one of them is
like solving a little puzzle.
All right, it's running in the emulator.
And there's our new detail view
with that bottom section
looking exactly as we intended.
!حسنًا
.لقد انتهيتم
.فلندرس الحل
قبل أن ننتقل بالفعل إلى تخطيط
،النصف السفلي من عرض details
.دعونا نحدد الاستراتيجية
.لدينا عمودان
،يحتوي أحدهما على هذه الرؤوس
.وآخر يحتوي على بيانات
يتميز عمود الرؤوس بالسهولة
وبمحاذاة كافة عناصره إلى اليسار
.على مسافة 32 dp من الحافة
ويتميز العمود الآخر أيضًا
بمحاذاته إلى اليمين من الحافة الأخرى، ولكن مع محاذاة كافة هذه العناصر الثلاثة
.إلى اليسار
وسيكون من الصعب تنفيذ ذلك
.بأية طريقة أخرى غير تخطيط الشبكة
سنجعل هذه العناصر الثلاثة
.تشغل بالفعل المساحة الممتدة
.لنلقِ نظرة على كيفية تنفيذنا لذلك
،حسنًا
.لنلقِ نظرة على تخطيط الشبكة
كما ترون، تُترك مساحة في
.الأسفل والأعلى بمقدار 16DPR
.Abc_action_bar_content_inset_material
المساحة المتروكة في اليسار
،واليمين، في البداية والنهاية
،للغات التي تبدأ من اليمين إلى اليسار
.هي forecase_detail_horizontal_padding
أو 32DP كما تم تحديدها
.في الأبعاد
لنلقِ نظرة على الصف الأول
.والعمود
،كما ترون
.نحن نستخدم columnWeight بقيمة 1
دعوا مدير التخطيط يعرف
أن عرض النص هذا
.سيتمدد بالفعل ليشغل أية مساحة إضافية
ونحن نستخدم أيضًا rowWeight بقيمة 1 لإظهار
أيضًا أن هذا الصف سيشارك في أية
مسافة إضافية قد تتواجد لدى
.مدير التخطيط
.وهذا هو العمود الأول
.وهذا هو العمود الثاني
لاحظوا أننا لا نستخدم هنا
.أية أوزان على الإطلاق
،بالإضافة إلى سهولة ذلك
كل الصفوف لديها
وزن بقيمة 1، لذا
ستتشارك كلها في المساحة
.الإضافية، فتتباعد كلها بشكل متساوٍ
.وهذا يضفي على التخطيط مظهرًا متساويًا جميلاً
.وبهذا نكون قد انتهينا
.هذا واضح جدًا
مرة أخرى، لا يوجد بالضرورة
.حل واحد لهذا
،أحد الأشياء التي أحبها في التخطيطات
هي أن كل واحد منها
.يعتبر بمثابة حل للغز بسيط
.حسنًا، يجري تشغيل التطبيق في المحاكي
وهذا هو عرض detail الجديد
مع ذلك القسم السفلي
.والذي يبدو تمامًا كما أردنا
¡Correcto!
Su hecho.
Vamos a ir por encima de mi solución.
Antes de que realmente vamos a diseñar
la mitad inferior de la página de detalles ver
permite elaborar estrategias .
Tenemos dos columnas ,
uno que contiene estas cabeceras y
uno que contiene datos.
La columna de encabezados es bastante
fácil que todo está justificado a la izquierda ,
32 dp de distancia desde el borde .
La otra columna también se justifica
desde el otro borde pero los tres
de esos elementos están alineados izquierda .
Esto sería muy difícil de ver con
cualquier otra cosa aparte de una cuadrícula lay out .
Vamos a dejar que estos tres elementos
de hecho ocupar el espacio ampliado .
Echemos un vistazo a cómo implementamos eso.
Muy bien, así
vamos a echar un vistazo a nuestro diseño de cuadrícula .
Como se puede ver, el relleno en
la parte inferior y la parte superior es 16DPR .
Abc barra de acción material de contenido inserción .
Nuestro relleno en izquierda y
derecho , en principio al final , por
derecho a izquierda idiomas ,
es forecase_detail_horizontal_padding .
O como se define 32DP
en nuestras dimensiones.
Echemos un vistazo a nuestra primera fila y
columna.
Como puedes ver,
estamos utilizando columnWeight 1
que este punto de vista el texto es en realidad va a
expanda para ocupar cualquier espacio adicional.
que este punto de vista el texto es en realidad va a
expanda para ocupar cualquier espacio adicional.
Utilizamos un rowWeight de 1 también muestra
esta fila va a participar en cualquier
espacio adicional que
el controlador de distribución puede tener .
Y aquí está nuestra primera columna.
Y aquí está nuestra segunda columna.
Nótese que no estamos utilizando
cualquier peso aquí en absoluto
Aparte de que esto es bastante simple
todas nuestras filas tienen
un peso fila de uno, por lo
todos ellos van a participar en el extra
espacio, por lo que todos estarán espaciados uniformemente.
Esto le da al diseño un agradable incluso buscar.
Y eso es.
Eso es bastante sencillo
Una vez más , no es necesariamente
Una solución a este
Una de las cosas que me gustan de los diseños ,
es que cada uno de ellos es
como resolver un pequeño rompecabezas .
Muy bien, se está ejecutando en el emulador .
Y ahí está nuestra nueva vista detallada
con la sección inferior
se ve exactamente como nosotros pretendíamos .
Maravilha!
Você terminou.
Vamos examinar minha solução.
Antes de começarmos a desenhar
a parte inferior de nossa detail view,
sejamos estratégicos.
Temos duas colunas,
uma que contém esses cabeçalhos e outra
que contém dados.
A coluna de cabeçalhos é bem fácil:
está toda justificada à esquerda,
a 32 dp da borda.
A outra coluna também está justificada
à direita com relação à borda externa, porém os três
elementos estão alinhados à esquerda.
Seria muito difícil fazer isso com
qualquer coisa que não fosse um layout de grade.
O que faremos é permitir a esses três
elementos ocupar o espaço expandido.
Vejamos como faremos a implementação.
Certo, vamos
dar uma olhada no nosso layout de grade.
Como podem ver, o padding
inferior e superior é de 16 DPR.
Abc_action_bar_content_inset_material.
O padding da esquerda e
da direita e do início e do fim para
idiomas da direita para a esquerda
é forecase_detail_horizontal_padding.
Ou 32DP conforme definimos
em nossas dimensões.
Vejamos nossa primeira linha e
coluna.
Como pode ver,
estamos usando columnWeight="1".
Informe ao gerenciador de layout
que essa textView será
expandida para ocupar possíveis espaços adicionais.
Usamos rowWeight como 1 também para mostrar
que esta linha terá participação em qualquer
espaço adicional
que o gerenciador de layout possa ter.
Esta é a nossa primeira coluna.
E esta é a nossa segunda coluna.
Note que não estamos usando
"weight" em nenhum caso.
Fora isso, é bem simples.
Todas as nossas linhas têm
rowWeight="1", portanto
elas farão parte do espaço
extra, então todas serão espaçadas igualmente.
Isso dá ao layout uma aparência equilibrada.
E é isso.
Isso é bastante simples.
Novamente, não há necessariamente
uma única solução para isso.
Uma das coisas que gosto em layouts
é que cada um deles
é como um enigma a ser resolvido.
Muito bem, já está em execução no emulador.
E aqui está nossa detail view
com a seção inferior
exatamente como queríamos.
很好 你已完成
回顾一下我的解决方案
在我们开始布置详细信息视图的下半部分前
我们先制定计划
我们有两列 一个包含三个标题
另一个包含数据
标题列很简单 都是左对齐
距离边缘 32 dp
另一个列也是
与另一边右对齐 但这三个元素全部都是左对齐
如果不是使用样式布局 则操作起来会非常棘手
我们要让这三个元素占据扩充的空间
让我看看如何实现
好的 那么我们看看网格布局
可以看到 底部和顶部的填充是 16DPR
Abc_action_bar_content_inset_material
左、右两侧的填充从末端开始
从右至左的语言为forecase_detail_horizontal_padding
或者如我们在维度中定义的 32DP
让我们看看第一行和第一列
可以看到 我们使用 columnWeight 1
告诉布局管理器
此文本视图会要扩大以占据额外空间
我们使用值为 1 的rowWeight 来显示该行将会参与
布局管理器可能会有的额外空间
这里是第一个列
这里是第二个列
注意 我们在此不会使用任何权重
与其不同的是 这个很简单
所有行的 rowWeight 都为 1
所以它们都会参与额外空间 并会平均分配空间
这使布局看起来非常均匀
就是这样
非常直观易懂
再次提醒 这不一定有解决方案
我喜欢布局的一个地方是
每个布局就像是解决一个难题
好的 它在模拟器中运行
这就是我们的新详细信息视图
其中底部看起来完全符合我们的想法