Yönlendirme değiştiğinde farklı bir XML şablonu olan bir sayfa nasıl yeniden yüklenir?

Question

Aygıtın yönü değiştiğinde bir sayfayı (yeni bir şablonla) nasıl yeniden yükleyebilirim? Manzara modunda farklı bir düzen istiyorum. Bu, Java değil NativeScript'tedir.

doğru xml dosyası i manzara sayfasına ulaşır eğer seçilirse, ama yönünü değiştirirseniz, hiçbir şey yeniden alır. Bu CSS ferahlatıcı bir soru değil

Not gerekli farklı bir XML dosyasıdır. etkinlik olarak

Answer 1

NativeScript çözeltisi:

Önce oryantasyon olay haline kravat gerekiyor. Bu etkinliğe bağlayabileceğiniz birkaç yol var.

İlk ve en kolay yöntem nativescript oryantasyon eklentisini yüklemek, olaya global olarak bağlanır ve daha sonra yönlendirme her değiştiğinde, oryan adı verilen geçerli sayfanın her birinde dışa aktarılan işlevinizi otomatik olarak çalıştırır.

tns plugin install nativescript-orientation 

sizin app.js dosyayı açın ve dosyanın üst kısmında ekleyin;:
yüklemek için oluşturarak Sonra

require('nativescript-orientation'); 

: Eğer yönelim değişti bildirilmesini istiyorsanız herhangi bir sayfada

exports.orientation = function(args) { 
    if (args.landscaped) { /* do landscape stuff */ } 
    else { /* do port */ 
}; 

, o fonksiyonu var bu sayfalarda çağrılır ve nasıl sen olayı işleyebilir gerek. varsa sayfa sormak gerekir Ancak

var application = require('application'); 
exports.onNavigateTo = function() { 
    application.on(application.orientationChangedEvent,myOrientationFunction); 
} 

exports.onNavigateFrom = function() { 
    application.off(application.orientationChangedEvent, myOrientationFunction); 

function myOrientationFunction(args) { 
    // We have an orientation event 
} 

olayın bildirilmesini: Bir eklenti kullanmamayı tercih eğer

---

Ancak, doğrudan yaparak oryantasyon olayı kendin içine kravat önce açınız ve sayfanız kapandığında kendinizden gelen bildirimi kaldırmalısınız. Bu, yukarıdaki eklentinin sadece sizin için işlediği sayfa başına çok fazla kod. aksi halde bu işlevler çağrılacak olmaz, siz de Bildirimsel UI XML dosyasında <Sayfa> etiketine NavigateTo/NavigatedFrom eklemek gerekir kendinizi yapıyoruz zaman unutmayınız.

---

Şimdi, her zaman tercih ettiğiniz bir olaya sahip olduğunuza; fikrinizi nasıl geliştirebileceğimize bakalım.

Şimdi, sayfa her değiştiğinde mizanpajı değiştirmenizi istiyorsunuz; Bu genellikle yapılacak en kötü şeydir; ama önce cevaplayacağım ve daha sonra size hem Portre hem de Manzara modlarında çalışan karmaşık düzenleri yapmak için kullandığım alternatif yöntemi hemen vereceğim.

Sayfalar-Landscape.xml

<Page><StackLayout><Label text="Landscape"/></StackLayout></Page> 

Sayfalar-Portrait.xml

<Page><StackLayout><Label text="Portrait"/></StackLayout></Page> 

Sayfalar-Landscape.js

var commonPage = require("./MyPage.js"); 
var frame = require('ui/frame'); 
exports.orientation = function(args) { 
    if (args.landscape === false) { 
    frame.topmost().navigate('MyPage-Portrait'); 
    } 
}; 

// Tie all the common page code into this pages exports 
for (var key in commonPage) { 
    if (commonPage.hasOwnProperty(key)) { 
     exports[key] = commonPage[key]; 
    } 
} 

MyPage'de-Portrait.js

var commonPage = require("./MyPage.js"); 
var frame = require('ui/frame'); 
exports.orientation = function(args) { 
    if (args.landscape === true) { 
    frame.topmost().navigate('MyPage-Landscape'); 
    } 
}; 

// Tie all the common page code into this pages exports 
for (var key in commonPage) { 
    if (commonPage.hasOwnProperty(key)) { 
     exports[key] = commonPage[key]; 
    } 
} 

MyPage.js Sen MyPage'de dosyasında tüm ortak sayfa mantığı koymak

exports.TapHandler = function() { /* Someone Tapped */ } 
exports.someOtherLogic = function() { /* More logic */ } 
exports.etc = function() { /* etc */ } 

; ancak özellikle belirli manzara veya portre sayfasına gidin; ve sayfa yönlendirmesi değişirse bunların her biri diğer sürüme geçmekten sorumludur. Yukarıdaki çözüm hakkında

---

Notlar:

Başka sayfadan sayfanın düzgün sürümüne gitmeniz gerekirse

1. ; yani. Peyzaj modundaysanız; başka bir sayfaya gittiğinizde; Sayfanın Peyzajlı sürümüne gittiğinizden emin olmanız gerekir.
2. NS-Oryantasyon eklentisi, bunu kolaylaştırmak için mevcut yönlendirmeyi bulmak için bir yardımcı işlev işlevi sunar.
3. MyPage.js dosyasının tüm genel kodlara sahip olmasını sağlamayı unutmayın; Belirli bir sayfa sürümünde herhangi bir özel kodu denemek ve ortadan kaldırmak istersiniz.
4. Kullanabileceğiniz bir çerçeve yeniden yükleme komutudur; Ancak tarihi tamamen temizler; Yani geriye doğru gidemezsin. Page1 -> Sayfa2, frame.reloadPage(), geri düğmesinin Page1 konumuna geri dönmeyeceği anlamına gelir. Bu kabul edilebilir ise; Yukarıdaki sistemi çok daha basit hale getirebilirsiniz; sadece bir myPage.landscape.xml ve myPage.portrait.xml dosyasına ihtiyacınız olan ayrı xml & js dosyaları oluşturmak yerine her yönelim değişikliğinde frame.reloadPage();

---

Şimdi bana yukarıdaki muhtemelen sayfalar arasında yapılması gerekir basit bir değişiklik ne için bazı ciddi overkill. Bu yüzden benim uygulamalarımda nasıl yaptığımı açıklayacağım; Oldukça karmaşık ekranlara sahip olan ancak oryantasyon değişiminde çok güzel ve tamamen değişebilen bir işleve sahipler.

Bu, NativeScript yönergesinin eklentisinin yazılmasının nedeninin bir parçasıdır.Bir sayfa yönündeki değişiklik, XML'deki <Page> öğesine otomatik olarak bir "manzara" sınıf adı ekleyecek/kaldıracaktır. Bunun CSS'nizde yapmanızı verir geçerli:

.myLabel { 
    font-size: 12; 
    background-color: blue; 
    height: 20; 
} 

.landscape .myLabel { 
    font-size: 16; 
    background-color: green; 
    height: 40; 
} 

ben bu gidiyorum nereye anladım almadıysanız; Bu, manzara modundayken, dikey modda iken, sayfa için özel CSS'ye sahip olmanızı sağlar. Buna ek olarak, exports.orientation işlevini de birlikte kullandığınızda, yönlendirmeye bağlı olarak özel kod da çalıştırabilirsiniz.

Benim durumumda; Bir telefonumda, kaydırma listesi, aşağıya doğru giden ve ekrana mükemmel şekilde boyutlandırılmış tek bir kaydırma listesidir ve çok keskin görünmektedir. Manzara moduna geçtiğinizde; eylem çubuğunu gizler, bir fab düğmesi ekler, tüm ızgara öğelerini aynı oranlara sığacak şekilde yeniden boyutlandırır ve kaydırma modlarını sağ-sola kaydırır. Tüm görünüm değişikliğinin çoğunluğu saf css'de yapılır; ve geri kalanı kaydırma yönünü değiştirme gibi şeyleri işleyen exports.orientation işlevinde yapılır.

Yasal Uyarı: Ben NativeScript-oryantasyon eklentisi

Answer 2

:

@Override 
public void onConfigurationChanged(Configuration newConfig) { 
    super.onConfigurationChanged(newConfig); 
    setContentView(R.layout.my_layout); 
} 

her iki yönelimleri doğru kaynak dosya adları ile

res/layout/my_layout.xml 
res/layout-land/my_layout.xml 

Answer 3

Android sistem otomatik olarak doğru kaynaklarla Etkinlikler/Fragments yeniden yükler için aynı isimde düzen XML olduğundan emin olun . Android'i ayarlayarak olayları manuel olarak yakalayabilir ve işlem yapabilirsiniz: configChanges (ancak bu nadir bir durumdur).

kontrol bazı belgeleri:

• Handling Runtime Changes
• Providing Resources