Toolbar使用

原文地址 http://www.cnblogs.com/Dentist/p/4370176.html

Android4.0出現的Actionbar提供了同意方便的導航管理。很大程度的統一了Android應用的風格，但他定制性差，使用不靈活的缺點限制了Android應用的發展。

Android5.0谷歌推出了Material Design。用ToolBar代替了Actionbar。繼承了Actionbar的用法。卻像布局一樣任意修改。

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary">
    </android.support.v7.widget.Toolbar>

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World"/>

</LinearLayout>

 

然后代碼里找到並設置為SupportActionBar就成為了一個真正的Actionbar。不過theme里關於ActionBar的屬性對他不管用。因為他是假的，是Google的特技。

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }

但 onCreateOptionsMenu  和  onOptionsItemSelected都有用。

設置導航圖標 toolbar.setNavigationIcon();

但設置標題則需要用 getSupportActionBar().setTitle();

使用ToolBar時一定要把Activity的Theme設為NoActionBar。或者Theme.AppCompat並重寫這倆屬性

        <item name="windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>

 

因為Theme.AppCompat.NoActionBar僅僅就是在Theme.AppCompat的基礎上多加了上面兩行。看源碼便知。

 

然后你一定會發現：

當你使用Light主題時。APP所有字的顏色都是黑色，包括Toolbar的字體顏色也是黑色。

當你使用Dark(普通)主題時。APP所有字的顏色都是白色，包括Toolbar的字體顏色也是白色。就像這樣：

而google的Material Design展示的優雅界面

這TM是在逗我。。。

其實ToolBar支持單獨設置一個theme

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:theme="@style/Theme.AppCompat">
    </android.support.v7.widget.Toolbar>

 

然后給Activity設置為Light主題。就完美解決了。

但每個頁面都寫這樣一堆XML代碼潔癖患者實在受不了。

可以使用include標簽優雅的解決。

<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_width="match_parent"
    android:layout_height="wrap_content"
    app:theme="@style/Theme.AppCompat"
    android:background="@color/colorPrimary">


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

 

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

    <include layout="@layout/toolbar" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World"/>

</LinearLayout>

注意當你換了Toolbar的主題就不能再用 android:background="?attr/colorPrimary" 這種基於主題的資源，應該直接重新定義。

 

然后介紹下ToolBar的特技。

1.動畫顯示/隱藏ToolBar

    public void showToolbar(boolean show){
        if (show == toolbarShow || toolbar == null)return;
        toolbarShow = show;
        if (show) {
            toolbar.animate()
                    .translationY(0)
                    .alpha(1)
                    .setDuration(HEADER_HIDE_ANIM_DURATION)
                    .setInterpolator(new DecelerateInterpolator());
        } else {
            toolbar.animate()
                    .translationY(-toolbar.getBottom())
                    .alpha(0)
                    .setDuration(HEADER_HIDE_ANIM_DURATION)
                    .setInterpolator(new DecelerateInterpolator());
        }
    }

2.設置ToolBar的背景透明度

//設置好ToolBar過后
mActionbarDrawable = new ColorDrawable(getResources().getColor(R.color.theme_primary));
getSupportActionBar().setBackgroundDrawable(mActionbarDrawable);

　　

    protected void setToolbarAlpha(float alpha){
        mActionbarDrawable.setAlpha((int) (alpna*255));
    }

 

這兩個特技一般都配合RecyclerView SccollView等滑動視圖（過時的ListView不考慮了）。

RecyclerView ：

public abstract class HidingScrollListener extends RecyclerView.OnScrollListener {
  
  @Override
  public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
    super.onScrolled(recyclerView, dx, dy);
      Utils.Log("percent:" + dy);
      if (dy > 1){
          onHide();
      }else if(dy < -1){
          onShow();
      }
  }
  
  public abstract void onHide();
  public abstract void onShow();
 
}

mRecyclerView.setOnScrollListener(new HidingScrollListener() {
                @Override
                public void onHide() {
                        showToolbar(false);
                }

                @Override
                public void onShow() {
                        showToolbar(true);
                }
            });

 

 SccollView：

public class ObservableScrollView extends ScrollView {
    public interface ScrollViewListener {

        void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy);

    }
    private ScrollViewListener scrollViewListener = null;  
  
    public ObservableScrollView(Context context) {  
        super(context);  
    }  
  
    public ObservableScrollView(Context context, AttributeSet attrs,  
            int defStyle) {  
        super(context, attrs, defStyle);  
    }  
  
    public ObservableScrollView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
    }  
  
    public void setScrollViewListener(ScrollViewListener scrollViewListener) {  
        this.scrollViewListener = scrollViewListener;  
    }  
  
    @Override  
    protected void onScrollChanged(int x, int y, int oldx, int oldy) {  
        super.onScrollChanged(x, y, oldx, oldy);  
        if (scrollViewListener != null) {  
            scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);  
        }  
    }  
  
}

 

        mScrollView.setScrollViewListener(new ObservableScrollView.ScrollViewListener() {
            @Override
            public void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy) {
                    if (y-oldy>3){
                        showToolbar(false);
                    }else if(y-oldy<-3){
                        showToolbar(true);
                    }
            }
        });