React Native ile Mobil Uygulama Geliştirme – 15 – Blur Background View Oluşturma

“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 15. kısmıdır. Bir önceki makalede (Part 14), React Native’de WebView oluşturmayı ve mobil projelerimizde nasıl kullanacağımızı anlattım.
Bu makalede React Native Community Blur paketi ile Android ve iOS uygulamalarının arka plan görünümünü bulanık(blur) nasıl yapabileceğimizi öğreneceğiz.
Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.
Bu yazıda @react-native-community/blur olarak bilinen harika bir react yerel npm paketi hakkında bilgi edineceğiz. React Native Community Blur paketi, hem android hem de iOS uygulamalarına  bulanık arka plan görünümü oluşturmak için kullanılır. React Native Community Blur paketinde koyu, açık ve xlight olmak üzere temel olarak 3 tür bulanıklaştırma efekti vardır. Bugün bir react native uygulaması oluşturacak ve @react-native-community/blur paketini NPM sunucusunu kullanarak proje uygulamamıza yükleyeceğiz. Yüklemeyi bitirdikten sonra, react native ile bulanık görünüm yapma kodunu yazacaktık.
1. İlk adım, @react-native-community/blur paketini projemize yüklemektir. Bu nedenle, projenizin Kök dizinini Komut İstemi veya Terminal’de açın ve aşağıdaki komutu yürütün.

npm install --save @react-native-community/blur

2. Artık android’de yükleme işlemi için başka herhangi bir komut yürütmeniz gerekmiyor. Ancak iOS için kurulum işlemini tamamlamak için aşağıdaki komutu uygulamalıyız.

cd ios && pod install && cd ..

3. Şimdi bir sonraki adım, uygulama için kodlamaya başlamaktır. Bu nedenle, projenizin ana App.js dosyasını açın ve Projenize Görünüm, Stil Sayfası, Metin, Resim ve Bulanık Görünüm bileşenini içe aktarın.

import React from 'react';
import { View, StyleSheet, Text, Image } from 'react-native';
import { BlurView } from '@react-native-community/blur';

4. Ana dışa aktarma varsayılan Uygulama işlevsel bileşenimizi oluşturma.

export default function App() {
  return (
  );
}

5. Şimdi dönüş bloğunda ilk önce bir Kök Görünüm bileşeni -> Arka Plan Görüntüsü bileşeni -> BlurView Bileşeni yapacağız. Şimdi, Bulanıklaştırma Görünümü bileşenine hangi bulanıklaştırma efektini uyguladığımızı göstermek için bir Metin bileşeni yapacağız.
Burada temel olarak 3 tür BlurView efekti mevcuttur: –
1. dark
2. light
3. xlight
Mevcut Prop:
1. stil: – Bulanıklaştırma Görünümü bileşenine stil uygulamak için kullanılır.
2. blurType: – Bulanıklaştırma türünü ayarlamak için kullanılır, desteklenen değerler dark, light, xlight’tır.
3. blurAmount: – Bulanıklaştırma yoğunluğunu ayarlar.
4. lessTransparencyFallbackColor: – Yalnızca iOS, siyah, beyaz, #rrggbb, vb. – Erişilebilirlik ayarı ReduceTransparency etkinse kullanılacak arka plan rengi.

  return (
    <View style={styleSheet.MainContainer}>
      <Image
        source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2021/04/beach_new.jpg' }}
        style={styleSheet.image}
        key={'blurryImage'} />
      <BlurView
        style={styleSheet.blurView}
        blurType="light"  // Values = dark, light, xlight .
        blurAmount={10}
       // viewRef={this.state.viewRef}
        reducedTransparencyFallbackColor="white"
      />
      <Text style={{ fontSize: 34, color: 'white', fontWeight: 'bold', textAlign: 'center' }}> React Native Blur View Dark</Text>
    </View>
  );

6. Stil Oluşturma.

const styleSheet = StyleSheet.create({
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 12
  },
  blurView: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
  image: {
      position: "absolute",
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
      resizeMode: 'cover',
      width: null,
      height: null,
  }
});

7. App.js dosyası için tam Kaynak Kodu: –

import React from 'react';
import { View, StyleSheet, Text, Image } from 'react-native';
import { BlurView } from '@react-native-community/blur';
export default function App() {
  return (
    <View style={styleSheet.MainContainer}>
      <Image
        source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2021/04/beach_new.jpg' }}
        style={styleSheet.image}
        key={'blurryImage'} />
      <BlurView
        style={styleSheet.blurView}
        blurType="light"  // Values = dark, light, xlight .
        blurAmount={10}
       // viewRef={this.state.viewRef}
        reducedTransparencyFallbackColor="white"
      />
      <Text style={{ fontSize: 34, color: 'white', fontWeight: 'bold', textAlign: 'center' }}> React Native Blur View Dark</Text>
    </View>
  );
}
const styleSheet = StyleSheet.create({
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 12
  },
  blurView: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
  image: {
      position: "absolute",
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
      resizeMode: 'cover',
      width: null,
      height: null,
  }
});

Ekran görüntüleri:

Kaynak: https://reactnativecode.com/

Android’de CardView ve Shape ile Köşeleri Yuvarlatma – Radius

UI, bizim müşteriye göstereceğimiz vitrinimizdir. Bu yüzden yazılımınızın basit, etkili ve kullanıcı dostu bir arayüz tasarımına sahip olması oldukça büyük bir öneme sahiptir.

Bu makale, Android tasarımlarında son zamanlarda trend olan arayüz elementlerinin köşelerini yuvarlatma işlemini en kolay ve iyi nasıl yapabileceğinizi anlatacağım.

Aşağıdaki resimde kullanılan köşeleri yuvarlatılmış öğeleri oluşturmayı örneklendireceğim.

Anlatacağım yöntemler:

  1. CardView ile köşeleri yuvarlatma
  2. Shape xml yapısı ile köşeleri yuvarlatma

1-CardView ile köşeleri yuvarlatma

CardView bir arayüz elementidir. CardView’in cardCornerRadius adında bir özelliği bulunmaktadır. Bu özelliği ekleyip, sonrasında CardView’in içine koyduğunuz arayüz elementlerinin kapsadığı alanın köşeleri yuvarlatılmış olacaktır.

Peki tüm arayüz elementlerinde bu işlevi eklemek için CardView kullanmak mantıklı mıdır? Eğer tek bir arayüz elementinin köşelerini yuvarlatacaksanız CardView tercih edilmez. Çünkü Shape xml yapısını kullanarak bu işi daha sade ve az kod ile yapabiliriz.:)  CardView yöntemi, içeresinde birden fazla arayüz elementlerinin olduğu kapsama alanının köşelerini yuvarlatacağınızda daha çok tercih edilir. (Şekil-1)

Şekil-1

CardView Örneği

İlk örneğimizin görünümü üstteki Şekil-1 deki gibi olacak.:) Bu örneği tamamladıktan sonra tasarıma yeni örnekler ekleyeceğim.

İlk önce bu örnekte kullandığım resimleri https://smality.com/resimler.zip linkinden indiriniz. Sonrasında zip klasörünün içindeki tüm dosyaları alıp, projenizde app->src->main>res yolunu takip ederek, res dizinin içine ekleyin.

Örnek resimde bulunan Vegetables alanını tek başına nasıl yapacağımızı görelim.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="#F6F4F4">
    <!--cardCornerRadius haricinde kullanılan özellikler sadece CardView'i hızalamak için kullanıldı -->
    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="40dp"
        app:cardCornerRadius="15dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints">
        <!-- ConstraintLayout'u sadece arayüz elementlerini kolay hızalamak için kullandım.-->
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/image2" />
            <TextView
                android:id="@+id/vege"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="18dp"
                android:layout_marginTop="10dp"
                android:text="Vegetables"
                android:textColor="#000000"
                android:textSize="20sp"
                android:textStyle="bold"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageView2" />
            <TextView
                android:id="@+id/number"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="18dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="15dp"
                android:text="(43)"
                android:textSize="12sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/vege" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

 

2-Shape xml yapısı ile köşeleri yuvarlatma

EditText, Button, TextView vb. arayüz elementlerinin köşelerini yuvarlatma işlemini daha az kod ile oluşturmak istiyorsanız, shape xml yapısını kullanmalısınız. Örneğin, sayfa tasarımınızda birden fazla köşeleri yuvarlanmış EditText var olduğunu düşünelim.  Bu görseli CardView kullanarak kodlarsanız, her bir EditText için ayrı bir CardView oluşturmanız gerekir. Eğer bu tasarımda shape xml yapısını kullanarak kodlarsanız, 1 tane shape xml dosyası oluşturup, bu dosyayı her bir EditText’in background özelliğinde çağırarak 1 satır kodla tüm EditText’lerin köşelerini aynı ölçüde yuvarlarsınız.

Shape xml Örneği

Örneğimizin kodlamasını bitirdiğimizde aşağıdaki gibi bir görüntü elde edeceğiz.

İlk önce projenizde app->src->main>res yolunu takip edip res dizini içindeki drawable dizinine sağ tıklayınız. Açılan pencerede New->Drawable Resource File seçerek drawable xml dosyasını oluşturun ve içine aşağıdaki kod yerleştirin.

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="20dp" />
    <!--Border rengini tanımlama-->
    <stroke android:width="1dp" android:color="#e2e0e3" />
    <!--Background(arkaplan) rengini tanımlama-->
    <solid android:color="#ffffff" />
</shape>
Kod açıklaması

Üstteki kodda corners tag’i arayüz elementinin köşelerinde değişiklik sağlar. Corners tag’inin radius özelliği, belirttiğiniz dp değeri kadar köşeleri yuvarlaklaştırır.

Şimdi tek yapmamız gereken işlem, layout xml’deki EditText’in background özelliğine oluşturduğumuz drawable xml’in yolunu eklemektir. (@drawable/rounded_edt)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F6F4F4">
    <!--drawableLeft ve drawablePadding özellikleri search iconunu eklemek için kullanıldı-->
    <EditText
        android:id="@+id/editTextTextPersonName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="40dp"
        android:layout_marginEnd="20dp"
        android:background="@drawable/rounded_edt"
        android:drawableLeft="?android:attr/actionModeWebSearchDrawable"
        android:drawablePadding="15dp"
        android:ems="10"
        android:hint="Search"
        android:inputType="textPersonName"
        android:padding="10dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Anlattıklarımın hepsini bir projede birleştirdim ve aşağıdaki görünümü veren projenin kodlarına github linkinden ulaşabilirsiniz.