Android Studio'da tasarımları koda dönüştürme

Tasarımı Figma'dan içe aktar

Şimdi, Figma'da oluşturulan Kullanıcı Arayüzü Paketini Android Studio projesi. Kullanıcı Arayüzü Paketini dahil etmek için oluşturulan kodu Android Studio'nun içe aktarma sihirbazında oluşturduk.

1. Önceden yapılandırılmış Android Studio projesi ZIP dosyasını indirin. (Upload Relay sayfasındaki projenin aynısıdır).

2. Sıkıştırılmış dosyayı açmak için dosyayı çift tıklayın. Bu işlemle HelloFigma'yı seçin. Dosyayı ana klasörünüze taşıyın.

3. Android Studio'ya geri dönün. Dosya > Aç, evinize gidin HelloFigma'yı seçin ve Open'ı (Aç) tıklayın.

4. Projeyi açtığınızda Android Studio, belirler. Projeye Güvenin'i tıklayın.

5. Android Studio'da Dosya > Yeni > Kullanıcı Arayüzü Paketlerini İçe Aktar...

   

6. Kullanıcı Arayüzü Paketlerini İçe Aktar iletişim kutusunda, Figma dosyanızın URL'sini yapıştırın ve Sonraki'ye dokunun.

   

   

7. Dosyanın indirilmesini bekleyin. Bileşen başarıyla indirildiğinde, önizleme görüntülenir. Oluştur'u tıklayın.

   

   Projenize yeni dosyalar eklendiğine dikkat edin. Bunlar, kaynak denetimi sağlamak için harika bir araçtır. Android görünümünde şunları görürsünüz:

   

   • 
     app/ui-packages/hello_card/* Kodda bileşeni açıklamak için gereken tüm kaynak öğeleri. Bu dosyaları, derleme adımında kod oluşturmak için kullanılır.

   • 
     app/ui-packages/hello_card/hello_card.json Bileşenin tanımını içeren JSON dosyası ( düzen ve diğer özellikleri) arasında bağlantı oluşturur.

   • 
     app/ui-packages/hello_card/fonts/* Jetpack Compose'daki bileşeni desteklemek için gereken yazı tipi dosyaları.

   • app/ui-packages/hello_card/*.png veya *.jpeg
     Bileşeni desteklemek için gereken tüm resim öğeleri.

   • 
     app/ui-packages/hello_card/VERSION.txt Kullanıcı arayüzünü içe aktarmak için kullanılan Relay for Android Studio eklentisinin sürümü Paket.

   • 
     app/ui-packages/hello_card/config.json Önizlemeler için kullanılan tema.

Derle ve kod oluştur

1. Tıklayın: . bahsedeceğiz.

   

2. Derleme sonucunu görüntülemek için Derleme sekmesini tıklayın.

   

3. Oluşturulan kod projenize eklenir. Bu, oluşturulmuş kod olduğu için projenizin bir parçası olarak kaynak kontrolü yapmamalısınız. Projenizin Android görünümünde şunları görüntüleyebilirsiniz:

   

   • 
     app/java (generated)/com/example/hellofigma/hellocard Jetpack Compose kodu ve yazı tipleri oluşturuldu.

   • 
     app/java (generated)/com/google/relay/compose Tüm Kullanıcı Arayüzü Paketleri genelinde kullanılan paylaşılan çalışma zamanı kodu.

4. app/java (generated)/com/example/hellofigma/hellocard/HelloCard.kt adlı görüşmeyi açın. Bu, Figma bileşeni için oluşturulmuş Jetpack Compose işlevidir. Siz bileşeni önizleyebilir.

   Düzen, öğeler ve stil bilgileri artık Figma'dan aktarılıyor. adım adım açıklayacağım.

   

   Bu kodda, Figma'ya eklenen özet artık yukarıdaki bir yoruma çevrilir oluşturulan composable'dan bahsetmek istiyorum.

    /**
    * Hello Card component used to display the image and the title content
    *
    * This composable was generated from the UI package ‘ hello_card’
    * Generated code; do not edit directly
    */
   @Composable
   fun HelloCard(modifier: Modifier = Modifier) {...
   

Bileşeni ve uygulamayı çalıştır

Şimdi bileşeni ana etkinliğe entegre edelim.

1. app/java/com/example/hellofigma/MainActivity.kt uygulamasında, içe aktarma işlemine ekleyin bölümüne ekleyin:

   import com.example.hellofigma.hellocard.HelloCard
   

2. Aynı dosyanın daha alt kısımlarında, MainActivity sınıf:

   class MainActivity : ComponentActivity() {
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           setContent {
               HelloFigmaTheme {
                   // A surface container using the 'background' color from the theme
                   Surface(color = MaterialTheme.colors.background) {
                       // Greeting("Android") // Delete this line
                       HelloCard()  // Add this line
                   }
               }
           }
       }
   }
   

3. Aynı dosyanın daha aşağısında, composable'ın önizlemesinde bir satırı değiştirin:

   @Preview(showBackground = true)
   @Composable
   fun DefaultPreview() {
       HelloFigmaTheme {
           HelloCard() // Change this line
       }
   }
   

4. Araç çubuğunda bir cihaz seçili olduğundan emin olun.

5. Araç çubuğundaki ▶ simgesini tıklayarak projeyi çalıştırın.

   

   Emülatör başlatılır, proje derlenir ve uygulamanız başlatılır.

   

   Tebrikler! İlk Figma'nızı başarıyla dahil ettiniz bileşenini Jetpack Compose uygulamasına dönüştürün!

Sonraki adım

Tasarım güncellemeleri yapma ve uygulama

Artık uçtan uca bir çalışma örneğiniz olduğuna göre, şimdi de ve kodumuzu tekrar üretmekten ibaret değildir.