React Native ile Mobil Uygulama Geliştirme – 4 – React Native UI Components

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 4. kısmıdır. Bir önceki makalede (Part 3), React Native’de Stillendirme ve Flex kullanımını örnekleyerek, elementleri boyutlandırma, renklendirme vb. değişiklikler yaparak nasıl özelleştireceğimizi anlattım.

Bu makalede, React Native ‘in en temel yapı taşı olan UI Components (Kullanıcı Arayüzü Bileşenleri) ‘ni anlatacağım. Component dediğimiz şey Türkçe’ye çevirdiğimizde bileşen anlamına geliyor. Sizin uygulamalarınızda işi yerine getiren, yapan her birime birer komponent denir aslında. Amaç bir kere yazalım o komponent’i her yerde kullanalım mantığı vardır. Bir React Native projesinde farklı tipteki UI öğelerini kullanabiliriz. Ancak bir android ve iPhone’da farklı görünebileceğini unutmayın. Text inputs, touchables ve picker’ların farklı örneklerle nasıl yapıldığını öğreneceğiz.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.

Text Inputs:

TextInput bileşeni, kullanıcı metin girişlerini almak için kullanılır. Metin girişleriyle kullanılabilecek aksesuarlar aşağıdadır:

placeholder : Bu placeholder metnidir, yani boş bir TextInput’ta gösterilecek metindir.

value: TextInput onChangeText içine yerleştirilecek değer: Bir işlev alır ve bu her metin değişikliğinde çağrılacaktır.

onSubmitEditing: Bir işlev alır ve metin gönderildikten sonra çağrılacaktır.

Aşağıdaki örneğe bakalım:

TextInput öğesine herhangi bir metin yazarsanız, metin içinde aynı metni gösterir. “placeholder” desteği yer tutucuyu koymak için kullanılır. Kullanıcı yazmaya başladığında bu kaldırılır. OnChangeText props bir işlevi alır ve geçerli ‘props‘ metin ’değerini değiştirir. “value” props, metni TextInput öğesine koymak için kullanılır. ‘TextInput’un‘ değerini ’doğrudan değiştirmiyoruz. “state” deki “metin” değerini değiştirir ve “metin” değer olarak atanır. Alttaki “Metin”, kullanıcının yazdığı metnin aynısını koymak için kullanılır.

TextInput’ta özelleştirme için başka birçok sahne var. Bu resmi kılavuzu kontrol ederek daha fazla bilgi edinebilirsiniz.

 

Touch Handling:

Tüm mobil uygulamalar esas olarak parmak dokunuşu kullanılarak işlenir. Bu dokunma hareketleri, dokunma, kaydırma, kıstırma vb. gibi farklı tiplerde olabilir. React Native, farklı hareketleri işlemek için bir hareket yanıtlama sistemi sağlar. Hemen hemen tüm React Native bileşeni kullanıcı parmak dokunuşunu algılayabilir, ancak yalnızca dokunma olayıyla ilgili olan bir bileşene “Touchables” adı verilir. Bu bileşeni kullanarak, farklı tasarıma sahip kendi özel düğmelerimizi oluşturabiliriz. Ayrıca, tek basış ve uzun basış olaylarını tespit etmek için iki farklı props sunar. Sağlayabileceği geri bildirim türleri şunlardır:

TouchableHighlight :

Bu, bir button veya web bağlantısı ile kullanılabilir. Kullanıcı öğeye bastığında görünüm kararır.

TouchableNativeFeedback :

Bu Android’de dalgalanma etkisi gösterecektir. TouchableNativeFeedback, iOS’ta desteklenmez.

TouchableOpacity :

Bu, kullanıcı bastığında buttonun opaklığını azaltır.

TouchableWithoutFeedback :

Dokunulduğunda kullanıcıya herhangi bir geri bildirim göstermek istemiyorsanız kullanın.

Bu türler dışında, tek basış ve uzun basışları tespit etmek için ‘onPress’ ve ‘onLongPress’ aksesuarlarını kullanabiliriz. Bu iki sahne de bir ‘function’ gerektirir.

Burada da görebileceğiniz gibi, TouchableHighlight bileşenindeki tek basış ve uzun basışları tespit etmek için ‘onPress’ ve ‘onLongPress’ desteklerini kullanıyoruz.

Picker:

Picker, kullanıcıdan bir değer listesinden seçim yapmasını istemek için kullanılır. Picker bileşen hem Android hem de iOS’ta kullanılabilir. İşlevsellik hem Android hem de iOS’ta aynıdır, ancak görünüm farklıdır. Aslında yerel Android ve iOS seçicileri kullanıyor ve her ikisi de farklı görünüyor. Seçilen değeri gösterir ve üzerine tıkladığımızda, android’de bir açılır pencerede mevcut değerlerin bir listesini gösterir. İOS’ta, mevcut tüm seçeneklerle birlikte bir kaydırılabilir tekerlek gösterir. Seçici bileşenini, diğer bileşenler gibi ‘react-native’ öğesinden içe aktarabiliriz. Örneğin :

Bu kodu çalıştırırsanız, bir Android telefonda aşağıdaki gibi görünecektir:

Picker listesinde gösterilecek ‘Picker’ bileşeninin içine ‘Picker’ öğesi olarak bir öğe listesi eklememiz gerekir. Picker’da çok sayıda farklı props vardır. Bunlardan birkaçı aşağıdaki gibidir:

1. onValueChange :

Seçiciden bir öğe seçildiğinde bir geri arama verir. Seçilen öğenin değerini ve o öğenin dizinini verir. Dizin önemlidir, gerekirse dizini kullanarak farklı bir harita listesinden seçim yapabiliriz.

2. selectedValue :

Seçici öğe değerleri listelerinden biriyle eşleşmesi gereken seçilen değer.

3. enabled :

Değeri ‘false’ olarak ayarlarsak seçiciyi devre dışı bırakır.

4. mode :

Bu seçenek yalnızca Android için kullanılabilir. “dialog” veya “dropdown” olabilir. “dialog” kalıcı bir iletişim kutusu gösterir, bu varsayılan seçenektir. “dropdown” bir açılır liste görüntüler.

5. style and itemstyle :

stil “pickerStyleType” türünde olmalıdır. “picker” ye bir “style” eklemek için kullanılır. “itemStyle”, öğe etiketlerinin her birine stil uygulamak için kullanılır.

Şimdiye kadar, çoğu uygulama için gereken en yaygın kullanılan React Native UI Bileşenlerini gördük. Lütfen görüşlerinizi ve bununla ilgili sorularınızı bize bildirin.

Android’de Directions API ile Rota Çizme

Günümüzde konum bilgisi kullanarak hayatımızı birçok alanda kolaylaştırması sağlayan yazılımlar bulunmaktadır. Mobil uygulamalarda GPS, araba kullanırken ya da yaya olarak yürürken, ulaşmak istediğimiz noktaya gidebilmek için yol tarifi yapması, bulunduğunuz konum çevresinde en yakın eczaneye ulaşmak gibi birçok konuda hayatımızı kolaylaştırmaktadır.

Bu makalemde, bir Android uygulamasında Google Directions API ‘yi kullanarak haritada belirlenen iki nokta arasında nasıl bir rota çizileceğini ve bu rotaya ne kadar sürede varılacağını göstereceğim.

Örnek projemizi kodlamaya başlamadan önce bazı işlemler yapmamız gerekmektedir.Bu işlemleri sırayla yapmaya başlayalım.

1- Google Play Services Yükleme

Google haritayla ilgili bir geliştirme yapacağımızdan dolayı, Google Play Services yüklememiz gerekmektedir. Bunun için Tools->Sdk manager’ı açıp Sdk Tools bölümünden Google Play Services işaretleyip, yükleme işlemini gerçekleştirin.

2- Google Maps API Key Oluşturma

3-Gerekli Kütüphanelerin Eklenmesi

Android Studio Ide ile oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek Google Play services kütüphanesini yüklüyoruz.

4-AndroidManifest Dosyasına İlgili Ayarları Ekleme

Kullanıcının konumu belirlemek için izin tanımlamamız gerekir. Aşağıdaki izin kodunu da AndroidManifest.xml dosyasında application tag’nin üst kısmına yerleştirin.

AndroidManifest dosyasına, daha önce üretmiş olduğumuz Google API Key’i ekleme işlemini yapacağız. Application tag arasına aşağıda görmüş olduğunuz meta-data tag kodunun içindeki value özelliğine Google API Key’i ekleyeniz.

5-Xml Kodları

Haritayı gösterebilmek için SupportMapFragment sınıfını fragment ile kullanıyoruz.

4-Java Kodları

İlgili rotayı çizebilmek için ilk önce Google Map Directions web servisine API Key, başlangıç ve varış noktalarının konum bilgilerini bir url ile göndermeniz gerekir. İlgili url ile web servise bağlandığınızda, rotayı ne kadar sürede bitirebileceğiniz, rotanın kaç km olduğu, yol tarifleri hakkında detaylı bilgiler json verisi halinde gelecektir. Bu kısmı ve rotanın harita çizilmesi MainActivity sınıfında yapılmıştır. Detaylı anlatım kodlarda bulunmaktadır.

DirectionsJSONParser sınıfında ise web servisden gelen Json veriyi çözümleyip, içindeki bilgileri ArrayList yapısına ekleyerek MainActivity sınıfında kullanılması sağlanmıştır. Ek olarak DirectionsJSONParser sınıfında Json veriden gelen polyline değerini (rota yolunun şifrelenmiş çizgileri) çözümleyen bir metod yazılmıştır. Bu metod sayesinde  rota yolunun çizilebilmesi için gerekli enlem, boylam değerleri elde edilir. Detaylı anlatım kodlarda bulunmaktadır.

Örneklediğim projemin kodlarını indirmek isterseniz; yapmanız gereken tek şey aşağıya koyduğum KODLARI İNDİR resmine tıklamak.

React Native ile Mobil Uygulama Geliştirme – 3 – Stillendirme ve Flex Kullanımı

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 3. kısmıdır. Bir önceki makalede (Part 2), React Native ile cross-platform mobil uygulama geliştirmek için bilmeniz gereken State ve Props kavramlarından bahsettim.

Bu makalede, React Native’de Stillendirme ve Flex kullanımını örnekleyerek, elementleri boyutlandırma, renklendirme vb. değişiklikler yaparak nasıl özelleştireceğimizi anlatacağım.

Stil, uygulama geliştirmenin önemli parçalarından biridir. Native Android Uygulama geliştirme için XML, kullanıcı arayüzünü tasarlamak için kullanılır. Benzer şekilde, Native iOS Uygulama geliştirme için XCode gereklidir. Ancak React Native’de, hem Android hem de iOS’ta çalışan uygulamayı biçimlendirmek için yalnızca JavaScript kullanıyoruz. Reaksiyona özgü UI bileşenlerinin yerleşimini belirtmek için flexbox kullanılır. Bu makalede, React Native’de stil eklemeyi ve flexbox’ı nasıl kullanacağımızı öğreneceğiz.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın

Biçimlendirme:

React Native’de stil için CSS’yi kullanamayız. Bunun yerine, stil öğeleri eklemek için JavaScript kullanılır. Her kullanıcı arabirimi öğesi, kendisine uygulanan bir stil ‘props’ alır. CSS’den farklı olarak, adlandırma kuralı camel case (büyük küçük harf) kullanır, örn. bir öğenin arka plan rengini eklemek için “arka plan rengi” yerine “backgroundColor” kullanacağız.

Örneğin, aşağıdaki gibi bir kalın metin oluşturabiliriz:

Her bileşen farklı türde stil props alır. Geçersiz bir stil’den geçersek yok sayılır.

Stylesheet Kullanma:

Her UI bileşeni için stil props’u eklenmesi, kodu düzenlenmemiş ve dağınık hale getirecektir. Ayrıca, bu şekilde, stili birden fazla kullanıcı arayüzü öğesiyle paylaşamayız. React-Native, farklı kullanıcı arayüzü öğeleri arasında paylaşılabilen bir ortak stil deseni oluşturmak için başka bir yol sağlar. Ortak bir stil sayfası oluşturmak için aşağıda gösterildiği gibi StyleSheet.create yöntemini kullanın:

Bu örnekte, ‘Metin’ öğeleri içeren ‘StyleClass’ adlı bir bileşenimiz var. Her iki “Text” öğesi iki farklı stil kullanıyor. ‘StyleSheet.create’ öğesini kullanarak bileşeni dışa aktarmadan önce stili tanımlıyoruz. İki farklı stilin oluşturulduğunu görebilirsiniz: “title” ve “description” ve bu stilleri eklemek için “{styles.stylename}” kullanıyoruz. Bu yaklaşımın ana avantajı, kodun daha temiz hale gelmesi ve birden fazla UI bileşeninde bir stil kullanabilmemizdir.

Sabit boyut için yükseklik ve genişlik ekleme:

React-native’de, bir UI öğesi için sabit genişlik ve yükseklik ekleyebiliriz. Sabit yükseklik / genişlik ayarlarsak, tüm boyutlu cihazlar için aynı boyutta oluşturulurlar. ‘Stil’ bölümünde ‘genişlik’ ve yüksekliği aşağıdaki gibi kullanabilirsiniz:

Bu boyutlar birimsizdir ve yoğunluktan bağımsız pikselleri temsil eder.

Ancak bu iyi bir uygulama değildir, çünkü bir görünümün veya başka bir UI öğesinin ekranın yarısını doldurmasını istiyorsak ve sabit boyut kullanırsak, telefonlar ve tabletler gibi farklı cihazlarda farklı olacaktır. Bunun için “flexbox” adı verilen başka bir mekanizma kullanılır. Nasıl çalıştığını kontrol edelim:

Flexbox :

Flex, bir görünüme dinamik boyut vermek için kullanılır. Flex değerine 1 verirseniz, tam ekran alanı kaplar. Ebeveyn görüşüne ‘flex = 1’ verebilir ve alt görüşlerine farklı esnek değerler verebiliriz. Örnek,

Burada, çıktı aşağıdaki gibi görünecektir:

Gördüğünüz gibi iç görünümler eşit olarak bölünmüş durumda. İç görünümlere aynı değerde farklı bir değer verirsek, aynı çıktıyı üretecektir. Daha büyük bükülme değeri kardeşlerine göre daha yüksek boşluk oranı sağlayacaktır. Bir görünümün 0’dan büyük bir değere sahip esnekliğe sahip olması veya sabit bir yükseklik / genişliğe sahip olması gerektiğini, aksi takdirde alt görünümlerin görünmeyeceğini unutmayın. Flexbox, farklı ekranlarda tutarlı düzen boyutu sağlamak için kullanılır.

Flexbox’ın ana kavramları şunlardır:

  1. flexDirection
  2. alignItems
  3. justifyContent

flexDirection:

flexDirection, child görünümlerinin hangi yönde yerleştirileceğini tanımlamak için kullanılır. Ana flexDirection türleri şunlardır:

row: Tüm öğeleri soldan sağa hizalayın.
column: Tüm öğeleri yukarıdan aşağıya hizalayın. Bu varsayılan değerdir.
row-reverse : Satırın tersi. Tüm öğeleri sağdan sola hizala
column-reverse i: Sütunun tersi. Tüm öğeleri aşağıdan yukarıya hizalayın.

Örnek :

Aşağıdaki çıktıyı üretecektir:

 

justifyContent:

Geliştirme sırasında bunu, eksenindeki alt görünümlerin nasıl hizalandığını tanımlamak için kullanabilirsiniz. Ana türleri şunlardır:

flex-start: Bu varsayılan değerdir. Tüm içeriği ana eksenin başlangıcına hizalar.

flex-end: İçeriği eksenin sonuna hizalayın.

center: İçeriği eksenin merkezine hizalayın.

space-between : childlar arasındaki kalan alanı dağıtarak tüm childları eksen boyunca eşit aralıklarla yerleştirin.

space-around: childlara eşit boşluk bırakarak eşit boşluk alan childlar.

Örnek :

Aşağıdaki çıktıyı üretecektir:

alignItems:

Bu, öğeleri çapraz eksen boyunca hizalamak için kullanılır. Ana ekseni hizalamak için justifyContent kullanılabilir. Öğeleri çapraz eksen boyunca hizalar. Türleri şunlardır:

stretch: childi çapraz eksenin yüksekliğine uyacak şekilde uzatın.

flex-start: chidları çapraz eksenin başlangıcına hizalayın.

flex-end: Yukarıdaki ile aynıdır, ancak uçlara hizalanır.

center: Merkeze hizalayın.

baseline : Ortak bir taban çizgisi boyunca hizalayın.

Örnek :

Tek bir öğenin alignItems öğelerini geçersiz kılmak için ‘alignSelf’ özelliğini de kullanabilirsiniz.

flexWrap alignContent :

Ekranın boyutu taşarsa, öğeleri kontrol etmek için flexWrap kullanabilirsiniz. ‘nowrap’ ve ‘wrap’ olmak üzere iki değeri vardır. Örnek :

Burada görebileceğiniz gibi, son görünüm sağa yerleştirilir, çünkü ikinci görünümün altına yerleştirirsek ekranı geçecektir.

‘FlexWrap’i kullanarak sarmaladıysanız, öğeleri hizalamak için alignContent kullanabilirsiniz. 6 değeri vardır: ‘flex-start’, ‘flex-end’, ‘stretch’, ‘center’, ‘space-between’, ‘space-around’.

Flexbox kavramı CSS’deki ile aynıdır. Tek fark, flexDirection’ın varsayılan olarak “column” olmasıdır ve flex parametreleri yalnızca tek bir sayıyı destekler.

Sonuç:
Makale, React Native App’te Styling’i nasıl gerçekleştirebileceğiniz konusunda kısa bir giriş yapmıştır. Makaleyi herhangi bir noktayı içerecek şekilde güncellememiz gerekiyorsa lütfen okuyun ve bize bildirin.