Exemples de fragments - Implémentation de la barre de navigation inférieure (méthode 1)


Introduction à cette section :

Dans la section précédente, nous avons eu une compréhension préliminaire de Fragment et avons appris les concepts, le cycle de vie, la gestion des fragments et Transactions de fragments et chargement dynamique et statique de fragments. À partir de cette section, nous expliquerons le développement réel de certains Fragments. Quelques exemples de ! Cette section vous expliquera l'implémentation de la barre de navigation inférieure ! Il existe de nombreuses méthodes de base de la barre de navigation inférieure. Par exemple, utilisez TextView entièrement, ou utilisez RadioButton, ou utilisez TabLayout + RadioButton, ce qui est bien sûr compliqué. Dans ce cas, vous devez toujours utiliser la méthode de disposition des couches externes ! Dans cette section, nous utilisons TextView pour créer un effet de barre de navigation inférieure, qui nous est également familier. Ensuite, utilisez Fragment ! Bon, commençons cette section !

1. Les rendus à réaliser et la structure des répertoires du projet :

Regardons d'abord les rendus :

1.gif

Jetez ensuite un œil à la structure des répertoires de notre projet :

2.png

2. Processus de mise en œuvre :

Étape 1 : Notez quelques fichiers de ressources pour les options du bas

Nous pouvons voir sur l'image que lorsque nous cliquons sur chacun élément en bas Il y a différents effets, non ? On juge selon s'il est sélectionné ! Les fichiers ressources que nous voulons écrire sont : d’abord l’image, puis le texte, puis l’arrière-plan !

Ressource image dessinable : tab_menu_channel.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/tab_channel_pressed" android:state_selected=" true" />
<item android:drawable="@mipmap/tab_channel_normal" />
</selector>

Les trois autres emboîtent le pas !

Ressource texte : tab_menu_text.xml

<?xml version="1.0" encoding="utf-8"?>
< ;selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/text_yellow" android:state_selected="true" /> ;
<item android:color="@color/text_gray" />
</selector>

背景资源：tab_menu_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns :android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <shape>
            <solide android:color="#FFC4C4C4" />
        </shape>
    </item>
    <item>
        <shape>
             <Android solide :couleur ="@color/transparent" />
        </shape>
    </item>
</selector>

Étape 2 : Rédigez notre mise en page d'activité

activity_main.xml :

<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=".MainActivity">

    <RelativeLayout
        android:id=" @+id/ly_top_bar"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="../style/images/bg_topbar">

        <TextView
            android:id="@+id/txt_topbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:textSize="18sp"
            android:textColor="@color/text_topbar"
            android:text="信息"/>
        <Afficher
            android:layout_width="match_parent"
             android:layout_height="2px"
            android:background="../style/images/div_white"
            android:layout_al ignParentBottom="true"/>
    </RelativeLayout>
    <LinearLayout
        android:id="@+id/ly_tab_bar"
        android:layout_width="match_parent"
        android:layout_height ="56dp"
        android:layout_alignParentBottom="true"
        android:background="../style/images/bg_white"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/txt_channel"
             android :drawablePadding="3dp"
            android:drawableTop="@drawable/tab_menu_channel"
            android:gravity="center"
            android:padding="5dp"
            android:text=" @string/ tab_menu_alert"
            android:textColor="@drawable/tab_menu_text"
            android:textSize="16sp" />

        <TextView
            android : id="@+id/txt_message "
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="../style/images /tab_menu_bg"
            android:drawablePadding="3dp"
            android:drawableTop="@drawable/tab_menu_message"
            android:gravity="center"
            android:padding="5dp"
            android:text="@string/tab_menu_profile"
            android:textColor="@drawable/tab_menu_text"
            android:textSize="16sp" />

        <TextView
             androïde : id="@+id/txt_better"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:arrière-plan="../ style/images/tab_menu_bg"
            android:drawablePadding="3dp"
            android:drawableTop="@drawable/tab_menu_better"
            android:gravity="center"
            et roid:padding="5dp"
            android:text="@string/tab_menu_pay"
             android:textColor="@drawable/tab_menu_text"
            android:textSize="16sp" />

        < TextView
and roid:background=". ./style/images/tab_menu_bg"
            android:drawablePadding="3dp"
            android:drawableTop="@drawable/tab_menu_setting"
            android:gravity="center"
            android:padding="5dp"
            android:text="@string/tab_menu_setting"
            android:textColor="@drawable/tab_menu_text"
            android:textSize="16sp"/>

    </LinearLayout>

    <View
        android:id="@+id/div_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="2 px"
        android:background="../style/images/div_white"
        android:layout_above="@id/ly_tab_bar"/>


    <FrameLayout
        android : layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/ly_top_bar"
        android:layout_above="@id/div_tab_bar"
        android:id="@ +id/ly_content">

    </FrameLayout>

</RelativeLayout>

Analyse du code :

Définissez d'abord le style de la barre de titre supérieure, ajoutez un TextView au milieu du LinearLayout 48dp comme titre !
Définissez ensuite un LinerLayout d'une taille de 56dp et ajoutez-y quatre TextViews avec un rapport de 1:1:1:1. Et définissez les attributs pertinents, puis ajoutez un segment de ligne à ce LinearLayout !
Enfin, utilisez la barre de titre et la barre de navigation inférieure comme limites, écrivez un FrameLayout, une largeur et une hauteur match_parent, utilisées comme conteneur pour Fragment !

PS : Les quatre propriétés TextView ici sont répétées. Vous pouvez également les extraire vous-même, écrire un style et le définir ~

Étape. 3 : Masquer la barre de navigation supérieure

J'ai accidentellement découvert qu'appeler requestWindowFeature(Window.FEATURE_NO_TITLE) dans Activité peut masquer le téléphone Il est livré avec une barre de navigation supérieure, mais lors de l'écriture de la démo, j'ai constaté qu'une erreur serait signalée, même si cette phrase était écrite avant setContentView() ! peut-être parce que Ce qui est hérité est AppCompatActivity au lieu de la classe Activity !
Bien sûr, le précédent getSupportActionbar().hide() masque l'Actionbar, mais elle sera toujours sur l'interface ! Enfin, il existe une autre façon d'écrire un style vous-même, puis de définir le thème de l'application dans AndroidManifest.xml :

Remarque : Put requestWindowFeature(Window.FEATURE_NO_TITLE); .onCreate(savedInstanceState); Vous pouvez masquer l'ActionBar sans signaler d'erreur.

Ensuite AndroidManifest.xml et définissez l'attribut du thème :

android:theme="@style/Theme.AppCompat.NoActionBar"

PS : Le "code de conscience" ci-dessus est sponsorisé par le bon programmeur Cao Shen~

Étape 4 : Créez une mise en page simple et une classe de Fragment :

fg_content.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android =" http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android : background= "../style/images/bg_white"> layout_height="match_parent"
android:gravity="center"
android:text="Hehe"
android:textColor="@color/text_white "
android:textSize="20sp"/> ;

</LinearLayout>



MyFragment.java :

/** * Créé par Coder-pig le 2015/8/28 0028. */

public class MyFragment étend Fragment {
contenu de chaîne privé ;
public MyFragment (contenu de chaîne) {
this.content = content;<
TextView txt_content = (TextView) view.findViewById(R .id.txt_content);
txt_content.setText(content);
return view;
}
}

Analyse du code :

réécrit simplement une méthode onCreateView(), d'autres méthodes peuvent être réécrites si nécessaire !

Étape 5 : Lors de l'écriture de MainActivity. java

parlons d'abord de quelques problèmes clés que nous devons prendre en compte :

  • Quand le fragment est-il initialisé et ajouté au conteneur ? Quand se cacher et montrer ?
  • Comment sélectionner TextView ? Quelles opérations faut-il effectuer après avoir sélectionné un TextView ?
  • Comment créer un TextView dans l'état Selected après avoir simplement entré MainActivity ?

Eh bien, répondons aux questions ci-dessus une par une :

  • Après avoir sélectionné TextView, nous vérifierons le fragment correspondant si c'est le cas. est vide, initialisé et ajouté au conteneur ; Pour hide, nous définissons une méthode pour masquer tous les fragments. Cette méthode hideAll est appelée en premier à chaque fois qu'un événement de clic est déclenché. Tous les fragments sont masqués, puis si le fragment correspondant au TextView n'est pas vide, nous afficherons le fragment
  • Nous implémentons cela via l'événement click. Après avoir cliqué sur TextView, réinitialisez d'abord le statut sélectionné de tous. TextViews sur false, puis définissez le clic L'état sélectionné de TextView est vrai ;
  • C'est plus simple. Nous définissons la sélection via l'événement click, donc ajoutons un déclencheur à l'événement click dans la méthode onCreate(). La méthode suffit~ txt_channel.performClick();

Maintenant que je comprends la logique, je peux accéder directement au code :

MainActivity.java :

/**
 * Créé par Coder-pig le 2015/8/28 0028.
 */
public class MainActivity étend AppCompatActivity implémente View.OnClickListener{

    //UI Object
    private TextView txt_topbar;
    private TextView txt_channel ;
    private TextView txt_message;
    private TextView txt_better;
    private TextView txt_setting;
    private FrameLayout ly_content;

    //Fragment Object
    privé MyFragment fg1, fg2, fg3, fg4;
    private FragmentManager fManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        fManager = getFragmentManager();
        bindViews();
        txt_channel.performClick();   //模拟一次点击，既进去后选择第一项
    }

    //U I组件初始化与事件绑定
    private void bindView s() {
        txt_topbar = (TextView) findViewById (R.id.txt_topbar);
        txt_channel = (TextView) findViewById(R.id.txt_channel);
        txt_message = (TextView) findViewById(R.id.txt_message);
         txt_better = (TextView) findViewById(R.id.txt_better);
        txt_setting = (TextView) findViewById(R.id.txt_setting);
        ly_content = (FrameLayout) findViewById(R.id.ly_content);

        txt _canal .setOnClickListener(this);
        txt_message.setOnClickListener(this);
        txt_better.setOnClickListener(this);
        txt_setting.setOnClickListener(this);
    }

    //重置所有文本的选中状态
    private void setSelected(){
        txt_channel.setSelected(false);
        txt_message.setSelected(false);
        txt_better.setSelected(false);
        txt_setting.setSelected(false);
    }

    //隐藏所有Fragment
    private void hideAllFragment(FragmentTransaction fragmentTransaction){
        if(fg1 != null)fragmentTransaction.hide(fg1) ;
        if(fg2 != null)fragmentTransaction.hide(fg2);
        if(fg3 != null)fragmentTransaction.hide(fg3);
        if(fg4 != null)fragmentTransaction.hide(fg4) );
    }

    @Override
    public void onClick(View v) {
        FragmentTransaction fTransaction = fManager.beginTransaction();
        hideAllFragment(fTransaction);
        commutateur ( v.getId()){
            case R.id.txt_channel:
                setSelected();
               txt_channel.setSelected(true);
                if( fg1 == null){
                    fg1 = new MyFragment("第一个Fragment");
                   fTransaction.add(R.id.ly_content,fg1);
                }else{
                    fTransaction .show(fg1);
                }
pause ;
            case R.id.txt_message :
                setSelected();
                txt_message.setSelected(true);
                if(fg2 == null){
                     fg2 = new MyFragment("第二个Fragment");
                    fTransaction.add(R. id.ly_content,fg2);
                }else{
                   fTransaction.show(fg2);
                 }
                 break;
            case R.id.txt_better:
                setSelected();
                txt_better.setSelected(true);
                if(fg3 == null){
                    fg3 = new MyFragment("第三个Fragment ");
                    fTransaction.add(R.id.ly_content,fg3 );
                }else{
                    fTransaction.show(fg3);
               >
                break;
            case R.id.txt_setting:
                setSelected();
                txt_setting.setSelected (vrai);
                if(fg4 == null){
fg4 = new MyFragment("Quatrième fragment");
fTransaction.add(R.id.ly_content,fg4);
else{
fTransaction .show(fg4);
                  }
                                                                                                RagmentDemo .zip
：
FragmentDemo.zip Télécharger

Avertissement
 : Le matériel d'image provient de l'application :
meilleur

Ce code est uniquement destiné à une démonstration et non à un usage commercial. !

4. Résumé de cette sectionCette section explique comment utiliser un LinarLayout + quatre TextViews pour implémenter une barre de navigation inférieure et La logique de Fragment add, hide et show~ est assez simple. Enfin, je voudrais remercier la base secrète du Dieu de Piggy, Dieu B. Il y a aussi quelques conseils qui m'ont été donnés par le bon programmeur Cao Shen ! Merci beaucoup. Cet article est juste pour commémorer le retour de Xiaozhu dans le monde des faux-semblants. Revenons à la couche application, hé, c'est tout pour cette section, merci~

←
→