Ekran - Image Büyüklükleri Bulma ve Image Birleştirme İşlemleri

Merhaba bu yazımızda imagelar üzerinde duracağız. Bir ekran büyüklüğü nasıl bulunur, imageların ekranlardaki boyutları ne olur bunları bulacağız. Daha sonra bir imageın ekran büyüklüğüne göre orantılayarak ekranda gösterilmesini sağlayacağız. Son olarakta resimleri uygulamamızda runtime sırasında nasıl birleştirebiliriz bunu öğreneceğiz.

Bildiğiniz gibi android işletim sistemi ile çalışan binlerce telefon modeli mevcut. Bu da demek oluyor ki ekran boyutları, çözünürlükleri çok farklılaşıyor. Bizler de bir uygulama geliştirirken bütün ekran boyutlarına göre düşünerek geliştirmelerimizi yapmalıyız.  Aşağıdaki kod bloğu ile uygulamanızın çalıştığı telefonun ekran boyutlarını bulabilirsiniz.

 

int screenWidth;

int screenHeight;

 

@Override

protected void onCreate(Bundle savedInstanceState) {

    DisplayMetrics metrics = new DisplayMetrics();

    getWindowManager().getDefaultDisplay().getMetrics(metrics);

    screenWidth = metrics.widthPixels; screenHeight = metrics.heightPixels;

}

 

Peki bir imageView icin benzer bir yapıda uzunluk ve genişlik bilgilerini almak istesek nasıl bir durumla karşılaştığımızı görelim.

 

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

 

    <ImageView

        android:id="@+id/imgLock"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginStart="8dp"

        android:layout_marginLeft="8dp"

        android:layout_marginTop="8dp"

        android:layout_marginEnd="8dp"

        android:layout_marginRight="8dp"

        android:layout_marginBottom="8dp"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        app:srcCompat="@android:drawable/ic_lock_lock" />

 

</android.support.constraint.ConstraintLayout>

 

package com.erdinulger.gelecegiyazanlarblog;

 

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.util.Log;

import android.widget.ImageView;

 

public class MainActivity extends AppCompatActivity {

 

    ImageView view;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        view = (ImageView)findViewById(R.id.imgLock);

        int width = view.getWidth();

        int heigth = view.getHeight();

        Log.i("Width - Height",  width +" - " + heigth);

 

    }

}

 

2018-12-23 16:26:23.280 17388-17388/com.erdinulger.gelecegiyazanlarblog I/Width - Height: 0 - 0

Görüldüğü gibi onCreate methodu içerisinde bir componentin yükseklik ve genişlik bilgisini almaya çalıştığımızda karşımıza 0 - 0 bilgisi geliyor. Fakat bu component ekranda başarılı olarak görüntüleniyor. Aynı şekilde onStart ve onResume methodlarında da aynı sonucu alacaksınız. Componentlerin görüntülenen gerçek boyutlarını alabilmeniz için onWindowFocusChanged methodunu kullanmalısınız.

package com.erdinulger.gelecegiyazanlarblog;

 

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.util.Log;

import android.widget.ImageView;

 

public class MainActivity extends AppCompatActivity {

 

    ImageView view;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        view = (ImageView)findViewById(R.id.imgLock);

        int width = view.getWidth();

        int heigth = view.getHeight();

        Log.i("onCreate Width - Height",  width +" - " + heigth);

 

    }

 

    @Override

    public void onWindowFocusChanged(boolean hasFocus) {

        super.onWindowFocusChanged(hasFocus);

        int width = view.getWidth();

        int heigth = view.getHeight();

        Log.i("onWindowFocusChanged Width - Height",  width +" - " + heigth);

 

    }

}

 

 

2018-12-23 16:37:27.150 18015-18015/com.erdinulger.gelecegiyazanlarblog I/onCreate Width - Height: 0 - 0

2018-12-23 16:37:27.299 18015-18015/com.erdinulger.gelecegiyazanlarblog I/onWindowFocusChanged Width - Height: 48 - 48

 

Componentlerin boyutlarını almanın diğer bir yöntemi ise ViewTreeObserver.OnGlobalLayoutListener methodunu kullanmaktır. Bu method sayesinde onWindowFocusChanged methodunun tetiklenmesini beklemenize gerek kalmaz. Componentiniz create edilir edilmez yükseklik ve genişlik bilgilerini alabilirsiniz.

 

 

package com.erdinulger.gelecegiyazanlarblog;

 

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.util.Log;

import android.view.View;

import android.view.ViewTreeObserver;

import android.widget.ImageView;

 

public class MainActivity extends AppCompatActivity {

 

    ImageView view;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        view = (ImageView)findViewById(R.id.imgLock);

        view.getViewTreeObserver().addOnGlobalLayoutListener(new MyGlobalListenerClass());

        int width = view.getWidth();

        int heigth = view.getHeight();

        Log.i("onCreate Width - Height",  width +" - " + heigth);

 

    }

 

    @Override

    public void onWindowFocusChanged(boolean hasFocus) {

        super.onWindowFocusChanged(hasFocus);

        int width = view.getWidth();

        int heigth = view.getHeight();

        Log.i("onWindowFocusChanged Width - Height",  width +" - " + heigth);

 

    }

 

    class MyGlobalListenerClass implements ViewTreeObserver.OnGlobalLayoutListener {

        @Override

        public void onGlobalLayout() {

            View v = (View) findViewById(R.id.imgLock);

            int width2  = v.getWidth();

            int height2 = v.getHeight();

            Log.i("OnGlobalLayoutListener Width - Height",  width2 +" - " + height2);

 

        }

    }

}

 

2018-12-23 16:48:20.604 18155-18155/com.erdinulger.gelecegiyazanlarblog I/onCreate Width - Height: 0 - 0

2018-12-23 16:48:20.696 18155-18155/com.erdinulger.gelecegiyazanlarblog I/OnGlobalLayoutListener Width - Height: 48 - 48

2018-12-23 16:48:20.739 18155-18155/com.erdinulger.gelecegiyazanlarblog I/onWindowFocusChanged Width - Height: 48 - 48

 

Diğer bir konumuz ise runtime sırasında image birleştirme işlemleridir. Buna neden ihtiyacımız olabilir bir düşünelim. Diyelim ki uygulamanızda bir puan sisteminiz olsun. Bir madalyon içerisinde puan gösterteceksiniz. Gösterilecek rakamların imagelardan oluşturulmasını istiyorsunuz. Yada bir matematik işlemi yapan bir uygulamanız var. Random kütüphanesinden türettiğiniz sayıları bir image üzerinde göstermek istiyorsunuz. Bu durumda 0 dan 10 a kadar rakamları ve background image i resourcelarınızda tutmanız yeterli. Aşağıdaki kodları projenize dahil ederek kolayca runtime sırasında image birleştirme işlemi yapabilir ve ekranda göstertebilirsiniz.

package com.erdinulger.mathforkids.utils;

import android.content.Context;

import android.content.res.Resources;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.Canvas;

import android.graphics.Matrix;

import com.erdinulger.mathforkids.R;

public class ImageUtils {

    Resources resources;

    Bitmap bitZero;

    Bitmap bitOne;

    Bitmap bitTwo;

    Bitmap bitThree;

    Bitmap bitFour;

    Bitmap bitFive;

    Bitmap bitSix;

    Bitmap bitSeven;

    Bitmap bitEigth;

    Bitmap bitNine;

    public ImageUtils(Resources resources){

        this.resources = resources;

        bitZero = BitmapFactory.decodeResource(resources, getNumberImgId(0));

        bitOne = BitmapFactory.decodeResource(resources, getNumberImgId(1));

        bitTwo = BitmapFactory.decodeResource(resources, getNumberImgId(2));

        bitThree = BitmapFactory.decodeResource(resources, getNumberImgId(3));

        bitFour = BitmapFactory.decodeResource(resources, getNumberImgId(4));

        bitFive = BitmapFactory.decodeResource(resources, getNumberImgId(5));

        bitSix = BitmapFactory.decodeResource(resources, getNumberImgId(6));

        bitSeven = BitmapFactory.decodeResource(resources, getNumberImgId(7));

        bitEigth = BitmapFactory.decodeResource(resources, getNumberImgId(8));

        bitNine = BitmapFactory.decodeResource(resources, getNumberImgId(9));

    }

 

    public int getNumberImgId(int sayi){

        if(sayi==0){

            return R.drawable.sifir;

        }else if(sayi==1){

            return R.drawable.bir;

        }else if(sayi==2){

            return R.drawable.iki;

        }else if(sayi==3){

            return R.drawable.uc;

        }else if(sayi==4){

            return R.drawable.dort;

        }else if(sayi==5){

            return R.drawable.bes;

        }else if(sayi==6){

            return R.drawable.alti;

        }else if(sayi==7){

            return R.drawable.yedi;

        }else if(sayi==8){

            return R.drawable.sekiz;

        }else if(sayi==9){

            return R.drawable.dokuz;

        }

        return R.drawable.sifir;

    }

    public Bitmap getBitmapNumberImage(int sayi){

        if(sayi==0){

            return bitZero;

        }else if(sayi==1){

            return bitOne;

        }else if(sayi==2){

            return bitTwo;

        }else if(sayi==3){

            return bitThree;

        }else if(sayi==4){

            return bitFour;

        }else if(sayi==5){

            return bitFive;

        }else if(sayi==6){

            return bitSix;

        }else if(sayi==7){

            return bitSeven;

        }else if(sayi==8){

            return bitEigth;

        }else if(sayi==9){

            return bitNine;

        }else{

            return bitZero;

        }

    }

    public Bitmap getResizedBitmap(Bitmap bm, int newWidth, int newHeight) {

        int width = bm.getWidth();

        int height = bm.getHeight();

        float scaleWidth = ((float) newWidth) / width;

        float scaleHeight = ((float) newHeight) / height;

        // CREATE A MATRIX FOR THE MANIPULATION

        Matrix matrix = new Matrix();

        // RESIZE THE BIT MAP

        matrix.postScale(scaleWidth, scaleHeight);

        // "RECREATE" THE NEW BITMAP

        Bitmap resizedBitmap = Bitmap.createBitmap(

                bm, 0, 0, width, height, matrix, false);

        bm.recycle();

        return resizedBitmap;

    }

 

    public Bitmap createNumberImageFromMultipleNumbers(int sayi,int screenWidth,int screenHeight){

        int tempSayi = sayi;

        int basamakSayisi = 1;

        while (tempSayi / 10 >= 1) {

            tempSayi = tempSayi / 10;

            basamakSayisi++;

        }

        int[] rakamlar = new int[basamakSayisi];

        for (int i=0;i< rakamlar.length;i++){

            rakamlar[i]=(sayi / (int)Math.pow(10,i))%10;

        }

 

        Bitmap[] bitmapArr = new Bitmap[basamakSayisi];

 

        for (int i=0;i<basamakSayisi;i++){

            bitmapArr[i] = getBitmapNumberImage(rakamlar[i]);

        }

 

        Bitmap bitDefault= BitmapFactory.decodeResource(resources, R.drawable.back);

 

        bitDefault = getResizedBitmap(bitDefault,screenWidth/2,screenHeight);

        //bitDefault = getResizedBitmap(bitDefault,10,10);

        Bitmap result = Bitmap.createBitmap(bitDefault.getWidth(), bitDefault.getHeight(), bitDefault.getConfig());

        Canvas canvas = new Canvas(result);

        int width1 = bitDefault.getWidth();

        int width2 = bitZero.getWidth();

        float left = 0;

        int top = 0;

 

        canvas.drawBitmap(bitDefault,0f,0f,null);

        int delta = screenWidth/7;

        delta = width2+10;

        for(int i = basamakSayisi-1;i>=0;i--){

            left += delta;

            top = 80;

            canvas.drawBitmap(bitmapArr[i], left, top, null);

        }

        result = getResizedBitmap(result,result.getWidth(),screenHeight/3);

        return result;

    }

}

 

Projelerinizin başarılı olması dileğiyle,