导航组件透明工具栏

Posted 2023-04-18

【中文标题】导航组件透明工具栏

【英文标题】：NavigationComponents Transparent toolbar

【发布时间】：2020-04-15 01:03:11

【问题描述】：

有没有办法为包含我所有片段的主要活动设置透明工具栏？

我需要在其他片段中显示工具栏，但在主主机活动中，我希望它通过按钮而不是彩色透明

class MainActivity : AppCompatActivity() 

    override fun onCreate(savedInstanceState: Bundle?) 
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val navController = Navigation.findNavController(this, R.id.nav_host_fragment)
        setupActionBar(navController)
    

    private fun setupActionBar(navController: NavController) 
        NavigationUI.setupActionBarWithNavController(this, navController)
    

    override fun onSupportNavigateUp(): Boolean 
        return Navigation.findNavController(this, R.id.nav_host_fragment).navigateUp()
                || super.onSupportNavigateUp()
    

    override fun onCreateOptionsMenu(menu: Menu?): Boolean 
        MenuInflater(this).inflate(R.menu.menu, menu)
        menu!!.findItem(R.id.eventFragment)?.isVisible = false
        return super.onCreateOptionsMenu(menu)
    

从这里我想知道我是否可以让我的工具栏只在这个活动中透明

我已经搜索过，但没有找到关于导航组件的任何信息

【参考方案1】：

处理 Action Bars/Toolbars 的最佳方法是使用 Theme.NoActionBar，然后自己创建一个并将背景颜色设置为透明。

这朵云看起来像这样：

<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:layout_
android:layout_
tools:context=".ui.settings.SettingsActivity">

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_
    android:layout_
    android:theme="@style/AppTheme.AppBarOverlay"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/settingsToolbar"
        android:layout_
        android:layout_
        android:background="@android:color/transparent" />

</com.google.android.material.appbar.AppBarLayout>

<fragment
    android:id="@+id/nav_host_fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_
    android:layout_
    android:layout_margin="10dp"
    app:defaultNavHost="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/appBarLayout"
    app:navGraph="@navigation/settings_navigation" />

【讨论】：

我需要为每个片段提供 AppBarLayout 还是只提供给宿主活动？

正如您在我的示例中看到的，这不是一个普通的片段，这是提供此导航组件中每个片段的 NavHostFragment。更多详细信息：developer.android.com/guide/topics/ui/settings/… 如果您不想使用导航组件，那么是的，您只需在活动中执行此操作即可。这么简短的回答：如果你在你的活动中定义它就足够了。

【参考方案2】：

通过在 MainActivity 上使用 NavController 的 addOnDestinationChangedListener 方法，您可以为依赖于 NavHostFragment 的每个片段设置工具栏颜色。你可以有类似的东西：

navController.addOnDestinationChangedListener  _, destination: NavDestination, _ ->
        when (destination.id) 
            R.id.feedFragment ->  setToolbarColor(R.color.white) 
            R.id.infoFragment ->  setToolbarColor(R.color.transparent)


private fun setToolbarColor(colorId : Int)
    supportActionBar!!.setBackgroundDrawable(ColorDrawable(ContextCompat.getColor(this, colorId)))

我想找到一种更清洁的方法来做到这一点，但这是在尝试了不同的方法后对我有用的第一种方法。

【讨论】：

如果您觉得此答案中的代码解决了问题，您应该edit 它并解释它是如何以及为什么这样做的。特别是因为另一个贡献已经被标记为问题的答案。没有解释的代码对网站的未来用户没有用处。

【参考方案3】：

透明工具栏

 <?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar_root"
        android:layout_
        android:layout_
        android:visibility="visible"
        android:background="@drawable/background_toolbar_translucent">

    <RelativeLayout
            android:layout_
            android:layout_
            android:layout_marginTop="@dimen/_20sdp"
            android:gravity="center_vertical">
        <ImageView
                android:id="@+id/back_toolbar"
                android:layout_
                android:layout_
                android:layout_centerVertical="true"
                android:paddingBottom="@dimen/_10sdp"
                android:paddingRight="@dimen/_10sdp"
                android:paddingTop="@dimen/_10sdp"
                android:visibility="visible"
                android:src="@mipmap/ic_menu"/>

        <TextView
                android:id="@+id/txtToolbarDate"
                android:layout_
                android:layout_
                android:layout_alignParentTop="true"
                android:layout_centerVertical="true"
                android:gravity="center"
                android:layout_centerHorizontal="true"
                android:maxLines="1"
                android:padding="@dimen/_10sdp"
                android:text="August 8"
                android:fontFamily="@font/questrial_regular"
                android:drawableTint="@color/colorBlack"
                android:drawableRight="@drawable/ccp_ic_arrow_drop_down"
                android:textSize="@dimen/_15sdp"
                android:textColor="@color/colorBlack"
                android:visibility="visible"
                android:layout_marginLeft="0dp"
                android:layout_marginStart="0dp"
        />

        <RelativeLayout
                android:id="@+id/notification_view_holder"
                android:layout_
                android:layout_
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="@dimen/_5sdp">
            <ImageView android:id="@+id/addCaseBtnHome"
                    android:layout_
                       android:layout_
                       android:layout_marginRight="@dimen/_7sdp"
                       android:layout_marginTop="@dimen/_6sdp"
                       android:src="@mipmap/ic_add_button_station"/>

        </RelativeLayout>
    </RelativeLayout>
</androidx.appcompat.widget.Toolbar>

使用这个可绘制的 xml 作为背景

    <?xml version="1.0" encoding="utf-8"?>

<shape
        xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient
            android:angle="270"
            android:endColor="@android:color/transparent"
            android:startColor="@color/black_alpha_40"/>
</shape>

【讨论】：

#66000000