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

我想按照材料devise指南中的build议创build一个如下图所示的工具栏:

在这里输入图像说明

我可以通过使用具有相对布局的工具栏来实现这一点:

<RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <Toolbar/> <LinearLayout android:layout_marginTop="-17dp" /> </RelativeLayout> 

我不确定这是否正确。 任何帮助表示赞赏。

感谢加布里埃勒所有的帮助。 这是工作代码:

活动:

 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

这是它的样子:

在这里输入图像说明

几件事要注意:

  • 如果您正在使用卡片标高,那么您需要更改页边距以便您的卡片与主工具栏alignment。
  • 我仍然在主工具栏底部和卡工具栏之间看到1-2像素的边距。 不知道在这种情况下做什么。 现在,我正在手动alignment它。

您可以使用工具栏中的ActionBar ,CardView和卡内的另一个工具栏(独立)来获取它。

对于卡片内的工具栏独立,你可以使用这样的东西:

 <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,如上所述播放边距。