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

Introduction à cette section :

Dans la section précédente, nous avons utilisé LinearLayout + TextView pour obtenir l'effet de la barre de navigation inférieure. Nous devons la réinitialiser à chaque fois que nous cliquons. L'état de tous les TextViews, puis la sélection du TextView cliqué est un peu gênant, n'est-ce pas ? Ensuite, nous utilisons une autre méthode : RadioGroup + RadioButton pour obtenir l'effet de notre section précédente !

1. Quelques pensées aléatoires

Cette section utilise RadioButton pour obtenir l'effet de sélection radio Si vous ne le connaissez pas ou ne l'avez pas utilisé auparavant, vous pouvez. déplacez-le d'abord vers : RadioButtonPour faire simple, nous avons un RadioGroup enveloppant quatre RadioButtons, divisés par le même rapport qu'avant : 1:1:1:1
De plus, nous seulement ; besoin de réécrire le RadioGroup OnCheckedChange, jugez le checkid pour savoir sur quel RadioButton a été cliqué ! Bon, commençons à empiler !

2. Processus de mise en œuvre

PS : Les matériaux ici sont directement utilisés à partir des matériaux de la section précédente ! De plus, les ressources de la classe dessinable sont toutes sélectionnées Le statut passe à vérifié !

Étape 1 : Écrivez des fichiers de ressources pour les options du bas

Ressource image dessinable : tab_menu_channel.xml

< ? xml version="1.0" encoding="utf-8"?>
<sélecteur xmlns:android="http://schemas.android.com/apk/res/android">
< ; item android:drawable="@mipmap/tab_channel_pressed" android:state_checked="true" />
>

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">

背景资源：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 : Écrivez notre mise en page d'activité

Lorsque nous avons utilisé TextView pour implémenter la barre de navigation inférieure, nous avons découvert un problème. Les propriétés de chaque TextView sont presque les mêmes. , et dans les suggestions, nous avons également demandé à tout le monde d'extraire les mêmes attributs et de les écrire dans Style. Peut-être que certains amis sont paresseux ou ne savent pas. Comment l'extraire et l'utiliser, voici une démonstration pour vous :

Nous supprimons d'abord l'une des balises RadioGroup :

我们可以把每个RadioButton都相同的属性抽取出来，写到style.xml文件中：

Ensuite, le RadioButton dans notre Activity_main.xml n'a pas besoin d'écrire le même code à chaque fois. Créez simplement le style="@style/tab_menu_item" de RadioButton et c'est tout !

activity_main.xml :

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

AndroidManifest.xml définit l'attribut de thème

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

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

Copiez directement la mise en page et le Fragment de la section précédente :

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">

<TextView
android:id="@+id/txt_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Hey"
>

MyFragment.java :

/**
* Créé par Coder-pig le 2015/8/29 0028.
*/
classe publique MyFragment étend Fragment {

    contenu de chaîne privée ;
    public MyFragment(String content) {
        this.content = content;
    }

    @Override
    public View onCreateView (LayoutInflater inflater, View Group container, Bundle savedIn positionState) {
View view = inflater.inflate(R.layout.fg_content,container,false);
        TextView txt_content = (TextView) view.findViewById(R.id.txt_content);
        txt_content.setText(content);
        retourner la vue ;
    }
}

Étape 5 : Écrivez MainActivity.java

C'est beaucoup plus simple que l'implémentation de TextView, donc je ne l'expliquerai pas en détail. C'est très simple, allez simplement au code :

MainActivity.java

/**
* Créé par Coder-pig le 2015/8/29 0028.
*/
public class MainActivity étend AppCompatActivity implémente RadioGroup.OnCheckedChangeListener{

    private RadioGroup rg_tab_bar;
    private RadioButton rb_channel;

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

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate( saveInstanceState);
        setContentView(R.layout.activity_main);
        fManager = getFragmentManager();
        rg_tab_bar = (RadioGroup) findViewById(R.id.rg_tab_bar);
        rg _tab_bar.setOnCheckedChangeListener(this) ;
// 获取第一个单选按钮，并设置其为选中状态状态
rb_channel = (radiobutton) findViewByid (r.id.rb_channel);
rb_channel.Setched (true);
}

    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        FragmentTransaction fTransaction = fManager.beginTransaction();
        hideAllFragment(fTransaction);
        changer (checkedId){
            case R.id.rb_channel:
                if(fg1 == null){
                    fg1 = new MyFragment("第一个Frag ment");
                    fTransaction.add(R. id.ly_content,fg1);
                }else{
                   fTransaction.show(fg1);
                }
                break;
            case R.id.rb_message:
                if(fg2 == null){
                     fg2 = new MyFragment("第二个Fragment");
                    fTransaction.add( R.id.ly_content,fg2);
                }else{
                   fTransaction.show(fg2);
                }
                break;
            case R.id.rb_better:
                if(fg3 == null){
                    fg3 = new MyFragment("第三个Fragment");
                   fTransaction.add(R.id.ly_content,fg3);
                }autre{
                    fTransaction.show( fg3);
                }
                break;
            case R.id.rb_setting:
                if(fg4 == null){
                    fg4 = new MyFragment("第四个Fragment");
                    fTransaction.add(R.id.ly_content,fg4);
                }else{
fTransaction.show(fg4);
                                                                                                                              //Masquer tous les fragments
private void hideAllFragment (FragmentTransaction fragmentTransaction){
if(fg1 != null)fragmentTransaction.hide(fg1);
if(fg2 ! = null)fragmentTransaction.hide(fg2);
if(fg3 != null)frag mentTransaction .hide(fg3);
if(fg4 != null) fragmentTransaction.hide(fg4);
}

}

PS :
J'ai oublié de mentionner quelque chose dans la section précédente. FragmentTransaction ne peut être utilisé qu'une seule fois, et FragmentManager doit être appelé à chaque fois qu'il est utilisé. . La méthode BeginTransaction() obtient l'objet de transaction FragmentTransaction !

3. Opération de rendu

En fait, l'effet obtenu dans la section précédente est le même :

4. Téléchargement du code :

FragmentDemo2.zip

Téléchargement FragmentDemo2.zip

5. Résumé de cette section : Cette section explique la deuxième méthode d'implémentation de la barre de navigation inférieure : RadioGroup + RadioButton Avec la sélection radio, nous. Il n'est pas nécessaire de réinitialiser l'état sélectionné de tous les TextViews après chaque clic, comme TextView, puis de laisser le TextView cliqué Selected est vrai, vous pouvez donc écrire moins de code~C'est tout pour cette section~Merci

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

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

soumettre