折叠工具栏标题与我的菜单图标重叠
Collapsing toolbar title overlaps with my menu icons
我在当前正在处理的项目中使用折叠工具栏。我正在从我的代码中设置折叠工具栏的标题,但问题是如果标题太大,它就会与工具栏中的菜单图标重叠。那么我该如何解决这个问题呢?
标题与菜单图标重叠:
我的xml代码:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="205dp"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/agent_profile_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="87dp"
app:expandedTitleMarginStart="130dp"
app:expandedTitleTextAppearance="@style/expandedappbar"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="170dp"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@drawable/back" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="#66000000">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dp"
android:layout_marginLeft="130dp"
android:orientation="vertical">
<TextView
android:id="@+id/lbl_agent_profile_position"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/lbl_agent_profile_Name"
android:layout_marginBottom="5dp"
android:ellipsize="end"
android:maxLines="1"
android:text="Real Estate Professional at Exit Alliance Realty"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#fff"
android:textSize="12sp"
android:typeface="sans" />
<TextView
android:id="@+id/lbl_agent_profile_ibaaxid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#33ffffff"
android:paddingBottom="1dp"
android:paddingEnd="3dp"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:paddingStart="3dp"
android:paddingTop="1dp"
android:text="iBaax ID : 123456789"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#fff"
android:textSize="12sp"
android:typeface="sans" />
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:id="@+id/lnr_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:background="#fff"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<ImageView
android:id="@+id/img_agent_profile_image"
android:layout_width="110dp"
android:layout_height="110dp"
android:scaleType="centerCrop"
android:src="@drawable/no_profile" />
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="22dp"
android:layout_below="@+id/backdrop"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_toRightOf="@+id/lnr_img"
android:background="#4d6088"
android:paddingEnd="3dp"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:paddingStart="3dp"
android:text="Write Review"
android:textAllCaps="false"
android:textSize="12sp" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
我的 activity 的 OnCreate 方法中的代码:
setContentView(R.layout.activity_agent_profile2);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//getSupportActionBar().setTitle("Name");
agent = (Agent) getIntent().getSerializableExtra("Agent");
CollapsingToolbarLayout collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.agent_profile_toolbar);
collapsingToolbar.setTitle(agent.name);
这不起作用?
getSupportActionBar().setTitle("LongTitle");
我以某种方式修复了它。我不明白为什么它会起作用。我必须为具有不同文本大小的 expandedTitle 和 collapseTitle 提供单独的样式。如果它们是相同的 textSizes 那么它就可以工作。下面是我的风格,
<style name="expandedappbar" parent="@android:style/TextAppearance.Medium">
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
<item name="android:ellipsize">end</item>
<item name="android:maxLines">1</item>
<item name="android:width">100dp</item>
</style>
<style name="collapseappbar" parent="@android:style/TextAppearance.Medium">
<item name="android:textSize">18sp</item>
<item name="android:textStyle">bold</item>
</style>
和布局:
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/agent_profile_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="87dp"
app:expandedTitleMarginStart="130dp"
app:expandedTitleTextAppearance="@style/expandedappbar"
app:collapsedTitleTextAppearance="@style/collapseappbar"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
并截图证明有效,
我的解决方案是收听 CollapsingToolbarLayout
的崩溃进度。当它完全崩溃时,我禁用 AppBarLayout
的标题并将其设置为 activity:
@Override
public void onAppBarOffsetChanged(AppBarLayout appBarLayout, int offset) {
boolean collapsed = offset == appBarLayout.getTotalScrollRange();
collapsingToolbarLayout.setTitleEnabled(!collapsed);
getActivity().setTitle(collapsed ? title : null);
}
请为菜单项添加选项菜单,不会出现重叠问题
@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.option_menu, menu);
return true;
}
并在activity中设置actionBar
onCreate
:
setSupportActionBar(toolbar)
option_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/bt_share"
android:icon="@drawable/ic_send"
android:title="@string/share"
app:showAsAction="always" />
<item
android:id="@+id/bt_suggest_edit"
android:icon="@drawable/ic_menu"
android:title="@string/suggest_an_edit"
app:showAsAction="always" />
</menu>
折叠的工具栏屏幕截图
展开的工具栏屏幕截图
我在当前正在处理的项目中使用折叠工具栏。我正在从我的代码中设置折叠工具栏的标题,但问题是如果标题太大,它就会与工具栏中的菜单图标重叠。那么我该如何解决这个问题呢?
标题与菜单图标重叠:
我的xml代码:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="205dp"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/agent_profile_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="87dp"
app:expandedTitleMarginStart="130dp"
app:expandedTitleTextAppearance="@style/expandedappbar"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="170dp"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@drawable/back" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="#66000000">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dp"
android:layout_marginLeft="130dp"
android:orientation="vertical">
<TextView
android:id="@+id/lbl_agent_profile_position"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/lbl_agent_profile_Name"
android:layout_marginBottom="5dp"
android:ellipsize="end"
android:maxLines="1"
android:text="Real Estate Professional at Exit Alliance Realty"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#fff"
android:textSize="12sp"
android:typeface="sans" />
<TextView
android:id="@+id/lbl_agent_profile_ibaaxid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#33ffffff"
android:paddingBottom="1dp"
android:paddingEnd="3dp"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:paddingStart="3dp"
android:paddingTop="1dp"
android:text="iBaax ID : 123456789"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#fff"
android:textSize="12sp"
android:typeface="sans" />
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:id="@+id/lnr_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:background="#fff"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<ImageView
android:id="@+id/img_agent_profile_image"
android:layout_width="110dp"
android:layout_height="110dp"
android:scaleType="centerCrop"
android:src="@drawable/no_profile" />
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="22dp"
android:layout_below="@+id/backdrop"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_toRightOf="@+id/lnr_img"
android:background="#4d6088"
android:paddingEnd="3dp"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:paddingStart="3dp"
android:text="Write Review"
android:textAllCaps="false"
android:textSize="12sp" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
我的 activity 的 OnCreate 方法中的代码:
setContentView(R.layout.activity_agent_profile2);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//getSupportActionBar().setTitle("Name");
agent = (Agent) getIntent().getSerializableExtra("Agent");
CollapsingToolbarLayout collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.agent_profile_toolbar);
collapsingToolbar.setTitle(agent.name);
这不起作用?
getSupportActionBar().setTitle("LongTitle");
我以某种方式修复了它。我不明白为什么它会起作用。我必须为具有不同文本大小的 expandedTitle 和 collapseTitle 提供单独的样式。如果它们是相同的 textSizes 那么它就可以工作。下面是我的风格,
<style name="expandedappbar" parent="@android:style/TextAppearance.Medium">
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
<item name="android:ellipsize">end</item>
<item name="android:maxLines">1</item>
<item name="android:width">100dp</item>
</style>
<style name="collapseappbar" parent="@android:style/TextAppearance.Medium">
<item name="android:textSize">18sp</item>
<item name="android:textStyle">bold</item>
</style>
和布局:
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/agent_profile_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="87dp"
app:expandedTitleMarginStart="130dp"
app:expandedTitleTextAppearance="@style/expandedappbar"
app:collapsedTitleTextAppearance="@style/collapseappbar"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
并截图证明有效,
我的解决方案是收听 CollapsingToolbarLayout
的崩溃进度。当它完全崩溃时,我禁用 AppBarLayout
的标题并将其设置为 activity:
@Override
public void onAppBarOffsetChanged(AppBarLayout appBarLayout, int offset) {
boolean collapsed = offset == appBarLayout.getTotalScrollRange();
collapsingToolbarLayout.setTitleEnabled(!collapsed);
getActivity().setTitle(collapsed ? title : null);
}
请为菜单项添加选项菜单,不会出现重叠问题
@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.option_menu, menu);
return true;
}
并在activity中设置actionBar
onCreate
:
setSupportActionBar(toolbar)
option_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/bt_share"
android:icon="@drawable/ic_send"
android:title="@string/share"
app:showAsAction="always" />
<item
android:id="@+id/bt_suggest_edit"
android:icon="@drawable/ic_menu"
android:title="@string/suggest_an_edit"
app:showAsAction="always" />
</menu>
折叠的工具栏屏幕截图
展开的工具栏屏幕截图