Hvordan man arbejder med Fragmenter i Android: Master/Detail-mønsteret i praksis

At opbygge en applikation med fragmenter kræver en struktureret tilgang, hvor du kan håndtere forskellige skærmtilstande og bruge fragmenter til at opdele brugergrænsefladen på en effektiv måde. Et populært mønster, der anvendes i mange Android-applikationer, er Master/Detail-mønstret. Dette mønster giver en enkel måde at vise en liste af elementer i én del af skærmen (Master), mens en detaljeret visning vises i en anden del (Detail). I denne guide ser vi nærmere på, hvordan man implementerer Master/Detail-mønstret ved hjælp af fragmenter og hvordan man håndterer både portræt- og landskabsorientering på en effektiv måde.

For at forstå implementeringen af fragmenter i Android, er det første skridt at lære om den grundlæggende struktur af en aktivitet og dens fragmenter. Når en applikation først kører i portrættilstand, vil én fragment blive vist, mens i landskabstilstand vil to fragmenter vises side om side. Dette kræver, at layoutet for både portræt og landskab tilpasses, så begge scenarier understøttes korrekt. Lad os dykke ned i, hvordan du kan implementere en simpel Master/Detail-applikation ved at bruge fragmenter i Android.

Oprettelse af MasterFragment

Når fragmentet er oprettet, er det vigtigt at definere et interface, som vil blive brugt til at kommunikere med den tilhørende aktivitet. Dette interface, kaldet OnMasterSelectedListener, skal indeholde en metode, der kalder den valgte landes navn, når et item i listen bliver valgt. Derefter skal vi oprette en adapter for listen, så elementerne kan vises korrekt.

java
Copy code
public class MasterFragment extends ListFragment {

    public interface OnMasterSelectedListener {
        void onItemSelected(String countryName);
    }
    private OnMasterSelectedListener mOnMasterSelectedListener = null;

    public void setOnMasterSelectedListener(OnMasterSelectedListener listener) {

        mOnMasterSelectedListener = listener;
    }
    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        String[] countries = new String[] {"China", "France", "Germany", "India", "Russia", "United Kingdom", "United States"};

        ListAdapter countryAdapter = new ArrayAdapter<>(getActivity(), android.R.layout.simple_list_item_1, countries);
        setListAdapter(countryAdapter);
        getListView().setChoiceMode(ListView.CHOICE_MODE_SINGLE);
        getListView().setOnItemClickListener((parent, view1, position, id) -> {
            if (mOnMasterSelectedListener != null) {
                mOnMasterSelectedListener.onItemSelected(((TextView) view1).getText().toString());
            }
        });
    }
}

Oprettelse af DetailFragment

Næste skridt er at oprette DetailFragmentet, som vil vise detaljerne for det valgte land. Dette fragment skal udvide fra Fragment og oprette en metode, der håndterer visningen af den valgte lands navn.

java
Copy code
public class DetailFragment extends Fragment {

    public static String KEY_COUNTRY_NAME = "KEY_COUNTRY_NAME";
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_detail, container, false);
    }
    @Override

    public void onViewCreated(View view, Bundle savedInstanceState) {

        super.onViewCreated(view, savedInstanceState);
        Bundle bundle = getArguments();
        if (bundle != null && bundle.containsKey(KEY_COUNTRY_NAME)) {
            showSelectedCountry(bundle.getString(KEY_COUNTRY_NAME));
        }
    }
    public void showSelectedCountry(String countryName) {
        ((TextView) getView().findViewById(R.id.textViewCountryName)).setText(countryName);
    }
}

Håndtering af Layout for Portræt og Landskab

For at understøtte både portræt- og landskabstilstande, skal der oprettes separate layoutfiler. For portrættilstand vil vi have en enkel visning, hvor kun én fragment vises, mens i landskabstilstand vil begge fragmenter blive vist side om side.

Opsætning af MainActivity

For at kunne håndtere de forskellige tilstande og placering af fragmenterne, skal MainActivity oprettes og konfigureres til at håndtere både én- og to-pane layout. Når aktiviteten starter, skal den kontrollere, om det er muligt at vise fragmenterne side om side (det vil sige i landskabsorientering). Hvis det er tilfældet, vil begge fragmenter blive tilføjet til layoutet. Hvis kun portrættilstand er tilgængelig, vil vi vise MasterFragment og udskifte det med DetailFragment, når et item i listen bliver valgt.

java
Copy code
public class MainActivity extends AppCompatActivity {
    private boolean dualPane;
    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        FrameLayout frameLayout = findViewById(R.id.frameLayout);
        if (frameLayout != null) {
            dualPane = false;
            FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
            MasterFragment masterFragment = (MasterFragment) getSupportFragmentManager().findFragmentByTag("MASTER");
            if (masterFragment == null) {
                masterFragment = new MasterFragment();
                fragmentTransaction.add(R.id.frameLayout, masterFragment, "MASTER");
            }
            fragmentTransaction.commit();
        }
    }
}

Hvad man bør forstå ud over implementeringen

En anden vigtig overvejelse er at sikre, at fragmenterne håndterer ændringer som rotation af skærmen korrekt. Det betyder, at fragmenterne skal være i stand til at gemme deres tilstand og gendanne den, når aktivitetsgenoprettelsen finder sted, hvilket kan ske, når brugeren drejer telefonen fra portræt til landskab eller omvendt. Dette kræver, at du korrekt håndterer livscyklussen for fragmenterne og opretholder brugerens data.

Hvordan implementere tryk- og berøringshændelser i Android

At arbejde med brugerinteraktioner på Android, som tryk og berøringer, er en essentiel del af at skabe dynamiske og reaktive applikationer. Dette afsnit viser, hvordan du kan reagere på både enkle klik og langtryk på skærmen, samt hvordan du kan implementere gestusgenkendelse som dobbelttryk og berøringsbevægelser. Vi vil fokusere på, hvordan du kan opsætte hændelseshåndtering i Android Studio og bruge de relevante klasser og metoder til at skabe en interaktiv oplevelse for brugeren.

Først skal vi forstå, hvordan de grundlæggende hændelser som onClick, onLongClick og onTouchEvent fungerer i Android. Når en bruger trykker på en knap eller et andet UI-element, udløses disse hændelser. Dette gøres ved at knytte en hændelseslytter til det ønskede View-element i din aktivitet.

Grundlæggende opsætning af tryk- og langtryk-hændelser

For at reagere på et klik og et langtryk på en knap i din Android-applikation, skal du først oprette en knap i din layoutfil. Åbn activity_main.xml og erstat eksisterende elementer med en knap:

xml
Copy code
<Button

    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Tryk mig" />

I din MainActivity.java skal du herefter opsætte hændelseslytterne i onCreate()-metoden:

java
Copy code
Button button = (Button)findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(MainActivity.this, "Klik", Toast.LENGTH_SHORT).show();
    }
});
button.setOnLongClickListener(new View.OnLongClickListener() {
    @Override
    public boolean onLongClick(View v) {
        Toast.makeText(MainActivity.this, "Langt tryk", Toast.LENGTH_SHORT).show();
        return true;
    }
});

I dette eksempel håndteres både et enkelt klik og et langt tryk. Bemærk, at onLongClick()-metoden returnerer en boolsk værdi, hvor true betyder, at hændelsen er blevet håndteret.

Gestusgenkendelse

For at implementere gestusgenkendelse kan vi bruge GestureDetectorCompat sammen med en SimpleOnGestureListener. I MainActivity.java skal vi først definere en global variabel for gestusdetektoren:

java
Copy code
private GestureDetectorCompat mGestureDetector;

Dernæst opretter vi en klasse, der udvider SimpleOnGestureListener for at lytte på de ønskede gestusbegivenheder:

java
Copy code
private class GestureListener extends GestureDetector.SimpleOnGestureListener {

    @Override
    public boolean onSingleTapConfirmed(MotionEvent e) {
        Toast.makeText(MainActivity.this, "Enkelt tryk bekræftet", Toast.LENGTH_SHORT).show();
        return super.onSingleTapConfirmed(e);
    }
    @Override
    public boolean onDoubleTap(MotionEvent e) {
        Toast.makeText(MainActivity.this, "Dobbelttryk", Toast.LENGTH_SHORT).show();
        return super.onDoubleTap(e);
    }
}

I onTouchEvent()-metoden sendes alle berøringshændelser til GestureDetector for at analysere dem:

java
Copy code
@Override

public boolean onTouchEvent(MotionEvent event) {
    mGestureDetector.onTouchEvent(event);
    return super.onTouchEvent(event);
}

Endelig, i onCreate()-metoden, initialiseres gestusdetektoren:

java
Copy code
mGestureDetector = new GestureDetectorCompat(this, new GestureListener());

Når du kører applikationen på en enhed eller emulator, vil den kunne reagere på både enkelttryk og dobbelttryk.

Multi-touch og pinch-to-zoom

For at tilføje understøttelse af multi-touch gestus, som f.eks. "pinch-to-zoom", kan vi bruge ScaleGestureDetector-klassen, som gør det muligt at analysere og reagere på ændringer i zoomniveauet, når brugeren bruger to eller flere fingre på skærmen.

Først tilføjer vi de nødvendige globale variabler i MainActivity:

java
Copy code
private ScaleGestureDetector mScaleGestureDetector;

private float mScaleFactor = 1.0f;
private ImageView mImageView;

Derefter opsætter vi en ScaleListener, der håndterer zoombevægelserne:

java
Copy code
private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {

    @Override
    public boolean onScale(ScaleGestureDetector scaleGestureDetector) {
        mScaleFactor *= scaleGestureDetector.getScaleFactor();
        mImageView.setScaleX(mScaleFactor);
        mImageView.setScaleY(mScaleFactor);
        return true;
    }
}

onTouchEvent()-metoden sender alle berøringshændelser til ScaleGestureDetector:

java
Copy code
@Override

public boolean onTouchEvent(MotionEvent motionEvent) {
    mScaleGestureDetector.onTouchEvent(motionEvent);
    return true;
}

Så tilføjer vi følgende linje i onCreate() for at initialisere ScaleGestureDetector:

java
Copy code
mScaleGestureDetector = new ScaleGestureDetector(this, new ScaleListener());

Med denne opsætning vil applikationen kunne genkende pinch-bevægelser og reagere ved at zoome ind eller ud på det viste billede.

Vigtige bemærkninger

Det er vigtigt at forstå, at gestusgenkendelse og hændelseshåndtering kræver, at vi arbejder med berøringsdata og bruger komplekse objekter som MotionEvent og GestureDetector. Når man arbejder med flere hændelser på samme View, som f.eks. både klik og langtryk, er det nødvendigt at sikre, at disse hændelser ikke overlapper hinanden og forårsager konflikter.

Yderligere kan det være nyttigt at implementere yderligere gestusmetoder såsom onScroll(), onFling(), og onShowPress() for at udvide funktionaliteten af din app og tilbyde en mere kompleks brugerinteraktion.

Med en korrekt forståelse af, hvordan berørings- og gestusdetektering fungerer, kan du skabe mere engagerende og brugervenlige applikationer, der reagerer på brugerens input på en effektiv og intuitiv måde.

Hvordan opretter man en kompasapplikation med sensordata og RotationAnimation i Android?

For at skabe et kompas ved hjælp af Android's sensorer og animation, skal vi kombinere data fra accelerometeret og magnetometret. Denne metode muliggør beregning af den magnetiske nordpol og bruger en simpel roterende animation til at vise kompasset. Selvom vi tidligere har arbejdet med sensordata, kræver dette eksperiment en lidt mere kompleks tilgang, da vi nu skal beregne orienteringen ved hjælp af en rotationsmatrix og animere den i realtid, når enheden bevæger sig.

Oprettelse af kompasapplikationen

Start med at oprette et nyt projekt i Android Studio og navngiv det f.eks. Compass. Vælg de foruddefinerede indstillinger for telefoner og tablets og vælg en tom aktivitet. For at gøre kompasset funktionelt skal vi bruge et billede som kompassindikator. Du kan finde et passende billede på en hjemmeside som Pixabay, fx denne. Det er ikke nødvendigt, men et billede med en gennemsigtig baggrund ser bedre ud, når det roteres.

Hvordan gør man det?

1. Kopier dit valgte billede til mappen res/drawable og navngiv det compass.png.

2. Åbn activity_main.xml og erstat den eksisterende TextView med følgende ImageView:

3. Åbn MainActivity.java og deklarer de nødvendige globale variabler:

   java
   Copy code
   private SensorManager mSensorManager;
   
   private Sensor mMagnetometer;
   private Sensor mAccelerometer;
   private ImageView mImageViewCompass;
   private float[] mGravityValues = new float[3];
   
   private float[] mAccelerationValues = new float[3];
   
   private float[] mRotationMatrix = new float[9];
   
   private float mLastDirectionInDegrees = 0f;
   
   

4. Tilføj følgende SensorEventListener klasse til MainActivity:

   java
   Copy code
   private SensorEventListener mSensorListener = new SensorEventListener() {
       @Override
   
       public void onSensorChanged(SensorEvent event) {
   
           calculateCompassDirection(event);
       }
       @Override
       public void onAccuracyChanged(Sensor sensor, int accuracy) {
           // Nothing to do
       }
   };
   

5. Overtag onResume() og onPause() metoderne:

   java
   Copy code
   @Override
   
   protected void onResume() {
       super.onResume();
       mSensorManager.registerListener(mSensorListener, mMagnetometer, SensorManager.SENSOR_DELAY_FASTEST);
       mSensorManager.registerListener(mSensorListener, mAccelerometer, SensorManager.SENSOR_DELAY_FASTEST);
   }
   @Override
   protected void onPause() {
       super.onPause();
       mSensorManager.unregisterListener(mSensorListener);
   }
   

6. Tilføj følgende kode til onCreate() metoden:

   java
   Copy code
   mImageViewCompass = (ImageView) findViewById(R.id.imageViewCompass);
   mSensorManager = (SensorManager) getSystemService(Context.SENSOR_SERVICE);
   mMagnetometer = mSensorManager.getDefaultSensor(Sensor.TYPE_MAGNETIC_FIELD);
   mAccelerometer = mSensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
   

7. Den nødvendige beregning og animation kan implementeres med følgende metode:

   java
   Copy code
   private void calculateCompassDirection(SensorEvent event) {
   
       switch (event.sensor.getType()) {
           case Sensor.TYPE_ACCELEROMETER:
               mAccelerationValues = event.values.clone();
               break;
           case Sensor.TYPE_MAGNETIC_FIELD:
               mGravityValues = event.values.clone();
               break;
       }
       boolean success = SensorManager.getRotationMatrix(mRotationMatrix, null, mAccelerationValues, mGravityValues);
       if (success) {
   
           float[] orientationValues = new float[3];
   
           SensorManager.getOrientation(mRotationMatrix, orientationValues);
           float azimuth = (float) Math.toDegrees(-orientationValues[0]);
   
           RotateAnimation rotateAnimation = new RotateAnimation(
   
               mLastDirectionInDegrees, azimuth,
               Animation.RELATIVE_TO_SELF, 0.5f,
               Animation.RELATIVE_TO_SELF, 0.5f
           );
           rotateAnimation.setDuration(50);
           rotateAnimation.setFillAfter(true);
           mImageViewCompass.startAnimation(rotateAnimation);
           mLastDirectionInDegrees = azimuth;
       }
   }
   

8. Kør applikationen på en fysisk enhed for at se kompasset bevæge sig. Bemærk, at emulatoren ikke har en accelerometer- eller magnetometer-sensor, så bevægelsen ikke vil kunne simuleres på en virtuel enhed.

Hvordan fungerer det?

I denne opskrift udnytter vi tidligere erfaringer med at læse sensordata, og i stedet for at gentage forklaringen om Androids sensorframework, koncentrerer vi os om metoden calculateCompassDirection(). Denne metode kaldes direkte fra onSensorChanged() callbacket. Vi adskiller de data, der kommer fra accelerometeret og magnetometret, og bruger SensorManager.getRotationMatrix() til at beregne rotationsmatrixen. Hvis beregningen er succesfuld, anvender vi SensorManager.getOrientation() til at få orienteringen af enheden.

Azimutet, som beskriver den magnetiske nord, rapporteres som en vinkel i radianer, som vi konverterer til grader ved hjælp af Math.toDegrees(). Denne værdi bruges til at rotere billedet af kompasset. Vi bruger en RotateAnimation, hvor vi angiver, at rotationen skal ske relativt til billedets midte (0.5f). Animationen varer 50 millisekunder, og med setFillAfter(true) forbliver billedet i den nye vinkel efter animationen.

Hvad kan man eksperimentere med?

Det er værd at eksperimentere med indstillingerne for rotationen og sensoropdateringshastigheden. Ved at bruge SensorManager.SENSOR_DELAY_FASTEST og en kort varighed på 50 millisekunder, får man en hurtig animation. Du kan prøve at sænke opdateringshastigheden for sensorerne og justere animationsvarigheden for at skabe en langsommere og mere glidende effekt. Det er også muligt at justere for at få kompasset til at reagere mere præcist eller langsommere, afhængig af den ønskede brugeroplevelse.