toolbar的學習

當前使用的是api25,不知道和之前的有沒有區別,下面開始一邊學習一邊記錄。一般的介紹就不寫了,很多文章都有寫。

先上一張主題說明圖,網上都能搜到,貼過來自己mark下:


可以在apptheme中定義:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <!--<item name="android:textColorPrimary">#ffffff</item>-->
    <!--<item name="android:navigationBarColor" tools:ignore="NewApi">@color/colorPrimaryDark</item>-->
</style>
其中android:navigationBarColor 是有api限制的,需要添加newapi。在低版本手機上無效。當然低版本的手機應該也沒有如圖那樣的底部導航。

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

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

關於height儘量這樣寫,防止title字體過大被截掉,字體過小時依然會有個minheight。(後期補充標記,如果和Coll....Layout摺疊效果連用的時候,如果設置成wrapcontent,給Colllayout的title顯示不出來,設置成固定高度纔可以,而且網上看到的demo也都是用的固定高度)


然後是設置toolbar上的按鈕,title,等等:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"<
    android:minHeight="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    app:navigationIcon="@mipmap/ic_launcher" //左上角的button
    app:logo="@mipmap/ic_launcher"  //logo
    app:title="@string/app_name"  
    app:subtitle="@string/app_name"
    app:titleTextColor="#ffffff"
    app:subtitleTextColor="#ff0000"></..>
各種屬性不詳細說了,說些有用的。這都是自己在xml裏各種設置和運行看結果總結的:

1、設置nabtn和logo的距離:contentInsetStart=“xdp”,這裏可能有人會覺得不起作用,它就是代表content距開始的位置,如果這會有nabtn,你設置太小值是沒有作用的,它代表從logo開始的佈局距離左邊緣的距離,距離設置的小於nabtn的寬度,系統就會忽略掉了。如果把nabtn去掉就能看出效果了,同理,如果你把logo也隱藏掉,就是title距離左邊的距離了。然後你會發現nabtn和logo之間總有個距離,不能挨在一起,還有個屬性叫做contentInsetStartWithNavigation,剛纔說把contentInsetStart設置太小,比如0沒有效果,大家看一下把contentInsetStartWithNavigation設置成0是什麼效果?是不是兩個靠近了?

2、自定義佈局,toolbar集成的viewgroup,當然可以有子view,我們設置個子view,寬高都是自適應,發現自定義view會在title右邊,需要代碼中禁止掉title的顯示。但把屬性設置成mparent,發現title就不見了,logo還在。

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:navigationIcon="@mipmap/sound"
app:logo="@mipmap/ic_launcher"
app:contentInsetStartWithNavigation="0dp"
app:title="@string/app_name"
app:titleMargin="20dp"
app:subtitle="@string/app_name"
app:titleTextColor="#ffffff"
app:subtitleTextColor="#ff0000"
app:theme="@style/ToolbarTheme"
app:popupTheme="@style/OverflowMenuStyle"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="jslfjsldfjs"/>
</RelativeLayout>

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

RelativeLayout改成matchparent後爲:


3、titleMargin是設置title的margin的,大家可以自行嘗試。


接下來是關於右邊menu的展示,先說理解後上代碼和圖,右邊的menu是可以自定義的,需要res下建立menu.xml,裏面有item,每個item都些屬性,只說重要的。orderInCategory代表menu的順序,如果都不填寫,就按你默認添加時的順序。app:showAsAction,有4個屬性:

1.alaways:這個值會使菜單項一直顯示在ActionBar上。

2.ifRoom:如果有足夠的空間,這個值會使菜單顯示在ActionBar上。

3.never:這個值菜單永遠不會出現在ActionBar是。

4.withText:這個值使菜單和它的圖標,菜單文本一起顯示。

第4個我沒弄明白,有看到這的留言告訴我一下,謝謝。其他都比較顧名思義了,然後,重點:如果你設置了多個menu,都設置成alaways,那麼就會擠壓title,如果都設置成ifRoom,當展示空間不夠的時候會在最右邊顯示一個“三點”的系統默認菜單圖標,當點擊的時候就會用pop的方式展示剩餘沒有顯示的菜單。

具體的大家自己嘗試吧,我上下我的最終menu代碼及效果吧,我用的是自己配置的menu組,可以利用這個特性來替換掉系統的三點圖標,不過比直接改系統圖標要麻煩:),後補一下,如果是系統三點圖標隱藏的菜單,顯示的時候不顯示圖標,需要用反射來顯示,代碼網上可以搜到,如果是自己定義的menu組,是直接可以顯示圖標的。

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">


<item
android:id="@+id/action_edit"
android:icon="@mipmap/ic_launcher"
android:title="action_edit"
app:showAsAction="always|withText">
<menu>
<group>
<item
android:id="@+id/action_share"
android:icon="@mipmap/ic_launcher"
android:title="action_share"
android:orderInCategory="2"
app:showAsAction="never" />

<item
android:id="@+id/action_settings"
android:icon="@mipmap/ic_launcher"
android:title="action_settings"
android:orderInCategory="1"
app:showAsAction="never" />
</group>
</menu>
</item>
</menu>



有些地方寫的是toolbar.inflateMenu(),但我這裏不起作用。。,我這邊寫法是在activity中重寫:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main,menu);
return true;
}

然後給toolbar設置OnMenuItemClickListener就可以了。

下面是網上搜到的popstyle:

<style name="OverflowMenuStyle" parent="@style/Widget.AppCompat.PopupMenu.Overflow">
<!-- 是否覆蓋錨點,默認爲true,即蓋住Toolbar -->
<item name="overlapAnchor">false</item>
<item name="android:dropDownWidth">wrap_content</item>
<item name="android:paddingRight">5dp</item>
<!-- 彈出層背景顏色 -->
<item name="android:popupBackground">#50000000</item>
<!-- 彈出層垂直方向上的偏移,即在豎直方向上距離Toolbar的距離,值爲負則會蓋住Toolbar -->
<item name="android:dropDownVerticalOffset">5dp</item>
<!-- 彈出層水平方向上的偏移,即距離屏幕左邊的距離,負值會導致右邊出現空隙 -->
<item name="android:dropDownHorizontalOffset">0dp</item>
<!-- 設置彈出菜單文字顏色 -->
<item name="android:textColor">#ff00ff</item>
</style>

overlapAnchor這個屬性可以改變菜單彈出的位置,但是谷歌建議覆蓋toolbar。底下那幾個距離我是真搞不懂,回頭弄明白再來補充吧,我嘗試改那個距離的時候,雖然pop距離右邊有了間隔,但是pop裏面的內容本身也有了padding,

style的屬性大家自行搜索吧,其實感覺用處不大,設置下文字顏色大小之類的還可以,顯示位置大家還是慢慢支持谷歌吧:)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章