具有EditText材质设计的工具栏 [英] Toolbar with EditText material design

问题描述

我正在尝试使用其中的EditText制作工具栏:

I'm trying to make Toolbar with EditText within it like this:

现在我可以做一些类似的事情，但只能使用静态标题，有什么想法可以开始吗?

Right now I can do some thing similar but only with static title, Any ideas to get started?

推荐答案

我这样做如下:

顶部和底部的第二个工具栏有两个EditText，Toolbar为AppBar(又名ActionBar).如果要折叠它，第一个工具栏位于CollapsingToolbarLayout下.

There is Toolbar as AppBar (aka ActionBar) at the top and second toolbar below it with two EditText. First Toolbar is under CollapsingToolbarLayout in case you want it to be collapsed.

Java:

public class MainActivity extends AppCompatActivity {
    Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.toolbar_1);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setTitle("");
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

activity_main.xml:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"      >

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_tool_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:elevation="0dp"
            app:expandedTitleTextAppearance="@style/Widget.AppCompat.ActionBar.TabText"
            app:layout_scrollFlags="scroll|enterAlways"
            app:statusBarScrim="?attr/colorAccent">


            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar_1"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/primary"
                android:minHeight="?attr/actionBarSize"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:layout_collapseMode="none"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/primary"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_collapseMode="none"
            app:elevation="0dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:paddingLeft="32dp"
                android:paddingTop="16dp"
                android:paddingBottom="56dp"
                android:paddingRight="16dp">

                <android.support.design.widget.TextInputLayout
                    android:id="@+id/lNameLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/fNameLayout"
                    android:layout_marginTop="10dp">

                    <EditText
                        android:id="@+id/ltitle"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:ems="10"
                        android:hint="Title"/>
                </android.support.design.widget.TextInputLayout>

                <android.support.design.widget.TextInputLayout
                    android:id="@+id/lNameLayout2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/fNameLayout"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="10dp">

                    <EditText
                        android:id="@+id/ldesc"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:ems="10"
                        android:hint="Description"/>
                </android.support.design.widget.TextInputLayout>


            </LinearLayout>
        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>


</android.support.design.widget.CoordinatorLayout>

Colors:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#303F9F</color>
    <color name="primary_dark">#3F51B5</color>
    <color name="accent">#00E5FF</color>

</resources>

和styles.xml:

<resources>
    <style name="AppTheme" parent="AppTheme.Base"/>
    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/accent</item>
        <item name="colorControlNormal">#FFF</item>
    </style>    
</resources>

将android:theme="@style/AppTheme"用于清单和android:theme="@style/AppTheme.Base" for MainActivity`中的应用.

Use android:theme="@style/AppTheme" for application in manifest and android:theme="@style/AppTheme.Base" forMainActivity`.

这篇关于具有EditText材质设计的工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！