Androidの新しい下部ナビゲーションバーまたはBottomNavigationView
新しいガイドラインが出てきたのを見て、最新のgoogle photosアプリで使用しました。新しい下部ナビゲーションバーの使い方はわかりません。新しいサポートライブラリを見て、リードを見つけることができませんでした。
公式のサンプルが見つかりません。
新しい下部バーの使い方カスタマイズしたくない。
私はあなたがこれを探すかもしれないと思います。
ここから始めるための簡単なスニペットです：
public class MainActivity extends AppCompatActivity {
private BottomBar mBottomBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Notice how you don't use the setContentView method here! Just
// pass your layout to bottom bar, it will be taken care of.
// Everything will be just like you're used to.
mBottomBar = BottomBar.bind(this, R.layout.activity_main,
savedInstanceState);
mBottomBar.setItems(
new BottomBarTab(R.drawable.ic_recents, "Recents"),
new BottomBarTab(R.drawable.ic_favorites, "Favorites"),
new BottomBarTab(R.drawable.ic_nearby, "Nearby"),
new BottomBarTab(R.drawable.ic_friends, "Friends")
);
mBottomBar.setOnItemSelectedListener(new OnTabSelectedListener() {
@Override
public void onItemSelected(final int position) {
// the user selected a new tab
}
});
}
@Override
protected void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
mBottomBar.onSaveInstanceState(outState);
}
}
これは参照リンクです。
https://github.com/roughike/BottomBar
新しいリリースを編集します。
ボトムナビゲーションビューは、しばらく前から材料設計ガイドラインに含まれていましたが、それを私たちのアプリに実装するのは容易ではありませんでした。アプリケーションによっては独自のソリューションを構築しているものもあれば、仕事をこなすためにサードパーティのオープンソースライブラリに依存しているものもあります。デザインサポートライブラリでこの下のナビゲーションバーが追加されています。それを使用する方法について説明しましょう。
使い方 ？
まずはじめに、依存関係を更新する必要があります。
compile ‘com.Android.support:design:25.0.0’
デザインXML。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:layout_width="match_parent"
Android:layout_height="match_parent">
<!-- Content Container -->
<Android.support.design.widget.BottomNavigationView
Android:id="@+id/bottom_navigation"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_alignParentBottom="true"
app:itemBackground="@color/colorPrimary"
app:itemIconTint="@color/white"
app:itemTextColor="@color/white"
app:menu="@menu/bottom_navigation_main" />
</RelativeLayout>
あなたの条件に従ってメニューを作成しなさい。
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto">
<item
Android:id="@+id/action_favorites"
Android:enabled="true"
Android:icon="@drawable/ic_favorite_white_24dp"
Android:title="@string/text_favorites"
app:showAsAction="ifRoom" />
<item
Android:id="@+id/action_schedules"
Android:enabled="true"
Android:icon="@drawable/ic_access_time_white_24dp"
Android:title="@string/text_schedules"
app:showAsAction="ifRoom" />
<item
Android:id="@+id/action_music"
Android:enabled="true"
Android:icon="@drawable/ic_audiotrack_white_24dp"
Android:title="@string/text_music"
app:showAsAction="ifRoom" />
</menu>
有効/無効状態の処理セレクタファイルを作成します。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item
Android:state_checked="true"
Android:color="@color/colorPrimary" />
<item
Android:state_checked="false"
Android:color="@color/grey" />
</selector>
クリックイベントを処理します。
BottomNavigationView bottomNavigationView = (BottomNavigationView)
findViewById(R.id.bottom_navigation);
bottomNavigationView.setOnNavigationItemSelectedListener(
new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.action_favorites:
break;
case R.id.action_schedules:
break;
case R.id.action_music:
break;
}
return false;
}
});
そのメソッドとその仕組みについてもっと知りたいのなら こちらを読んでください
きっとそれはあなたを助けるでしょう。
BottomNavigationView v25 Android Support Libraryから使用する必要があります。これは、アプリケーションの標準の下部ナビゲーションバーを表します。
ステップバイステップガイドがあるMediumの投稿：https://medium.com/@hitherejoe/exploring-the -Android-design-support-library-bottom-navigation-drawer-548de699e8e0＃.9vmiekxze
カスタムタブ表示でタブレイアウトを使用してこれを実現することもできます。
custom_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:background="?attr/selectableItemBackground"
Android:gravity="center"
Android:orientation="vertical"
Android:paddingBottom="10dp"
Android:paddingTop="8dp">
<ImageView
Android:id="@+id/icon"
Android:layout_width="24dp"
Android:layout_height="24dp"
Android:scaleType="centerInside"
Android:src="@drawable/ic_recents_selector" />
<TextView
Android:id="@+id/title"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:ellipsize="end"
Android:maxLines="1"
Android:textAllCaps="false"
Android:textColor="@color/tab_color"
Android:textSize="12sp"/>
</LinearLayout>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:orientation="vertical">
<Android.support.v4.view.ViewPager
Android:id="@+id/view_pager"
Android:layout_width="match_parent"
Android:layout_height="0dp"
Android:layout_weight="1" />
<Android.support.design.widget.TabLayout
Android:id="@+id/tab_layout"
style="@style/AppTabLayout"
Android:layout_width="match_parent"
Android:layout_height="56dp"
Android:background="?attr/colorPrimary" />
</LinearLayout>
MainActivity.Java
public class MainActivity extends AppCompatActivity {
private TabLayout mTabLayout;
private int[] mTabsIcons = {
R.drawable.ic_recents_selector,
R.drawable.ic_favorite_selector,
R.drawable.ic_place_selector};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Setup the viewPager
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
MyPagerAdapter pagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(pagerAdapter);
mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
mTabLayout.setupWithViewPager(viewPager);
for (int i = 0; i < mTabLayout.getTabCount(); i++) {
TabLayout.Tab tab = mTabLayout.getTabAt(i);
tab.setCustomView(pagerAdapter.getTabView(i));
}
mTabLayout.getTabAt(0).getCustomView().setSelected(true);
}
private class MyPagerAdapter extends FragmentPagerAdapter {
public final int PAGE_COUNT = 3;
private final String[] mTabsTitle = {"Recents", "Favorites", "Nearby"};
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
public View getTabView(int position) {
// Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView and ImageView
View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_tab, null);
TextView title = (TextView) view.findViewById(R.id.title);
title.setText(mTabsTitle[position]);
ImageView icon = (ImageView) view.findViewById(R.id.icon);
icon.setImageResource(mTabsIcons[position]);
return view;
}
@Override
public Fragment getItem(int pos) {
switch (pos) {
case 0:
return PageFragment.newInstance(1);
case 1:
return PageFragment.newInstance(2);
case 2:
return PageFragment.newInstance(3);
}
return null;
}
@Override
public int getCount() {
return PAGE_COUNT;
}
@Override
public CharSequence getPageTitle(int position) {
return mTabsTitle[position];
}
}
}
Googleは、デザインサポートライブラリのバージョン25.0.0以降にBottomNavigationViewを開始しました。ただし、次の制限がありました。
- タイトルと中央のアイコンは削除できません。
- タイトルのテキストサイズを変更することはできません。
- を使用̶c̶a̶n̶'̶t̶変化ザ背景色、それは常にザ̶c̶o̶l̶o̶r̶P̶r̶i̶m̶a̶r̶y̶.̶
- BottomNavigationBehaviorがないため、CordinatorLayoutを介したFABまたはSnackBarとの統合はありません。
- すべてのmenuItemはFrameLayoutの純粋な拡張であるため、ニースサークルには効果がありません
そのため、BottomNavigationViewのこの最初のバージョンで実行できる最大値は次のとおりです（自分でlibを反映したり実装したりする必要はありません）。
したがって、これらのいずれかが必要な場合。 roughike/BottomBar のようなサードパートライブラリを使用するか、自分でlibを実装できます。
Sanf0rdが述べたように、グーグルはBottomNavigationView as を設計支援ライブラリのバージョン25.0.0 の一部として始めました。彼が述べた制限は、ビューの背景色、さらにはテキストの色やアイコンの色を変更することができることを除けば、ほとんど同じです。 4つ以上のアイテムを追加するとアニメーションが表示されます（残念ながら手動で有効または無効にすることはできません）。
私はあなたがここで読むことができる例と付随するリポジトリでそれについての詳細なチュートリアルを書きました： https://blog.autsoft.hu/now-you-can-use-the-bottom-デザイン支援ナビゲーションライブラリ/
その要旨
あなたはあなたのアプリレベルでこれらを追加しなければなりませんbuild.gradle：
compile 'com.Android.support:appcompat-v7:25.0.0'
compile 'com.Android.support:design:25.0.0'
このようにあなたのレイアウトにそれを含めることができます：
<Android.support.design.widget.BottomNavigationView
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/bottom_navigation_view"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
app:itemBackground="@color/darkGrey"
app:itemIconTint="@color/bottom_navigation_item_background_colors"
app:itemTextColor="@color/bottom_navigation_item_background_colors"
app:menu="@menu/menu_bottom_navigation" />
このようなメニューリソースを介して項目を指定することができます。
<?xml version="1.0" encoding="utf-8"?>
<menu
xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item
Android:id="@+id/action_one"
Android:icon="@Android:drawable/ic_dialog_map"
Android:title="One"/>
<item
Android:id="@+id/action_two"
Android:icon="@Android:drawable/ic_dialog_info"
Android:title="Two"/>
<item
Android:id="@+id/action_three"
Android:icon="@Android:drawable/ic_dialog_email"
Android:title="Three"/>
<item
Android:id="@+id/action_four"
Android:icon="@Android:drawable/ic_popup_reminder"
Android:title="Four"/>
</menu>
色合いとテキストの色をカラーリストとして設定できるので、現在選択されている項目が強調表示されます。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item
Android:color="@color/colorAccent"
Android:state_checked="false"/>
<item
Android:color="@Android:color/white"
Android:state_checked="true"/>
</selector>
最後に、OnNavigationItemSelectedListenerを使って項目の選択を処理できます。
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
Fragment fragment = null;
switch (item.getItemId()) {
case R.id.action_one:
// Switch to page one
break;
case R.id.action_two:
// Switch to page two
break;
case R.id.action_three:
// Switch to page three
break;
}
return true;
}
});
私の最初の答えは BottomNavigationView でしたが、今は BottomAppBar があります。そのために、上部に実装リンク付きのセクションを追加しました。
下アプリバー
BottomAppBarは、フローティングアクションボタンをサポートしています。
here からの画像。 BottomAppBarの設定については ドキュメント および このチュートリアル を参照してください。
下部ナビゲーションビュー
次の完全な例は、問題の画像のように下部ナビゲーションビューを作成する方法を示しています。ドキュメントの 下部ナビゲーション も参照してください。
設計支援ライブラリを追加する
この行をあなたのアプリの他のサポートライブラリの横にあるbuild.gradeファイルに追加してください。
implementation 'com.Android.support:design:28.0.0'
バージョン番号を現在のものに置き換えます。
アクティビティレイアウトを作成する
レイアウトに追加した唯一の特別なものはBottomNavigationViewです。クリックしたときにアイコンとテキストの色を変更するには、色を直接指定する代わりにselectorを使用できます。ここでは簡単のためこれを省略しています。
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:layout_width="match_parent"
Android:layout_height="match_parent">
<Android.support.design.widget.BottomNavigationView
Android:id="@+id/bottom_navigation"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_alignParentBottom="true"
app:menu="@menu/bottom_nav_menu"
app:itemBackground="@color/colorPrimary"
app:itemIconTint="@Android:color/white"
app:itemTextColor="@Android:color/white" />
</RelativeLayout>
実際に一番下に配置するためにlayout_alignParentBottomを使用したことに注意してください。
メニュー項目を定義する
下部ナビゲーションビューの上記のxmlはbottom_nav_menuを参照しました。これが私たちの見解で各項目を定義するものです。我々は今それをするつもりです。あなたがしなければならないのは、 メニューリソースを追加することです アクションバーやツールバーの場合と同じです。
bottom_nav_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto">
<item
Android:id="@+id/action_recents"
Android:enabled="true"
Android:icon="@drawable/ic_action_recents"
Android:title="Recents"
app:showAsAction="ifRoom" />
<item
Android:id="@+id/action_favorites"
Android:enabled="true"
Android:icon="@drawable/ic_action_favorites"
Android:title="Favorites"
app:showAsAction="ifRoom" />
<item
Android:id="@+id/action_nearby"
Android:enabled="true"
Android:icon="@drawable/ic_action_nearby"
Android:title="Nearby"
app:showAsAction="ifRoom" />
</menu>
プロジェクトに適切なアイコンを追加する必要があります。アイコンの種類として ファイル>新規>画像アセット を選択し、 アクションバーとタブアイコン を選択しても、これはそれほど難しくありません。
アイテム選択リスナーを追加する
ここで特別なことは何もありません。アクティビティのonCreateメソッドの下部ナビゲーションバーにリスナーを追加するだけです。
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation);
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.action_recents:
Toast.makeText(MainActivity.this, "Recents", Toast.LENGTH_SHORT).show();
break;
case R.id.action_favorites:
Toast.makeText(MainActivity.this, "Favorites", Toast.LENGTH_SHORT).show();
break;
case R.id.action_nearby:
Toast.makeText(MainActivity.this, "Nearby", Toast.LENGTH_SHORT).show();
break;
}
return true;
}
});
}
}
もっと助けが必要ですか？
私は次のYouTubeビデオを見てこれを行う方法を学びました。コンピュータの声は少し変ですが、デモンストレーションは非常に明確です。
あなたが試すことができる他の代替ライブラリ： - https://github.com/Ashok-Varma/BottomNavigation
<com.ashokvarma.bottomnavigation.BottomNavigationBar
Android:layout_gravity="bottom"
Android:id="@+id/bottom_navigation_bar"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"/>
BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
bottomNavigationBar
.addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home"))
.addItem(new BottomNavigationItem(R.drawable.ic_book_white_24dp, "Books"))
.addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp, "Music"))
.addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp, "Movies & TV"))
.addItem(new BottomNavigationItem(R.drawable.ic_videogame_asset_white_24dp, "Games"))
.initialise();
私はgridviewとメニューリソースを使うプライベートクラスを作りました：
private class BottomBar {
private GridView mGridView;
private Menu mMenu;
private BottomBarAdapter mBottomBarAdapter;
private View.OnClickListener mOnClickListener;
public BottomBar (@IdRes int gridviewId, @MenuRes int menuRes,View.OnClickListener onClickListener) {
this.mGridView = (GridView) findViewById(gridviewId);
this.mMenu = getMenu(menuRes);
this.mOnClickListener = onClickListener;
this.mBottomBarAdapter = new BottomBarAdapter();
this.mGridView.setAdapter(mBottomBarAdapter);
}
private Menu getMenu(@MenuRes int menuId) {
PopupMenu p = new PopupMenu(MainActivity.this,null);
Menu menu = p.getMenu();
getMenuInflater().inflate(menuId,menu);
return menu;
}
public GridView getGridView(){
return mGridView;
}
public void show() {
mGridView.setVisibility(View.VISIBLE);
mGridView.animate().translationY(0);
}
public void hide() {
mGridView.animate().translationY(mGridView.getHeight());
}
private class BottomBarAdapter extends BaseAdapter {
private LayoutInflater mInflater;
public BottomBarAdapter(){
this.mInflater = LayoutInflater.from(MainActivity.this);
}
@Override
public int getCount() {
return mMenu.size();
}
@Override
public Object getItem(int i) {
return mMenu.getItem(i);
}
@Override
public long getItemId(int i) {
return 0;
}
@Override
public View getView(int i, View view, ViewGroup viewGroup) {
MenuItem item = (MenuItem) getItem(i);
if (view==null){
view = mInflater.inflate(R.layout.your_item_layout,null);
view.setId(item.getItemId());
}
view.setOnClickListener(mOnClickListener);
view.findViewById(R.id.bottomnav_icon).setBackground(item.getIcon());
((TextView) view.findViewById(R.id.bottomnav_label)).setText(item.getTitle());
return view;
}
}
your_menu.xml：
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:id="@+id/item1_id"
Android:icon="@drawable/ic_item1"
Android:title="@string/title_item1"/>
<item Android:id="@+id/item2_id"
Android:icon="@drawable/ic_item2"
Android:title="@string/title_item2"/>
...
</menu>
そしてカスタムレイアウトアイテムyour_item_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="wrap_content" Android:layout_height="wrap_content"
Android:orientation="vertical"
Android:layout_margin="16dp">
<ImageButton Android:id="@+id/bottomnav_icon"
Android:layout_width="24dp"
Android:layout_height="24dp"
Android:layout_gravity="top|center_horizontal"
Android:layout_marginTop="8dp"
Android:layout_marginBottom="4dp"/>
<TextView Android:id="@+id/bottomnav_label"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_gravity="bottom|center_horizontal"
Android:layout_marginBottom="8dp"
Android:layout_marginTop="4dp"
style="@style/mystyle_label" />
</LinearLayout>
あなたのmainactivity内での使用法
BottomBar bottomBar = new BottomBar(R.id.YourGridView,R.menu.your_menu, mOnClickListener);
そして
private View.OnClickListener mOnClickListener = new View.OnClickListener() {
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.item1_id:
//todo item1
break;
case R.id.item2_id:
//todo item2
break;
...
}
}
}
そしてlayout_activity.xmlの中で
<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout
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:fitsSystemWindows="true">
...
<FrameLayout Android:id="@+id/fragment_container"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
<GridView Android:id="@+id/bottomNav"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:background="@color/your_background_color"
Android:verticalSpacing="0dp"
Android:horizontalSpacing="0dp"
Android:numColumns="4"
Android:stretchMode="columnWidth"
app:layout_anchor="@id/fragment_container"
app:layout_anchorGravity="bottom"/>
</Android.support.design.widget.CoordinatorLayout>
デザインサポートライブラリのバージョン25に新しい公式 BottomNavigationView があります。
https://developer.Android.com/reference/Android/support/design/widget/BottomNavigationView.html グラドルを追加compile 'com.Android.support:design:25.0.0'
XML
<Android.support.design.widget.BottomNavigationView
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:design="http://schema.Android.com/apk/res/Android.support.design"
Android:id="@+id/navigation"
Android:layout_width="wrap_content"
Android:layout_height="match_parent"
Android:layout_gravity="start"
design:menu="@menu/my_navigation_items" />
これも役に立つと思います。
スニペット
public class MainActivity : AppCompatActivity, BottomNavigationBar.Listeners.IOnTabSelectedListener
{
private BottomBar _bottomBar;
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.MainActivity);
_bottomBar = BottomBar.Attach(this, bundle);
_bottomBar.SetItems(
new BottomBarTab(Resource.Drawable.ic_recents, "Recents"),
new BottomBarTab(Resource.Drawable.ic_favorites, "Favorites"),
new BottomBarTab(Resource.Drawable.ic_nearby, "Nearby")
);
_bottomBar.SetOnItemSelectedListener(this);
_bottomBar.HideShadow();
_bottomBar.UseDarkTheme(true);
_bottomBar.SetTypeFace("Roboto-Regular.ttf");
var badge = _bottomBar.MakeBadgeForTabAt(1, Color.ParseColor("#f02d4c"), 1);
badge.AutoShowAfterUnSelection = true;
}
public void OnItemSelected(int position)
{
}
protected override void OnSaveInstanceState(Bundle outState)
{
base.OnSaveInstanceState(outState);
// Necessary to restore the BottomBar's state, otherwise we would
// lose the current tab on orientation change.
_bottomBar.OnSaveInstanceState(outState);
}
}
リンク
https://github.com/pocheshire/BottomNavigationBar
それは https://github.com/roughike/BottomBar Xamarin開発者のためにC＃に移植
このライブラリ BottomNavigationViewEx は、GoogleのBottomNavigationViewを拡張したものです。 Googleのライブラリを簡単にカスタマイズして、必要に応じて下部のナビゲーションバーを表示できます。シフトモードを無効にしたり、アイコンやテキストの表示状態を変更したりすることができます。ぜひ試してみてください。
<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" />
navigation.xml（メニュー内）
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto">
<item
Android:id="@+id/navigation_home"
Android:icon="@drawable/ic_home_black_24dp"
Android:title="@string/title_home"
app:showAsAction="always|withText"
Android:enabled="true"/>
onCreate()メソッド内
BottomNavigationView navigation = (BottomNavigationView)findViewById(R.id.navigation);
//Dont forgot this line
BottomNavigationViewHelper.disableShiftMode(navigation);
そして以下のようにクラスを作成します。
public class BottomNavigationViewHelper {
public static void disableShiftMode(BottomNavigationView view) {
BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
try {
Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
shiftingMode.setAccessible(true);
shiftingMode.setBoolean(menuView, false);
shiftingMode.setAccessible(false);
for (int i = 0; i < menuView.getChildCount(); i++) {
BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
//noinspection RestrictedApi
item.setShiftingMode(false);
// set once again checked value, so view will be updated
//noinspection RestrictedApi
item.setChecked(item.getItemData().isChecked());
}
} catch (NoSuchFieldException e) {
Log.e("BNVHelper", "Unable to get shift mode field", e);
} catch (IllegalAccessException e) {
Log.e("BNVHelper", "Unable to change value of shift mode", e);
}
}
}
私はこの github post を参照しました、そして私は下のタブバーでthree layoutsページのためにthree fragmentをセットしました。
FourButtonsActivity.Java：
bottomBar.setFragmentItems(getSupportFragmentManager(), R.id.fragmentContainer,
new BottomBarFragment(LibraryFragment.newInstance(R.layout.library_fragment_layout), R.drawable.ic_update_white_24dp, "Recents"),
new BottomBarFragment(PhotoEffectFragment.newInstance(R.layout.photo_effect_fragment), R.drawable.ic_local_dining_white_24dp, "Food"),
new BottomBarFragment(VideoFragment.newInstance(R.layout.video_layout), R.drawable.ic_favorite_white_24dp, "Favorites")
);
バッジ数を設定するには：
BottomBarBadge unreadMessages = bottomBar.makeBadgeForTabAt(1, "#E91E63", 4);
unreadMessages.show();
unreadMessages.setCount(4);
unreadMessages.setAnimationDuration(200);
unreadMessages.setAutoShowAfterUnSelection(true);
LibraryFragment.Java：
import Android.os.Bundle;
import Android.support.annotation.Nullable;
import Android.support.v4.app.Fragment;
import Android.view.LayoutInflater;
import Android.view.View;
import Android.view.ViewGroup;
public class LibraryFragment extends Fragment {
private static final String STARTING_TEXT = "Four Buttons Bottom Navigation";
public LibraryFragment() {
}
public static LibraryFragment newInstance(int resource) {
Bundle args = new Bundle();
args.putInt(STARTING_TEXT, resource);
LibraryFragment sampleFragment = new LibraryFragment();
sampleFragment.setArguments(args);
return sampleFragment;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = LayoutInflater.from(getActivity()).inflate(
getArguments().getInt(STARTING_TEXT), null);
return view;
}