web-dev-qa-db-ja.com

特定のボトムバーナビゲーションアイテムのサイズと形状を変更する方法

他のアイテムとはサイズが大きく形状が異なるアイテムを含むこのボトムバーを実装しようとしています。

bottom bar

ネイティブボトムナビゲーションコンポーネントを使用してこれを達成するための非ハッキーな方法はありますか？マテリアルデザインの仕様に準拠していないように思えるからではないでしょうか。

それ以外の場合、どのアプローチが最適ですか？これを実現する方法は2つしかありませんが、信頼できる方法はありません。

  • すべての「小さなアイテム」について、ドローアブルの上部に透明なバーを追加して、カメラアイコンのサイズに到達します。
  • 中央に「ゴーストアイテム」があり、その上に他のコンポーネントを配置できる5アイテムのボトムバーを実装します。これには、このコンポーネントをボトムバーと組み合わせる必要があります。

[〜＃〜]編集[〜＃〜]

これは、Harshitとfmaccaroniによって提案されたように、アイコンのサイズを大きくすることで得られたものです。

選択されていない場合：

item_selected

アイテムを選択すると：

item_selected

プロ：アイコンは他のアイコンよりも大きい

短所：それはまだ下部バーの中に含まれています。また、選択しても垂直方向の中央に配置されません

androidandroid-bottomnav
6
Louis
<Android.support.design.widget.BottomNavigationView
    Android:id="@+id/navigation"
    Android:layout_width="match_parent"
    Android:layout_height="56dp"
    Android:layout_alignParentBottom="true"
    Android:background="?android:attr/windowBackground"
    app:itemIconTint="@color/colorPrimary"
    app:itemTextColor="@Android:color/black"
    app:menu="@menu/navigation"
    Android:clipChildren="false">

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab"
        Android:layout_width="56dp"
        Android:layout_height="56dp"
        Android:layout_gravity="center"
        Android:layout_marginBottom="8dp"
        app:elevation="6dp"
        Android:scaleType="center" />
</Android.support.design.widget.BottomNavigationView>

ルートレイアウトにAndroid：clipChildren = "false"も追加します

5
Siddhesh Shirodkar

編集：

この回答は、Material 2018の更新前に作成されました。おそらくもう行く方法ではありません。最新の資料については、DPalagiの回答を参照してください。

いくつかの調査の後、私は このライブラリ に出くわしました。彼らは私が探していたものを提供しませんでしたが、サンプルの1つに この動作 を実装しました。

これは私が彼らのアイデアを再利用することで得たものです（API 23でのみテストされました）：

_<blockquote class="imgur-embed-pub" lang="en" data-id="a/0Oypk"><a href="//imgur.com/0Oypk"></a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>_

見た目はまともですが、下部のナビゲーションが2つのコンポーネントに分割されているため、この実装は好きではありません。

アイデアは、下部バーの中央に空のアイテムを作成し、その上にフローティングアクションボタンを追加して、下部バーの一部であるような錯覚を作成することです。

ここに私のボトムバーとフローティングナビゲーションボタンのレイアウトがあります：

_<com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx
    Android:id="@+id/navigation"
    Android:layout_width="match_parent"
    Android:layout_height="56dp"
    Android:layout_gravity="bottom"
    app:elevation="0dp"
    app:itemIconTint="@drawable/menu_item_selector"
    app:itemTextColor="@drawable/menu_item_selector"
    app:layout_constraintBottom_toBottomOf="parent"
    app:menu="@menu/navigation_items" />

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab"
    Android:layout_width="70dp"
    Android:layout_height="70dp"
    Android:layout_marginEnd="8dp"
    Android:layout_marginStart="8dp"
    Android:focusable="true"
    app:backgroundTint="@color/white"
    app:borderWidth="0dp"
    app:elevation="0dp"
    app:fabSize="mini"
    app:layout_constraintBottom_toBottomOf="@id/navigation"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:srcCompat="@drawable/camera_icon" />
_

ナビゲーションバーアイテム：

_    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:Android="http://schemas.Android.com/apk/res/Android"
        xmlns:tools="http://schemas.Android.com/tools">
    <item
        Android:id="@+id/action_around_me"
        Android:icon="@drawable/ic_bottombar_around_me"
        tools:ignore="MenuTitle" />

    <item
        Android:id="@+id/action_my_projects"
        Android:icon="@drawable/ic_bottombar_projects"
        tools:ignore="MenuTitle" />

    <!-- Here is the trick -->
    <item
        Android:id="@+id/empty"
        Android:enabled="false"
        tools:ignore="MenuTitle" />

    <item
        Android:id="@+id/action_notifications"
        Android:icon="@drawable/ic_bottombar_notification"
        tools:ignore="MenuTitle" />

    <item
        Android:id="@+id/action_settings"
        Android:icon="@drawable/ic_bottombar_settings"
        tools:ignore="MenuTitle" />
</menu>
_

[FAB]ボタンをクリックするたびに、下部バーを無効にします。

_private void disableBottomBar() {
    Menu menu = navigationBar.getMenu();
    for (int i = 0; i < menu.size(); i++) {
        // The third item is a an empty item so we do not do anything on it
        if (i != 2) {
            menu.getItem(i).setCheckable(false);
        }
    }
}
_

ボトムバーのアイコンをクリックしたときのsetCheckable(true)と同じです。

お役に立てれば。

2
Louis

前回のマテリアルアップデート（2018）以降、ネイティブUI要素でこれを行うことが可能です。

  • BottomAppBarとapp:fabAttached属性
  • FloatingActionButton with app:layout_anchor with BottomAppBar
  • app:fabAlignmentModeとの連携をお楽しみください

Alignment center

より多くの新しいマテリアル要素とこの要素の詳細については、 この素晴らしい中程度の記事 を参照してください。

お役に立てば幸いです。

2
DPalagi

ボトムバーナビゲーションのアイコンサイズは、プログラムで変更できます。

BottomNavigationView bottomNavigationView = (BottomNavigationView) 
activity.findViewById(R.id.bottom_navigation_view);

BottomNavigationMenuView menuView = (BottomNavigationMenuView) 
bottomNavigationView.getChildAt(0);

for (int i = 0; i < menuView.getChildCount(); i++) {
final View iconView = 
menuView.getChildAt(i).findViewById(Android.support.design.R.id.icon);

final ViewGroup.LayoutParams layoutParams = iconView.getLayoutParams();

final DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
// set your height here
layoutParams.height = (int) 
TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, displayMetrics);

// set your width here
layoutParams.width = (int) 
TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, displayMetrics);

iconView.setLayoutParams(layoutParams);
}

このようにして、下部バーのナビゲーション項目のサイズを必要に応じて変更しました。

そして、これがあなたができることです：

  1. クリックすると大きく表示したい同じ画像の大きなサイズの画像を取り、その描画可能なフォルダーに保存します。

  2. 以前の小さい画像を大きい画像で設定するよりも、特定の項目のナビゲーション下部バーをクリックしたときに適用されます。

そして、あなたは this library を見て、問題を解決するためにこのライブラリを使用できます。

1
Harshit Agrawal

参照として this を使用すると、BottomNavigationViewの子ごとに反復して、指定したアイテムのサイズを変更できます。

BottomNavigationView bottomNavigationView = (BottomNavigationView) activity.findViewById(R.id.bottom_navigation_view);
BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
for (int i = 0; i < menuView.getChildCount(); i++) {
    final View iconView = menuView.getChildAt(i).findViewById(Android.support.design.R.id.icon);
    final ViewGroup.LayoutParams layoutParams = iconView.getLayoutParams();
    final DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
    // If it is my special menu item change the size, otherwise take other size
    if (i == 2){
        // set your height here
        layoutParams.height = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 60, displayMetrics);
        // set your width here
        layoutParams.width = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 60, displayMetrics);
    }
    else {
        // set your height here
        layoutParams.height = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, displayMetrics);
        // set your width here
        layoutParams.width = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, displayMetrics);
    }
    iconView.setLayoutParams(layoutParams);
}
0
fmaccaroni

簡単な方法は、setScaleXとsetScaleYを使用することです。例えば：

final View iconView = 
menuView.getChildAt(2).findViewById(Android.support.design.R.id.icon);
iconView.setScaleY(1.5f);
iconView.setScaleX(1.5f);
0
royaB