NavigationTabBar 自定義底部導航欄
阿新 • • 發佈:2018-12-27
先來頁面效果
匯入依賴
implementation 'devlight.io:navigationtabbar:1.2.5'
先建立三個Fragment ,貼出其中一個Fragment 的程式碼
fragment_home.xml
<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:background="#AAdd" android:layout_width="match_parent" android:layout_height="match_parent"></android.support.constraint.ConstraintLayout>
HomeFragment.java
public class HomeFragment extends Fragment { @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_home, container, false); return view; } @Override public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); } }
新建一個Activity TabActivity
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:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".TabAcitvity"> <FrameLayout android:id="@+id/act_all_fragment_fl" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" > </FrameLayout> <!--分割線--> <LinearLayout android:layout_width="match_parent" android:background="#dddddd" android:layout_height="1dp"> </LinearLayout> <devlight.io.library.ntb.NavigationTabBar android:id="@+id/ntb_horizontal" android:layout_width="match_parent" android:layout_height="48dp" app:ntb_bg_color="#fff" app:ntb_icon_size_fraction="0.5" app:ntb_active_color="#25dbe7" app:ntb_inactive_color="#8e8e8e" app:ntb_animation_duration="0" app:ntb_badged="false" app:ntb_scaled="true" app:ntb_tinted="true" app:ntb_title_mode="all" app:ntb_badge_bg_color="#fff" app:ntb_titled="true" app:ntb_swiped="false"/></LinearLayout>
java程式碼
public class TabAcitvity extends AppCompatActivity { private HomeFragment homeFragment; private MeFragment meFragment; private settingFragment settingFragment;// private ViewPager viewPager; private NavigationTabBar navigationTabBar; @Override protected void onCreate(final Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tab_acitvity); initUI(); } private void initUI() {// viewPager = findViewById(R.id.vp_horizontal_ntb); //例項化fragment homeFragment = new HomeFragment(); meFragment = new MeFragment(); settingFragment = new settingFragment(); getSupportFragmentManager().beginTransaction().add(R.id.act_all_fragment_fl, homeFragment) .add(R.id.act_all_fragment_fl, meFragment) .add(R.id.act_all_fragment_fl,settingFragment).commitAllowingStateLoss(); getSupportFragmentManager().beginTransaction().show(homeFragment) .hide(meFragment) .hide(settingFragment).commitAllowingStateLoss(); navigationTabBar = findViewById(R.id.ntb_horizontal); //設定底部Tab 圖示的標題 String[] titles = new String[]{"主頁", "工具", "我的"}; ArrayList<View> views = new ArrayList<>(); //設定每個View的不同背景 int[] viewBgs = new int[]{Color.RED, Color.GRAY, Color.BLUE}; //設定底部Tab的各個圖示 int[] icons = new int[]{R.drawable.icon_home, R.drawable.icon_setting, R.drawable.icon_me}; //用來生成各個不同選項的 ArrayList<NavigationTabBar.Model> models = new ArrayList<>(); for (int i = 0; i < titles.length; i++) { models.add( new NavigationTabBar.Model.Builder( getResources().getDrawable(icons[i]), Color.parseColor("#00000000"))// .selectedIcon(getResources().getDrawable(R.drawable.ic_sixth)) .title(titles[i])// .badgeTitle("NTB") //角標 .build() ); View view = new View(this);// view.setBackgroundColor(viewBgs[i]);// views.add(view); }// viewPager.setAdapter(new TabAdapter(this, views)); navigationTabBar.setModels(models); navigationTabBar.setModelIndex(0); navigationTabBar.setOnTabBarSelectedIndexListener(new NavigationTabBar.OnTabBarSelectedIndexListener() { @Override public void onStartTabSelected(NavigationTabBar.Model model, int index) { switch (index) { case 0: getSupportFragmentManager().beginTransaction().show(homeFragment) .hide(meFragment) .hide(settingFragment).commitAllowingStateLoss(); break; case 1: getSupportFragmentManager().beginTransaction().show(settingFragment) .hide(meFragment) .hide(homeFragment).commitAllowingStateLoss(); break; case 2: getSupportFragmentManager().beginTransaction().show(meFragment) .hide(homeFragment) .hide(settingFragment).commitAllowingStateLoss(); break; } } @Override public void onEndTabSelected(NavigationTabBar.Model model, int index) { } }); } }