Подтвердить что ты не робот

Как создать панель инструментов с помощью приложения appcompat v7

Я хочу создать панель инструментов, такую ​​как следующее изображение, как это предлагается в руководстве по разработке материалов:

enter image description here

Я могу добиться этого, используя панель инструментов с относительным расположением:

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

        <Toolbar/>

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

</RelativeLayout>

Я не уверен, что это правильный путь или нет. Любая помощь приветствуется.

4b9b3361

Ответ 1

Спасибо Габриэле за помощь. Вот рабочий код:

Активность:

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 пикселя между нижней частью основной панели инструментов и панелью инструментов. Не уверен, что делать в этом случае. На данный момент я выравниваю его вручную.

Ответ 2

Вы можете получить его с помощью панели инструментов как 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>

Вариант 2: расширенный toolbar (как панель действий) и CardView, как описано выше, с полями.