如何使用appcompat V7创建卡的工具栏 [英] How to create a card toolbar using appcompat v7

问题描述

我想创建像下面的图片工具栏所建议的材料设计方针：

I want to create a toolbar like the following image as proposed in the material design guidelines:

我可以通过使用工具栏与相对布局实现这一点：

I can achieve this via using the toolbar with an relative layout:

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

        <Toolbar/>

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

</RelativeLayout>

我不知道这是不是正确的方法或。任何帮助是AP preciated。

I am not sure this is the correct way or not. Any help is appreciated.

推荐答案

加布里埃莱感谢所有帮助。这里正code：

Thanks Gabriele for all the help. Here is working code:

活动：

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);
        toolbar.setTitle("Card Toolbar");
        if (toolbar != null) {
            // inflate your menu
            toolbar.inflateMenu(R.menu.main);
            toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem menuItem) {
                    return true;
                }
            });
        }

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

}

布局的XML文件：

Layout XML File:

<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像素的边距。不知道该怎么办在这种情况下。现在，我是手动对齐。

这篇关于如何使用appcompat V7创建卡的工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！