如何使用 appcompat v7 创建卡片工具栏 [英] How to create a card toolbar using appcompat v7
本文介绍了如何使用 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>
我不确定这是否正确.任何帮助表示赞赏.
I am not sure this is the correct way or not. Any help is appreciated.
推荐答案
感谢 Gabriele 的所有帮助.这是工作代码:
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);
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 像素的边距.不确定在这种情况下该怎么做.目前,我正在手动对齐它.
这篇关于如何使用 appcompat v7 创建卡片工具栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文