Ön körbe forog: Egyéni „fonó” létrehozása az Androidon

Bármely tapasztalt mérnök elmondja neked, hogy minden platformon vannak erősségei és gyengeségei. Mivel én vagyok a vezető Android-fejlesztő egy olyan csapatban, amely szoftvert ír az iPhone és a Windows Phone 7 számára, gyakran emlékeztetek arra, hogy milyen „laza” a Google felhasználói felület kerete. Ez nem azt jelenti, hogy nem szeretem az Android nyílt architektúráját - igen. Az Android egy hatalmas operációs rendszer, és nagyon kevés ez nem lehetséges. Azonban az erőfeszítés, amely a csekély átmeneti effektusok végrehajtásához és az Apple és Microsoft mobil platformon egyszerűen "létező" állapotának fenntartásához szükséges folyamatos megjelenítés fenntartásához vezet, kissé ijesztő lehet a fejlesztők számára, hogy a lábuk nedvessé váljanak a Google digitális medencéjében.

Nemrég be kellett építenem a saját egyedi "fonóját" egy listanézetbe. Tudod, hogy mire gondolok: az egyik kör alakú kép, amely jobbra (baba jobbra) forog, jelezve, hogy valami betöltődik. Noha az Android rendszerben van ProgressBar osztály, ez bevezet egy további nézet összetettségét, és ez feleslegesnek tűnt egy ilyen triviális feladat számára. Tehát egy kicsit felvonultam az animációs keret jelenlegi helyzetére, elkészítettem egy képet és megpróbáltam.

Miközben örültem annak, hogy felfedeztem, hogy a Google UI keretcsoport a helyes irányba halad, pár ütközésig végigmentem az út mentén az osztályokkal, amelyek nem úgy viselkedtek, mint amire számíthattam volna, és egy esetben az osztály nem úgy viselkedett, ahogy a Google munkatársai elvárták (vagy legalábbis annak a mérnöknek, aki az osztály dokumentációját írta, nem volt tisztában a funkcióval). Néhány napos kódolás, a dokumentáció többszöri újraolvasása és néhány bejegyzés után a Google-kód fórumokon végül felállítottam és forogtam. A következő oktatóanyag megmutatja, hogyan kell ugyanezt tenni, miközben remélhetőleg megtakarítja Önt a nehéz boltok felfedezéséből.

A bemutató teljes forráskódja tömörített archívumként tölthető le itt. Három képet beillesztettem az erőforrás mappába, amelyet a Google Képek oldalon találtam. (Hidd el nekem ... senki sem akarja, hogy a rajzokat a semmiből rajzoljanak. Még mindig kísérteties az iskolai művészeti osztályban az idő emléke, hogy fel kellett vázolnunk háziállatunkat, és a kutyámmal kapcsolatos erőfeszítéseim ellenére küldtek az igazgató irodájába, amit a tanárom szerint biztosan tréfa volt.) Nem láttam szerzői jogi információkat a kiválasztott képeken, de ha Ön az egyik használt kép alkotója / tulajdonosa, és szeretné, ha használj valami mást, vagy adj némi hitelt a forrásfájlokban, csak dobj nekem egy sort.

1. Hozzon létre egy új Android projektet az Eclipse-ben a plug-in segítségével. Mindig igyekszem a lehető legszélesebb körű telefont támogatni, és mint ilyen, ehhez a projekthez az operációs rendszer bármely olyan verzióját elkészítheti, amely nagyobb vagy egyenlő az Android 1.6-zal (Cupcake).

2. Helyezze el a használni kívánt fiókot a megfelelő erőforrás mappába. Az én esetemben három képet kaptam: flower_icon.png, frog_icon.png és gear_icon.png.

3. Hozzon létre egy / anim mappát a / res könyvtárban. Itt ad hozzá XML fájlokat, amelyek meghatározzák a "tween" animációkat. A Google Tween animációs motorja lenyűgöző. A forgatásokon kívül képes méretezési műveleteket végrehajtani, alfa-csatornás animációkat végezni és manipulációkat fordítani.

4. Adja hozzá a következő XML animációs meghatározásokat:

alpha.xml

"1.0" encoding = "utf-8" ?>

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

android: fromAlpha = "1.0"

android: toAlpha = "0, 0"

android: időtartam = "2000" />

rotate.xml "1.0" encoding = "UTF-8" ?>

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

android: fromDegrees = "0"

android: toDegrees = "360"

android: pivotX = "50%"

android: pivotY = "50%"

android: interpolator = "@android: anim / linear_interpolator"

android: időtartam = "2000" />

scale.xml

"1.0" encoding = "utf-8" ?>

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

android: fromXScale = "1"

android: toXScale = ".25"

android: fromYScale = "1"

android: toYScale = ".25"

android: pivotX = "50%"

android: pivotY = "50%"

android: időtartam = "2000" />

Gotcha: A dokumentáció szerint állíthatja be az ismétlési szám tulajdonságát az XML fájlban, de tapasztalatom szerint ez nem mindig működik így, különösen, ha animációs készleteket használ kombinált animációs effektusok létrehozására. Azt javaslom, hogy váljon szokássá, hogy a Java-kódban beállítsa az ismétlési szám tulajdonságát, és megmutatom, hogyan kell ezt megtenni az egyedi listanézetű adapter osztályában.

5. A / elrendezés mappában adjon hozzá egy általános lista nézetet a fő elrendezéshez.

main.xml

"1.0" encoding = "utf-8" ?>

"Http://schemas.android.com/apk/res/android"

android: tájolás = "függőleges"

android: layout_width = "fill_parent"

android: layout_height = "fill_parent" >

android: layout_width = "fill_parent"

android: layout_height = "wrap_content"

android: text = "@ string / hello" />

android: id = "@ + id / android: list"

android: layout_width = "fill_parent"

android: layout_height = "fill_parent"

android: cacheColorHint = "# 0000"

android: background = "@android: színes / átlátszó"

android: dividerHeight = "1dip" />

6. Határozza meg a lista nézet sorát. Táblázat-elrendezést használtam egy szöveg és egy kép nézettel.

list_view_row.xml

"1.0" encoding = "utf-8" ?>

"Http://schemas.android.com/apk/res/android"

android: layout_width = "fill_parent"

android: layout_height = "? android: attr / listPreferredItemHeight"

android: padding = "6dip" >

"vízszintes"

android: layout_width = "fill_parent"

android: layout_height = "wrap_content"

android: layout_marginBottom = "2dip"

android: stretchColumns = "*" >

android: id = "@ + id / label"

android: textSize = "18sp"

android: padding = "2dip"

android: gravitáció = "bal | középpont"

android: layout_gravity = "bal | közép"

android: layout_width = "wrap_content"

android: layout_height = "wrap_content"

android: textColor = "#ffffff" />

android: id = "@ + id / gfx"

android: padding = "2dip"

android: gravitáció = "jobb | középpont"

android: layout_gravity = "jobb | középen"

android: layout_width = "fill_parent"

android: layout_height = "wrap_content" />

7. Lépjen tovább a forráskódra. A standard listview / adapter hierarchiát használva a listában szereplő tételeknek meg kell tartaniuk a saját állapotukat az ábrázoláshoz, és mint ilyenek, szükségünk van egy egyszerű, saját készítésű tárolóra.

MyContainer.java

csomag szerzőwjf.com;

nyilvános osztály MyContainer {

privát karakterlánc mText = "";

privát logikai mAnimálás = hamis ;

magán int m húzható = -1;

public void setText (String someText) {mText = someText; }

nyilvános karakterlánc getText () { return mText; }

public void setAnimating (logikai isAnimating) {mAnimating = isAnimating; }

nyilvános logikai isAnimating () { return mAnimating;}

public void setDravableResourceId ( int id) {mDravable = id; };

public int getDravableResourceId () { return mDravable; }

}

8. A fő osztály aligha tölti be a listanézetünket, és váltja a rajzjelzőt, amikor a listában szereplő elemet kiválasztják.

Main.java csomag authorwjf.com;

import java.util.ArrayList;

import android.app.ListActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.ListView;

public class Main kiterjeszti a ListActivity {

magán ArrayList elemek = null ;

magán CustomAdapter mAdapter;

/ ** A tevékenység első létrehozásakor hívják. * /

@Override

public void onCreate (Bundle savedInstanceState) {

super .onCreate (SaveInstanceState);

setContentView (R.layout. );

mItems = új ArrayList ();

MyContainer item1 = új MyContainer ();

item1.setAnimáló ( hamis );

item1.setText ("Tween effektus forgatása");

item1.setDravableResourceId (R.dravable. gear_icon );

mItems.add (item1);

MyContainer item2 = új MyContainer ();

item2.setAnimáló ( hamis );

item2.setText ("Alpha Tween Effect");

item2.setDravableResourceId (R.dravable. béka_ikon );

mItems.add (item2);

MyContainer item3 = új MyContainer ();

item3.setAnimáló ( hamis );

item3.setText ("Scale Tween Effect");

item3.setDravableResourceId (R.dravable. flower_icon );

mItems.add (ITEM3);

mAdapter = új CustomAdapter ( ez, R.layout. list_view_row, mItems);

setListAdapter (mAdapter);

}

/ **

* Lista nézet a kattintáskezelőn.

* /

@Override

public void onListItemClick (ListView szülő, View v, int position, long id) {

mItems.get (pozíció) .setAnimating (! mItems.get (pozíció) .isAnimating ());

mAdapter.notifyDataSetChanged ();

}

}

9. Végül, de nem utolsósorban az, hogy az egyedi adapterünk felelős az animációk be- és kikapcsolásáért. Itt állítom be az animáció ismétlődő tulajdonságát (anim.setRepeatCount (Animáció. INFINITE )), nem pedig az XML fájlokban, amint azt a Google dokumentációja gyakran sugallja.

CustomAdapter.java

csomag szerzőwjf.com;

import java.util.ArrayList;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.TextView;

a nyilvános osztály CustomAdapter kibővíti az ArrayAdapter {

magán ArrayList elemek;

magánkontextus c = null ;

public CustomAdapter (kontextus-kontextus, int textViewResourceId, ArrayList elemek) {

szuper (kontextus, textViewResourceId, elemek);

ez .items = elem;

ez .c = kontextus;

}

@Override

nyilvános ViewViewView ( int pozíció, ViewViewView, ViewGroup szülő) {

Nézet v = convertView;

if (v == null ) {

LayoutInflater vi = (LayoutInflater) c.getSystemService (háttér. LAYOUT_INFLATER_SERVICE );

v = vi.inflate (R.layout. list_view_row, null );

}

TextView címke = (TextView) v.findViewById (R.id. Címke );

ImageView gfx = (ImageView) v.findViewById (R.id. Gfx);

MyContainer item = (MyContainer) items.get (pozíció);

Animáció anim = null ;

kapcsoló (item.getDravableResourceId ()) {

eset R. húzható. flower_icon :

anim = AnimationUtils. loadAnimation (getContext (), R. érték);

szünet ;

eset R. húzható. frog_icon :

anim = AnimationUtils. loadAnimation (getContext (), R.anim. alfa );

szünet ;

eset R. húzható. gear_icon :

anim = AnimationUtils. loadAnimation (getContext (), R.anim. forgatás );

szünet ;

}

label.setText (item.getText ());

gfx.setImageResource (item.getDrawableResourceId ());

gfx.clearAnimation ();

gfx.setVisibility (Nézet. LÁTHATÓ );

if (item.isAnimating ()) {

anim.setRepeatCount (animáció. INFINITE );

anim.setRepeatMode (animáció. REVERSE );

gfx.startAnimation (anim);

}

return v;

}

}

Gotcha: Annak okán, hogy nem tudom teljesen megérteni, minden alkalommal fel kell hívnia a .clearAnimation alkalmazást, amikor az adaptert meghívják. Az egyébként kapott viselkedés csúnya, és azt sugallja, hogy az UI-keretrendszer kevésbé ideális módon használja újra a nézeteket. Ha szeretné látni, miről beszélek, kommentáld a gfx.clearAnimation () sort; majd töltse be az alkalmazást a készülékére, és érintsen meg néhány másik sort. Látni fogja az érintett sorokat, amelyekre nem érkezett, és olyan módon, amely semmiképpen sem logikus. Ezt a témát egy Google UI keretmérnökkel ismertettem, és soha nem kaptam kielégítő választ.

Itt van, egy kis felhasználói felület szerelme a Google kedvenc robotja iránt. Android-fejlesztő kollégáimnak azt mondom: "Íme! Az Apple iPhone nem az egyetlen olyan eszköz, amely ott van, sima felhasználói felülettel rendelkezik. Időnként kissé több munka, hogy innen érkezzen."

Az emulátoron futó animációink képernyőképe.

© Copyright 2021 | mobilegn.com