如何使用appcompat v7创建卡片式工具栏

Question

我希望创建一个像材料设计指南中所提供的以下图片一样的工具栏：

我可以通过在相对布局中使用工具栏来实现这一目标：

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <Toolbar/>

        <LinearLayout android:layout_marginTop="-17dp" />

</RelativeLayout>

我不确定这是正确的方法还是不正确的方法。希望能得到帮助。

- mudit

Answer 1

感谢Gabriele提供的所有帮助。这里是可运行的代码：

Activity:

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_mai);

        Toolbar toolbar = (Toolbar) findViewById(R.id.card_toolbar);
        if (toolbar != null) {
            // inflate your menu
            toolbar.inflateMenu(R.menu.main);
            toolbar.setTitle("Card Toolbar");
            toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem menuItem) {
                    return true;
                }
            });
        }

        Toolbar maintoolbar = (Toolbar) findViewById(R.id.toolbar_main);
        if (maintoolbar != null) {
            // inflate your menu
            maintoolbar.inflateMenu(R.menu.main);
            maintoolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem menuItem) {
                    return true;
                }
            });
        }
    }

}

布局 XML 文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_main"
        android:layout_width="match_parent"
        android:layout_height="@dimen/action_bar_size_x2"
        android:background="@android:color/holo_orange_dark"
        android:minHeight="?attr/actionBarSize" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar_main"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="@dimen/action_bar_size"
        android:orientation="vertical" >

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" >

                <android.support.v7.widget.Toolbar
                    android:id="@+id/card_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/action_bar_size"
                    android:background="@android:color/white" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="@android:color/darker_gray" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"
                    android:text="@string/app_name"
                    android:textSize="24sp" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
    </LinearLayout>

</RelativeLayout>

确保您的活动主题正在扩展 Theme.AppCompat.Light.NoActionBar。

这是它的样子：

需要注意以下几点：

• 如果您正在使用卡片高度，则需要更改顶部边距，以使您的卡片与主工具栏对齐。
• 我仍然看到主工具栏底部和卡片工具栏之间有1-2像素的边距。不确定在这种情况下该怎么做。目前，我正在手动对齐。

- mudit

---

你好。@dimen/action_bar_size_x2和@dimen/action_bar_size的值是多少？因为我的cardview没有覆盖第一个工具栏。 - Sanket

x2 是动作栏大小的两倍。 - mudit

它的渲染效果与截图不同。你确定 android:layout_below="@+id/toolbar_main" 吗？我会将其删除，以使第一个 LinearLayout 从屏幕顶部开始... - tbruyelle

是的，这是设备上的实际截图。 - mudit

我使用这段代码替代手动调整主工具栏高度： final ViewGroup.LayoutParams lp = mainToolbar.getLayoutParams(); lp.height += ((ViewGroup.MarginLayoutParams) card.getLayoutParams()).topMargin; mainToolbar.setLayoutParams(lp); - se.solovyev

Answer 2

你可以使用一个工具栏作为操作栏，使用CardView和另一个独立的工具栏在Card内部获取它。

对于Card中的独立工具栏，你可以像这样使用：

<android.support.v7.widget.CardView>

   <LinearLayout>

        <Toolbar  android:id="@+id/card_toolbar" />

        //......

   </LinearLayout>

</CardView>

然后，您可以扩展菜单以获取图标操作。

 Toolbar toolbar = (Toolbar) mActivity.findViewById(R.id.card_toolbar);
   if (toolbar != null) {
         //inflate your menu    
         toolbar.inflateMenu(R.menu.card_toolbar);
         toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem menuItem) {
                         //.....
                    }
                });
   }

对于用作操作栏的工具栏和主布局，您可以使用：

选项1：

<RelativeLayout>

    <toolbar/>  //Main toolbar 

    <View
        android:background="@color/primary_color"
        android:layout_height="@dimen/subtoolbar_height"/>

    <CardView /> //described above

</RelativeLayout>

选项2：通过调整间距，使用上述描述的 工具栏（作为操作栏）和 CardView 进行扩展。

- Gabriele Mariotti

---

我想要与此相反的效果（不确定确切的相反效果）...我的卡片视图应该悬浮在工具栏上方...工具栏不应该出现在卡片视图中。 - mudit

在屏幕上，您有一个用作操作栏的工具栏，以及另一个独立的工具栏（内嵌于卡片中）。 - Gabriele Mariotti

哦，基本上你是说我必须使用两个工具栏。 - mudit