Exemples de fragments - Implémentation de la barre de navigation inférieure (méthode 3)
Introduction à cette section
Nous vous avons déjà expliqué deux options pour implémenter la barre de navigation inférieure, mais ces deux options ne conviennent qu'aux situations ordinaires. C'est comme Sina Weibo. Je veux mettre un point rouge sur l'élément dans la barre de navigation inférieure, puis ajouter un numéro de message comme celui-ci, Les deux premières options sont inutiles. Voyons comment les applications d'autres personnes le font. Ouvrez les options de développement sur votre téléphone, cochez la case : Afficher les limites de mise en page, puis ouvrez l'application à laquelle nous faisons référence. to. , vous pouvez voir que la barre de navigation inférieure ressemble à ceci :
D'après l'image ci-dessus, nous pouvons voir que cette barre de navigation inférieure n'est pas composée d'un simple TextView. ou RadioGroup. Le plan de mise en page approximatif peut être : un LinearLayout dans la couche externe, un RelativeLayout au milieu et un TextView au milieu. Ensuite, il y a un TextView avec un fond de cercle rouge ou un point rouge dans le coin supérieur droit du TextView ; C'est à peu près tout, et ces petits points doivent être invisibles en temps normal. Lorsque vous recevez des informations push, il y aura des informations de catégorie pertinentes. Il sera à nouveau visible le moment venu, et le numéro d'information correspondant s'affichera ! Prenons donc conscience de l'effet de cette barre de navigation inférieure. De plus, pour faciliter la démonstration, l'effet de commutation de Fragment ne sera pas démontré ici ! De plus, consultez Fragment pour obtenir l'activité Points de connaissance sur les composants de !
1. Rendus d'implémentation :
Pour faciliter la compréhension, nous simulons ici la réception d'informations push en cliquant sur un bouton, puis affichons un point rouge !
Rendu des opérations :
2. Processus de mise en œuvre :
D'accord, alors nous obtiendrons l'effet ci-dessus~
Étape 1 : Préparation des fichiers de ressources associés :
Comme auparavant, préparez les ressources de la série dessinable :
Ressources 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>
Ressources d'icônes : tab_menu_better.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@mipmap/tab_better_pressed" android:state_selected="true" /> <item android:drawable="@mipmap/tab_better_normal" /> </selector>
Suivez le même exemple et retirez les trois autres ~ !
Étape 2 : Écrivez le code de mise en page de l'activité :
Parce que le TextView des quatre options et les attributs du numéro de point rouge dans le coin supérieur droit sont similaires, comme suit :
<TextView android:id="@+id/tab_menu_channel" android:layout_marginTop="5dp" android:layout_width="wrap_content" android:layout_height="48dp" android:layout_centerInParent="true" android:textColor="@drawable/tab_menu_text" android:drawableTop="@drawable/tab_menu_channel" android:text="@string/tab_menu_alert"/> <TextView android:layout_width="20dp" android:layout_height="20dp" android:background="../style/images/bg_num" android:layout_toRightOf="@+id/tab_menu_channel" android:layout_marginLeft="-10dp" android:text="99+" android:textSize="12sp" android:gravity="center" android:textColor="@color/text_white"/>
Nous les extrayons et les écrivons dans style.xml :
<style name="tab_menu_text"> <item name="android:layout_marginTop">5dp</item> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">48dp</item> <item name="android:layout_centerInParent">true</item> <item name="android:textColor">@drawable/tab_menu_text</item> </style> <style name="tab_menu_bgnum"> <item name="android:layout_width">20dp</item> <item name="android:layout_height">20dp</item> <item name="android:background">@mipmap/bg_num</item> <item name="android:layout_marginLeft">-10dp</item> <item name="android:textSize">12sp</item> <item name="android:gravity">center</item> <item name="android:textColor">@color/text_white</item> </style>
Ensuite, commençons à écrire notre mise en page Activity.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:text="信息" android:textColor="@color/text_topbar" android:textSize="18sp" /> <View android:layout_width="match_parent" android:layout_height="2px" android:layout_alignParentBottom="true" android:background="../style/images/div_white" /> </RelativeLayout> <LinearLayout android:id="@+id/ly_tab_menu" android:layout_width="match_parent" android:layout_height="56dp" android:layout_alignParentBottom="true" android:background="../style/images/bg_white" android:orientation="horizontal"> <LinearLayout android:id="@+id/ly_tab_menu_channel" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:padding="5dp"> <TextView android:id="@+id/tab_menu_channel" style="@style/tab_menu_text" android:drawableTop="@drawable/tab_menu_channel" android:text="@string/tab_menu_alert" /> <TextView android:id="@+id/tab_menu_channel_num" style="@style/tab_menu_bgnum" android:layout_toRightOf="@+id/tab_menu_channel" android:text="99+" android:visibility="gone" /> </RelativeLayout> </LinearLayout> <LinearLayout android:id="@+id/ly_tab_menu_message" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:padding="5dp"> <TextView android:id="@+id/tab_menu_message" style="@style/tab_menu_text" android:drawableTop="@drawable/tab_menu_message" android:text="@string/tab_menu_profile" /> <TextView android:id="@+id/tab_menu_message_num" style="@style/tab_menu_bgnum" android:layout_toRightOf="@+id/tab_menu_message" android:text="99+" android:visibility="gone" /> </RelativeLayout> </LinearLayout> <LinearLayout android:id="@+id/ly_tab_menu_better" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:padding="5dp"> <TextView android:id="@+id/tab_menu_better" style="@style/tab_menu_text" android:drawableTop="@drawable/tab_menu_better" android:text="@string/tab_menu_pay" /> <TextView android:id="@+id/tab_menu_better_num" style="@style/tab_menu_bgnum" android:layout_toRightOf="@+id/tab_menu_better" android:text="99+" android:visibility="gone" /> </RelativeLayout> </LinearLayout> <LinearLayout android:id="@+id/ly_tab_menu_setting" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:padding="5dp"> <TextView android:id="@+id/tab_menu_setting" style="@style/tab_menu_text" android:drawableTop="@drawable/tab_menu_setting" android:text="@string/tab_menu_alert" /> <ImageView android:id="@+id/tab_menu_setting_partner" android:layout_width="12dp" android:layout_height="12dp" android:layout_marginLeft="-5dp" android:layout_toRightOf="@id/tab_menu_setting" android:visibility="gone" android:src="@mipmap/partner_red" /> </RelativeLayout> </LinearLayout> </LinearLayout> <View android:id="@+id/div_tab_bar" android:layout_width="match_parent" android:layout_height="2px" android:layout_above="@id/ly_tab_menu" android:background="../style/images/div_white" /> <FrameLayout android:id="@+id/ly_content" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@id/div_tab_bar" android:layout_below="@id/ly_top_bar"/> </RelativeLayout>
Étape 3 : Écrire la mise en page de l'interface du fragment et class
La disposition des fragments se compose de quatre boutons ordinaires :
fg_my.xml:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="5dp"> <Button android:id="@+id/btn_one" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="第一个显示信息"/> <Button android:id="@+id/btn_two" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="第二个显示信息"/> <Button android:id="@+id/btn_three" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="第三个显示信息"/> <Button android:id="@+id/btn_four" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="第四个显示信息"/> </LinearLayout>
Ensuite, il y a la classe Fragment personnalisée, ici nous passons getActivity .findViewById() pour obtenir l'activité Le petit point rouge n’est qu’un simple écran de contrôle ! MyFragment.java:
public class MyFragment extends Fragment implements View.OnClickListener{
private Context mContext;
private Button btn_one;
private Button btn_two;
private Button btn_three;
private Button btn_four;
public MyFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fg_my,container,false);
//UI Object
btn_one = (Button) view.findViewById(R.id.btn_one);
btn_two = (Button) view.findViewById(R.id.btn_two);
btn_three = (Button) view.findViewById(R.id.btn_three);
btn_four = (Button) view.findViewById(R.id.btn_four);
//Bind Event
btn_one.setOnClickListener(this);
btn_two.setOnClickListener(this);
btn_three.setOnClickListener(this);
btn_four.setOnClickListener(this);
return view;
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.btn_one:
TextView tab_menu_channel_num = (TextView) getActivity ().findViewById(R.id.tab_menu_channel_num);
tab_menu_channel_num.setText("11");
tab_menu_channel_num.setVisibility(View.VISIBLE);
break;
case R.id.btn_two:
TextView tab_menu_message_num = (TextView) getActivity ().findViewById(R.id.tab_menu_message_num);
tab_menu_message_num.setText("20");
tab_menu_message_num.setVisibility(View.VISIBLE);
break;
case R.id.btn_three:
TextView tab_menu_better_num = (TextView) getActivity ().findViewById(R.id.tab_menu_better_num);
tab_menu_better_num.setText("99+");
tab_menu_better_num.setVisibility(View.VISIBLE);
break;
case R.id.btn_four:
ImageView tab_menu_setting_partner = (ImageView) getActivity ().findViewById(R.id.tab_menu_setting_partner);
tab_menu_setting_partner.setVisibility(View.VISIBLE);
break;
}
}
}Étape 4 : Écrire MainActivity
Nous terminons ici l'implémentation de la logique principale, certaines parties sont les mêmes que l'implémentation TextView précédente de la barre de navigation inférieure L'effet est similaire, Je ne vais pas l'expliquer en détail, le code est le suivant :
MainActivity.java：
/**
* Created by Coder-pig on 2015/8/30 0030.
*/
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
//Activity UI Object
private LinearLayout ly_tab_menu_channel;
private TextView tab_menu_channel;
private TextView tab_menu_channel_num;
private LinearLayout ly_tab_menu_message;
private TextView tab_menu_message;
private TextView tab_menu_message_num;
private LinearLayout ly_tab_menu_better;
private TextView tab_menu_better;
private TextView tab_menu_better_num;
private LinearLayout ly_tab_menu_setting;
private TextView tab_menu_setting;
private ImageView tab_menu_setting_partner;
private FragmentManager fManager;
private FragmentTransaction fTransaction;
private MyFragment fg1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
bindViews();
ly_tab_menu_channel.performClick();
fg1 = new MyFragment();
fManager = getFragmentManager();
fTransaction = fManager.beginTransaction();
fTransaction.add(R.id.ly_content, fg1).commit();
}
private void bindViews() {
ly_tab_menu_channel = (LinearLayout) findViewById(R.id.ly_tab_menu_channel);
tab_menu_channel = (TextView) findViewById(R.id.tab_menu_channel);
tab_menu_channel_num = (TextView) findViewById(R.id.tab_menu_channel_num);
ly_tab_menu_message = (LinearLayout) findViewById(R.id.ly_tab_menu_message);
tab_menu_message = (TextView) findViewById(R.id.tab_menu_message);
tab_menu_message_num = (TextView) findViewById(R.id.tab_menu_message_num);
ly_tab_menu_better = (LinearLayout) findViewById(R.id.ly_tab_menu_better);
tab_menu_better = (TextView) findViewById(R.id.tab_menu_better);
tab_menu_better_num = (TextView) findViewById(R.id.tab_menu_better_num);
ly_tab_menu_setting = (LinearLayout) findViewById(R.id.ly_tab_menu_setting);
tab_menu_setting = (TextView) findViewById(R.id.tab_menu_setting);
tab_menu_setting_partner = (ImageView) findViewById(R.id.tab_menu_setting_partner);
ly_tab_menu_channel.setOnClickListener(this);
ly_tab_menu_message.setOnClickListener(this);
ly_tab_menu_better.setOnClickListener(this);
ly_tab_menu_setting.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.ly_tab_menu_channel:
setSelected();
tab_menu_channel.setSelected(true);
tab_menu_channel_num.setVisibility(View.INVISIBLE);
break;
case R.id.ly_tab_menu_message:
setSelected();
tab_menu_message.setSelected(true);
tab_menu_message_num.setVisibility(View.INVISIBLE);
break;
case R.id.ly_tab_menu_better:
setSelected();
tab_menu_better.setSelected(true);
tab_menu_better_num.setVisibility(View.INVISIBLE);
break;
case R.id.ly_tab_menu_setting:
setSelected();
tab_menu_setting.setSelected(true);
tab_menu_setting_partner.setVisibility(View.INVISIBLE);
break;
}
}
//重置所有文本的选中状态
private void setSelected() {
tab_menu_channel.setSelected(false);
tab_menu_message.setSelected(false);
tab_menu_better.setSelected(false);
tab_menu_setting.setSelected(false);
}
}D'accord, maintenant vous avez terminé ~
Téléchargement du code :
FragmentDemo3.zip：Téléchargement FragmentDemo3.zip
4.Résumé de cette section :
D'accord, par rapport à cette section Le les deux premières sections sont un peu plus compliquées, mais restent relativement faciles à comprendre ! De plus, il existe un nombre limité d’exemples d’implémentation pour implémenter une barre de navigation inférieure commune. Commençons par la section suivante. Sur cette base, un exemple de changement de page en fonction d'opérations gestuelles, enfin c'est tout, merci~
