Di chuyển thanh ăn nhẹ phía trên thanh đáy

Question

Tôi đang gặp phải một số vấn đề với thanh đáy mới. Tôi không thể buộc phải di chuyển thanh snack phía trên thanh dưới cùng (đây là cách hướng dẫn thiết kế cho tôi biết là https://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-specs).

Đây là activity_main.xml tôi

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v4.widget.DrawerLayout 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/drawer_layout" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:fitsSystemWindows="true" 
tools:openDrawer="start"> 

<include 
    layout="@layout/app_bar_main_activity" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" /> 

<android.support.design.widget.NavigationView 
    android:id="@+id/nav_view" 
    android:layout_width="wrap_content" 
    android:layout_height="match_parent" 
    android:layout_gravity="start" 
    android:fitsSystemWindows="true" 
    app:headerLayout="@layout/nav_header_main_activity" 
    app:menu="@menu/activity_main_drawer" /> 

</android.support.v4.widget.DrawerLayout> 

Đây là app_bar_main_activity.xml tôi

<?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:id="@+id/main_content" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:fitsSystemWindows="true" 
tools:context="test.tab_activity"> 

<android.support.design.widget.AppBarLayout 
    android:id="@+id/appbar" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:paddingTop="@dimen/appbar_padding_top" 
    android:theme="@style/MyAppTheme.NoActionBar.AppBarOverlay"> 

    <android.support.v7.widget.Toolbar 
     android:id="@+id/main_activity_toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="?attr/actionBarSize" 
     android:background="?attr/colorPrimary" 
     app:layout_scrollFlags="scroll|enterAlways" 
     app:popupTheme="@style/MyAppTheme.NoActionBar.PopupOverlay"> 

    </android.support.v7.widget.Toolbar> 

</android.support.design.widget.AppBarLayout> 



<android.support.v4.view.ViewPager 
    android:id="@+id/container" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

<LinearLayout 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: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.FloatingActionButton 
     android:id="@+id/fab" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="end|bottom" 
     android:layout_margin="@dimen/fab_margin" 
     android:src="@drawable/ic_add_white_24dp" /> 

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

Các snackbar ở main_activity.java trông như thế này

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); 
    fab.setOnClickListener(new View.OnClickListener() { 
     @Override 
     public void onClick(View view) { 
      Snackbar.make(findViewById(R.id.main_content), "Replace with your own action", Snackbar.LENGTH_LONG) 
        .setAction("Action", null).show(); 
     } 
    }); 

Answer 1

thay xml của bạn ->

<?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:id="@+id/main_content" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true" 
    tools:context="test.tab_activity"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/main_activity_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:background="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|enterAlways"> 

     </android.support.v7.widget.Toolbar> 

    </android.support.design.widget.AppBarLayout> 



    <android.support.v4.view.ViewPager 
     android:id="@+id/container" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:orientation="vertical"> 

     <android.support.design.widget.CoordinatorLayout 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:id="@+id/placeSnackBar"> 

      <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.FloatingActionButton 
       android:id="@+id/fab" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="end|bottom" 
       android:layout_margin="@dimen/fab_margin" 
       android:src="@drawable/ic_menu_gallery" /> 

     </android.support.design.widget.CoordinatorLayout> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/tab_layout" 
      android:layout_width="match_parent" 
      android:layout_height="56dp" 
      android:background="?attr/colorPrimary" /> 

    </LinearLayout> 

</android.support.design.widget.CoordinatorLayout> 

và Mã Snackbar sẽ

Snackbar.make(findViewById(R.id.placeSnackBar), "Replace with your own action", Snackbar.LENGTH_LONG) 
      .setAction("Action", null).show(); 

Answer 2

Bạn có thể làm điều này lập trình mà không làm lộn xộn xml của bạn với CoordinatorLayouts thêm bằng cách thay đổi lề của snackbar.

Java dụ:

Snackbar snack = Snackbar.make(findViewById(R.id.coordinatorLayout), 
    "Your message", Snackbar.LENGTH_LONG); 
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) 
    snack.getView().getLayoutParams(); 
params.setMargins(leftMargin, topMargin, rightMargin, bottomBar.height); 
snack.getView().setLayoutParams(params); 
snack.show(); 

Kotlin đơn dòng:

Snackbar.make(coordinatorLayout, "Your message", Snackbar.LENGTH_LONG).apply {view.layoutParams = (view.layoutParams as CoordinatorLayout.LayoutParams).apply {setMargins(leftMargin, topMargin, rightMargin, bottomBar.height)}}.show() 

Answer 3

Tôi đang sử dụng BottomNavigationView và Snackbar từ thư viện hỗ trợ thiết kế phiên bản 25.3.1 trên OS mục tiêu kitkat, kẹo và Marshmallow. Trên kẹo que và trên Snackbar đang ẩn đằng sau BottomNavigationView nhưng trong Kitkat BottomNavigationView được ẩn đằng sau Snackbar.

Tôi đã cố gắng hiển thị Snackbar với cách tiếp cận khác. Khi Snackbar hiển thị BottomNavigationView được dịch trên trục Y (được cuộn xuống) bằng thuộc tính Translation TranslationY và Interpolator. Khi Snackbar đã biến mất, BottomNavigationView xuất hiện trở lại với thuộc tính translationY tương tự.

Ẩn các BottomNavigationView (phía dưới):

CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) bottomNavigationView.getLayoutParams(); 
bottomNavigationView.animate().translationY(bottomNavigationView.getHeight() + layoutParams.bottomMargin).setInterpolator(new LinearInterpolator()).start(); 

Hiển thị các BottomNavigationView trở lại trên màn hình:

bottomNavigationView.animate().translationY(0).setInterpolator(new LinearInterpolator()).start(); 

Answer 4

Giả sử bạn đang làm việc với CoordinatorLayout bạn có thể sửa đổi layoutparams của Snackbar trước gọi chương trình(). Bằng cách đặt anchorId và anchorGravity thanh snackBar sẽ hiển thị phía trên thanh điều hướng phía dưới:

val layoutParams = snackbar.view.layoutParams as CoordinatorLayout.LayoutParams 
layoutParams.anchorId = R.id.navigation //Id for your bottomNavBar or TabLayout 
layoutParams.anchorGravity = Gravity.TOP 
layoutParams.gravity = Gravity.TOP 
snackbar.view.layoutParams = layoutParams