Programmation : tout dans le main VS Programmation Orientée Objet POO

**SeCoAvecUnSeulCLick** · 10/10/2022, 09h24

Bonjour,

Je voudrais partager avec vous une mini application qui simule un changement de page.
Elle se présente sous forme de 4 onglets, sensés changer de page.

J'ai pour objectif de passer d'une programmation du type "fourS'yTout" (tout dans le MainActivity.java et le activity_main.xml)
à une programmation digne de la POO.

Voici le code

MainActivity.java

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
 
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
 
    ImageView ImageViewTabHome;
    ImageView ImageViewTabEmergency;
    ImageView ImageViewTabProfessional;
    ImageView ImageViewTabPrivate;
 
    LinearLayout LayoutPage;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
        setContentView(R.layout.activity_main);
        /*binding = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());*/
 
        LayoutPage = findViewById(R.id.linearLayoutPageID);
        LayoutPage.setBackgroundColor(ContextCompat.getColor(this, R.color.app_grey));
        ImageViewTabHome = findViewById(R.id.tabHome);
        ImageViewTabEmergency = findViewById(R.id.tabEmergency);
        ImageViewTabProfessional = findViewById(R.id.tabProfessional);
        ImageViewTabPrivate = findViewById(R.id.tabPrivate);
 
        ImageViewTabHome.setOnClickListener(this);
        ImageViewTabEmergency.setOnClickListener(this);
        ImageViewTabProfessional.setOnClickListener(this);
        ImageViewTabPrivate.setOnClickListener(this);
 
    }
 
    @Override
    public void onClick(View v) {
 
        if (v.getId() == R.id.tabHome){
            LayoutPage.setBackgroundColor(ContextCompat.getColor(this, R.color.app_grey));
 
            ImageViewTabHome.setImageResource(R.drawable.app_tab_on);
            ImageViewTabEmergency.setImageResource(R.drawable.app_tab_off);
            ImageViewTabProfessional.setImageResource(R.drawable.app_tab_off);
            ImageViewTabPrivate.setImageResource(R.drawable.app_tab_off);
        }
        else if (v.getId() == R.id.tabEmergency){
            LayoutPage.setBackgroundColor(ContextCompat.getColor(this, R.color.app_red));
 
            ImageViewTabHome.setImageResource(R.drawable.app_tab_off);
            ImageViewTabEmergency.setImageResource(R.drawable.app_tab_on);
            ImageViewTabProfessional.setImageResource(R.drawable.app_tab_off);
            ImageViewTabPrivate.setImageResource(R.drawable.app_tab_off);
        }
        else if (v.getId() == R.id.tabProfessional){
            LayoutPage.setBackgroundColor(ContextCompat.getColor(this, R.color.app_orange));
 
            ImageViewTabHome.setImageResource(R.drawable.app_tab_off);
            ImageViewTabEmergency.setImageResource(R.drawable.app_tab_off);
            ImageViewTabProfessional.setImageResource(R.drawable.app_tab_on);
            ImageViewTabPrivate.setImageResource(R.drawable.app_tab_off);
        }
        else if (v.getId() == R.id.tabPrivate){
            LayoutPage.setBackgroundColor(ContextCompat.getColor(this, R.color.app_blue));
 
            ImageViewTabHome.setImageResource(R.drawable.app_tab_off);
            ImageViewTabEmergency.setImageResource(R.drawable.app_tab_off);
            ImageViewTabProfessional.setImageResource(R.drawable.app_tab_off);
            ImageViewTabPrivate.setImageResource(R.drawable.app_tab_on);
        }
        else{
            throw new IllegalStateException("Unexpected value: " + v.getId());
        }
 
        ImageViewTabHome.setColorFilter((ContextCompat.getColor(this, R.color.app_grey)));
        ImageViewTabEmergency.setColorFilter((ContextCompat.getColor(this, R.color.app_red)));
        ImageViewTabProfessional.setColorFilter((ContextCompat.getColor(this, R.color.app_orange)));
        ImageViewTabPrivate.setColorFilter((ContextCompat.getColor(this, R.color.app_blue)));
 
    }
}

activity_main.xml

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
 
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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=".MainActivity">
 
    <!-- Activity_main -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:baselineAligned="false"
        android:orientation="horizontal">
 
        <!-- pages -->
        <LinearLayout
            android:id="@+id/linearLayoutPageID"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
 
            <TextView
                android:id="@+id/textViewPageID"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/textview" />
 
        </LinearLayout>
 
        <!-- Tabs -->
        <include
            android:id="@+id/tabsID"
            layout="@layout/tabs" />
 
    </LinearLayout>
 
</androidx.constr

tabs.xml

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
 
<?xml version="1.0" encoding="utf-8"?>
 
<!-- Tabs -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
 
    android:layout_width="50dp"
    android:layout_height="match_parent"
    android:background="@color/app_grey_background"
    android:orientation="vertical">
 
    <!-- Tab home -->
    <ImageView
        android:id="@+id/tabHome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/tab_home"
        android:background="@drawable/app_tab_on"
        app:backgroundTint="@color/app_grey"/>
 
    <!-- Tab emergency -->
    <ImageView
        android:id="@+id/tabEmergency"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/tab_emergency"
        android:background="@drawable/app_tab_off"
        app:backgroundTint="@color/app_red"/>
 
    <!-- Tab professional -->
    <ImageView
        android:id="@+id/tabProfessional"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/tab_professional"
        android:background="@drawable/app_tab_off"
        app:backgroundTint="@color/app_orange"/>
 
    <!-- Tab private -->
    <ImageView
        android:id="@+id/tabPrivate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/tab_private"
        android:background="@drawable/app_tab_off"
        app:backgroundTint="@color/app_blue"/>
</LinearLayout>

tab_off

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
<?xml version="1.0" encoding="utf-8"?>
 
<!-- for more result go to drawable at google developer web site ... -->
<!-- https://developer.android.com/guide/topics/resources/drawable-resource ... -->
<!-- Shape drawable -->
 
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="20dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="20dp" />
 
    <size
        android:width="30dp"
        android:height="140dp" />
 
    <solid android:color="@color/app_grey" />
 
</shape>

tab_on

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
<?xml version="1.0" encoding="utf-8"?>
 
<!-- for more result go to drawable at google developer web site ... -->
<!-- https://developer.android.com/guide/topics/resources/drawable-resource ... -->
<!-- Shape drawable -->
 
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="20dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="20dp" />
 
    <size
        android:width="60dp"
        android:height="140dp" />
 
    <solid android:color="@color/app_grey" />
 
</shape>

J'aimerais désormais faire ainsi :

Créer une classe nommée App_Tab, qui gère l'affichage d'un onglet, et informe si il est touché.
Créer un fragment Tabs, qui affiche et gère 4 instances de la classe App_Tab.
Créer 4 fragments correspondant à chacune des pages : FragmentHome, FragmentEmergency, FragmentProfessional, et FragmentPrivate.
Créer un fragment général qui englobe le FragmentTabs et une zone de navigation dédié à l'affichages d'un Fragment xpages.
Le tout, je l'appel depuis le MainActivity qui reste ainsi casiment vierge.

On imagine que les pages Fragment vont se présenter à l'avenir de la même façon, l'étape suivante serait de créer un fragment type puis de l'instancier 4 fois. La notion d'héritage serait alors à envisager. Bien pour l'exemple. Cependant, je penses qu'il y a un fort risque d'entremelage. Aussi je songe à avoir belle et bien 4 pages codées en dure pour faciliter leurs divergeances.

Es une bonne structure à suivre ?
Quelques points à revoir ?
Comment parvenir à mettre ça en oeuvre ?

Cordialement

**Turvy** · 23/10/2022, 18h05

Bonjour,

De mon point de vue, ca a l'air de faire doublon entre le fragment général et le FragmentTabs puis que ce dernier ne gère que le clic sur une tab et l'affichage du fragment associé. Personnellement, je me passerai même du fragment, et gérerai tout ca dans l'activité principale qui serait ton "Tab manager" + le container des fragments de chaque page.

Selon la complexité des fragments, soit t'en fais un générique, soit plusieurs mais accompagné d'un fragment mère comprenant les méthodes communes. Je favorise souvent la 2nde solution car elle plus facile à comprendre quand tu partages du code ou quand tu reprends ton projet après qq mois. Car en nommant le fragment par sa fonction, tu sais tout de suite à quoi tu as affaire. Avec un fragment générique, t'es saturé de switch case ou if else.

**SeCoAvecUnSeulCLick** · 02/11/2022, 11h14

Bonjour et merci,

j'opte alors pour le second choix, soit un fragment mère en fond et équipé des bouttons "onglets", et des fragments secondaires, disposants de leurs propres contenues affiché en fonction de l'onglet active.

L'inconvénient c'est que je ne sais faire que du code fourS'yTout. Je n'arrive pas à programmer en POO, et fragment.

Auriez vous un exemple d'un fragment affichant des sous fragments en fonction d'un appui sur un bouton ou non ?
Quelque chose d'épuré au max et simple à comprendre pour un débutant, ou alors un pas à pas pour y parvenir ?

Cordialement.

**Turvy** · 02/11/2022, 21h08

La base serait déjà de faire des initiations et tuto en programmation, tu seras rapidement limité par ton manque de compétence sinon. Mais déjà, si t'as un projet de départ, c'est une bonne chose. La question à se poser est : "je veux faire ca, comment y arriver". En fouillant beaucoup et galérant encore plus, tu y arriveras.

Apparemment, tu veux un menu latéral personnalisé. Pour ca, je te dirigerais vers le composant Navigation qui réduit le code pour les changements de fragments (https://developer.android.com/guide/...etting-started).

Sinon, il existe déjà des composants Android proche de ce que tu souhaites. La combinaison Viewpager2 et TabLayout pour un menu en haut (https://developer.android.com/guide/...e-view-2?hl=fr), ou la BottomNavigationView pour le menu en bas (https://m2.material.io/components/bo...tom-navigation, https://www.geeksforgeeks.org/bottom...iew-inandroid/, https://www.meghandev.io/post/androi...ample-tutorial).

**SeCoAvecUnSeulCLick** · 03/11/2022, 10h42

Salut,

Des tutos Android studio :
sous java (empty activity),
sous kotlin (empty compose activity).

Je les manges et remanges, sur OC, sur développer, et ailleurs. Rien n'y fait, je m'acharne pourtant, plus de 7h/jours depuis avril 2022.

(potentiel de reconversion pro : automatisme intermédiaire -> informatique)

Je ne suis pas limité, que en compétences visiblement ^^ :
anglais, logique, intellect, capacité d'apprentissage
(très lent: du type jusqu'au boutisme incompatible avec toute forme de formation) ...

Je vais aller casser du caillou à la masse dans un goulags. Je reviens quand je suis plus que déterminé ->

Amicalement.

Programmation : tout dans le main VS Programmation Orientée Objet POO

Android

Vue hybride

Discussions similaires

Partager

Partager