Fragment实现底部导航栏

程序员文章站 2022-06-19 10:48:59

一.实现的效果图以及工程目录结构: 二.部分代码展示： 1.主要代码： 1 package com.example.mywechat; 2 import android.app.Fragment; 3 import android.annotation.SuppressLint; 4 import ......

一.实现的效果图以及工程目录结构:

二.部分代码展示：

1.主要代码：

  1 package com.example.mywechat;
  2 import android.app.fragment;
  3 import android.annotation.suppresslint;
  4 import android.app.activity;
  5 import android.app.fragmentmanager;
  6 import android.app.fragmenttransaction;
  7 import android.os.bundle;
  8 import android.util.log;
  9 import android.view.view;
 10 import android.view.window;
 11 import android.widget.imagebutton;
 12 import android.widget.linearlayout;
 13 
 14 @suppresslint("restrictedapi")
 15 public class mainactivity extends activity implements view.onclicklistener {
 16     private linearlayout mtabweixin;
 17     private linearlayout mtabfrd;
 18     private linearlayout mtabaddress;
 19     private linearlayout mtabsettings;
 20 
 21     private imagebutton mimgweixin;
 22     private imagebutton mimgfrd;
 23     private imagebutton mimgaddress;
 24     private imagebutton mimgsettings;
 25 
 26     private fragment mtab01 = new weixinfragment();
 27     private fragment mtab02 = new frgfragment();
 28     private fragment mtab03 = new contactfragment();
 29     private fragment mtab04 = new settingfragment();
 30 
 31     private fragmentmanager fm;
 32 
 33     @override
 34     protected void oncreate(bundle savedinstancestate) {
 35 
 36         requestwindowfeature(window.feature_no_title);
 37         super.oncreate(savedinstancestate);
 38         setcontentview(r.layout.activity_main);
 39         initview();
 40         initevent();
 41         initfragment();
 42         setselect(0);
 43 
 44     }
 45 
 46     private void initfragment(){
 47         fm = getfragmentmanager();
 48         fragmenttransaction transaction = fm.begintransaction();
 49         transaction.add(r.id.id_content,mtab01);
 50         transaction.add(r.id.id_content,mtab02);
 51         transaction.add(r.id.id_content,mtab03);
 52         transaction.add(r.id.id_content,mtab04);
 53         transaction.commit();
 54     }
 55 
 56     private void initevent(){
 57         mtabweixin.setonclicklistener(this);
 58         mtabfrd.setonclicklistener(this);
 59         mtabaddress.setonclicklistener(this);
 60         mtabsettings.setonclicklistener(this);
 61     }
 62 
 63     private void initview(){
 64         mtabweixin =findviewbyid(r.id.id_tab_weixin);
 65         mtabfrd = findviewbyid(r.id.id_tab_frd);
 66         mtabaddress = findviewbyid(r.id.id_tab_contact);
 67         mtabsettings = findviewbyid(r.id.id_tab_settings);
 68 
 69         mimgweixin = findviewbyid(r.id.id_tab_weixin_img);
 70         mimgfrd = findviewbyid(r.id.id_tab_frd_img);
 71         mimgaddress = findviewbyid(r.id.id_tab_contact_img);
 72         mimgsettings = findviewbyid(r.id.id_tab_settings_img);
 73 
 74     }
 75 
 76     private void setselect(int i){
 77         fragmenttransaction transaction = fm.begintransaction();
 78         hidefragment(transaction);
 79         switch (i){
 80             case 0:
 81                 log.d("setselect","1");
 82                 transaction.show(mtab01);
 83                 mimgweixin.setimageresource(r.drawable.tab_weixin_pressed);
 84                 break;
 85             case 1:
 86                 log.d("setselect","2");
 87                 transaction.show(mtab02);
 88                 mimgfrd.setimageresource(r.drawable.tab_find_frd_pressed);
 89                 break;
 90             case 2:
 91                 log.d("setselect: ","3" );
 92                 transaction.show(mtab03);
 93                 mimgaddress.setimageresource(r.drawable.tab_address_pressed);
 94                 break;
 95             case 3:
 96                 log.d("setselect: ", "4 ");
 97                 transaction.show(mtab04);
 98                 mimgsettings.setimageresource(r.drawable.tab_settings_pressed);
 99                 break;
100             default:
101                 break;
102 
103             }
104             transaction.commit();
105     }
106 
107     private void hidefragment (fragmenttransaction transaction){
108         transaction.hide(mtab01);
109         transaction.hide(mtab02);
110         transaction.hide(mtab03);
111         transaction.hide(mtab04);
112     }
113 
114     @override
115     public void onclick(view v) {
116         log.d("onclick", "1");
117         resetimgs();
118         switch (v.getid()){
119             case r.id.id_tab_weixin:
120 
121                 setselect(0);
122                 break;
123             case r.id.id_tab_frd:
124 
125                 setselect(1);
126                 break;
127             case r.id.id_tab_contact:
128 
129                 setselect(2);
130                 break;
131             case r.id.id_tab_settings:
132 
133                 setselect(3);
134                 break;
135             default:
136                 break;
137         }
138     }
139     //切换图片至暗色
140     public void resetimgs(){
141         mimgweixin.setimageresource(r.drawable.tab_weixin_normal);
142         mimgfrd.setimageresource(r.drawable.tab_find_frd_normal);
143         mimgaddress.setimageresource(r.drawable.tab_address_normal);
144         mimgsettings.setimageresource(r.drawable.tab_settings_normal);
145 
146     }
147 }

其他三个frament(frdframent, contactfragment, settingfragment)照葫芦画瓢。

 1 package com.example.mywechat;
 2 
 3 import android.os.bundle;
 4 
 5 import android.app.fragment ;
 6 import android.view.layoutinflater;
 7 import android.view.view;
 8 import android.view.viewgroup;
 9 
10 
11 /**
12  * a simple {@link fragment} subclass.
13  */
14 public class weixinfragment extends fragment {
15 
16     public weixinfragment() {
17         // required empty public constructor
18     }
19 
20     @override
21     public view oncreateview(layoutinflater inflater, viewgroup container,
22                              bundle savedinstancestate) {
23         // inflate the layout for this fragment
24         return inflater.inflate(r.layout.tab01, container, false);
25     }
26 }

2.layout布局文件部分：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="70dp"
 5     android:background="#32393c"
 6     android:orientation="vertical"
 7     android:gravity="bottom">
 8     <textview
 9         android:id="@+id/textview"
10         android:layout_width="wrap_content"
11         android:layout_height="wrap_content"
12         android:layout_gravity="center_horizontal"
13         android:text="@string/app_name"
14         android:textcolor="#ffffff"
15         android:textsize="30sp" />
16 </linearlayout>

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  3     xmlns:app="http://schemas.android.com/apk/res-auto"
  4     android:layout_width="match_parent"
  5     android:layout_height="100dp"
  6     android:background="@drawable/bottom_bar"
  7     android:layout_gravity="bottom"
  8     android:baselinealigned="false">
  9 
 10     <linearlayout
 11         android:id="@+id/id_tab_weixin"
 12         android:layout_width="0dp"
 13         android:layout_height="match_parent"
 14         android:layout_weight="1"
 15         android:orientation="vertical">
 16 
 17         <imagebutton
 18             android:id="@+id/id_tab_weixin_img"
 19             android:layout_width="match_parent"
 20             android:layout_height="wrap_content"
 21             android:layout_margintop="20dp"
 22             android:background="#32393c"
 23             android:clickable="false"
 24             app:srccompat="@drawable/tab_weixin_pressed" />
 25 
 26         <textview
 27             android:clickable="false"
 28             android:id="@+id/textview2"
 29             android:layout_width="match_parent"
 30             android:layout_height="wrap_content"
 31             android:gravity="center_horizontal"
 32             android:textcolor="#fff"
 33             android:textsize="15sp"
 34             android:text="微信" />
 35     </linearlayout>
 36 
 37     <linearlayout
 38         android:id="@+id/id_tab_frd"
 39         android:layout_width="0dp"
 40         android:layout_height="match_parent"
 41         android:layout_weight="1"
 42         android:orientation="vertical">
 43 
 44         <imagebutton
 45             android:id="@+id/id_tab_frd_img"
 46             android:layout_width="match_parent"
 47             android:layout_height="wrap_content"
 48             android:layout_margintop="20dp"
 49             android:background="#32393c"
 50             android:clickable="false"
 51             app:srccompat="@drawable/tab_find_frd_normal" />
 52 
 53         <textview
 54             android:clickable="false"
 55             android:id="@+id/textview3"
 56             android:layout_width="match_parent"
 57             android:layout_height="wrap_content"
 58             android:gravity="center_horizontal"
 59             android:textcolor="#fff"
 60             android:textsize="15sp"
 61             android:text="朋友" />
 62     </linearlayout>
 63 
 64     <linearlayout
 65         android:id="@+id/id_tab_contact"
 66         android:layout_width="0dp"
 67         android:layout_height="match_parent"
 68         android:layout_weight="1"
 69         android:orientation="vertical">
 70 
 71         <imagebutton
 72             android:id="@+id/id_tab_contact_img"
 73             android:layout_width="match_parent"
 74             android:layout_height="wrap_content"
 75             android:layout_margintop="20dp"
 76             android:background="#32393c"
 77             android:clickable="false"
 78             app:srccompat="@drawable/tab_address_normal" />
 79 
 80         <textview
 81             android:clickable="false"
 82             android:id="@+id/textview4"
 83             android:layout_width="match_parent"
 84             android:layout_height="wrap_content"
 85             android:gravity="center_horizontal"
 86             android:textcolor="#fff"
 87             android:textsize="15sp"
 88             android:text="通讯录" />
 89     </linearlayout>
 90 
 91     <linearlayout
 92         android:id="@+id/id_tab_settings"
 93         android:layout_width="0dp"
 94         android:layout_height="match_parent"
 95         android:layout_weight="1"
 96         android:orientation="vertical">
 97 
 98         <imagebutton
 99             android:id="@+id/id_tab_settings_img"
100             android:layout_width="match_parent"
101             android:layout_height="wrap_content"
102             android:layout_margintop="20dp"
103             android:background="#32393c"
104             android:clickable="false"
105             app:srccompat="@drawable/tab_settings_normal" />
106 
107         <textview
108             android:clickable="false"
109             android:id="@+id/textview5"
110             android:layout_width="match_parent"
111             android:layout_height="wrap_content"
112             android:gravity="center_horizontal"
113             android:textcolor="#fff"
114             android:textsize="15sp"
115             android:text="设置" />
116     </linearlayout>
117 
118 
119 </linearlayout>

在activity_main.xml中使用

<include layout="@layout/top"/>     <include layout="@layout/bottom"/>

引入头部top.xml文件和底部bottom.xml文件

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:orientation="vertical" android:layout_width="match_parent"
 4     android:layout_height="match_parent">
 5     <include layout="@layout/top"/>
 6     <framelayout
 7         android:id="@+id/id_content"
 8         android:layout_width="match_parent"
 9         android:layout_height="0dp"
10         android:layout_weight="1">
11     </framelayout>
12     <include layout="@layout/bottom"/>
13 </linearlayout>

3.图片文件:

Fragment实现底部导航栏