2015-09-06 15 views
14

che sto cercando di fare Toolbar con EditText all'interno di esso in questo modo:Toolbar con disegno materiale EditText

Toolbar with EditText

In questo momento non posso fare qualche cosa di simile, ma solo con il titolo statico, Tutte le idee per iniziare ?

+0

Non puoi semplicemente mettere EditTexts in un AppBarLayout? https://developer.android.com/reference/android/support/design/widget/AppBarLayout.html – Kenneth

+0

Sì, ma voglio che EditText si trasformi in normale TextView e diventi sempre più piccolo quando l'utente scorre verso l'alto. – MoHaKa

+0

utilizza appbarlayout e barra degli strumenti comprimibile – 3xplore

risposta

0

Penso che sia necessario creare la propria barra degli strumenti e impostarla sulla barra delle attività. prova questo:

http://javatechig.com/android/actionbar-with-custom-view-example-in-android hai solo bisogno di creare il tuo componente. Spero che sarà utile per voi;)

+0

Hai un'idea per fare uno scorrimento fluido mentre l'utente scorre su e giù? – MoHaKa

+0

Desidero che EditText si trasformi in normale TextView e che diventi più piccolo quando l'utente scorre verso l'alto. – MoHaKa

+0

Perché non basta attivare la visibilità con un TextView che si trova nella stessa posizione e animarlo quando si scorre? –

-1

AppBarLayout sarebbe meglio scommessa

Rif https://developer.android.com/reference/android/support/design/widget/AppBarLayout.html

Esempio http://www.feelzdroid.com/2015/07/android-appbarlayout-scrolling-example.html

, ovviamente, si avrebbe bisogno di fare le personalizzazioni

Spero che questo aiuta

+0

QAMAR, ho già controllato questi collegamenti, l'unica cosa che fanno è implementare una barra degli strumenti con titolo statico pieghevole, che ho già raggiunto. – MoHaKa

21

I h ave fatto questo come di seguito:

enter image description here

C'è Toolbar come AppBar (aka ActionBar) alla barra degli strumenti superiore e la seconda sotto con due EditText. La prima barra degli strumenti è inferiore a CollapsingToolbarLayout nel caso in cui si desideri che venga compresso.

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> 

E 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> 

Utilizzare android:theme="@style/AppTheme" per l'applicazione in manifest e android:theme="@style/AppTheme.Base" for MainActivity`.

+0

Grazie per aver cercato di aiutarmi, voglio solo chiedere cosa succede se l'utente scorre? – MoHaKa

+0

Dipende da te, usa 'scrollFlags' per controllarlo. È possibile correggere entrambe le schede o una o nasconderle durante lo scorrimento. –

+2

ma il titolo non diventa titolo della barra degli strumenti nell'attuazione precedente quando si scorre –

0

È possibile utilizzare un layout lineare con lo stesso colore della barra degli strumenti. L'attributo della barra degli strumenti android:elevation deve essere 0px.

attività (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> 

Toolbar (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> 

Fragment (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> 

attività (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); 
    } 

Il risultato:

enter image description here

Problemi correlati