When we were learning
that responsive design,
we saw that a common pattern
was to use the MasterDetailFlow,
which is what were going
to use for Sunshine.
Here are the tablet mocks.
We have a list of forecasts on the left,
and then for the selected item,
we see the detail pane on the right.
This applies for 7-inch
and 10-inch tablets,
both portrait and landscape orientations.
In portrait mode, the columns
are just a little bit narrower,
but it's still a two-pane UI.
In terms of implementation, all of this
will be under the MainActivity.
Then on the left we have
the ForecastFragment.
And then on the right,
we have the DetailFragment.
On the phone, we would still have the
MainActivity with the list of forecast.
And then selecting an item
would still launch the DetailActivity.
Here's another way to visualize it.
On the tablet, we have two fragments
side by side under one activity.
And then on the phone,
we have the first activity
containing the first fragment.
Selecting an item will launch
the second activity
containing the second fragment.
We're going to break this up
into multiple coding tasks
until we build up the final layout.
First we'll build up
the two-pane UI for tablets.
Then we'll hook up the communication
between the two fragments
so that's selecting an item
replaces the detail pane on the right.
Then we'll learn how to show
and activated state
on the currently selected item,
so we know what the details pane
corresponds to.
We'll also need to make sure
that the scroll position
is maintained across orientation changes.
After that, we'll update the DetailLayout
so it's optimized for these wider screens.
And then we'll modify the adapter
so that the today layout
looks like the other days.
There's no special
today layout on the tablet.
So hopefully it's clear
how we're going to approach
implementing this tablet behavior
and we're going to step
through it slowly, one by one.
عندما كنا نتعلم
،هذا التصميم التفاعلي
شاهدنا استخدام نمط مشترك
،لاستخدام MasterDetailFlow
وهو نفس الأمر الذي سنفعله
.مع Sunshine
.ها هي الكائنات الوهمية للأجهزة اللوحية
،نمتلك قائمة تنبؤات على اليسار
،وللعنصر المحدد
.نرى الجزء التفصيلي على اليمين
وهذا ينطبق على الأجهزة اللوحية من أحجام 7 بوصة
،و10 بوصة
.في الاتجاه العمودي والأفقي
في الوضع العمودي، تكون الأعمدة
،أضيق قليلاً
.ولكنه لا يزال واجهة مستخدم مكونة من جزأين
وفيما يتعلق بالتنفيذ، فسيكون كل هذا
.ضمن MainActivity
على اليسار نجد
.ForecastFragment
،ثم على اليمين
.لدينا DetailFragment
على الهاتف، سيظل لدينا
.MainActivity مع قائمة التنبؤ
كما سيظل تحديد أحد العناصر
.يؤدي إلى تشغيل DetailActivity
.فيما يلي طريقة أخرى لتصوير الأمر
على الجهاز اللوحي، لدينا جُزآن
.جنبًا إلى جنب، ضمن نشاط واحد
،ثم على الهاتف
لدينا النشاط الأول
.الذي يحتوي على الجزء الأول
ويؤدي تحديد عنصر إلى تشغيل
النشاط الثاني
.الذي يحتوي على الجزء الثاني
سنقوم الآن بتقسيم هذا الأمر إلى
مهام تعليمات برمجية متعددة
.إلى أن نتمكن من إنشاء المخطط النهائي
سنقوم أولاً بإنشاء
.واجهة المستخدم المكونة من جزأين والمخصصة للأجهزة اللوحية
ثم سنقوم بربط الاتصال
بين الجزأين
ليؤدي تحديد عنصر إلى
.استبدال جزء التفاصيل الموجود إلى اليمين
ثم سنتعلم كيفية إظهار
وتنشيط الحالة
على العنصر المحدد حاليًا
لنتمكن من معرفة ما يقابل
.جزء التفاصيل
كما سنحتاج أيضًا إلى التأكد
من أن موضع التمرير
.مستقر أثناء إجراء تغييرات الاتجاه
بعد ذلك، سنقوم بتحديث DetailLayout
.ليتم تحسينه ليناسب الشاشات الأعرض
يلي ذلك تعديل المحول
ليبدو تخطيط today
.مثل الأيام الأخرى
لا يوجد تخطيط
.today خاص على الجهاز اللوحي
لذا، نأمل في أن تكون
طريقة تعاملنا لتنفيذ
سلوك هذا الجهاز اللوحي واضحة
وأننا سنتقدم
.ببطء، خطوة بخطوة
Cuando aprendimos sobre la respuesta
en el diseño
vimos que se usó un patrón común
para el flujo de detalles máster,
que es lo que usaremos para sunshine.
Aquí están las simulaciones del tablet.
Tenemos a la izquierda una lista
de pronósticos,
y para el ítem seleccionado,
vemos el pane de detalles a la derecha.
Esto aplica para tabletas
de siete y diez pulgadas.
Ambas orientaciones, retrato y paisaje.
En retrado, las columnas son
un poco más angostas, pero aún es
un UI de dos panes.
Con respecto a la implementación,
todo esto estará bajo
la actividad principal. Luego
a la izquierda está
el fragmento del pronóstico.
A la derecha el fragmento de detalle.
En el teléfono, aún tendríamos
la actividad principal con la lista
de pronósticos. Y al seleccionar un ítem
se abriría la actividad de detalle.
Aquí hay otra forma de visualizarlo.
En la tableta, tenemos dos fragmentos
lado a lado bajo una actividad.
Y luego en el teléfono
tenemos la primera actividad
con el primer fragmento.
Si se selecciona un ítem, se corre
la segunda actividad que contiene
el segundo fragmento. Vamos a dividir
eseto en múltiples tareas de códigos
hasta construir la distribución final.
Primero construiremos el UI de dos panes
para las tabletas. Luego conectaremos
la comunicación entre los dos fragmentos,
entonces al seleccionar un ítem
se remplaza el pane de detalle a la derecha.
Luego aprenderemos cómo mostrar
un estatus activado
en los ítems seleccionados en el momento
para saber a qué corresponde
el pane de detalles.
También necesitaremos asegurar
que la posición del scroll
se mantiene a lo largo
de los cambios en orientación. Luego
actualizaremos la distribución de detalle
para que esté optimizada
para pantallas más grandes.
Y luego modificaremos el adaptador
para que la distribución de hoy
se vea como la de otros días.
No hay ninguna distribución especial hoy
en la tableta. Por lo tanto esperamos
que esté claro cómo vamos a abordar
la implementación de comportamiento
en esta tableta
y haremos los pasos lentamente,
uno por uno.
Saat kita mempelajari
tentang desain responsif,
kita melihat bahwa pola yang umum
untuk menggunakan MasterDetailFlow,
yang akan kita gunakan
untuk Sunshine.
Berikut adalah
mock tablet.
Kita memiliki daftar perkiraan cuaca
di sebelah kiri, lalu untuk item terpilih,
kita melihat rincian panel
di sebelah kanan.
Ini berlaku untuk tablet
berukuran 7 inci dan 10 inci,
keduanya berorientasi
portrait dan landscape.
Dalam mode portrait,
kolom agak lebih sempit,
tapi masih menggunakan UI dua panel.
Dalam penggunaannya, semua ini
berada di MainActivity.
Lalu di sisi sebelah kiri,
kita memiliki ForecastFragmen.
Dan disebelah kanan,
kita punya DetailFragmen.
Di ponsel, kita masih memiliki
MainActivity dengan list Forecast.
Dan memilih item yang masih
meluncurkan DetailActivity.
Berikut ini adalah cara
untuk memvisualisasikannya.
Pada tablet, kita memiliki dua fragmen
yang bersebelahan dibawah satu aktivitas.
Dan pada ponsel,
kita memiliki aktivitas pertama
berisi fragmen pertama.
Memilih item yang akan
meluncurkan aktivitas kedua
berisi fragmen kedua.
Kita akan memisahkannya menjadi
beberapa coding task
sampai kita membuat layout akhir.
Pertama kita akan membuat UI dua panel
untuk tablet.
Lalu kita akan menghubungkan
komunikasi antara dua fragmen
sehingga memilih item menggantikan
detail panel di sebelah kanan.
Kemudian kita akan mempelajari bagaimana
menunjukkan item terpilih
dalam keadaan diaktifkan.
sehingga kita tahu detail panel
sesuai dengan apa.
Kita juga perlu memastikan posisi gulir
dipertahankan di seluruh
perubahan orientasi.
Setelah itu, kita akan update DetailLayout
sehingga dioptimalkan ke layar yang besar.
Dan kemudian kita akan mengubah
adapter sehingga layout saat ini
terlihat seperti biasanya.
Tidak ada layout yang spesial
hari ini di tablet.
Semoga, sudah jelas bagaimana kita
melakukan pendekatan
menggunakan tablet.
dan kita akan melaluinya perlahan,
satu demi satu.
デザインでレスポンスを学んだ時
マスター/ディテールフローを使うという
共通パターンがありましたね
Sunshineにも使ってみましょう
これがタブレットのモックです
左側には予報のリスト、右側の詳細ペインには
選択されたアイテムが表示されます
これは7インチと10インチのタブレットに適用され
両方ともポートレートとランドスケープの向きです
ポートレートモードでは幅は狭くなりますが
2ペインのUIのままです
実装という意味では
すべてMain Activityといえます
左側にはForecast Fragmentが
右側にはDetail Fragmentが表示されています
スマートフォンでは Main Activityには
予報のリストが表示され
項目を選択すると詳細が起動します
違う方法で可視化することもできます
タブレットでは1つのActivityで
2つのFragmentが横に並んで表示されます
スマートフォンでは1つのActivityに
1つのFragmentが表示され
項目を選択すると次のFragmentが表示されます
最終的なレイアウトができるまで
複数のコードタスクに分けましょう
まずタブレット用の2ペインのUIを構築し
2つのFragmentを連結します
左側の項目を選択すると
右側の詳細ペインが置き換わります
選択された項目がアクティベートされた状態を学び
詳細ペインが何に対応するか理解しましょう
デバイスの向きが変わっても
スクロールの位置は変わりません
横長の画面に最適化されるように
詳細レイアウトを更新します
そしてアダプタを変更して“今日”と“他の日”の
レイアウトを同じようにします
タブレットでは
今日のレイアウトを変えることはありません
タブレットの実装方法については
段階を踏んでゆっくりと進めていきます
반응형 디자인에 대해 알아볼 때
마스터/디테일 구조를 흔히 사용한다고 배웠고
우리가 선샤인에 사용할 구조입니다
모의 태블릿 UX 인데요
왼쪽엔 일기예보 목록이 있고
선택한 항목에 대한
상세 내용은
오른쪽 상세 정보창에 출력돼요
7인치와 10인치 태블릿에 해당됩니다
가로, 세로 모드 둘 다요
가로모드에서는
열의 너비가 조금 더 좁지만
여전히 이중 창 UI입니다
구현방법을 보면
이 모든 것이
메인 액티비티 하위로 들어갑니다
왼쪽에는 forecast fragment
오른쪽에는 detail fragment가 위치하죠
휴대폰에서는 여전히
일기예보 목록이 있는 메인 액티비티가 있고
항목을 선택하면 여전히
상세 액티비티를 열게 돼요
다시 말해서
태블릿에서는 단일 액티비티 아래
2개의 fragment가 나란히 있고
휴대폰에서는 첫번째 fragment를 포함한
첫번째 액티비티가 있어서
한 항목을 선택하면
두번째 fragment를 포함한 두번째 액티비티를
연다는 것입니다
이 작업은 여러 코딩 작업으로 나누어
진행해서 최종 레이아웃을 만들게 될 거예요
먼저 태블릿용 이중 창 UI를 만들 겁니다
다음에는 두 fragment 사이에
통신을 구축해서
한 항목을 선택하면 오른쪽 상세 창 내용이
교체되도록 할 거예요
다음에는 현재 선택된 항목의
활성화 상태를 표시하는 법을 배웁니다
상세 창 내용이 무엇을 나타내는지 알 수 있도록요
또한 가로/세로모드가 바뀌어도
스크롤 위치가 유지되도록
해야 합니다
그 다음에는 상세 레이아웃을 수정하여
넓은 화면에 최적화되도록 할 거고요
그리고 어댑터를 수정해서 today 레이아웃이
다른 날짜 레이아웃과 같게 보이게 합니다
태블릿 버전에는 특별 today 레이아웃이 없으니까요
우리가 앞으로 어떻게 태블릿에 맞춰
UX를 구현할지 충분한 설명이 되었기를 바랍니다
한 단계씩 천천히 짚어 볼 거예요
Quando aprendemos o
design responsivo,
vimos que um padrão comum era usar o
MasterDetailFlow,
que usaremos para
o Sunshine.
Eis a simulação de tablet.
Temos uma lista de previsões à esquerda
e, para o item selecionado,
vemos o painel de detalhe à direita.
Isso se aplica a tablets de 7 e de
10 polegadas,
para orientações de retrato e paisagem.
No modo retrato, as colunas
são um pouco mais estreitas,
mas ainda é uma UI de dois painéis.
Em termos de implementação, tudo isso
ficará na MainActivity.
À esquerda, temos o
ForecastFragment.
E à direita, temos o
DetailFragment.
No telefone, ainda temos o
MainActivity com a lista de previsão.
A seleção de um item
lança o DetailActivity.
Eis outra maneira de visualizar isso.
No tablet, temos dois fragmentos
lado a lado, em uma atividade.
No telefone,
temos a primeira atividade
contendo o primeiro fragmento.
A seleção de um item lançará
a segunda atividade
contendo o segundo fragmento.
Vamos dividir isso em
várias tarefas de codificação,
até criar o layout final.
Primeiro criamos a
UI de dois painéis para tablets.
Depois, conectamos a comunicação
entre os dois fragmentos de forma que
a seleção de um item
substitua o painel de detalhes à direita.
Aprenderemos como exibir
um estado ativado
no item selecionado atual
para sabermos a que corresponde o
painel de detalhes.
Precisaremos nos certificar de que
a posição de rolagem
seja mantida em todas as mudanças de orientação.
Depois disso, atualizaremos o DetailLayout
para que seja otimizado para telas mais largas.
Modificaremos o adaptador
para que o layout today
se pareça com os outros dias.
Não há layout today especial
no tablet.
Esperamos que esteja claro
como abordaremos
a implementação desse comportamento
de tablet, vamos analisar detalhadamente
cada etapa.
Когда мы изучали адаптирущийся дизайн,
мы видели, что обычно использовался
сценарий Master/Detail,
который мы и применим для Sunshine.
Это мок-объекты планшета.
Слева у нас расположен список прогнозов,
а справа -- детальная панель
для выбранного элемента.
Это применимо к планшетам с семидюймовым
и десятидюймовым дисплеем
как в книжном, так и в альбомном
положении экрана.
В книжном положении столбцы
несколько короче,
но с теми же двумя панелями
пользовательского интерфейса.
В плане реализации все это будет
в рамках основной активности.
Так, на левой панели у нас
располагается фрагмент прогноза.
А справа -- фрагмент детальной информации.
На телефоне у нас тоже была бы
главная активность со списком прогнозов.
А затем выбор элемента
тоже запускал бы активность с деталями.
Вот еще один способ это визуализировать.
На планшете мы имеем два фрагмента рядом
внутри одной активности.
На телефоне же есть первая активность,
содержащая первый фрагмент.
Выбор элемента запустит вторую активность,
содержащую второй фрагмент.
Мы собираемся разбить это
на несколько задач кодирования,
пока не создадим окончательный макет.
Сначала мы выстроим интерфейс
с двумя панелями для планшета.
Затем мы подключим связь
между двумя фрагментами,
чтобы выбор элемента заменял
детальное описание на правой панели.
Затем мы усвоим, как активировать
визуализацию выбранного элемента,
чтобы знать, чему соответствует
панель детального описания.
Мы должны убедиться, что позиция прокрутки
сохраняется при изменении ориентации.
После мы обновим макет деталей для
его оптимизации для более широких экранов.
Затем мы изменим адаптер,
чтобы макеты сегодняшнего дня
и других дней были похожи.
На планшете нету специального макета
для даты "сегодня".
Надеемся, понятно, как мы собираемся
реализовать эти функции для планшета,
и мы намерены пройти это
медленно, шаг за шагом.
Khi chúng ta học về
responsive design
chúng ta đã thấy rằng mẫu phổ biến nhất
là MasterDetailFlow
cái mà chúng ta sẽ dùng cho Sunshine
Đây là phác thảo cho tablet
Chúng ta có một list của forecast ở bên trái
và khi chọn 1 item
chúng ta sẽ thấy detail pane bên phải
cái này dùng cho 7-inch
và 10-inch tablet
cả màn hình dọc và ngang
ở màn hình dọc, các cột
chỉ hẹp lại
nhưng nó vẫn là 2 khung
Trong điều kiện implement, tất cả
chỗ này đều trong MainActivity
Rồi bên trái chúng ta
có ForecastFragment
Và bên phải
chúng ta có DetailFragment
Trên điện thoại, chúng ta sẽ vẫn có
MainActivity với list của forecast
Và rồi khi chọn một item
sẽ vẫn mở DetailActivity
Đây là một cách khác để chúng ta thể hiện nó
Trên tablet, chúng ta có 2 fragment
ở cạnh nhau trong một activity
Và rồi trên điện thoại,
chúng ta có activity đầu tiên
chứa fragment đầu tiên
Chọn một item sẽ mở
activity thứ 2
chứa fragment thứ 2
chúng ta sẽ bẻ nó ra
vào trong multiple coding tasks
cho đến khi chúng ta build layout cuối cùng
Đầu tiên chúng ta build
UI 2 - pane cho tablet
rồi chúng ta kết nối
2 fragment lại
vì thế khi chọn một item
thay detail pane ở bên phải
Rồi chúng ta sẽ học cách để
hiển thị và kích hoạt trạng thái
trên item đang chọn,
để chúng ta biết Detail pane
thì tương ứng
Chúng ta cũng cần chắc chắn
rằng vị trí cuộn
được giữ nguyên khi thay đổi chiều thiết bị
Sau đó, chúng ta sẽ cập nhật DetailLayout
nên nó được tối ưu cho những màn hình lớn hơn
Và rồi chúng ta sẽ sửa adapter
cho today layout
giống những ngày khác
Không có gì đặc biệt
ở today layout trên tablet
Vì vậy hi vọng dễ dàng để
chúng ta
triển khai cho tablet behavior này
và chúng ta sẽ đi chậm, từng bước một
在学习自适应设计时
我们发现普通模式是使用 MasterDetailFlow
就是我们将要在 Sunshine 中用到的
这是平板电脑模块
在左边有预报列表 如果选择了某一项
就会在右边看到详细信息窗格
这适用于 7 英寸和 10 英寸平板电脑的
竖屏方向和横屏方向
在纵向模式中 列看起来有些狭窄
但还是双窗格 UI
从实现的角度看 所有这些都是在 MainActivity 下
在左边有 ForecastFragment
在右边有 DetailFragment
在手机上 依然有带预报列表的 MainActivity
在选择一项后仍然可以启动 DetailActivity
这是另一种将其可视化的方法
在平板电脑上 在一个 activity 下有两个并排的 fragment
在手机上 第一个 activity 中
包含第一个 fragment
选择一项会启动第二个 activity
其中包含第二个 fragment
我们会把这个任务分成多个编码任务
直到我们构建完最后的布局
首先 我们要构建适合平板电脑的双窗格 UI
接下来 在两个 fragment 之间连接通信
以便选择一项时替换右侧的详细信息窗格
接下来 我们会学习如何在当前选择的项上
显示激活状态 使我们知道详细信息窗格
对应的是哪个项
我们也需要确保滚动位置
在屏幕方向更改时保持不变
我们接下来会更新 DetailLayout 使其针对更宽的屏幕进行优化
然后修改适配器 让今天布局看起来
与其他日期差不多
平板电脑上没有特殊的今天布局
希望大家都清楚我们将要如何
实施此平板电脑行为
我们会慢慢地逐步讲解