AndroidはBottomNavigationBarを使用して下部ナビゲーションバーを実現
27757 ワード
最近手元に書いてあるAndroidプロジェクトはちょうど最後のナビゲーションバーを使うので、Android studio公式にはすでに底のナビゲーションバーのテンプレートがありますが、自分のよく知っているもので見たほうが気持ちがいいです.次にBottomNavigationBarで下部ナビゲーションバーを実現する方法を記録します
依存の追加
在build.gradleファイルのdependenciesに次のコードを追加し、右上syncをクリックして依存ファイルの追加が完了するのを待つ
レイアウトにBottomNavigationBarを導入
このように、まずFramelayoutを追加し、コンテナに切り替えたページをロードします.ユーザが下部のtabを切り替えると、そのtabに対応するfragmentに移動する.
各TABに対応するfragmentの作成
たとえば、ホーム、Bluetooth、Hotspotの3ページが必要な場合は、それぞれ3つのfragmentと対応するレイアウトファイルを作成します.ホームインタフェースを例にとる
レイアウトファイル
ここには、どのFragmentであるかを示すTextViewが1つしか置かれていません.
BottomNavigationbarの初期化
ここにMainActivityの完全なソースコードを置いておきます
上記のコードを説明します.
InitFragment()メソッドでは、まず各fragmentを初期化し、その後、FragmentTransactionを使用してこれらのfragmentを管理します.ここでmFragmentは、現在のTABが指すfragmentを示すものである.ホームページHomeFragmentのインスタンスをコミットの最初のトランザクションとして使用します.
BottomNavigationBar()では、下部のナビゲーションバーのスタイル、選択されたときの色、選択されていないときの色、背景を設定します.下部のTABをaddItemで追加し、対応する各TABの背景画像と文字を設定します.
BottomNavigationBarを実現OnTabSelectedListenerインタフェースは、異なるTABをクリックして異なるfragmentに切り替えるためのonTabSelectedメソッドを書き換えます.
switchFragment()メソッドでは、fragmentが重複して作成されないようにするため、isAddedメソッドで判断し、追加した場合は、切り替え時に隠すだけで、必要なfragmentを表示すればよい.ない場合は、必要なfragmentをトランザクションに追加してコミットします.
依存の追加
在build.gradleファイルのdependenciesに次のコードを追加し、右上syncをクリックして依存ファイルの追加が完了するのを待つ
implementation 'com.ashokvarma.android:bottom-navigation-bar:2.0.4'
レイアウトにBottomNavigationBarを導入
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="@+id/main_activity">
<FrameLayout
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
FrameLayout>
<com.ashokvarma.bottomnavigation.BottomNavigationBar
android:id="@+id/bottom_navigation_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"/>
LinearLayout>
このように、まずFramelayoutを追加し、コンテナに切り替えたページをロードします.ユーザが下部のtabを切り替えると、そのtabに対応するfragmentに移動する.
各TABに対応するfragmentの作成
たとえば、ホーム、Bluetooth、Hotspotの3ページが必要な場合は、それぞれ3つのfragmentと対応するレイアウトファイルを作成します.ホームインタフェースを例にとる
public class HomeFragment extends Fragment {
private View view;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle saveInstanceState){
view = inflater.inflate(R.layout.fragment_home, container, false);
return view;
}
}
レイアウトファイル
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragment.HomeFragment">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text=" " />
FrameLayout>
ここには、どのFragmentであるかを示すTextViewが1つしか置かれていません.
BottomNavigationbarの初期化
ここにMainActivityの完全なソースコードを置いておきます
public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener{
/**
*
*/
private Fragment mFragment;
private HomeFragment homeFragment;
private BlutoothFragment blutoothFragment;
private HotspotFragment hotspotFragment;
private FragmentTransaction transaction;
BottomNavigationBar bottomNavigationBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initFragment();
bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
BottomNavigationBar();
bottomNavigationBar.setTabSelectedListener(this);
}
/**
* fragment, fragment
*/
private void initFragment() {
homeFragment = new HomeFragment();
blutoothFragment = new BlutoothFragment();
hotspotFragment = new HotspotFragment();
transaction = getSupportFragmentManager().beginTransaction();
transaction.add(R.id.fragment_container,homeFragment).commit();
mFragment = homeFragment;
}
/**
*
*/
private void BottomNavigationBar(){
bottomNavigationBar.setActiveColor(R.color.colorAccent)
.setInActiveColor(R.color.colorPrimary)
.setBarBackgroundColor("#FFFFFF");
bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
//
bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_home, " ").setActiveColorResource(R.color.blue))
.addItem(new BottomNavigationItem(R.drawable.ic_bluetooth, " ").setActiveColorResource(R.color.blue))
.addItem(new BottomNavigationItem(R.drawable.ic_hotspot, " ").setActiveColorResource(R.color.blue))
.setFirstSelectedPosition(0)
.initialise();
}
/**
* TAB fragment
* @param position
*/
@Override
public void onTabSelected(int position) {
FragmentManager fm = getSupportFragmentManager();
FragmentTransaction transaction = fm.beginTransaction();
switch(position){
case 0:
switchFragment(homeFragment);
break;
case 1:
switchFragment(blutoothFragment);
break;
case 2:
switchFragment(homeFragment);
break;
default:
switchFragment(homeFragment);
break;
}
transaction.commit();
}
@Override
public void onTabUnselected(int position) { }
@Override
public void onTabReselected(int position) { }
/**
* fragment
* @param fragment
*/
private void switchFragment(Fragment fragment) {
// Fragment Fragment
if(mFragment != fragment) {
// Fragment
if (!fragment.isAdded()) {
// , Fragment , Fragment
getSupportFragmentManager().beginTransaction().hide(mFragment)
.add(R.id.fragment_container,fragment).commit();
} else {
// , Fragment , Fragment
getSupportFragmentManager().beginTransaction().hide(mFragment).show(fragment).commit();
}
mFragment = fragment;
}
}
}
上記のコードを説明します.
InitFragment()メソッドでは、まず各fragmentを初期化し、その後、FragmentTransactionを使用してこれらのfragmentを管理します.ここでmFragmentは、現在のTABが指すfragmentを示すものである.ホームページHomeFragmentのインスタンスをコミットの最初のトランザクションとして使用します.
BottomNavigationBar()では、下部のナビゲーションバーのスタイル、選択されたときの色、選択されていないときの色、背景を設定します.下部のTABをaddItemで追加し、対応する各TABの背景画像と文字を設定します.
BottomNavigationBarを実現OnTabSelectedListenerインタフェースは、異なるTABをクリックして異なるfragmentに切り替えるためのonTabSelectedメソッドを書き換えます.
switchFragment()メソッドでは、fragmentが重複して作成されないようにするため、isAddedメソッドで判断し、追加した場合は、切り替え時に隠すだけで、必要なfragmentを表示すればよい.ない場合は、必要なfragmentをトランザクションに追加してコミットします.