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


    【效果】(这里下载的软件收费的试用有水印)

                       

     【推荐】这里推荐一个图标网http://iconfont.cn/。以上图标来自此图标网

    【项目结构】

                       

    【步骤】

    ①创建布局文件,写底部导航栏

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

    ②定义Fragment

      【提示】可以通过下图方式创建

     

     1 public class FragmentA extends Fragment {
     2     
     3     public FragmentA() {
     4         // Required empty public constructor
     5     }
     6 
     7     @Override
     8     public 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 }

    对于生成的Fragment不用作修改,对应的布局中设置一个背景颜色便于观察。

     

    ③MainActivity代码的编写

     1 public class MainActivity extends AppCompatActivity implements View.OnClickListener{
     2 
     3     private FragmentManager fragmentManager;
     4     private RelativeLayout rl_content;
     5     private ImageView item1_iv,item2_iv,item3_iv,item4_iv;
     6     private TextView item1_tv,item2_tv,item3_tv,item4_tv;
     7     private LinearLayout item1,item2,item3,item4;
     8     private ImageView[] ivs;
     9     private TextView[] tvs;
    10     
    11     @Override
    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 void initListener() {
    24         item1.setOnClickListener(this);
    25         item2.setOnClickListener(this);
    26         item3.setOnClickListener(this);
    27         item4.setOnClickListener(this);
    28     }
    29 
    30     private void 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,item2_iv,item3_iv,item4_iv};
    45         tvs = new TextView[]{item1_tv,item2_tv,item3_tv,item4_tv};
    46     }
    47 
    48     @Override
    49     public void onClick(View view) {
    50         switch (view.getId()){
    51             case R.id.item1: {
    52                 FragmentTransaction transaction = fragmentManager.beginTransaction();//创建一个事务
    53                 transaction.replace(R.id.rl_content,new FragmentA());
    54                 transaction.commit();//事务一定要提交,replace才会有效
    55                 setCheck(0);//自定义方法
    56                 break;
    57             }
    58             case R.id.item2: {
    59                 FragmentTransaction transaction = fragmentManager.beginTransaction();
    60                 transaction.replace(R.id.rl_content,new FragmentB());
    61                 transaction.commit();
    62                 setCheck(1);
    63                 break;
    64             }
    65             case R.id.item3: {
    66                 FragmentTransaction transaction = fragmentManager.beginTransaction();
    67                 transaction.replace(R.id.rl_content,new FragmentC());
    68                 transaction.commit();
    69                 setCheck(2);
    70                 break;
    71             }
    72             case R.id.item4: {
    73                 FragmentTransaction transaction = fragmentManager.beginTransaction();
    74                 transaction.replace(R.id.rl_content,new FragmentD());
    75                 transaction.commit();
    76                 setCheck(3);
    77                 break;
    78             }
    79             default:break;
    80         }
    81     }
    82 
    83     public 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 }

    【提示】①这里的点击事件是通过Activity实现Onclick接口的方式

              ②getSupportFragmentManager()是v4包中的,兼容效果好,如果用getFragmentManager()可能会崩掉

              ③FragmentManager只需要获取一次,但是事务FragmentTransaction要重新开启。最后事务一定要提交commit。

              ④方法setCheck是为了设置导航的被选中效果。

     

  • 相关阅读:
    前后端分离
    Do a “git export” (like “svn export”)?(转)
    最有价值的信息就是这样的信息:大象是绳子,大象是扇子,大象是柱子…… 这样的信息往往是扭曲的,残缺的,隐晦不明的(转)
    说服他。说不服再按着他的去办(转)
    动手学习TCP:数据传输(转)
    应用程序框架实战十三:DDD分层架构之我见(转)
    UVA11627-Slalom(二分法)
    数据库系统原理及其应用总结---ShinePans
    cocos2d-x 3.0游戏实例学习笔记 《跑酷》第四步--地图循环&amp;主角加入动作
    Android学习四、Android中的Adapter
  • 原文地址:https://www.cnblogs.com/xqz0618/p/nav1.html
Copyright © 2020-2023  润新知