代码之家  ›  专栏  ›  技术社区  ›  cpgreen2

如何实现Android的BottomAppBar?

  •  0
  • cpgreen2  · 技术社区  · 7 年前

    Android BottomAppBar

    这是我最近的一次:

    My Implementation

    这是我当前的实现-

    片段\u bottomsheet.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    
    
        <com.google.android.material.navigation.NavigationView
            android:id="@+id/navigation_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:menu="@menu/activity_main_drawer">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text=""/>
        </com.google.android.material.navigation.NavigationView>
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    

    BottomNavigationDrawerFragment.java:

    package com.jggdevelopment.wannacook.dialog_fragments;
    
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    
    import com.google.android.material.bottomsheet.BottomSheetDialogFragment;
    import com.jggdevelopment.wannacook.R;
    
    import androidx.annotation.NonNull;
    import androidx.annotation.Nullable;
    
    public class BottomNavigationDrawerFragment extends BottomSheetDialogFragment {
    
        @Nullable
        @Override
        public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
            return inflater.inflate(R.layout.fragment_bottomsheet, container, false);
        }
    }
    

    package com.jggdevelopment.wannacook;
    
    import android.content.Intent;
    import androidx.fragment.app.FragmentManager;
    import android.os.Bundle;
    
    import com.google.android.material.bottomappbar.BottomAppBar;
    import com.google.android.material.navigation.NavigationView;
    import androidx.appcompat.app.AppCompatActivity;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.view.View;
    import android.view.WindowManager;
    
    import com.google.android.material.floatingactionbutton.FloatingActionButton;
    
    import com.google.firebase.auth.FirebaseAuth;
    import com.google.firebase.database.DatabaseReference;
    import com.google.firebase.database.FirebaseDatabase;
    import com.jggdevelopment.wannacook.dialog_fragments.AddShoppingListItemDialog;
    import com.jggdevelopment.wannacook.dialog_fragments.BottomNavigationDrawerFragment;
    import com.jggdevelopment.wannacook.fragments.FridgeFragment;
    import com.jggdevelopment.wannacook.fragments.ShoppingListFragment;
    import com.jggdevelopment.wannacook.fragments.PantryFragment;
    import com.jggdevelopment.wannacook.R;
    
    /**
     * Main activity for the application, handles general housekeeping and side navigation
     */
    public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {
    
        private BottomAppBar bottomAppBar;
        private FloatingActionButton mFab;
        private FirebaseDatabase database = FirebaseDatabase.getInstance();
        private DatabaseReference db = database.getReference();
    
        private static final int RC_SIGN_IN = 123;
    
        /**
         * instantiates fields and sets the main screen to be the ShoppingListFragment
         * @param savedInstanceState
         */
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
    
            setContentView(R.layout.activity_main);
            setSupportActionBar(bottomAppBar);
    
            mFab = findViewById(R.id.fab);
            bottomAppBar = findViewById(R.id.bottom_app_bar);
            ShoppingListFragment shoppingListFragment = new ShoppingListFragment();
    
            getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN);
            getSupportFragmentManager().beginTransaction()
                    .add(R.id.relative_layout_for_fragment, shoppingListFragment).commit();
    
            mFab.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    FragmentManager fm = getSupportFragmentManager();
                    AddShoppingListItemDialog addItemDialogFragment = AddShoppingListItemDialog.newInstance("Title");
                    addItemDialogFragment.show(fm, "new_shopping_list_item_dialog");
                }
            });
    
            bottomAppBar.setNavigationOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    BottomNavigationDrawerFragment bndf = new BottomNavigationDrawerFragment();
                    bndf.show(getSupportFragmentManager(), bndf.getTag());
                }
            });
        }
    
        /**
         * handles functionality for the three dots option menu in the toolbar
         * @param menu menu to create
         * @return true
         */
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            // Inflate the menu; this adds items to the action bar if it is present.
            getMenuInflater().inflate(R.menu.activity_main_drawer, menu);
            return true;
        }
    
        /**
         * handles what should happen when one of the options in the toolbar menu is selected
         * @param item
         * @return
         */
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            // Handle action bar item clicks here. The action bar will
            // automatically handle clicks on the Home/Up button, so long
            // as you specify a parent activity in AndroidManifest.xml.
    
            if (item.getItemId() == R.id.action_sign_out) {
                FirebaseAuth.getInstance().signOut();
                Intent intent = new Intent(this, SignInActivity.class);
                intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivity(intent);
                return true;
            }
    
            return super.onOptionsItemSelected(item);
        }
    
        /**
         * handles what should happen when one of the options in the navigation menu is selected
         * @param item
         * @return
         */
        @Override
        public boolean onNavigationItemSelected(MenuItem item) {
            // Handle navigation view item clicks here.
            int id = item.getItemId();
    
            // home button
            if (id == R.id.nav_shopping_list) {
                ShoppingListFragment shoppingListFragment = new ShoppingListFragment();
                FragmentManager manager = getSupportFragmentManager();
                manager.beginTransaction().replace(
                        R.id.relative_layout_for_fragment,
                        shoppingListFragment,
                        shoppingListFragment.getTag()
                ).commit();
            }
    
            // fridge button
            else if (id == R.id.nav_fridge) {
                FridgeFragment fridgeFragment = new FridgeFragment();
                FragmentManager manager = getSupportFragmentManager();
                manager.beginTransaction().replace(
                        R.id.relative_layout_for_fragment,
                        fridgeFragment,
                        fridgeFragment.getTag()
                ).commit();
            }
    
            // pantry button
            else if (id == R.id.nav_pantry) {
                PantryFragment pantryFragment = new PantryFragment();
                FragmentManager manager = getSupportFragmentManager();
                manager.beginTransaction().replace(
                        R.id.relative_layout_for_fragment,
                        pantryFragment,
                        pantryFragment.getTag()
                ).commit();
            }
    
            // share button
            else if (id == R.id.nav_share) {
                // TODO: allow user to share app link with other people
            }
    
            // contact developer button
            else if (id == R.id.nav_contact) {
                // TODO: send intent to email application to email developer
            }
    
            return true;
        }
    
    
    }
    
    1 回复  |  直到 7 年前
        1
  •  3
  •   ʍѳђઽ૯ท    7 年前

    你真的很接近。简单地说,为 ButtomNavigationDrawerFragment 具体如下:

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/navigation_view_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:behavior_hideable="true"
        app:layout_behavior="@string/bottom_sheet_behavior">
    
        <com.google.android.material.navigation.NavigationView
            android:id="@+id/navigation_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginTop="4dp"
            android:paddingBottom="40dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/view2"
            app:menu="@menu/bottom_nav_drawer_menu"
            app:theme="@style/NavigationDrawerStyle" />
    
        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="12dp"
            android:layout_marginTop="16dp"
            android:fontFamily="@font/rubik_medium"
            android:text="@string/bottom_sheet_name"
            android:textColor="@color/colorAccent"
            android:textSize="18sp"
            android:textStyle="bold"
            app:layout_constraintStart_toEndOf="@+id/imageView"
            app:layout_constraintTop_toTopOf="parent" />
    
        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:text="@string/bottom_sheet_email"
            android:textColor="@color/colorAccent"
            app:layout_constraintStart_toStartOf="@+id/textView"
            app:layout_constraintTop_toBottomOf="@+id/textView" />
    
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_marginStart="24dp"
            android:background="@drawable/baseline_account_circle_black_48"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/textView" />
    
        <View
            android:id="@+id/view2"
            android:layout_width="match_parent"
            android:layout_height="2dip"
            android:layout_marginTop="15dp"
            android:background="#447e7e7e"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView2" />
    
        <ImageView
            android:id="@+id/close_imageview"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="8dp"
            android:background="@drawable/baseline_close_black_24"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="@+id/textView2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/textView" />
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    

    setBottomSheetCallback() onStateChanged() onCreateDialog() : ( 科特林

    class BottomNavigationDrawerFragment: BottomSheetDialogFragment() {
    
        override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
            return inflater.inflate(R.layout.fragment_bottom_navigation_drawer, container, false)
        }
    
        override fun onActivityCreated(savedInstanceState: Bundle?) {
            super.onActivityCreated(savedInstanceState)
    
            navigation_view.setNavigationItemSelectedListener { menuItem ->
                // Bottom Navigation Drawer menu item clicks
                when (menuItem.itemId) {
    //                R.id.nav1 -> context!!.toast(getString(R.string.nav1_clicked))
                }
                // Add code here to update the UI based on the item selected
                // For example, swap UI fragments here
                true
            }
    
            close_imageview.setOnClickListener {
                this.dismiss()
            }
    
            disableNavigationViewScrollbars(navigation_view)
    
        }
    
        override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
            val dialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog
    
            dialog.setOnShowListener { dialog ->
                val d = dialog as BottomSheetDialog
    
                val bottomSheet = d.findViewById<View>(R.id.design_bottom_sheet) as FrameLayout?
                val bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet!!)
                bottomSheetBehavior.setBottomSheetCallback(object: BottomSheetBehavior.BottomSheetCallback() {
                    override fun onSlide(bottomSheet: View, slideOffset: Float) {
                        if (slideOffset > 0.5) {
                            close_imageview.visibility = View.VISIBLE
                        } else {
                            close_imageview.visibility = View.GONE
                        }
                    }
    
                    override fun onStateChanged(bottomSheet: View, newState: Int) {
                        when (newState) {
                            BottomSheetBehavior.STATE_HIDDEN-> dismiss()
    //                        else -> close_imageview.visibility = View.GONE
                        }
                    }
                })
            }
    
            return dialog
        }
    
        private fun disableNavigationViewScrollbars(navigationView: NavigationView?) {
            val navigationMenuView = navigationView?.getChildAt(0) as NavigationMenuView
            navigationMenuView.isVerticalScrollBarEnabled = false
        }
    
    
    }
    

    in this GitHub repo . (以及 the medium link )

    结果将是:

    enter image description here