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

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

Android

Mode arborescent

Discussions similaires

Partager

Partager