2017-11-29 8 views
1

この下部バーには、他のアイテムよりもサイズが大きく、形状が異なるアイテムが含まれています。特定の下部バーのナビゲーションアイテムのサイズと形状を変更する方法

bottom bar

ネイティブ下部のナビゲーション・コンポーネントを使用して、これを達成するための非ハック方法はありますか?材料設計仕様に準拠していないようではないと思います。

それ以外の場合は、どのようなアプローチが最適でしょうか?私はこれを達成するための2つの方法しか見ませんが、どれも私にとって信頼できるものではありません。

  • 「小さなアイテム」ごとに、ドロアブルの上部に透明バーを追加して、カメラアイコンのサイズに達するようにします。
  • 真ん中に「ゴーストアイテム」が付いた5つのアイテムのボトムバーを実装し、その上に他のコンポーネントを配置することができます。これは、この構成要素が下部バーと結合されることを必要とする。

EDIT

これは私がHarshitとfmaccaroniにより示唆されるように、アイコンのサイズを大きくして得られたものです。

item_selected

項目が選択されている場合:

item_selected

プロ:アイコンは、他のもの

短所よりも大きい項目が選択されていない

:それはまだ下のバーの内側に含まれています。

+0

あなたはそのライブラリまたはコードだけでアイテムのサイズを変更したいですか? –

+0

@HarshitAgrawalこれを行うことができるライブラリがすでに存在する場合は完璧ですが、そうでなければこれをコード化する最もクリーンな方法を探しています。 – Louis

+0

下の私の答えを参照してください私はコードを入力しています:) –

答えて

0

を。彼らは私が探していたものを提供していませんでしたが、彼らのサンプルの1つにthis behaviorを実装しました。これは私が必要としていたものにかなり近いものでした。

この

は、私は(唯一の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" /> 

ナビゲーションバーの項目::ここで

は私bottombarと、フローティングナビゲーションボタンのレイアウトです

:私はFABボタンがクリックされる

<?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> 

毎回、私は下のバーを無効にします

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)となります。

これが役に立ちます。

0

を選択した場合も、それは垂直方向の中央されていない下のバーナビゲーションのアイコンのサイズは、必要に応じて、私は下のバーナビゲーションアイテムのサイズを変更するだけで、このようなものでした

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-特定のアイテムをクリックしたナビゲーションの下端バーをクリックすると、以前の小さいイメージを大きなイメージで設定した場合よりも適用されます。

Linkこのライブラリを使用すると、このライブラリを使用して問題を解決できます。

これが役立ちますように!

+0

あなたの応答のフィードバックを私の編集を確認してください – Louis

+0

@ルイス大丈夫ルイ私を考えてみましょう –

+0

@ルイス私の編集された答えを見てください。このライブラリがあなたの望むものに役立つことを願っています。さらなる問題について私に知らせてください。 –

0

あなたBottomNavigationViewの各子供のための反復処理し、指定された項目のサイズ変更することができます参照としてthisを取る:私はthis library出くわしたいくつかの研究の後

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

あなたの応答 – Louis

関連する問題