2015-09-06 126 views
14

我試圖在它使工具欄與EditText上是這樣的:工具欄用的EditText材料設計

Toolbar with EditText

現在我可以做類似的但只有靜態標題一些事情,任何想法上手?

+0

你就不能放EditTexts在AppBarLayout? https://developer.android.com/reference/android/support/design/widget/AppBarLayout.html – Kenneth

+0

是的,但我希望EditText變成普通的TextView,並在用戶滾動時平滑地變小。 – MoHaKa

+0

使用appbarlayout和可摺疊工具欄 – 3xplore

回答

0

我認爲您需要創建自己的toolbarlyout並將其設置爲活動工具欄。 試試這個:

http://javatechig.com/android/actionbar-with-custom-view-example-in-android 你只需要創建你的組件。 我希望這將是對你有幫助;)

+0

用戶在上下滾動時是否有平滑滾動的想法? – MoHaKa

+0

我希望EditText能夠變成普通的TextView,並在用戶向上滾動時平滑地變小。 – MoHaKa

+0

爲什麼不直接使用位於相同位置的TextView切換可視性,並在滾動時爲其設置動畫效果? –

21

我h AVE這樣做象下面這樣:

enter image description here

ToolbarAppBar低於它的頂部和第二個工具欄有兩個EditText(又名ActionBar)。第一個工具欄在CollapsingToolbarLayout之下,以防您想要摺疊。

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",在MainActivity中使用android:theme="@style/AppTheme.Base" for

+0

謝謝你試圖幫助我,我只想問如果用戶滾動會發生什麼? – MoHaKa

+0

İt取決於你,使用'scrollFlags'來控制它。您可以修復兩個選項卡或一個選項卡,或者可以在滾動時隱藏它們。 –

+2

但是當您滾動時,標題不會成爲上述實現中的工具欄標題 –

0

您可以使用與工具欄顏色相同的線性佈局。工具欄屬性android:elevation需要爲0px

活性(XML)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:orientation="vertical" 
               android:layout_width="match_parent" 
               android:layout_height="match_parent"> 

    <include 
     layout="@layout/toolbar_task" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
    ></include> 

    <fragment xmlns:android="http://schemas.android.com/apk/res/android" 
       xmlns:tools="http://schemas.android.com/tools" android:id="@+id/fragment_task" 
       android:name="com.hashicode.simpletodo.fragment.TaskFragment" tools:layout="@layout/fragment_task" 
       android:layout_width="match_parent" android:layout_height="match_parent" /> 

</LinearLayout> 

工具欄(XML)

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.Toolbar 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/toolbar" 
    android:layout_height="wrap_content" 
    android:layout_width="match_parent" 
    android:fitsSystemWindows="true" 
    android:minHeight="?attr/actionBarSize" 
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
    android:background="?attr/colorPrimaryDark" 
    android:elevation="0px"> 
</android.support.v7.widget.Toolbar> 

片段(XML)

<?xml version="1.0" encoding="utf-8"?> 
<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="match_parent" 
               android:orientation="vertical"> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical"> 

     <LinearLayout 
      android:id="@+id/taskname_area" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:background="@color/PrimaryDarkColor" 
      android:orientation="vertical"> 

      <android.support.design.widget.TextInputLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:paddingBottom="36dp" 
       android:paddingLeft="72dp" 
       android:paddingRight="16dp"> 

       <EditText 
        android:id="@+id/task_name" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:hint="@string/task.name" 
        android:textSize="30dp"/> 

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

     </LinearLayout> 

     <!-- some code --> 

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

活性(JAVA)

public class TaskActivity extends AppCompatActivity { 


    @Override 
    protected void onCreate(@Nullable Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     initializeTodo(savedInstanceState); 
     setContentView(R.layout.activity_task); 
     //set the toolbar 
     setSupportActionBar((Toolbar) findViewById(R.id.toolbar)); 
     getSupportActionBar().setDisplayHomeAsUpEnabled(true); 
     getSupportActionBar().setTitle(null); 
    } 

結果:

enter image description here