工具栏按钮片段重叠

时间:2019-09-24 07:24:33

标签: android kotlin fragment android-toolbar

我正在使用导航抽屉模板。我还在工具栏中添加按钮。当单击该按钮时,图库片段应打开。实际上它正在打开,但是,当我也单击抽屉按钮时,它们是重叠的。您对此有任何解决方案吗?

这是我的主要活动:

package com.example.shoptest
class MainActivity : AppCompatActivity() {
    var manager = supportFragmentManager
    private lateinit var appBarConfiguration: AppBarConfiguration

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val toolbar: Toolbar = findViewById(R.id.toolbar)
        setSupportActionBar(toolbar)
        toolbar.setTitle("selamalr")


        val fab: FloatingActionButton = findViewById(R.id.fab)
        fab.setOnClickListener { view ->
            Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show()
        }
        val drawerLayout: DrawerLayout = findViewById(R.id.drawer_layout)
        val navView: NavigationView = findViewById(R.id.nav_view)
        val navController = findNavController(R.id.nav_host_fragment)
        // Passing each menu ID as a set of Ids because each
        // menu should be considered as top level destinations.
        appBarConfiguration = AppBarConfiguration(
            setOf(
                R.id.nav_home, R.id.nav_gallery, R.id.nav_slideshow,
                R.id.nav_tools, R.id.nav_share, R.id.nav_send
            ), drawerLayout
        )
        setupActionBarWithNavController(navController, appBarConfiguration)
        navView.setupWithNavController(navController)
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {

        // Inflate the menu; this adds items to the action bar if it is present.
        menuInflater.inflate(R.menu.main, menu)
        return true
    }


    override fun onSupportNavigateUp(): Boolean {
        val navController = findNavController(R.id.nav_host_fragment)

        return navController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp()
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {


        when (item.itemId) {

            R.id.shop -> {

                var galleryFragment = GalleryFragment()
                var transaction = manager.beginTransaction()
                transaction.replace(R.id.container, galleryFragment, "frag")
                transaction.addToBackStack("frag")


                transaction.commit()
            }
        }

        return super.onOptionsItemSelected(item)
    }


}

这是内容main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/app_bar_main">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/container">

    </FrameLayout>

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/mobile_navigation">
 </fragment>
</RelativeLayout>

这是我的屏幕:

enter image description here

您对此有任何解决方案吗?

3 个答案:

答案 0 :(得分:1)

您的代码应如下所示->

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/app_bar_main">

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/mobile_navigation"/>

</RelativeLayout>

由于使用导航组件时,只需要将片段视图放入主视图组即可。另一个视图将通过重叠另一个视图而产生扭曲。因此,只需将其删除。否则,如果您愿意,也可以尝试--

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/app_bar_main">

        <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

 </RelativeLayout>

如果要将片段视图转移到其他布局文件,可以使用上面的代码。然后,您可以通过调用片段转换功能来替换片段或在其上添加片段。使用适合您项目的任何内容。

答案 1 :(得分:1)

好的。主要问题在于逻辑部分,需要进行一些UI更改。 首先,进入您的content_main.xml文件,并在其中进行更改。

<?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/main_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/app_bar_main">

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/mobile_navigation" />

</androidx.constraintlayout.widget.ConstraintLayout>

然后进入您的activity_main.xml文件并添加

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.google.android.material.navigation.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"
        app:menu="@menu/activity_main_drawer" />

</androidx.drawerlayout.widget.DrawerLayout>

然后最后,主要对您的MainActivity.kt文件进行更改,如下所示->

package com.example.parcaburada

import android.os.Bundle
import com.google.android.material.floatingactionbutton.FloatingActionButton
import com.google.android.material.snackbar.Snackbar
import androidx.drawerlayout.widget.DrawerLayout
import com.google.android.material.navigation.NavigationView
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.Toolbar
import android.view.Menu
import android.view.MenuItem
import androidx.core.view.GravityCompat
import androidx.navigation.NavController
import androidx.navigation.Navigation
import androidx.navigation.ui.*

class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {

    private lateinit var mToolbar: Toolbar
    private lateinit var mDrawerLayout: DrawerLayout
    private lateinit var mNavController: NavController
    private lateinit var mNavigationView: NavigationView
    private lateinit var mFloatingActionButton: FloatingActionButton

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

        setUpNavigation()
    }

    private fun setUpNavigation() {
        //Toolbar
        mToolbar = findViewById(R.id.toolbar)
        setSupportActionBar(mToolbar)

        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setDisplayShowHomeEnabled(true)
        //Toolbar

        //Navigation Drawer
        mDrawerLayout = findViewById(R.id.drawer_layout)
        mNavigationView = findViewById(R.id.nav_view)
        mNavController = Navigation.findNavController(this@MainActivity, R.id.nav_host_fragment)

        NavigationUI.setupActionBarWithNavController(this@MainActivity, mNavController, mDrawerLayout)
        NavigationUI.setupWithNavController(mNavigationView, mNavController)
        mNavigationView.setNavigationItemSelectedListener(this)
        //Navigation Drawer

        //Floating Action button
        mFloatingActionButton = findViewById(R.id.fab)
        mFloatingActionButton.setOnClickListener { view ->
            Snackbar.make(view, getString(R.string.text_fab_action), Snackbar.LENGTH_LONG)
                .setAction(getString(R.string.text_action), null).show()
        }
        //Floating Action button
    }

    //Transition between fragments controller
    override fun onSupportNavigateUp(): Boolean {
        return NavigationUI.navigateUp(mNavController, mDrawerLayout)
    }

    //Navigation Drawer Controller
    override fun onNavigationItemSelected(menuItem: MenuItem): Boolean {
        menuItem.isChecked = true
        mDrawerLayout.closeDrawers()

        when (menuItem.itemId) {
            R.id.nav_home -> navigateToFragment(R.id.nav_home)
            R.id.nav_gallery -> navigateToFragment(R.id.nav_gallery)
            R.id.nav_slideshow -> navigateToFragment(R.id.nav_slideshow)
            R.id.nav_tools -> navigateToFragment(R.id.nav_tools)
            R.id.nav_share -> navigateToFragment(R.id.nav_share)
            R.id.nav_send -> navigateToFragment(R.id.nav_send)
        }
        return true
    }

    //Back button
    override fun onBackPressed() {
        if (mDrawerLayout.isDrawerOpen(GravityCompat.START)) {
            mDrawerLayout.closeDrawer(GravityCompat.END)
        } else {
            super.onBackPressed()
        }
    }

    //Toolbar icon controller
    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        // Inflate the menu; this adds items to the action bar if it is present.
        menuInflater.inflate(R.menu.main, menu)
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when (item.itemId) {
            R.id.shop -> navigateToFragment(R.id.nav_gallery)
        }
        return super.onOptionsItemSelected(item)
    }
    //Toolbar icon controller

    //Custom method to navigate to fragments
    private fun navigateToFragment(fragmentName: Int): Boolean {
        mNavController.navigate(fragmentName)
        return true
    }
}

完成。一切都会顺利进行。谢谢。

答案 2 :(得分:0)

您的FrameLayout中有两个视图FragmentRelativeLayout。所有碎片交易仅使用一个容器<FrameLayout>

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/container">

</FrameLayout>
相关问题