Ana içeriğe atla

17. Android’e Pusula View’u Oluşturma Örneği

1. View uzatarak CompassView sınıfını oluşturun. Yapılandırıcılar oluşturarak view’un kod içinde ve harici bir kaynak olarak örneklendirilmesine imkan verin. Kontrolü örneklemek ve diğer yapılandırıcılardan çağırabilmek için yeni bir initCompassView metodu ekleyin.

package com.paad.compass;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.*;
import android.view.*;
import android.util.AttributeSet;
public class CompassView extends View {
  public CompassView(Context context) {
    super(context);
    initCompassView();
  }  
  public CompassView(Context context, AttributeSet attrs) {
    super(context, attrs);
    initCompassView();
  }
  public CompassView(Context context, AttributeSet attrs, int defaultStyle) {
    super(context, attrs, defaultStyle);
    initCompassView();
  }
protected void initCompassView() {
    setFocusable(true);
  }
}

2. Pusula kontrolü canvas’ın müsaade ettiği ölçüde büyük, tam bir daire olmalıdır. OnMeasure metodunu ezerek en kısa kenarın ölçüsünü hesaplayın ve setMeasuredDimension metodunu kullanarak yükseklik ve genişliğin değerlerini ayarlayın.

@Override   
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int measuredWidth = measure(widthMeasureSpec);
    int measuredHeight = measure(heightMeasureSpec);
    int d = Math.min(measuredWidth, measuredHeight);
    setMeasuredDimension(d, d);   
  }
  private int measure(int measureSpec) {
    int result = 0;
    int specMode = MeasureSpec.getMode(measureSpec);
    int specSize = MeasureSpec.getSize(measureSpec);
    if (specMode == MeasureSpec.UNSPECIFIED) {
      result = 200;
    } else {
      result = specSize;
    }
    return result;
  }

3. String değerler için res/values/strings.xml kaynağını oluşturun.

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="app_name">Compass</string>
  <string name="cardinal_north">N</string>
  <string name="cardinal_east">E</string>
  <string name="cardinal_south">S</string>
  <string name="cardinal_west">W</string>
</resources>

4. Renkler için res/values/colors.xml kaynağını oluşturun.


<?xml version="1.0" encoding="utf-8"?>
<resources>   
  <color name="background_color">#F555</color>
  <color name="marker_color">#AFFF</color>
  <color name="text_color">#AFFF</color>
</resources>

5. CompassView sınıfına geri dönün ve görüntülenen yönü saklamak için yeni bir property ekleyin ve get ve set metodlarını oluşturun.

private float bearing;
  public void setBearing(float _bearing) {
    bearing = _bearing;
  }
  public float getBearing() {
    return bearing;
  }

6. initCompassView metoduna geri dönün ve 3. Adımda oluşturulan kaynaklar için referanslar alın. String değerleri değişkenlerde saklayın ve yeni sınıf bazlı Paint objeleri için renk değerlerini kullanın.


private Paint markerPaint;
  private Paint textPaint;
  private Paint circlePaint;
  private String northString;
  private String eastString;
  private String southString;
  private String westString;
  private int textHeight;
  protected void initCompassView() {
    setFocusable(true);
    Resources r = this.getResources();
    northString = r.getString(R.string.cardinal_north);
    eastString = r.getString(R.string.cardinal_east);
    southString = r.getString(R.string.cardinal_south);
    westString = r.getString(R.string.cardinal_west);
    circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    circlePaint.setColor(R.color.background_color);
    circlePaint.setStrokeWidth(1);
    circlePaint.setStyle(Paint.Style.FILL_AND_STROKE);
    markerPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    markerPaint.setColor(r.getColor(R.color.marker_color));
    textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    textPaint.setColor(r.getColor(R.color.text_color));
    textHeight = (int)textPaint.measureText("yY");
  }

7. CompassView sınıfı içindeki onDraw metodunu ezerek başlayın.

8. Kontrolün merkezini bulun ve kısa kenarı pusulanın yarıçapı olarak atayın.

9. drawCircle metodunu kullanarak dış kenarlığı çizin ve pusulanın arka planını renklendirin. 6. Adımda oluşturduğunuz circlePaint objesini kullanın.

10. Pusulamız çevrildiği yönü gösterecek o halde cihazın üstü hep gösterilen yön olmalıdır. Bunu sağlamak için canvas’ı o anki yönün tersine döndürmeliyiz.

11. Artık yapmanız gereken son şey işaretleri çizmek. Her 15 derecede bir işaret ve her 45 derecede bir de dereceyi yazacağız.


@Override
  protected void onDraw(Canvas canvas) {
    int px = getMeasuredWidth() / 2;
    int py = getMeasuredHeight() / 2;
    int radius = Math.min(px, py);
    canvas.drawCircle(px, py, radius, circlePaint);
    canvas.save();
    canvas.rotate(-bearing, px, py);
    int textWidth = (int)textPaint.measureText("W");
    int cardinalX = px-textWidth/2;
    int cardinalY = py-radius+textHeight;
    for (int i = 0; i < 24; i++) {
      canvas.drawLine(px, py-radius, px, py-radius+10, markerPaint);
      canvas.save();
      canvas.translate(0, textHeight);
      if (i % 6 == 0) {
        String dirString = "";
        switch (i) {
          case(0)  : {
                       dirString = northString;
                       int arrowY = 2*textHeight;
                       canvas.drawLine(px, arrowY, px-5, 3*textHeight, markerPaint);
                       canvas.drawLine(px, arrowY, px+5, 3*textHeight, markerPaint);
                       break;
                     }
          case(6)  : dirString = eastString; break;
          case(12) : dirString = southString; break;
          case(18) : dirString = westString; break;
        }
        canvas.drawText(dirString, cardinalX, cardinalY, textPaint);
      }
      else if (i % 3 == 0) {
        String angle = String.valueOf(i*15);
        float angleTextWidth = textPaint.measureText(angle);
        int angleTextX = (int)(px-angleTextWidth/2);
        int angleTextY = py-radius+textHeight;
        canvas.drawText(angle, angleTextX, angleTextY, textPaint);
      }
      canvas.restore();
      canvas.rotate(15, px, py);
    }
    canvas.restore();
  }

12. Pusulayı görüntülemek için main.xml planını değiştirin ve TextView referansını CompassView ile değiştirin.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  <com.paad.compass.CompassView
    android:id="@+id/compassView"
    android:layout_width="fill_parent"           
    android:layout_height="fill_parent"
  />
</LinearLayout>

Yorumlar

Bu blogdaki popüler yayınlar

Project: AutoPlan

PROJENİN AMACI : Bilgisayar ortamında mimari projeden otomatik olarak elektrik tesisat projesini çizdirmek. PROJENİN HEDEFLERİ : Bilgisayar ortamında mimari projeden elektrik tesisat projesini çizdirip, zamandan tasarruf sağlamak. Mimari bir proje çizilerek, üzerine elektrik tesisatını otomatik çizen program. PROJENİN SÜRESİ : 4 Ay PROJENİN SONUÇLARI : Elektrik tesisat projeleri üzerine çalışan insanların işlerini kolaylaştırmak, çizimde insan hatalarından kaynaklanan yanlışlıkların önüne geçmek. KAYNAKÇA : Elektrik-Elektronik Tek. alanı aydınlatma projeleri modülü. Şimdi Microsoft Visual C++ Öğrenin (Chuck Sphar) kitabı. Download :  Autoplan Setup PROJENİN ÇALIŞMASI HAKKINDA GENEL BİLGİLER Bu projede kat planı çizilen binanın, elektrik tesisat planını otomatik olarak çizebilecek bir yazılım geliştirmeye çalıştım. Böyle bir program kullanıcılara rahatlık sağlar ve önemli oranda zaman kazandırabilir. Bu programın çalışabilmesi kat planından çıkarabileceği ipuç...

Aynı Anda İki Şey Yapmak Beyninizi Yakıyor!

Stanford Üniversitesi’nde yapılan bir araştırmada, çoklu iş yapmanın (multitasking), her seferinde bir iş yapmaya oranla daha az verimli olduğu bulundu. Bu araştırmacılar düzenli olarak bir kaç elektronik bilgi akımına maruz kalan insanların bu bilgileri hatırlayamadığını ve bir işten diğerine, her seferinde bir iş yapan insanlar kadar iyi başarıyla geçemediğini buldular. Özel bir yetenek mi? Peki ya bazı insanların aynı anda çoklu iş yapmak konusunda özel bir yeteneği varsa? Stanford’daki araştırmacılar katılımcı gruplarını çoklu iş yapma konusundaki eğilimleri ve bunun performanslarını artırdığına olan inançları bazında karşılaştırdılar. Aynı anda çok fazla işi bir anda yapan kişilerin – çoğunlukla çoklu iş yapan ve bunun performanslarını artırdığını hisseden insanlar – performanslarının her seferinde tek bir işe odaklananlara göre daha kötü olduğunu buldular. Sıklıkla çoklu iş yapan kişiler daha kötü performans sergilediler çünkü düşüncelerini düzenlemek ve gereksiz bilgiler...

Larry Page ve Sergey Brin Google Girişimciliği

Garajda kurulan Google, bugün internet denilince akla ilk gelen web sitesidir. Akıllı telefon denilince akla ilk gelen Android işletim sistemidir. Şirketin kurucuları Larry Page ve Sergey Brin tanıdık bir arkadaşları vasıtasıyla ilk tanıştıklarında anlaşamazlardı. Birçok konuda fikir birliği kuramazlardı. İkili Stanford Üniversitesinde doktora yapıyorlardı. Google’dan önce Larry Page Stanford’ın tüm ağını bilgisayara indirebiliriz iddiasını ortaya atmasıyla ilk projelerine giriştiler. Verdikleri süre dolup üzerine aylar geçmiş olsa da ikili ağın yarısını bile indirememişlerdi. Bu indirme yöntemi aslında Google arama motorunun temellerini oluşturuyordu. İkili 1996 yılında ellerindeki bilgileri daha faydalı bir iş için kullanmaya karar vererek BackRub adında bir arama motoru kurmaya karar verdiler. BackRub’ı Sergey’in yurt odasında kurmaya başlarken, bir yandan da kendilerinin geliştirdiği arama teknolojisini bilgisayar bölümünden arkadaşlarına anlattılar. Arkadaşları bu fikri çok beğenm...