2017-10-21 32 views
0

我目前正在使用我的应用程序的主屏幕,并在用户单击底部导航栏上的按钮时使用片段加载不同的“页面” 。我发现的是,当我加载主屏幕时,底部栏似乎重新加载自己,创建两个栏,一个在页面中间,一个在屏幕底部的适当位置(而中间栏实际上不起作用)。我认为活动中的片段加载是原因,但我不完全确定如何解决它。下面是这个问题的图片以及一些我得到的代码。在家中活动中加载片段时,“Ghost”底部导航栏

image of android app screen highlighting the "ghost" navigation bar 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) 

     } 
    } 
} 
+0

因为即使添加了片段(例如旋转后看到) – EpicPandaForce

+0

即使第一次加载页面? (即使当我没有实际触摸底部导航栏时也会发生,就像主屏幕打开时那样) –

回答

0

您在activity_home.xml以及home_fragment.xml中都添加了android.support.design.widget.BottomNavigationView。所以你看到两个底部导航视图。

你已经为活动的导航视图设置了监听器但是没有设置任何监听器到片段的导航视图,因此中间显示的监听器不起作用。

home_fragment.xml删除导航视图。它应该解决问题。