使用Bottom Navigation Activity实现Android底部导航栏
2017-08-03 09:45
711 查看
最近看到Android Studio里新建Activity时共选择模板中Bottom Navigation Activity可以实现Android底部导航的效果,在网上没啥参考资料,于是自己搞个教程方便大家学习指正哈。话不多说,直接效果图:(Android Studio:2.3.1)
步骤:
1.新建Bottom Navigation Activity,包含layout文件activity_navigation.xml和class文件NavigationActivity:
activity_navigation.xml代码:
NavigationActivity.java代码:
2.新建三个Fragment类:FragmentOne、FragmentTwo、FragmentThree和对应的三个layout文件:fragment_one.xml、fragment_two.xml、fragment_three.xml
FragmentOne代码:
FragmentTwo代码:
FragmentThree代码:
fr
c23a
agment_one.xml代码:
fragment_two.xml代码:
fragment_three.xml代码:
步骤:
1.新建Bottom Navigation Activity,包含layout文件activity_navigation.xml和class文件NavigationActivity:
activity_navigation.xml代码:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.lin.coursetwo.NavigationActivity"> <FrameLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> <TextView android:id="@+id/message" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/activity_vertical_margin" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginRight="@dimen/activity_horizontal_margin" android:layout_marginTop="@dimen/activity_vertical_margin" android:text="@string/title_home" /> </FrameLayout> <android.support.design.widget.BottomNavigationView android:id="@+id/navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:background="?android:attr/windowBackground" app:menu="@menu/navigation" /> </LinearLayout>
NavigationActivity.java代码:
package com.lin.coursetwo; import android.app.FragmentTransaction; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.design.widget.BottomNavigationView; import android.support.v7.app.AppCompatActivity; import android.view.MenuItem; import android.widget.TextView; import com.lin.coursetwo.fragment.FragmentOne; import com.lin.coursetwo.fragment.FragmentThree; import com.lin.coursetwo.fragment.FragmentTwo; public class NavigationActivity extends AppCompatActivity { private TextView mTextMessage; private FragmentOne fragmentOne; private FragmentTwo fragmentTwo; private FragmentThree fragmentThree; private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener = new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()) { case R.id.navigation_home: mTextMessage.setText(R.string.title_home); showNav(R.id.navigation_home); return true; case R.id.navigation_dashboard: mTextMessage.setText(R.string.title_dashboard); showNav(R.id.navigation_dashboard); return true; case R.id.navigation_notifications: mTextMessage.setText(R.string.title_notifications); showNav(R.id.navigation_notifications); return true; } return false; } }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_navigation); init(); mTextMessage = (TextView) findViewById(R.id.message); BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation); navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener); }
//init()用来初始化组件 private void init(){ fragmentOne=new FragmentOne(); fragmentTwo=new FragmentTwo(); fragmentThree=new FragmentThree(); FragmentTransaction beginTransaction=getFragmentManager().beginTransaction(); beginTransaction.add(R.id.content,fragmentOne).add(R.id.content,fragmentTwo).add(R.id.content,fragmentThree);//开启一个事务将fragment动态加载到组件 beginTransaction.hide(fragmentOne).hide(fragmentTwo).hide(fragmentThree);//隐藏fragment beginTransaction.addToBackStack(null);//返回到上一个显示的fragment beginTransaction.commit();//每一个事务最后操作必须是commit(),否则看不见效果 showNav(R.id.navigation_home); }
private void showNav(int navid){ FragmentTransaction beginTransaction=getFragmentManager().beginTransaction(); switch (navid){ case R.id.navigation_home: beginTransaction.hide(fragmentTwo).hide(fragmentThree); beginTransaction.show(fragmentOne); beginTransaction.addToBackStack(null); beginTransaction.commit(); break; case R.id.navigation_dashboard: beginTransaction.hide(fragmentOne).hide(fragmentThree); beginTransaction.show(fragmentTwo); beginTransaction.addToBackStack(null); beginTransaction.commit(); break; case R.id.navigation_notifications: beginTransaction.hide(fragmentTwo).hide(fragmentOne); beginTransaction.show(fragmentThree); beginTransaction.addToBackStack(null); beginTransaction.commit(); break; } } }
2.新建三个Fragment类:FragmentOne、FragmentTwo、FragmentThree和对应的三个layout文件:fragment_one.xml、fragment_two.xml、fragment_three.xml
FragmentOne代码:
package com.lin.coursetwo.fragment; import android.app.Fragment; import android.os.Bundle; import android.support.annotation.Nullable; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import com.lin.coursetwo.R; public class FragmentOne extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) { View view=inflater.inflate(R.layout.fragment_one,container,false); return view; } }
FragmentTwo代码:
package com.lin.coursetwo.fragment; import android.app.Fragment; import android.os.Bundle; import android.support.annotation.Nullable; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import com.lin.coursetwo.R; public class FragmentTwo extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) { View view=inflater.inflate(R.layout.fragment_two,container,false); return view; } }
FragmentThree代码:
package com.lin.coursetwo.fragment; import android.app.Fragment; import android.os.Bundle; import android.support.annotation.Nullable; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import com.lin.coursetwo.R; public class FragmentThree extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) { View view=inflater.inflate(R.layout.fragment_three,container,false); return view; } }
fr
c23a
agment_one.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"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#4BAE4F" android:gravity="center"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这是第一个页面" android:textSize="30dp" android:textColor="#ffffff" android:gravity="center"/> </LinearLayout> </LinearLayout>
fragment_two.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"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#785447" android:gravity="center"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这是第二个页面" android:textSize="30dp" android:textColor="#ffffff" android:gravity="center"/> </LinearLayout> </LinearLayout>
fragment_three.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"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#00BBD3" android:gravity="center"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这是第三个页面" android:textSize="30dp" android:textColor="#ffffff" android:gravity="center"/> </LinearLayout> </LinearLayout>至此:一个简易的android底部导航功能就实现了,当然还有许多需要修改的地方,但整体的架构已经出来,希望大家能够参考指正,给我们一个新思路。
相关文章推荐
- Android 使用BottomNavigationView实现底部导航栏
- Android--BottomNavigationBar实现底部导航栏
- 使用BottomNavigationView实现底部导航栏
- ANDROID底部导航栏的实现(一)— BottomNavigationBar
- BottomNavigationBar实现Android特色底部导航栏
- Android学习之BottomNavigationBar实现Android特色底部导航栏
- BottomNavigationBar实现Android特色底部导航栏
- Android 底部导航栏的简单实现-BottomNavigationView
- Android Material Design中的BottomNavigationView实现底部导航栏
- Android学习之BottomNavigationBar实现Android特色底部导航栏
- Android——BottomNavigationBar底部导航栏的快速实现
- BottomNavigationBar实现Android特色底部导航栏
- Android 底部导航栏 多种实现方法,目前自定义的BottomNavigationBar比较不错
- [置顶] Android 底部导航栏 BottomNavigationBar的简单使用
- 使用Android support library25.0.0 提供的BottomNavigationView实现底部导航功能
- 使用BottomNavigationBar实现底部导航栏
- Android底部导航栏实现(一)之BottomNavigationBar
- Android实现底部导航栏加侧滑(BottomNavigationView+ViewPager+Fragment)
- ANDROID BottomNavigationBar底部导航栏的实现示例
- Android学习之BottomNavigationBar实现Android特色底部导航栏