Android tutorial III: ListView

Liste-300pxWitaj w trzecim wpisie, pierwszy program za nami wszystko mamy skonfigurowane, więc wpisy bedą krótsze i bardziej konkretne w warstwie programistycznej:). Dzisiaj udoskonalimy nasz pierwszy program dodamy do niego widok ListView który będzie korzystał z prostego adaptera – ArrayAdapter.

Dane z pola EditText zapiszemy do listy (kolekcji, jeszcze nie widoku), następnie przekażemy ją do następnej aktywności, umieścimy dane w adapterze i na sam koniec ustawimy adapter dla naszego widoku ListView:) Let’s do it:)

Na początek:

Zanim zajmiemy się kontrolkami listy w Androidzie, musimy przedstawić pojęcie adaptera. Kontrolki ListView służą do wyświetlania zbiorów danych. Jednak zamiast używać jednego typu kontrolki zarówno do obsługi wyświetlania, jak i zarządzania danymi, Android dzieli te dwa zadania pomiędzy kontrolki ListView i adaptery. Adaptery dostarczają dane a kontrolki je wyświetlają w skrócie:)

Zmodyfikujmy troszkę kod z poprzedniego wpisu aby wyglądał tak:

JAVA:

package info.textview;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;

public class MainActivity extends Activity {

    Button buttonStart, buttonNext;
    TextView textView;
    EditText editText;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initVariable();

        buttonStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                String value = editText.getText().toString();
                textView.setText(value);
                            
            }
        });
     
    }

    public void initVariable() {

        buttonStart = (Button) findViewById(R.id.buttonAdd);
        textView = (TextView) findViewById(R.id.textView1);
        editText = (EditText) findViewById(R.id.editText);
        buttonNext = (Button) findViewById(R.id.buttonNext);
   
    }
}

XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:fitsSystemWindows="true"
    tools:context="info.textview.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay"
        android:id="@+id/view">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:id="@+id/textView1"
        android:layout_marginTop="22dp"
        android:layout_below="@+id/view"
        android:layout_centerHorizontal="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Add"
        android:id="@+id/buttonAdd"
        android:layout_marginBottom="90dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginLeft="40dp"
        android:layout_marginStart="40dp" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/editText"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Next"
        android:id="@+id/buttonNext"
        android:layout_alignBottom="@+id/buttonAdd"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginRight="48dp"
        android:layout_marginEnd="48dp" />

</RelativeLayout>

Najistotniejsze zmiany to usunięcie powiadomienie TOAST oraz dodanie nowego buttona, którym będziemy przechodzić do następnej aktywności.

  • Zaczynamy, tworzymy listę (kolekcje) do której będziemy zapisywać wartości z EditTexta, potrzebny nam jescze licznik zaraz zobaczycie why:).
ArrayList<String> dataForListView;
int counter;
  •  Inicjalizujemy zmienne w metodzie initVariable().
dataForListView = new ArrayList<String>();
counter = 0;
  • Następnie w metodzie OnClick, buttona dodajemy każdą wartość do naszej listy, w pierwszym parametrze metoda add przyjmuje index, naszym  indexem jest counter, który w chwili otworzenia programu ustawiamy na 0 a po każdym kliknięciu powiększamy o jeden. Na koniec „czyścimy”nasze pole EditText.
buttonStart.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {

 String value = editText.getText().toString();
 textView.setText(value);
 dataForListView.add(counter, value);
 counter++;
 editText.setText("");

 }
});
  • Kolejnym krokiem jest przejście do następnej aktywności wywołujemy metodę setOnClickListner na drugim buttonie, Tworzymy nową intencje w której pierwszym parametrem jest Context, a drugim aktywność do której chcemy przejść. Na koniec pakujemy naszą listę razem z intencją. Pierwszy parametr to klucz, jakby hasło które musimy podać aby odebrać w SecondActivity naszą wartość czyli drugi parametr. Wywołujemy metodę startActivity z naszą intencją.
buttonNext.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View v) {

           Intent intent = new Intent(getApplicationContext(), SecondActivity.class);
           intent.putExtra("lista", dataForListView);
           startActivity(intent);

       }
   });
  •  Cała aktywność:
package info.textview;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

import java.util.ArrayList;

public class MainActivity extends Activity {

    Button buttonStart, buttonNext;
    TextView textView;
    EditText editText;
    ArrayList<String> dataForListView;
    int counter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initVariable();

        buttonStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                String value = editText.getText().toString();
                textView.setText(value);
                dataForListView.add(counter, value);
                counter++;
                editText.setText("");

            }
        });

        buttonNext.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                Intent intent = new Intent(getApplicationContext(), SecondActivity.class);
                intent.putExtra("lista", dataForListView);
                startActivity(intent);

            }
        });
    }

    public void initVariable() {

        buttonStart = (Button) findViewById(R.id.buttonAdd);
        textView = (TextView) findViewById(R.id.textView1);
        editText = (EditText) findViewById(R.id.editText);
        buttonNext = (Button) findViewById(R.id.buttonNext);

        counter = 0;
        dataForListView = new ArrayList<String>();

    }
}

Przechodzimy do drugiej aktywności dodanie kontrolki ListView:

  • Dodajemy nową aktywność:

new_activity_tut_III

  • Nazywamy aktywność:

second_activity_tut_III

  • Moja wygląda tak, bardzo skromnie heh:

secon_activity_layout_tut_III

Gdzie nasz kod będzie wyglądał tak:

  • Tworzymy zmienne ListView, ArrayAdapter, oraz ArrayList,
  • w metodzie initVariable() inicjalizujemy, zwróć uwagę jak odbieramy intencje podajemy klucz „lista”,
  • w metodzie setListWithData inicjalizujemy nasz adapter, najpierw podajemy Context, następnie, layout w jakim ma wyświetlać się lista, u nas jest to jeden z domyślnych przez co przed R, musimy podać jeszcze android, ostatnim parametrem są dane czyli nasza lista z poprzedniej aktywności.
  • na koniec ustawiamy adapter w naszej liście.
package info.textview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import java.util.ArrayList;

public class SecondActivity extends AppCompatActivity {

    ListView listWithData;
    ArrayAdapter<String> arrayAdapter;
    ArrayList<String> arrayListToGetData;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);

        initVariables();
        setListWithData();


    }

    public void initVariables(){

        listWithData = (ListView) findViewById(R.id.listView);
        arrayListToGetData = new ArrayList<String>();
        arrayListToGetData = getIntent().getStringArrayListExtra("lista");

    }

    public void setListWithData(){

        arrayAdapter = new ArrayAdapter<String>(SecondActivity.this,
                android.R.layout.simple_list_item_1, arrayListToGetData);
        listWithData.setAdapter(arrayAdapter);

    }
}

Pamiętaj aby zadeklarować drugą aktywność w manifeście:

<activity android:name=".SecondActivity"></activity>

Gotowa apka:

app_I

  • Druga aktywność lista:

ap_II

To tyle na dzisiaj, nasza aplikacja nie zachowuje danych po wyłączeniu, ale mam nadzieje, że widzisz już potencjał:)

Cześć.

 

 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *