Android 底部导航栏实现一 Fragment-replace

移动开发作者： 2024-08-24 15:10:01

【效果】（这里下载的软件收费的试用有水印) 【推荐】这里推荐一个图标网http://iconfont.cn/。以上图标来自此图标网【项目结构】【步骤】 ①创建布局文件，写底部导航栏 ②定义Frag

  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     xmlns:tools="http://schemas.android.com/tools"
  5     android:layout_width="match_parent"
  6     android:layout_height  7     tools:context=".MainActivity"
  8     android:orientation="vertical">
  9 
 10     RelativeLayout
 11         android:id="@+id/rl_content"
 12         android:layout_width 13         android:layout_height="0dp"
 14         android:layout_weight="1" 15        <!--这里设置权重weight为1， 下面不设置权重。-->
 16         意思是，剩余的位置全都是RelativeLayout的 17     </RelativeLayout 18 
 19     TextView
 20         android:layout_width 21 ="1dp"
 22         android:background="#797878"/>
 23     LinearLayout
 24          25 ="80dp"
 26         android:orientation="horizontal" 27          28             ="@+id/item1"
 29             android:layout_width 30             android:layout_weight="1"
 31             android:layout_height 32             android:orientation 33             ImageView
 34                 ="@+id/item1_iv"
 35                 android:layout_width 36                 android:layout_height 37                 android:layout_weight="3"
 38                 android:layout_margin="3dp"
 39                 android:scaleType="fitCenter"
 40                 android:src="@drawable/wxb"
 41                 android:padding="1dp" 42              43                 ="@+id/item1_tv"
 44                 android:text="女王"
 45                 android:textSize="16sp"
 46  47  48  49                 android:gravity="center" 50         LinearLayout 51          52             ="@+id/item2"
 53  54  55  56  57              58                 ="@+id/item2_iv"
 59  60  61  62  63  64 ="@drawable/meizhuang"
 65 ="4dp" 66              67                 ="@+id/item2_tv"
 68 ="美妆"
 69  70  71  72  73  74          75          76             ="@+id/item3"
 77  78  79  80  81              82                 ="@+id/item3_iv"
 83  84  85  86  87  88 ="@drawable/fuzhuang"
 89 ="5dp" 90              91                 ="@+id/item3_tv"
 92 ="衣帽"
 93  94  95  96  97 ="center"  98          99         100             ="@+id/item4"
101 102 103 104 105             106                 ="@+id/item4_iv"
107 108 109 110 111 112 ="@drawable/xiebaopeishi"
113 ="3dp"114             115                 ="@+id/item4_tv"
116 ="鞋包"
117 118 119 120 121 122         123     124 >

 1 public class FragmentA extends Fragment {
 2     
 3     public FragmentA() {
 4         // Required empty public constructor
 5     }
 6 
 7     @Override
 8      View onCreateView(LayoutInflater inflater,ViewGroup container, 9                              Bundle savedInstanceState) {
10          Inflate the layout for this fragment
11         return inflater.inflate(R.layout.fragment_a,container,false);
12 13 }

class MainActivity extends AppCompatActivity implements View.OnClickListener{
 2 
private FragmentManager fragmentManager;
 4      RelativeLayout rl_content;
 5      ImageView item1_iv,item2_iv,item3_iv,item4_iv;
 6      TextView item1_tv,item2_tv,item3_tv,item4_tv;
 7      LinearLayout item1,item2,item3,item4;
 ImageView[] ivs;
 9      TextView[] tvs;
10     
11 12     protected void onCreate(Bundle savedInstanceState) {
13         super.onCreate(savedInstanceState);
14         setContentView(R.layout.activity_main);
15 
16         initView();
17 
18         fragmentManager = getSupportFragmentManager();
19 
20         initListener();
21 22 
23     private  initListener() {
24         item1.setOnClickListener(this25         item2.setOnClickListener(26         item3.setOnClickListener(27         item4.setOnClickListener(28 29 
30      initView() {
31         rl_content = (RelativeLayout) findViewById(R.id.rl_content);
32         item1_iv = (ImageView) findViewById(R.id.item1_iv);
33         item1_tv = (TextView) findViewById(R.id.item1_tv);
34         item1 = (LinearLayout) findViewById(R.id.item1);
35         item2_iv = (ImageView) findViewById(R.id.item2_iv);
36         item2_tv = (TextView) findViewById(R.id.item2_tv);
37         item2 = (LinearLayout) findViewById(R.id.item2);
38         item3_iv = (ImageView) findViewById(R.id.item3_iv);
39         item3_tv = (TextView) findViewById(R.id.item3_tv);
40         item3 = (LinearLayout) findViewById(R.id.item3);
41         item4_iv = (ImageView) findViewById(R.id.item4_iv);
42         item4_tv = (TextView) findViewById(R.id.item4_tv);
43         item4 = (LinearLayout) findViewById(R.id.item4);
44         ivs = new ImageView[]{item1_iv,item4_iv};
45         tvs =  TextView[]{item1_tv,item4_tv};
46 47 
48 49      onClick(View view) {
50         switch (view.getId()){
51             case R.id.item1: {
52                 FragmentTransaction transaction = fragmentManager.beginTransaction();创建一个事务
53                 transaction.replace(R.id.rl_content,1)"> FragmentA());
54                 transaction.commit();事务一定要提交，replace才会有效
55                 setCheck(0);自定义方法
56                 break;
57             }
58              R.id.item2: {
59                 FragmentTransaction transaction = fragmentManager.beginTransaction();
60                 transaction.replace(R.id.rl_content,1)"> FragmentB());
61                 transaction.commit();
62                 setCheck(163                 64 65              R.id.item3: {
66                 FragmentTransaction transaction =67                 transaction.replace(R.id.rl_content,1)"> FragmentC());
68 69                 setCheck(270                 71 72              R.id.item4: {
73                 FragmentTransaction transaction =74                 transaction.replace(R.id.rl_content,1)"> FragmentD());
75 76                 setCheck(377                 78 79             default:80         }
81 82 
83     void setCheck(int itemId){
84         这个方法设置底部导航栏选中时的效果
85         for (int i = 0; i < 4; i++) {
86             ivs[i].setColorFilter(Color.parseColor("#0f0f0f"));
87             tvs[i].setTextColor(Color.parseColor("#0f0f0f"88 89         ivs[itemId].setColorFilter(Color.GREEN);
90         tvs[itemId].setTextColor(Color.GREEN);
91 92 }