片段工具栏中的向上导航
Up navigation in fragment's toolbar
我正在尝试在我的应用程序中使用向上导航。向上导航按钮显示,但有时有效,有时无效。可以在此处查看该应用 XYZReader on GitHub
期望的行为
主要 activity 显示卡片网格。当您选择卡片时,详细信息 activity 会显示文章。详情 activity 使用片段和查看寻呼机,以便可以滑动 right/left 到 next/previous 文章。
在片段的(折叠)工具栏中显示 up/back 导航按钮, 当我单击该按钮时我想返回到主 activity。
实际行为(向上导航不起作用)
我在主activity的网格中选择一篇文章,详情activity显示相应的片段
我点击向上导航按钮没有任何反应。
我希望向上导航将我带回主界面 activity 以查看文章的网格列表。
实际行为(向上导航有效)
我在主activity的网格中选择一篇文章,详情activity显示相应的片段
我向右滑动查看下一篇文章。然后我单击向上导航按钮并返回到主 activity 以查看文章的网格列表。
相关代码片段
activity_article_detail.xml
是host/detailactivity的布局。它仅包含一个视图寻呼机视图:
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
fragment_article_detail.xml
是片段的布局。它包含折叠工具栏(以及嵌套滚动视图和浮动操作按钮):
<android.support.design.widget.CoordinatorLayout
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.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginBottom="@dimen/toolbar_title_bottom_margin"
app:expandedTitleMarginStart="@dimen/detail_inner_horiz_margin"
app:expandedTitleTextAppearance="@style/Toolbar_Title"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:id="@+id/photo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="@string/photo_of_the_article"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.1"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="@+id/scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<com.example.xyzreader.ui.MaxWidthLinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:background="@android:color/white"
android:maxWidth="@dimen/detail_card_max_width"
android:orientation="vertical">
<LinearLayout
android:id="@+id/linear_layout_title_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:paddingBottom="@dimen/detail_metabar_vert_padding"
android:paddingLeft="@dimen/detail_inner_horiz_margin"
android:paddingRight="@dimen/detail_inner_horiz_margin"
android:paddingTop="@dimen/detail_metabar_vert_padding">
<TextView
android:id="@+id/article_byline"
style="?android:attr/textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/byline_text_color"/>
</LinearLayout>
<WebView
android:id="@+id/article_body"
style="?android:attr/textAppearanceMedium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/detail_inner_horiz_margin"
android:layout_marginRight="@dimen/detail_inner_horiz_margin"
android:lineSpacingMultiplier="@fraction/detail_body_line_spacing_multiplier"
android:paddingBottom="@dimen/detail_body_bottom_margin"
android:paddingTop="@dimen/body_padding_top"
android:textColor="?android:attr/textColorPrimary"
android:textColorLink="?attr/colorAccent"
android:textSize="@dimen/detail_body_text_size"/>
</com.example.xyzreader.ui.MaxWidthLinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:contentDescription="@string/action_share"
app:fabSize="normal"
app:srcCompat="@drawable/ic_share_white_24dp"/>
</android.support.design.widget.CoordinatorLayout>
在片段的 onCreateView
中,我尝试编写功能:
mCollapsingToolbarLayout = mRootView.findViewById(R.id.collapsing_toolbar_container);
mCollapsingToolbarLayout.setExpandedTitleTypeface(Typeface.create(mCollapsingToolbarLayout.getExpandedTitleTypeface(), Typeface.BOLD));
mCollapsingToolbarLayout.setCollapsedTitleTypeface(Typeface.create(mCollapsingToolbarLayout.getExpandedTitleTypeface(), Typeface.BOLD));
mCollapsingToolbarLayout.setCollapsedTitleTextColor(getResources().getColor(android.R.color.white));
AppCompatActivity appCompatActivity = ((AppCompatActivity) getActivity());
Toolbar toolbar = mRootView.findViewById(R.id.toolbar);
toolbar.setNavigationIcon(R.drawable.ic_arrow_back_white_24dp);
appCompatActivity.setSupportActionBar(toolbar);
ActionBar actionBar = appCompatActivity.getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true); //<-- DISPLAYS THE HOME BUTTON IN THE COLLAPSING TOOLBAR
actionBar.setDisplayShowTitleEnabled(false);
我试过的
- 我尝试将工具栏移动到主机 activity 的布局中。我 运行 遇到问题并放弃了这个。无论如何我都不想这样做,因为它看起来像是一个有缺陷的设计。在我看来,每个片段都有一个工具栏。
我试过在工具栏上设置导航图标和监听器。结果是一样的。有时有效,有时无效。
toolbar.setNavigationIcon(nav_icon);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.d(TAG, "Up navigation button pressed.");
}
});
有人建议我尝试向片段中添加代码片段。这也不起作用。
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
Intent intent = NavUtils.getParentActivityIntent(getActivity());
intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP | Intent.FLAG_ACTIVITY_SINGLE_TOP);
NavUtils.navigateUpTo(getActivity(), intent);
return true;
}
return super.onOptionsItemSelected(item);
}
问题是我试图为每个片段设置主机的支持操作栏activity,这是错误的(我不敢相信我真的这样做了)。
我只是使用工具栏,设置导航图标和相应的侦听器:
Toolbar toolbar = mRootView.findViewById(R.id.toolbar);
toolbar.setNavigationIcon(R.drawable.ic_arrow_back_white_24dp);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
getActivity().onBackPressed();
}
});
binding.toolbar.setNavigationOnClickListener {
activity!!.onBackPressed()
}
val navHostFragment =
activity?.supportFragmentManager?.findFragmentById(R.id.main_nav_host_fragment) as NavHostFragment
val navController = navHostFragment.navController
val appBarConfiguration = AppBarConfiguration(
topLevelDestinationIds = setOf()
)
binding.toolbar.setupWithNavController(navController, appBarConfiguration)
我正在尝试在我的应用程序中使用向上导航。向上导航按钮显示,但有时有效,有时无效。可以在此处查看该应用 XYZReader on GitHub
期望的行为
主要 activity 显示卡片网格。当您选择卡片时,详细信息 activity 会显示文章。详情 activity 使用片段和查看寻呼机,以便可以滑动 right/left 到 next/previous 文章。
在片段的(折叠)工具栏中显示 up/back 导航按钮, 当我单击该按钮时我想返回到主 activity。
实际行为(向上导航不起作用)
我在主activity的网格中选择一篇文章,详情activity显示相应的片段
我点击向上导航按钮没有任何反应。
我希望向上导航将我带回主界面 activity 以查看文章的网格列表。
实际行为(向上导航有效)
我在主activity的网格中选择一篇文章,详情activity显示相应的片段
我向右滑动查看下一篇文章。然后我单击向上导航按钮并返回到主 activity 以查看文章的网格列表。
相关代码片段
activity_article_detail.xml
是host/detailactivity的布局。它仅包含一个视图寻呼机视图:
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
fragment_article_detail.xml
是片段的布局。它包含折叠工具栏(以及嵌套滚动视图和浮动操作按钮):
<android.support.design.widget.CoordinatorLayout
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.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginBottom="@dimen/toolbar_title_bottom_margin"
app:expandedTitleMarginStart="@dimen/detail_inner_horiz_margin"
app:expandedTitleTextAppearance="@style/Toolbar_Title"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:id="@+id/photo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="@string/photo_of_the_article"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.1"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="@+id/scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<com.example.xyzreader.ui.MaxWidthLinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:background="@android:color/white"
android:maxWidth="@dimen/detail_card_max_width"
android:orientation="vertical">
<LinearLayout
android:id="@+id/linear_layout_title_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:paddingBottom="@dimen/detail_metabar_vert_padding"
android:paddingLeft="@dimen/detail_inner_horiz_margin"
android:paddingRight="@dimen/detail_inner_horiz_margin"
android:paddingTop="@dimen/detail_metabar_vert_padding">
<TextView
android:id="@+id/article_byline"
style="?android:attr/textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/byline_text_color"/>
</LinearLayout>
<WebView
android:id="@+id/article_body"
style="?android:attr/textAppearanceMedium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/detail_inner_horiz_margin"
android:layout_marginRight="@dimen/detail_inner_horiz_margin"
android:lineSpacingMultiplier="@fraction/detail_body_line_spacing_multiplier"
android:paddingBottom="@dimen/detail_body_bottom_margin"
android:paddingTop="@dimen/body_padding_top"
android:textColor="?android:attr/textColorPrimary"
android:textColorLink="?attr/colorAccent"
android:textSize="@dimen/detail_body_text_size"/>
</com.example.xyzreader.ui.MaxWidthLinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:contentDescription="@string/action_share"
app:fabSize="normal"
app:srcCompat="@drawable/ic_share_white_24dp"/>
</android.support.design.widget.CoordinatorLayout>
在片段的 onCreateView
中,我尝试编写功能:
mCollapsingToolbarLayout = mRootView.findViewById(R.id.collapsing_toolbar_container);
mCollapsingToolbarLayout.setExpandedTitleTypeface(Typeface.create(mCollapsingToolbarLayout.getExpandedTitleTypeface(), Typeface.BOLD));
mCollapsingToolbarLayout.setCollapsedTitleTypeface(Typeface.create(mCollapsingToolbarLayout.getExpandedTitleTypeface(), Typeface.BOLD));
mCollapsingToolbarLayout.setCollapsedTitleTextColor(getResources().getColor(android.R.color.white));
AppCompatActivity appCompatActivity = ((AppCompatActivity) getActivity());
Toolbar toolbar = mRootView.findViewById(R.id.toolbar);
toolbar.setNavigationIcon(R.drawable.ic_arrow_back_white_24dp);
appCompatActivity.setSupportActionBar(toolbar);
ActionBar actionBar = appCompatActivity.getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true); //<-- DISPLAYS THE HOME BUTTON IN THE COLLAPSING TOOLBAR
actionBar.setDisplayShowTitleEnabled(false);
我试过的
- 我尝试将工具栏移动到主机 activity 的布局中。我 运行 遇到问题并放弃了这个。无论如何我都不想这样做,因为它看起来像是一个有缺陷的设计。在我看来,每个片段都有一个工具栏。
我试过在工具栏上设置导航图标和监听器。结果是一样的。有时有效,有时无效。
toolbar.setNavigationIcon(nav_icon); toolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Log.d(TAG, "Up navigation button pressed."); } });
有人建议我尝试向片段中添加代码片段。这也不起作用。
public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home: Intent intent = NavUtils.getParentActivityIntent(getActivity()); intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP | Intent.FLAG_ACTIVITY_SINGLE_TOP); NavUtils.navigateUpTo(getActivity(), intent); return true; } return super.onOptionsItemSelected(item); }
问题是我试图为每个片段设置主机的支持操作栏activity,这是错误的(我不敢相信我真的这样做了)。
我只是使用工具栏,设置导航图标和相应的侦听器:
Toolbar toolbar = mRootView.findViewById(R.id.toolbar);
toolbar.setNavigationIcon(R.drawable.ic_arrow_back_white_24dp);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
getActivity().onBackPressed();
}
});
binding.toolbar.setNavigationOnClickListener {
activity!!.onBackPressed()
}
val navHostFragment =
activity?.supportFragmentManager?.findFragmentById(R.id.main_nav_host_fragment) as NavHostFragment
val navController = navHostFragment.navController
val appBarConfiguration = AppBarConfiguration(
topLevelDestinationIds = setOf()
)
binding.toolbar.setupWithNavController(navController, appBarConfiguration)