ホームアクティビティでフラグメントが読み込まれるときの「ゴースト」下部ナビゲーションバー

Question

現在、自分のアプリケーションのホーム画面で作業しています。ユーザーが下部のナビゲーションバーのボタンをクリックすると、フラグメントを使用して別の「ページ」を読み込みます。私が見いだしたことは、ホームスクリーンをロードすると、下部のバーが再びリロードされ、2つのバーが作成され、1つはページの中央にあり、もう1つは画面の下部の適切な位置にあります（中央のバー実際には機能しません）。私は、アクティビティのフラグメントロードが原因だと思っていますが、それを解決する方法は完全にはわかりません。以下は、問題のイメージだけでなく、私が持っているコードのいくつかです。

activity_home.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:design="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/home_screen" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 

    <include 
     layout="@layout/app_bar" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     tools:ignore="MissingConstraints" 
     tools:layout_editor_absoluteX="0dp" 
     tools:layout_editor_absoluteY="225dp" /> 

    <android.support.v4.widget.NestedScrollView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:orientation="vertical"> 
      <FrameLayout 
       android:id="@+id/fragment_container" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" /> 
     </LinearLayout> 
    </android.support.v4.widget.NestedScrollView> 

    <FrameLayout 
     android:id="@+id/frame_layout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="bottom" 
     android:background="#f1f1f1" 
     tools:layout_editor_absoluteX="8dp" 
     tools:layout_editor_absoluteY="25dp"> 

     <View 
      android:layout_width="match_parent" 
      android:layout_height="2dp" 
      android:background="@drawable/shadow" /> 

     <android.support.design.widget.BottomNavigationView 
      android:id="@+id/bottom_nav" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_gravity="start" 
      design:menu="@menu/bottom_nav_menu" 
      /> 

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

home_fragment.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:design="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/home_fragment" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 

    <android.support.constraint.ConstraintLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     tools:layout_editor_absoluteX="0dp" 
     tools:layout_editor_absoluteY="0dp"> 

     <ImageView 
      android:id="@+id/tokyo_placeholder" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:adjustViewBounds="true" 
      android:scaleType="fitStart" 
      design:layout_constraintLeft_toLeftOf="parent" 
      design:layout_constraintRight_toRightOf="parent" 
      design:layout_constraintTop_toTopOf="parent" 
      design:srcCompat="@drawable/main_screen_placeholder" /> 

     <ImageView 
      android:id="@+id/airplane_icon" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginBottom="8dp" 
      android:layout_marginEnd="8dp" 
      android:layout_marginLeft="8dp" 
      android:layout_marginRight="8dp" 
      android:layout_marginStart="8dp" 
      android:layout_marginTop="8dp" 
      android:background="@drawable/circle_background" 
      design:layout_constraintBottom_toBottomOf="@+id/tokyo_placeholder" 
      design:layout_constraintLeft_toLeftOf="@+id/tokyo_placeholder" 
      design:layout_constraintRight_toRightOf="@+id/tokyo_placeholder" 
      design:layout_constraintTop_toTopOf="@+id/tokyo_placeholder" 
      design:srcCompat="@drawable/icons8_airplane_48" /> 

     <include 
      layout="@layout/app_bar" 
      android:layout_width="0dp" 
      android:layout_height="0dp" 
      tools:ignore="MissingConstraints" 
      tools:layout_editor_absoluteX="0dp" 
      tools:layout_editor_absoluteY="225dp" /> 

     <TableLayout 
      android:layout_width="349dp" 
      android:layout_height="0dp" 
      android:layout_marginTop="8dp" 
      android:orientation="horizontal" 
      design:layout_constraintLeft_toLeftOf="parent" 
      design:layout_constraintRight_toRightOf="parent" 
      design:layout_constraintTop_toBottomOf="@+id/tokyo_placeholder"> 

      <TableRow 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content"> 

       <TextView 
        android:id="@+id/destination_headline" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:fontFamily="sans-serif" 
        android:text="Featured Destinations" 
        android:textAllCaps="true" 
        android:textAppearance="@style/TextAppearance.AppCompat.Headline" 
        android:textSize="14sp" 
        android:textStyle="bold" /> 

      </TableRow> 

      <TableRow 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       tools:layout_editor_absoluteX="8dp" 
       tools:layout_editor_absoluteY="8dp"> 


       <HorizontalScrollView 
        android:id="@+id/horizontal_scroll" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        tools:layout_editor_absoluteX="8dp" 
        tools:layout_editor_absoluteY="8dp"> 

        <LinearLayout 
         android:id="@+id/featured_destinations_gallery" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:orientation="horizontal" > 

        </LinearLayout> 
       </HorizontalScrollView> 
      </TableRow> 

      <TableRow 
       android:layout_width="match_parent" 
       android:layout_height="match_parent"> 

       <TextView 
        android:id="@+id/saved_trips_headline" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:fontFamily="sans-serif" 
        android:text="Saved Trips" 
        android:textAllCaps="true" 
        android:textAppearance="@style/TextAppearance.AppCompat.Headline" 
        android:textSize="14sp" 
        android:textStyle="bold" /> 
      </TableRow> 

     </TableLayout> 

    </android.support.constraint.ConstraintLayout> 

    <FrameLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="bottom"> 

     <View 
      android:layout_width="match_parent" 
      android:layout_height="4dp" 
      android:background="@drawable/shadow" /> 

     <android.support.design.widget.BottomNavigationView 
      android:id="@+id/bottom_nav" 
      elevation="8dp" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_gravity="bottom" 
      design:menu="@menu/bottom_nav_menu" /> 

    </FrameLayout> 
    <!-- TODO: Make page scrollable and fix bottom navigation bar --> 

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

HomeActivity.kt

package projectrc_android.project_rc 

import android.support.v7.app.AppCompatActivity 
import android.os.Bundle 
import android.support.design.widget.BottomNavigationView 
import android.support.v7.widget.Toolbar 
import projectrc_android.project_rc.R.* 


class HomeActivity : AppCompatActivity() { 

    private var current_fragment = id.home_fragment 
    private val fragmentManager = supportFragmentManager 

    override fun onCreate(savedInstanceState: Bundle?) { 
     super.onCreate(savedInstanceState) 
     setContentView(layout.activity_home) 

     val toolbar = findViewById(R.id.app_bar) as Toolbar 
     setSupportActionBar(toolbar) 
     supportActionBar?.setDisplayShowTitleEnabled(false) 

     val bottomNavigationBar = findViewById(id.bottom_nav) as BottomNavigationView // get bottom navigation bar 
     bottomNavigationBar.selectedItemId = R.id.home_button // set the selected menu item to home at the start 
     ShowFragment(R.id.home_button) // load the home fragment item into the activity 
     var selectedMenuItem = bottomNavigationBar.selectedItemId // get currently selected menu item 

     bottomNavigationBar.setOnNavigationItemSelectedListener { item -> 
      if(item.itemId != selectedMenuItem) { // if the user picks a button that's NOT the currently selected one 
       selectedMenuItem = item.itemId // update the selected menu item 
       ShowFragment(item.itemId) 
      } 
      true 
     } 
    } 

    private fun ShowFragment(menuButton: Int) { 
     val transaction = fragmentManager.beginTransaction() 
     when (menuButton) { 
      R.id.home_button -> { 
       transaction.replace(R.id.fragment_container, HomeFragment()) 
       current_fragment = R.id.home_fragment 
      } 
      R.id.inbox_button -> { 
        transaction.replace(R.id.fragment_container, InboxFragment()) 
        current_fragment = R.id.inbox_fragment 
      } 
      R.id.account_button -> { 
       transaction.replace(R.id.fragment_container, AccountFragment()) 
       current_fragment = R.id.account_fragment 
      } 
     } 
     transaction.addToBackStack(null) 
     transaction.commit() 
    } 
} 

HomeFragment.kt

package projectrc_android.project_rc 

import android.support.v4.app.Fragment; 
import android.content.Context 
import android.os.Bundle 
import android.view.LayoutInflater 
import android.view.View 
import android.view.ViewGroup 
import android.widget.LinearLayout 
import android.widget.ImageView 
import com.bumptech.glide.Glide 
import com.bumptech.glide.request.RequestOptions 

class HomeFragment : Fragment() { 
    private val imagePaths = intArrayOf(R.drawable.cuba_placeholder, R.drawable.s_korea_placeholder, 
      R.drawable.greece_placeholder, R.drawable.san_francisco_placeholder, R.drawable.cuba_placeholder, R.drawable.s_korea_placeholder, 
      R.drawable.greece_placeholder, R.drawable.san_francisco_placeholder) 
    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View { 
     var view = inflater!!.inflate(R.layout.home_fragment, container, false) 
     val destinationGallery = view.findViewById(R.id.featured_destinations_gallery) as LinearLayout 
     //set up toolbar in place of action bar (and remove title) 


     //dynamically add images to scrollview 
     addImageToLayout(view.context, destinationGallery, imagePaths, 260, 360) 
     return view 
    } 


    private fun addImageToLayout(context : Context, layout: LinearLayout, imagePaths: IntArray, width: Int, height: Int) { 
     val numberOfImages = imagePaths.size 
     for (index in 0 until numberOfImages) { 
      val imageView = ImageView(context) 
      imageView.id = index 
      imageView.setPadding(2, 2, 2, 2) 
      Glide 
        .with(this) 
        .load(imagePaths[index]) 
        .apply(RequestOptions() 
          .override(width, height) 
          .centerCrop()) 
        .into(imageView) 
      layout.addView(imageView) 

     } 
    } 
} 

Answer 1

android.support.design.widget.BottomNavigationViewはactivity_home.xmlとhome_fragment.xmlの両方に追加されています。あなたは2つのボトムナビゲーションビューを見ています。

リスナーをアクティビティのナビゲーションビューに設定しましたが、リスナーをフラグメントのナビゲーションビューに設定していないため、中央に表示されているものは機能しません。

home_fragment.xmlからナビゲーションビューを削除します。それは問題を解決するはずです。