React Native ile Mobil Uygulama Geliştirme – 18 – Detaylı Flexbox 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 18. kısmıdır. Bir önceki makalede (Part 17). React Native’de Asyncstorage ile React Native’de Redux Persist ile uygulamalarda sayfa değiştiğinde, yenilendiğinde veya uygulama kapatıp tekrar açıldığında, tekrar eski haline dönmesini veya sıfırlanmasını engellemeyi anlattım.

React Native uygulamamızın sayfalarında yer alan bölümlerin yapılandırılmasının çalışmalarını Flexbox yapısı ile detaylı öğreneceğiz. Flex yapısı react-native ortamında style işleri ile uğraşan biri için öğrenilmesi gereken en önemli konulardan biridir. Hayatımıza girmesi ile beraber esnek yapı kurmak istediğimizde bizim işimizi kolaylaştırmıştır.

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

Başlarken
Basit bir örnekle başlayalım. Üç Metin bileşenine sahip bir View komponent içeren konteynir ekleyelim.

//Our views
<View style={styles.container}>
  <View style={styles.viewStyleOne}>
    <Text style={styles.textStyle}> 1 </Text>
  </View>
  <View style={styles.viewStyleTwo}>
    <Text style={styles.textStyle}> 2 </Text>
  </View>
  <View style={styles.viewStyleThree}>
    <Text style={styles.textStyle}> 3 </Text>
  </View>
</View>
//Styles
let styles = StyleSheet.create({
  container: { backgroundColor:'#4286f4'},
  viewStyleOne: {
    width:40,
    height:40,
    justifyContent: 'center',
    alignItems:'center', 
    backgroundColor:'#b642f4'
  },
  textStyle:{
    textAlign:'center'
  }
})

Ekran Görüntüsü:

Konteynerin Şekillendirilmesi
Şimdi konteynere flex:1 ekliyoruz:

container: { 
  backgroundColor:'#4286f4', 
  flex: 1 
}

Bu, konteynerin ebeveynini, yani tüm ekranı doldurmasını sağlar.

Şimdi ekliyoruz:

container: { 
  backgroundColor:'#4286f4', 
  flex: 1,
  flexDirection:'row'
}

Herbir flexDirection view’leri, varsayılan olarak sütuna ayarlıdır, ancak bunu ‘satır’ olarak ayarlamak, konteynerdeki öğelerin yönünü değiştirecektir.

Artık içeriğin yönünü flexDirection kullanarak kontrol edebiliriz.
Şimdi justifyContent ve alignItems ekleyelim:

container:{ 
  backgroundColor:'#4286f4', 
  flex: 1, 
  flexDirection: 'row',
  justifyContent: 'flex-end',
  alignItems:'flex-start'
}

Benzer şekilde:

container: { 
  backgroundColor:'#4286f4', 
  flex: 1, 
  flexDirection: 'row',
  justifyContent: 'flex-end',
  alignItems:'flex-end'
}

Görünümler aşağıdaki gibi işlenecektir:

flexDirection, birincil ekseni ‘satır’ veya ‘sütun’ olarak belirler.
justifyContent, child’ların birincil eksen boyunca dağılımını belirler.
alignItems, child’ların ikincil eksen boyunca hizalamasını belirler.
Öğeleri ortalanacak şekilde ayarlamak için:

justifyContent: 'center',
alignItems:'center'

justifyContent flex-startcenterflex-endspace-around ve space-between destekler.
space-around:

space-between:

alignItemsflex-startcenterflex-end,ve stretch destekler.

Konteyner Stilini Geçersiz Kılma
Geçersiz kılmak için bir öğeye ihtiyacımız varsa, konteyner tarafından tanımlandığı gibi tanımlanır, öğeleri ayrı ayrı stil kullanabiliriz.
alignSelf, alignItems öğelerini geçersiz kılar ve bu seçenekleri autoflex-startflex-endcenterstretch and baseline olarak destekler.
Bir öğeye kendisini flex-start hizalamasını söylersek,

alignSelf: 'flex-start'

Böyle bitecekti:

flexGrow, öğenin aynı konteyner içindeki diğer esnek öğelere göre ne kadar büyüyeceğini kontrol eder.

flexGrow: 1

Şu şekilde işlenir:

flexBasic, öğe boyutunu yüzde ile kontrol eder. Örneğin:

flexBasis:50 //firstView style
flexBasis:20 //secondView style
flexBasis:30 //ThirdView style

Ve bu kadar! Umarım bu makaleyi faydalı bulmuşsunuzdur.

Kaynak: https://blog.reactnativecoach.com/

 

Kotlin ile Google Play In-App Review Kullanımı

Yayınlanan Android uygulamanızın puanlanma ve yorumlarının yapılması indirme sayısına etkisi çok büyüktür. Puanlandırmayı uygulama içinde yaptırılmasıyla müşterinin uygulamada kalmasını sağlayabilirsiniz. Böylelikle kullanıcı deneyimini arttırmış olursunuz.

Bu makalemde, Google Play In-App Review API kullanarak Kotlin dilinde yazılan Android uygulamanın içinde kullanıcının uygulama puanlanma ve yorumlarını yapmasını sağlayan yapıyı örneklendirdim.

Google Play In-App Review API kullanarak Java dilinde yazılan Android uygulamanın makalesine Java ile Google Play In-App Review API linkinden ulaşabilirsiniz.

Örnek projemizin ekran görüntüsü;

In-App Review için Önemli Noktalar

  1. Bu API yalnızca Android 5.0 (API seviyesi 21) veya sonraki sürümlere sahip olan Android cihazlarda çalışır.
  2. Google Play, kullanıcıya ne sıklıkla review dialog arayüzünü gösterilebileceğiniz konusunda zamana bağlı bir kota uygular. Bu kota nedeniyle, launchReviewFlow yöntemini kısa bir süre içinde birden çok kez çağırmak her zaman bir iletişim kutusu görüntülemeyebilir. (örneğin, bir aydan az). Kota hakkında bilgileri quotas linkinden ulaşabilirsiniz.
  3. Google Play bu yapıyı kullanırken tasarımını değiştirmemize olanak sağlamamaktadır.

Kotlin ile geliştireceğimiz projemizde Google Play In-App Review API’yi uygulayabilmek için aşağıdaki belirttiğim adımları uygulamalısınız.

1-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 Play Core API kütüphanelerini yüklüyoruz.

implementation 'com.google.android.play:core:1.8.0'
implementation 'com.google.android.play:core-ktx:1.8.1'

2- Backend Kodlama

Kullanıcıdan doğru zamanda puanlandırma istemek için uygulamanızın akışındaki iyi noktaları belirlemeniz (örneğin, kullanıcı bir oyunda bir seviyeyi tamamladığında) çok önemlidir.

İlk önce ReviewManagerFactory sınıfı ile ilgili Activity sınıfında puanlandırma isteğini oluşturmamız gerekir. Sonrasında requestReviewFlow metodundan dönen istediği isSuccessful ile kontrol ettiğimizde sonuç başarılı ise ReviewInfo nesnesi üzerinden launchReviewFlow () yöntemini çağırdık. Bazı nedenlerden dolayı işleyiş başarısız olursa, hatayı log console da göstermesini sağladık.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import com.google.android.play.core.review.ReviewManagerFactory
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        //Button'a tıklandığında puanlandırma sistemini çalıştıran metod çağırdım
        show_rate_app_btn.setOnClickListener {
            inAppReview()
        }
    }
    //Google Play puanlandırma ekranını oluşturan metod
    fun inAppReview() {
        val reviewManager = ReviewManagerFactory.create(this)
        val requestReviewFlow = reviewManager.requestReviewFlow()
        requestReviewFlow.addOnCompleteListener { request ->
            //Widget açılıp, puanlandırma ve yorum yapılabildiği bölüm
            if (request.isSuccessful) {
                val reviewInfo = request.result
                val flow = reviewManager.launchReviewFlow(this, reviewInfo)
                flow.addOnCompleteListener { 
                    //Kullanıcının puanlandırma ekranındaki işlemi bitmiş ve yazılım akışına devam edilecek bölüm
                }
            } else {
                Log.d("Error: ", request.exception.toString())
            }
        }
    }
}

3- Arayüz Kodlama

Activity sınıfımızda kullandığınız arayüz xml sayfasınıza bir button ekledim. Button id değerini de “show_rate_app_btn” yaptım. Üstte kotlin kodlamasında da kullandım.

Kaynak

1-https://developer.android.com/guide/playcore/in-app-review/kotlin-java

2- https://smality.com/google-play-in-app-review-api-kullanimi/