Miten luoda mukautettu Android-komponentti ja hallita resursseja?

Kun työskentelemme Android-sovelluksen kehityksessä, erityisesti käyttöliittymän suunnittelussa ja komponenttien luomisessa, yksi keskeisistä haasteista on oppia, miten resurssit ja näkymät hallitaan tehokkaasti ja joustavasti. Tämä luku käsittelee muun muassa resursseja, kuten kuvien käyttöä, ja sitä, miten mukautetut komponentit voidaan luoda ja lisätä koodin avulla suoraan käyttöliittymään.

Jos haluamme käyttää kuvia sovelluksessa, voimme ladata ne ilmaisista kuvapankeista, kuten Pixabay, ja lisätä ne resursseihin. Kuvat voidaan ladata drawable-kansioon, ja XML-määrittelyissä voidaan käyttää näitä kuvia sen sijaan, että käytettäisiin pelkkiä värejä. Tämä yksinkertaistaa grafiikan ja käyttöliittymän ulkoasun hallintaa. On kuitenkin tärkeää huomata, että suuret kuvat voivat vaikuttaa sovelluksen suorituskykyyn, joten optimaalinen kuvan koko ja resoluutio on tärkeää ottaa huomioon, erityisesti mobiililaitteilla.

Kuvien lisäksi Android-sovelluksissa voidaan luoda ja hallita myös näkymiä koodin kautta. Vaikka XML-muotoista käyttöliittymää pidetään suositeltavana, erityisesti monimutkaisemmissa sovelluksissa, on myös mahdollista luoda käyttöliittymä suoraan Java-koodissa. Tällöin voidaan luoda ja lisätä komponentteja, kuten DatePicker, suoraan koodin avulla. Esimerkiksi jos haluamme lisätä DatePicker-näkymän olemassa olevaan käyttöliittymään, voimme tehdä sen seuraavalla tavalla:

java
Copy code
RelativeLayout layout = (RelativeLayout) findViewById(R.id.layout);

DatePicker datePicker = new DatePicker(this);

layout.addView(datePicker);

Tässä käytetään findViewById-metodia viittaamaan olemassa olevaan asetteluun ja addView()-metodia uuden näkymän lisäämiseksi siihen. Jos taas haluamme luoda koko käyttöliittymän koodilla, voimme luoda uuden RelativeLayout-näkymän ja lisätä siihen tarvittavat komponentit suoraan:

java
Copy code
RelativeLayout layout = new RelativeLayout(this);

DatePicker datePicker = new DatePicker(this);
layout.addView(datePicker);
setContentView(layout);

Tällöin käyttöliittymä rakennetaan kokonaan koodissa ilman XML:ää. Tämä lähestymistapa voi olla kätevä yksinkertaisissa sovelluksissa, mutta monimutkaisemmissa tapauksissa XML-pohjainen lähestymistapa on usein selkeämpi ja helpompi ylläpitää.

Tässä esimerkissä luomme mukautetun komponentin, joka piirtää tekstiä näytölle. Aluksi luomme uuden luokan CustomView, joka perii View-luokan:

java
Copy code
public class CustomView extends View {

    final Paint mPaint = new Paint();

    public CustomView(Context context) {
        super(context);
        mPaint.setColor(Color.BLACK);
        mPaint.setTextSize(30);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        setBackgroundColor(Color.CYAN);
        canvas.drawText("Custom Text", 100, 100, mPaint);
        invalidate();
    }
}

Tässä luodaan Paint-objekti, joka määrittää, miten teksti piirretään, ja onDraw()-metodi piirtää tekstin näytölle. invalidate()-metodia käytetään piirtämisen uudistamiseen.

Tämän jälkeen meidän täytyy vain asettaa tämä mukautettu komponentti käyttöliittymäksi:

java
Copy code
setContentView(new CustomView(this));

Kun sovellus suoritetaan, näemme tämän mukautetun komponentin piirtävän tekstiä näytölle. Tämä lähestymistapa antaa täyden vapauden luoda aivan omia, uniikkeja käyttöliittymäelementtejä.

Androidin tarjoama joustavuus käyttöliittymän rakentamisessa on todella laaja. Vaikka XML-pohjainen lähestymistapa on yleisesti suositeltu, on tärkeää ymmärtää, milloin ja miksi kannattaa käyttää koodilla luotuja näkymiä ja mukautettuja komponentteja. Tämä voi parantaa sovelluksen suorituskykyä, skaalautuvuutta ja erityisesti mahdollistaa täysin yksilöllisten komponenttien luomisen, jotka eivät ole saatavilla valmiina Androidin widgeteissä.

Kuinka luoda Zoom-animaatio mukautetulla siirtymällä

Aloita luomalla uusi projekti Android Studiossa ja nimeä se haluamallasi tavalla. Valitse oletusarvoiset puhelin- ja tablettivaihtoehdot ja valitse Empty Activity, kun sinua pyydetään valitsemaan Activity-tyyppi. Voit käyttää tässä reseptissä käytettyä kuvaa, joka on ladattu Pixabay.com-sivustolta, mutta voit käyttää mitä tahansa kuvaa.

Ennen kuin aloitat, varmista, että kuva on kopioitu res/drawable-hakemistoon ja nimeä se image.jpg (jos kuva ei ole JPEG-muodossa, pidä alkuperäinen tiedostopääte).

Toimintatapa:

Avaa activity_main.xml ja korvaa olemassa oleva XML seuraavalla koodilla:

xml
Copy code
<ImageView

    android:id="@+id/imageViewThumbnail"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerInParent="true"
    android:src="@drawable/image"
    android:contentDescription="@string/thumbnail"/>

Seuraavaksi avaa MainActivity.java ja määrittele seuraavat globaali-muuttujat:

java
Copy code
private Animator mCurrentAnimator;
private ImageView mImageViewExpanded;

Lisää loadSampledResource() -metodi, joka on luotu suurten kuvien skaalaamiseen muistin ylitysten välttämiseksi:

java
Copy code
public Bitmap loadSampledResource(int imageID, int targetHeight, int targetWidth) {

    final BitmapFactory.Options options = new BitmapFactory.Options();
    options.inJustDecodeBounds = true;
    BitmapFactory.decodeResource(getResources(), imageID, options);
    final int originalHeight = options.outHeight;

    final int originalWidth = options.outWidth;

    int inSampleSize = 1;
    while ((originalHeight / (inSampleSize * 2)) > targetHeight && (originalWidth / (inSampleSize * 2)) > targetWidth) {
        inSampleSize *= 2;
    }
    options.inSampleSize = inSampleSize;
    options.inJustDecodeBounds = false;
    return BitmapFactory.decodeResource(getResources(), imageID, options);
}

Zoom-animaation toteuttaminen:

Lisää koodi onCreate() -metodiin seuraavasti:

java
Copy code
final ImageView imageViewThumbnail = (ImageView) findViewById(R.id.imageViewThumbnail);

imageViewThumbnail.setImageBitmap(loadSampledResource(R.drawable.image, 100, 100));
imageViewThumbnail.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        zoomFromThumbnail((ImageView) view);
    }
});
mImageViewExpanded = (ImageView) findViewById(R.id.imageViewExpanded);
mImageViewExpanded.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        mImageViewExpanded.setVisibility(View.GONE);
        mImageViewExpanded.setImageBitmap(null);
        imageViewThumbnail.setVisibility(View.VISIBLE);
    }
});

Lisää sitten zoomFromThumbnail() -metodi, joka käsittelee itse animaation ja on selitetty tarkemmin seuraavassa osassa:

java
Copy code
private void zoomFromThumbnail(final ImageView imageViewThumb) {
    if (mCurrentAnimator != null) {
        mCurrentAnimator.cancel();
    }

    final Rect startBounds = new Rect();

    final Rect finalBounds = new Rect();

    final Point globalOffset = new Point();

    imageViewThumb.getGlobalVisibleRect(startBounds);
    findViewById(R.id.frameLayout).getGlobalVisibleRect(finalBounds, globalOffset);
    mImageViewExpanded.setImageBitmap(loadSampledResource(R.drawable.image, finalBounds.height(), finalBounds.width()));
    startBounds.offset(-globalOffset.x, -globalOffset.y);
    finalBounds.offset(-globalOffset.x, -globalOffset.y);
    float startScale;
    if ((float) finalBounds.width() / finalBounds.height() > (float) startBounds.width() / startBounds.height()) {
        startScale = (float) startBounds.height() / finalBounds.height();
        float startWidth = startScale * finalBounds.width();

        float deltaWidth = (startWidth - startBounds.width()) / 2;

        startBounds.left -= deltaWidth;
        startBounds.right += deltaWidth;
    } else {
        startScale = (float) startBounds.width() / finalBounds.width();
        float startHeight = startScale * finalBounds.height();
        float deltaHeight = (startHeight - startBounds.height()) / 2;
        startBounds.top -= deltaHeight;
        startBounds.bottom += deltaHeight;
    }
    imageViewThumb.setVisibility(View.GONE);
    mImageViewExpanded.setVisibility(View.VISIBLE);
    mImageViewExpanded.setPivotX(0f);
    mImageViewExpanded.setPivotY(0f);

    AnimatorSet animatorSet = new AnimatorSet();

    animatorSet.play(ObjectAnimator.ofFloat(mImageViewExpanded, View.X, startBounds.left, finalBounds.left))
            .with(ObjectAnimator.ofFloat(mImageViewExpanded, View.Y, startBounds.top, finalBounds.top))
            .with(ObjectAnimator.ofFloat(mImageViewExpanded, View.SCALE_X, startScale, 1f))
            .with(ObjectAnimator.ofFloat(mImageViewExpanded, View.SCALE_Y, startScale, 1f));
    animatorSet.setDuration(1000);
    animatorSet.setInterpolator(new DecelerateInterpolator());
    animatorSet.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            mCurrentAnimator = null;
        }
        @Override

        public void onAnimationCancel(Animator animation) {

            mCurrentAnimator = null;
        }
    });
    animatorSet.start();
    mCurrentAnimator = animatorSet;
}

Kun tämä on valmis, sovellus laajentaa pienoiskuvan kosketettaessa ja näyttää sen suurennettuna. Sovelluksessa on mahdollisuus peruuttaa animaatio, ja pienoiskuva palautetaan alkuperäiseen tilaansa.

Tärkeää ymmärtää:

Zoom-animaatio toimii hyvin vain silloin, kun elementtien koordinaatit ja alkuperäiset mittasuhteet on otettu huolellisesti huomioon. Tässä koodissa käytetyt getGlobalVisibleRect() ja loadSampledResource() -metodit ovat tärkeitä optimoidessasi sovelluksen suorituskykyä ja estäessäsi suurten kuvien aiheuttamat muistivuodot. Lisäksi animaatioiden sujuvuus ja niiden oikea ajoitus vaikuttavat merkittävästi käyttäjäkokemukseen, joten on tärkeää käyttää AnimatorSet- ja ObjectAnimator-luokkia oikealla tavalla.