JavascriptProva

sabato 3 settembre 2016

Ripasso della ScrollView, prima parte.

Vorrei riscrivere la mia applicazione ImageCom, a titolo di esercizio.
Il principio è ingegnoso: abbiamo un unico database in cui per ogni record abbiamo i campi:
  1. ETICHETTA, che è quello che appare come didascalia dell'immagine;
  2. CATEGORIA, che è quello che identifica la foto come appartenente a una schermata;
  3. TIPO, che identifica se l'immagine è un link a un'altra schermata o un'immagine il cui click genera un suono;
  4. IMMAGINE, che è l'immagine reale;
  5. X, posizione sull'asse X;
  6. Y, posizione sull'asse Y.
Vorrei migliorare le denominazioni, in quanto sono piuttosto confusive.
ETICHETTA mi risulta abbastanza chiaro.
Al posto di CATEGORIA potrei usare SCHERMATA, che è più intuitivo riguardo allo scopo di questo campo.
TIPO potrebbe essere booleano anziché stringa, identificando come VERO quando si tratti di un'immagine normale e FALSO quando si tratti di un link a una categoria.

Le stesse immagini le potrei denominare "Immagine vera" o "Link a schermata".
Rivediamo un attimo il meccanismo della ScrollView, che non ricordo affatto...

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/superLayout"
    android:background="@drawable/w3"
   android:layout_width="match_parent"
   android:layout_height="match_parent" >
   <ImageView
            android:id="@+id/leftTop"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="0dp"
            android:layout_marginTop="0dp"
            android:src="@drawable/chiave" />
   <ImageView
            android:id="@+id/rightTop"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="0dp"
            android:layout_marginTop="0dp"
            android:src="@drawable/chiave" />
   <ImageView
            android:id="@+id/leftBottom"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="0dp"
            android:layout_marginBottom="0dp"
            android:src="@drawable/lucchiuso" />
   <ImageView
            android:id="@+id/rightBottom"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:layout_marginRight="0dp"
            android:layout_marginBottom="0dp"
            android:src="@drawable/lucchiuso" />

   <TextView
       android:id="@+id/textView1"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_marginLeft="10dp"
       android:layout_marginRight="0dp"
       android:layout_alignTop="@+id/leftTop"
       android:layout_alignBottom="@+id/leftTop"
       android:layout_toRightOf="@+id/leftTop"
       android:layout_toLeftOf="@+id/button2"
       android:background="#FFF"
       android:text="" />

   <Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="30dp"
    android:layout_alignParentTop="true"
    android:layout_toLeftOf="@+id/rightTop"
    android:background="#0066ff"
    android:text="Cancella" />
<ScrollView 
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:fillViewport="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="30dp"
    android:layout_marginTop="30dp"
    android:layout_marginRight="30dp"
    android:layout_marginBottom="30dp"
    android:id="@+id/scrollView" >

    <RelativeLayout 
    android:id="@+id/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000">

        

</RelativeLayout>
</ScrollView>

<Button
    android:id="@+id/bttIndietro"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/rightTop"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:visibility="invisible"
    android:background="#aff"
    android:text="<-" />

<Button
    android:id="@+id/bttModifica"
    android:layout_width="wrap_content"
    android:layout_height="30dp"
    android:layout_alignParentBottom="true"
    android:layout_alignLeft="@+id/scrollView"
    android:layout_marginLeft="200dp"
    android:visibility="invisible"
    android:background="#afa"
    android:textSize="10sp"
    android:text="MOD. IMMAGINE" />

<TextView
    android:id="@+id/txtBarraCategoria"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/textView1"
    android:layout_alignParentBottom="true"
    android:layout_alignTop="@+id/leftBottom" />

<Button
    android:id="@+id/bttCancellaImg"
    android:layout_width="wrap_content"
    android:layout_height="30dp"
    android:layout_alignParentBottom="true"
    android:layout_alignRight="@+id/scrollView"
    android:layout_marginRight="45dp"
    android:background="#faa"
    android:text="CANCELLA"
    android:textSize="10sp"
    android:visibility="invisible" />

</RelativeLayout> 
Isoliamo la parte che ci interessa...

<ScrollView 
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:fillViewport="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="30dp"
    android:layout_marginTop="30dp"
    android:layout_marginRight="30dp"
    android:layout_marginBottom="30dp"
    android:id="@+id/scrollView" >

    <RelativeLayout 
    android:id="@+id/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000">

        

</RelativeLayout>
</ScrollView> 
Praticamente c'è una ScrollView all'interno di un RelativeLayout.
Sembra banale, ma il problema sta nelle proprietà della ScrollView.
Ho riprodotto la cosa con un copia-incolla:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.example.antonello.j_communicator.MainActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginBottom="30dp"
        android:id="@+id/scrollView" >

        <RelativeLayout
            android:id="@+id/mainLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#000">



        </RelativeLayout>
    </ScrollView>
</RelativeLayout> 
Ma ottengo un rettangolo nero all'interno di un'activity bianca.
Probabilmente il problema sta in quei "margin" che nell'app avevo messo in quanto non volevo la ScrollView a tutto schermo.
Tolgo i margini:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.example.antonello.j_communicator.MainActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:id="@+id/scrollView" >

        <RelativeLayout
            android:id="@+id/mainLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#000">



        </RelativeLayout>
    </ScrollView>
</RelativeLayout>
Adesso la parte nera centrale è più ampia, ma resta pur sempre un bordino bianco.
Forse devo agire sul RelativeLayout maggiore togliendo i padding...

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.antonello.j_communicator.MainActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:id="@+id/scrollView" >

        <RelativeLayout
            android:id="@+id/mainLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#000">



        </RelativeLayout>
    </ScrollView>
</RelativeLayout> 
Sì, adesso è ottimale: tutta la schermata nera.

Ora inserisco qualcosa nel RelativeLayout centrale.
        mainLayout=(RelativeLayout)findViewById(R.id.mainLayout);
        scrollView=(ScrollView)findViewById(R.id.scrollView);
        ImageView immagine1=new ImageView(this);
        ImageView immagine2=new ImageView(this);
        immagine1.setImageResource(R.drawable.bonazzacavallo);
        immagine2.setImageResource(R.drawable.facciadaculo);
        immagine1.setX(200);
        immagine1.setY(0);
        mainLayout.addView(immagine1);
        immagine1.getLayoutParams().width=200;
        immagine1.getLayoutParams().height=100;
Un po' di ripasso mi fa bene: ho individuato di nuovo gli attributi che si possono attribuire a un'immagine prima del caricamento sul Layout e quelli che invece funzionano soltanto dopo questo caricamento.
La posizione, impostata con setX e setY, può essere stabilita anche quando l'oggetto non è stato caricato nel layout, mentre le dimensioni possono essere impostate soltanto successivamente.

Ora vediamo come fare se invece di un ImageView pongo una semplice View.

Ecco:
        View view=new View(this);
        mainLayout.addView(view);
        view.setBackgroundColor(Color.GREEN);
        view.getLayoutParams().height=100;
        view.getLayoutParams().width=100;
E ottengo un quadratino in alto a sinistra.
Provo a impostare anche la posizione...
        View view=new View(this);
        view.setX(100);
        view.setY(200);
        mainLayout.addView(view);
        view.setBackgroundColor(Color.GREEN);
        view.getLayoutParams().height=100;
        view.getLayoutParams().width=100;
E ottengo il quadratino spostato come intendevo io.

Ora provo a sperimentare la ScrollView...

Imposto semplicemente un'altezza esagerata per la mia view, e vedo se la schermata scorre fino a visualizzarla tutta:
        View view=new View(this);
        view.setX(100);
        view.setY(200);
        mainLayout.addView(view);
        view.setBackgroundColor(Color.GREEN);
        view.getLayoutParams().height=2000;
        view.getLayoutParams().width=100;
Riuscito! La schermata scorre come prevedevo!
Prima di vedere come avevo agito in modo da spostare gli oggetti a schermata ferma, vorrei soffermarmi su una proprietà della ScrollView nell'XML.
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:id="@+id/scrollView" >
Che cosa era quel fillViewport?
Provo a eliminarlo.

Ecco, non succede niente se la View è più alta della schermata, ma se invece è più piccola, la ScrollView si riduce a una parte della schermata stessa.
Ripristinando fillViewport, la cosa torna a posto.


Ho avuto qualche problema con la ScrollView che non funzionava perfettamente quando le immagini scavalcavano di poco il margine inferiore.
Ho risolto confrontando con la mia app: anziché setX e setY, in un RelativeLayout, bisogna usare RelativeLayout.LayoutParams, altrimenti ci sono risultati paradossali.
Ecco:
        ImageView view=new ImageView(this);
        RelativeLayout.LayoutParams params=
                new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
        params.width=300;
        params.height=300;
        params.leftMargin=0;
        params.topMargin=50;
        view.setLayoutParams(params);
        view.setImageResource(R.drawable.facciadaculo);
        mainLayout.addView(view);
e il problema è risolto.

Nessun commento:

Posta un commento