【问题标题】:Collapsing toolbar title overlaps with my menu icons折叠工具栏标题与我的菜单图标重叠
【发布时间】:2016-08-11 10:07:16
【问题描述】:

我在当前正在处理的项目中使用折叠工具栏。我正在从我的代码中设置折叠工具栏的标题,但问题是如果标题太大,那么它会与工具栏中的菜单图标重叠。那么我该如何解决这个问题呢?

标题重叠与菜单图标:

我的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>

以及我活动的 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);

【问题讨论】:

  • 为了让椭圆大小起作用,请尝试为标题文本视图提供固定宽度
  • 我的标题没有文本视图。我直接从我的代码中使用 collapsetoolbar.setTitle(""); 设置它

标签: android android-layout material-design android-collapsingtoolbarlayout


【解决方案1】:

我以某种方式修复了它。我不知道为什么它会起作用。我不得不为expandedTitle 和collapseTitle 提供不同的textSizes 样式。如果它们是相同的 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">

并截图证明它有效,

【讨论】:

  • 对我不起作用。支持库版本为25.2.0
【解决方案2】:

请为菜单项添加选项菜单,不会出现重叠问题

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.option_menu, menu);
    return true; 
}

并在活动onCreate中设置actionBar

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>

折叠的工具栏截图

扩展的工具栏截图

【讨论】:

    【解决方案3】:

    这不起作用?

    getSupportActionBar().setTitle("LongTitle");

    【讨论】:

    • 不,它没有。标题完全消失了。
    • 你需要在 CollapsingAppBar 上设置标题,而不是在 Toolbar 上。
    【解决方案4】:

    我的解决方案是收听CollapsingToolbarLayout 的崩溃进度。当它完全崩溃时,我禁用 AppBarLayout 的标题并将其设置为活动:

    @Override
    public void onAppBarOffsetChanged(AppBarLayout appBarLayout, int offset) {
        boolean collapsed = offset == appBarLayout.getTotalScrollRange();
        collapsingToolbarLayout.setTitleEnabled(!collapsed);
        getActivity().setTitle(collapsed ? title : null);
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-12-28
      • 1970-01-01
      • 2018-07-05
      • 2023-03-09
      • 2015-09-30
      • 1970-01-01
      相关资源
      最近更新 更多