web-dev-qa-db-ja.com

appcompat v7を使用してカードツールバーを作成する方法

マテリアルデザインガイドラインで提案されている次の画像のようなツールバーを作成します。

enter image description here

相対レイアウトのツールバーを使用してこれを実現できます：

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

        <Toolbar/>

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

</RelativeLayout>

これが正しい方法かどうかはわかりません。どんな助けでもありがたいです。

androidmaterial-designandroid-support-libraryandroid-appcompatandroid-cardview
20
mudit

すべての助けをありがとうガブリエレ。ここに作業コードがあります：

活動：

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。

これは次のようになります。

enter image description here

注意事項が少ない：

  • カードの高さを使用している場合は、カードがメインツールバーに揃うようにマージン上部を変更する必要があります。
  • メインツールバーの下部とカードツールバーの間に1〜2ピクセルのマージンがまだ表示されます。この場合、どうすればよいかわからない。今のところ、手動​​で調整しています。
21
mudit

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) {
                         //.....
                    }
                });
   }

アクションバーとして使用されるツールバーと使用できるメインレイアウトの場合：

option1：

<RelativeLayout>

    <toolbar/>  //Main toolbar 

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

    <CardView /> //described above

</RelativeLayout>

Option2：拡張された toolbar （アクションバーとして）と、上記のマージンで遊んでいるCardView。

11
Gabriele Mariotti