自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

史上最詳細的Toolbar開發(fā)講解，此篇必讀！

作者：煥然一璐
移動開發(fā) Android
Toolbar 是 android 5.0 引入的一個新控件，Toolbar出現(xiàn)之前，我們很多時候都是使用ActionBar以及ActionActivity實現(xiàn)頂部導(dǎo)航欄的，因此Toolbar可以理解為是ActionBar的升級版。Toolbar大大擴展了ActionBar，使用更靈活，不像ActionBar那么固定，Toolbar更像是一般的View元素，可以被放置在view樹體系的任意位置，可以應(yīng)用動畫，可以跟著scrollView滾動，可以與布局中的其他view交互。

Toolbar的簡介

Toolbar 是 android 5.0 引入的一個新控件，Toolbar出現(xiàn)之前，我們很多時候都是使用ActionBar以及ActionActivity實現(xiàn)頂部導(dǎo)航欄的，因此Toolbar可以理解為是ActionBar的升級版。Toolbar大大擴展了ActionBar，使用更靈活，不像ActionBar那么固定，Toolbar更像是一般的View元素，可以被放置在view樹體系的任意位置，可以應(yīng)用動畫，可以跟著scrollView滾動，可以與布局中的其他view交互。

Toolbar的基本使用

1、要想使用Toolbar，首先應(yīng)該在Gradle的配置腳本里面添加V7兼容包(代碼如下，版本是楠妹妹寫本文的時候的版本)，或者通過Android Studio的圖形化界面的操作方法把V7兼容包依賴進來。

  1. compile 'com.android.support:appcompat-v7:23.1.1' 

2、在我們需要頂部導(dǎo)航欄的布局文件當(dāng)中添加Toolbar，并且配置一些常用的屬性(使用自定義屬性的時候需要注意把命名空間“app”添加到根節(jié)點)。

  1. xmlns:app="http://schemas.android.com/apk/res-auto" 

這里只列出一些常用的屬性，比如最小高度，返回按鈕的圖標(biāo)，背景等等。這里需要注意的是，屬性值中的“?”表示對Android系統(tǒng)的主題樣式進行重用。意思是如果我們改變了主題樣式中的colorPrimary屬性的話，Toolbar的背景顏色也會隨之改變，因此提醒我們?nèi)ブ黝}樣式中進行一些配置。

  1. <android.support.v7.widget.Toolbar 
  2.         android:id="@+id/toolbar" 
  3.         android:layout_width="match_parent" 
  4.         android:layout_height="wrap_content" 
  5.         android:background="?attr/colorPrimary" 
  6.         android:minHeight="?actionBarSize" 
  7.         app:navigationIcon="@mipmap/arrow_left" 
  8.         app:title="標(biāo)題"/>  

3、在styles.xml文件中進行一些常用的配置。由于我們使用的是

AppCompatActivity，因此必須使用AppCompat的相關(guān)主題，筆者這里使用亮色調(diào)的沒有ActionBar的主題，注意需要在清單文件當(dāng)中去使用自己定義的主題。為了完全去掉ActionBar，需要把windowActionBar、windowNoTitle以及加上android聲明的也寫上，確保把系統(tǒng)自帶的以及第三方兼容包的ActionBar都徹底去掉。

  1. <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> 
  2.     <item name="colorPrimary">@color/red</item> 
  3.     <item name="colorPrimaryDark">@color/green</item> 
  4.     <item name="colorAccent">@color/blue</item> 
  5.     <item name="android:textColorPrimary">@color/white</item> 
  6.  
  7.     <item name="android:windowActionBar">false</item> 
  8.     <item name="android:windowNoTitle">true</item> 
  9.  
  10.     <item name="windowActionBar">false</item> 
  11.     <item name="windowNoTitle">true</item> 
  12. </style> 

4、下面對主題中的幾個顏色進行講解，請參考下面的圖片進行理解。

  • colorPrimaryDark是我們手機最頂端的狀態(tài)欄的背景顏色(改變它需要Android5.0以及以上的手機支持才行)。
  • colorPrimary是指導(dǎo)航欄的顏色。
  • colorAccent是指我們常用控件比如Button等的顏色。
  • textColorPrimary是指我們導(dǎo)航欄中標(biāo)題的顏色。
  • windowBackground是指我們窗體的默認顏色。
  • navigationBarColor是指Android手機中虛擬按鍵的背景顏色。  

 

5、代碼中對Toolbar進行常見的操作?？梢酝ㄟ^ID找到Toolbar之后，可以對導(dǎo)航圖標(biāo)進行點擊監(jiān)聽，前提必須是在布局文件或者java代碼中添加了導(dǎo)航圖標(biāo)。同理也可以使用菜單，具體看注釋，不再贅述。

  1. Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
  2.  
  3. //對Toolbar左邊的導(dǎo)航圖標(biāo)進行監(jiān)聽 
  4. toolbar.setNavigationOnClickListener(new View.OnClickListener() { 
  5. @Override 
  6. public void onClick(View v) { 
  7. Toast.makeText(MainActivity.this, "返回", Toast.LENGTH_SHORT).show(); 
  8. } 
  9. });  
  1. //Toolbar中使用菜單toolbar.inflateMenu(R.menu.menu_main); 
  2. toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {     
  3.     @Override 
  4.     public boolean onMenuItemClick(MenuItem item) {         
  5.         switch (item.getItemId()) {             
  6.             case R.id.action_item1: 
  7.                 Toast.makeText(MainActivity.this, "菜單1", Toast.LENGTH_SHORT).show();                 
  8.                     return true;             
  9.             case R.id.action_item2: 
  10.                 Toast.makeText(MainActivity.this, "菜單2", Toast.LENGTH_SHORT).show();                 
  11.                     return true;             
  12.  
  13.             case R.id.action_item3: 
  14.                 Toast.makeText(MainActivity.this, "菜單3", Toast.LENGTH_SHORT).show();                 
  15.                     return true; 
  16.         }        return false; 
  17.  
  18.     } 
  19. }); 

6、運行效果圖 

 

Toolbar高級使用篇--自定義Toolbar

通過下面的對比可以知道，原生的Toolbar畫面太美不忍直視，一般來說要在項目當(dāng)中使用Toolbar我們都應(yīng)該去自定義Toolbar。下面開始討論如何去自定義Toolbar。  

 

下面先讓我給出核心的要點：

  • 自定義布局，添加到Toolbar當(dāng)中
  • 有必要的時候自定義一些屬性
  • 自定義Class繼承Toolbar，讀取自定義屬性，對Toolbar的布局顯示，內(nèi)容進行設(shè)置，***需要對外公開一些函數(shù)用于設(shè)置標(biāo)題、監(jiān)聽等。下面通過步驟來詳細說明。

1、寫一個自定義的布局，用來放入自定義Toolbar。

  1. <?xml version="1.0" encoding="utf-8"?> 
  2.  
  3. <RelativeLayout 
  4.     xmlns:android="http://schemas.android.com/apk/res/android" 
  5.     android:layout_width="match_parent" 
  6.     android:layout_height="wrap_content" 
  7.     > 
  8.  
  9.     <RelativeLayout 
  10.         android:layout_width="match_parent" 
  11.         android:layout_height="wrap_content" 
  12.         android:layout_marginLeft="10dp" 
  13.         android:layout_marginRight="10dp"> 
  14.  
  15.         <ImageView 
  16.             android:id="@+id/toolbar_leftButton" 
  17.             android:layout_width="@dimen/icon_size" 
  18.             android:layout_height="@dimen/icon_size" 
  19.             android:layout_alignParentLeft="true" 
  20.             android:layout_centerVertical="true" 
  21.             android:src="@mipmap/icon_background" 
  22.             android:textColor="@color/white" 
  23.             android:visibility="visible" 
  24.             /> 
  25.  
  26.         <ImageView 
  27.             android:id="@+id/toolbar_rightButton" 
  28.             android:layout_width="@dimen/icon_size" 
  29.             android:layout_height="@dimen/icon_size" 
  30.             android:layout_alignParentRight="true" 
  31.             android:layout_centerVertical="true" 
  32.             android:src="@mipmap/icon_background" 
  33.             android:textColor="@color/white" 
  34.             android:visibility="visible" 
  35.             /> 
  36.  
  37.         <EditText 
  38.             android:id="@+id/toolbar_searchview" 
  39.             style="@style/search_view" 
  40.             android:layout_width="match_parent" 
  41.             android:layout_height="wrap_content" 
  42.             android:layout_centerVertical="true" 
  43.             android:layout_gravity="center" 
  44.             android:layout_marginLeft="10dp" 
  45.             android:layout_marginRight="10dp" 
  46.             android:layout_toLeftOf="@id/toolbar_rightButton" 
  47.             android:layout_toRightOf="@id/toolbar_leftButton" 
  48.             android:drawableLeft="@mipmap/icon_search" 
  49.             android:gravity="center" 
  50.             android:hint="請輸入搜索內(nèi)容" 
  51.             android:visibility="gone" 
  52.             /> 
  53.  
  54.         <TextView 
  55.             android:id="@+id/toolbar_title" 
  56.             android:layout_width="match_parent" 
  57.             android:layout_height="wrap_content" 
  58.             android:layout_centerInParent="true" 
  59.             android:layout_gravity="center" 
  60.             android:layout_marginLeft="10dp" 
  61.             android:layout_marginRight="10dp" 
  62.             android:layout_toLeftOf="@id/toolbar_rightButton" 
  63.             android:layout_toRightOf="@id/toolbar_leftButton" 
  64.             android:gravity="center" 
  65.             android:textColor="@color/white" 
  66.             android:textSize="20sp" 
  67.             android:visibility="gone" 
  68.             /> 
  69.  
  70.     </RelativeLayout> 
  71.  
  72. </RelativeLayout> 

讓我們通過下面兩張效果圖來進行說明吧O(∩_∩)O~~。

由于一般不推薦把寬高意外的屬性寫在最外面根節(jié)點，因此我在最外面的相對布局里面又內(nèi)嵌了一個相對布局，并且設(shè)置了左右的邊距(margin)。至于如何布局要根據(jù)實際項目而定。楠妹妹這里的需求是，標(biāo)題和搜索框能夠隨時切換。因此標(biāo)題和搜索框是通過項目布局重疊在一起的，需要用到其中一個的時候就把另外一個隱藏掉。另外需要注意的地方就是，左右按鈕***也不要用Toolbar自帶的，因為可能會造成布局不對稱問題，使得標(biāo)題(搜索框)不能居中。在按鈕不使用的時候，我們并不是通過gone的方法隱藏掉的，而是通過@mipmap/icon_background空白圖片來進行占位，保持布局對稱。   

    

 

2、在values文件夾新建attrs.mxl文件，用于存放自定義的一些屬性。這些屬性都可以通過字面意思讀懂，不詳細解釋了。

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <resources>     
  3. <declare-styleable name="CNToolbar"> 
  4.         <attr name="showSearchView" format="boolean"/> 
  5.         <attr name="leftButtonIcon" format="reference"/> 
  6.         <attr name="rightButtonIcon" format="reference"/> 
  7.         <attr name="myTitle" format="string"/> 
  8.     </declare-styleable> 
  9.  
  10. </resources>  

3、自定義Class繼承Toolbar。代碼的主要工作是初始化界面還有監(jiān)聽器，對外公開操作的接口。

初始化界面的時候需要把自定義屬性的值通過TintTypedArray讀取進來，然后進行一些界面顯示方面的設(shè)置。

初始化監(jiān)聽器，需要用到接口的回調(diào)。具體步驟是公開的聲明接口，接口里面有onClick方法;聲明該接口的實現(xiàn)，作為Toolbar的私有成員變量;公開setListener方法，把傳進來的Listener實現(xiàn)類賦值給這個成員變量;在必須的時候調(diào)用成員變量的onClick方法(如在左邊的按鈕的點擊事件中調(diào)用)。

公開一些函數(shù)，比如設(shè)置標(biāo)題，設(shè)置是否顯示搜索框、標(biāo)題等等。

  1. /** 
  2.  * 自定義的導(dǎo)航欄 
  3.  */public class CNToolbar extends Toolbar {     
  4.  private TextView toolbar_title;     
  5.  private EditText toolbar_searchview;     
  6.  private ImageView toolbar_leftButton;     
  7.  private ImageView toolbar_rightButton;     
  8.  private View mChildView;     
  9.  private boolean showSearchView;     
  10.  private Drawable left_button_icon;     
  11.  private Drawable right_button_icon;     
  12.  private String title;     
  13.  public CNToolbar(Context context) {         
  14.      this(context, null, 0); 
  15.     }    public CNToolbar(Context context, @Nullable AttributeSet attrs) {         
  16.         this(context, attrs, 0); 
  17.     }    public CNToolbar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {         
  18.         super(context, attrs, defStyleAttr);        //通過代碼得到布局文件當(dāng)中一些屬性的值 
  19.         final TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), attrs, 
  20.                 R.styleable.CNToolbar, defStyleAttr, 0); 
  21.         showSearchView = a.getBoolean(R.styleable.CNToolbar_showSearchView, false); 
  22.         left_button_icon = a.getDrawable(R.styleable.CNToolbar_leftButtonIcon); 
  23.         right_button_icon = a.getDrawable(R.styleable.CNToolbar_rightButtonIcon); 
  24.         title = a.getString(R.styleable.CNToolbar_myTitle); 
  25.         a.recycle();        //初始界面 
  26.         initView();        //初始監(jiān)聽器 
  27.         initListener(); 
  28.     }    /** 
  29.      * 初始化布局 
  30.      */ 
  31.     private void initView() {         
  32.         if (mChildView == null) { 
  33.             mChildView = View.inflate(getContext(), R.layout.toolbar, null); 
  34.  
  35.             toolbar_title = (TextView) mChildView.findViewById(R.id.toolbar_title); 
  36.             toolbar_searchview = (EditText) mChildView.findViewById(R.id.toolbar_searchview); 
  37.             toolbar_leftButton = (ImageView) mChildView.findViewById(R.id.toolbar_leftButton); 
  38.             toolbar_rightButton = (ImageView) mChildView.findViewById(R.id.toolbar_rightButton);             
  39.                 //添加自定義的布局到Toolbar 
  40.             addView(mChildView);            //設(shè)置標(biāo)題、搜索框、左右按鈕是否顯示，并且設(shè)置按鈕的圖標(biāo) 
  41.             if (showSearchView) { 
  42.                 showSearchview(); 
  43.                 hideTitle(); 
  44.             } else { 
  45.                 hideSearchview(); 
  46.                 showTitle();                 
  47.                     if (title != null) { 
  48.                     toolbar_title.setText(title); 
  49.                 } 
  50.             }            if (left_button_icon != null) { 
  51.                 toolbar_leftButton.setImageDrawable(left_button_icon); 
  52.             }            if (right_button_icon != null) { 
  53.                 toolbar_rightButton.setImageDrawable(right_button_icon); 
  54.             } 
  55.         } 
  56.  
  57.     }    /** 
  58.      * 重寫設(shè)置標(biāo)題的方法 
  59.      * 
  60.      * @param title 
  61.      */ 
  62.     @Override 
  63.     public void setTitle(CharSequence title) { 
  64.         toolbar_title.setText(title); 
  65.     }    @Override 
  66.     public void setTitle(@StringRes int resId) { 
  67.         toolbar_title.setText(resId); 
  68.     }    /** 
  69.      * 設(shè)置左右按鈕的圖標(biāo) 
  70.      * 
  71.      * @param d 
  72.      */ 
  73.     public void setLeftButtonIconDrawable(Drawable d) { 
  74.         toolbar_leftButton.setImageDrawable(d); 
  75.     }    public void setRightButtonIconDrawable(Drawable d) { 
  76.         toolbar_rightButton.setImageDrawable(d); 
  77.     }    /** 
  78.      * 標(biāo)題與搜索框的切換 
  79.      */ 
  80.     public void setShowSearchView() { 
  81.         hideTitle(); 
  82.         showSearchview(); 
  83.     }    public void setShowTitleView(String title) { 
  84.         hideSearchview(); 
  85.         showTitle(); 
  86.         toolbar_title.setText(title); 
  87.     }    /** 
  88.      * 左右按鈕的監(jiān)聽 
  89.      */ 
  90.     private void initListener() { 
  91.         toolbar_leftButton.setOnClickListener(new OnClickListener() {             
  92.             @Override 
  93.             public void onClick(View v) {                 
  94.                 if (onLeftButtonClickListener != null) { 
  95.                     onLeftButtonClickListener.onClick(); 
  96.                 } 
  97.             } 
  98.         }); 
  99.  
  100.         toolbar_rightButton.setOnClickListener(new OnClickListener() {             
  101.             @Override 
  102.             public void onClick(View v) {                 
  103.                 if (onRightButtonClickListener != null) { 
  104.                     onRightButtonClickListener.onClick(); 
  105.                 } 
  106.             } 
  107.         }); 
  108.     }    public interface OnLeftButtonClickListener {         
  109.         void onClick(); 
  110.     }    public interface OnRightButtonClickListener {         
  111.         void onClick(); 
  112.  
  113.     }    private OnLeftButtonClickListener onLeftButtonClickListener;     
  114.         private OnRightButtonClickListener onRightButtonClickListener;     
  115.         public void setOnLeftButtonClickListener(OnLeftButtonClickListener listener) { 
  116.         onLeftButtonClickListener = listener; 
  117.     }    public void setOnRightButtonClickListener(OnRightButtonClickListener listener) { 
  118.         onRightButtonClickListener = listener; 
  119.     }    /** 
  120.      * 設(shè)置標(biāo)題或者搜索框是否顯示 
  121.      */ 
  122.     private void showTitle() { 
  123.         toolbar_title.setVisibility(View.VISIBLE); 
  124.     }    private void hideTitle() { 
  125.         toolbar_title.setVisibility(View.GONE); 
  126.     }    private void showSearchview() { 
  127.         toolbar_searchview.setVisibility(View.VISIBLE); 
  128.     }    private void hideSearchview() { 
  129.         toolbar_searchview.setVisibility(View.GONE); 
  130.     } 
  131. } 
  132.  
  133.         4、使用，在必須的地方如同一般的控件去使用就可以了，注意加上自定義屬性的命名空間，一般為auto就可以了。 
  134.  
  135. <?xml version="1.0" encoding="utf-8"?> 
  136.     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  137.               xmlns:app="http://schemas.android.com/apk/res-auto" 
  138.               android:layout_width="match_parent" 
  139.               android:layout_height="match_parent" 
  140.               android:orientation="vertical"> 
  141.  
  142.     <com.nan.cnshop.widget.CNToolbar 
  143.         android:id="@+id/toolbar" 
  144.         android:layout_width="match_parent" 
  145.         android:layout_height="wrap_content" 
  146.         android:background="?attr/colorPrimary" 
  147.         android:minHeight="?actionBarSize" 
  148.         app:leftButtonIcon="@mipmap/icon_back_32px" 
  149.         app:showSearchView="false" 
  150.         app:myTitle="首頁" 
  151.         /> 
  152.  
  153.     <WebView 
  154.         android:id="@+id/webview" 
  155.         android:layout_width="match_parent" 
  156.         android:layout_height="match_parent" 
  157.         /> 
  158.        </LinearLayout> 

4、使用，在必須的地方如同一般的控件去使用就可以了，注意加上自定義屬性的命名空間，一般為auto就可以了。

  1. <?xml version="1.0" encoding="utf-8"?> 
  2.     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3.               xmlns:app="http://schemas.android.com/apk/res-auto" 
  4.               android:layout_width="match_parent" 
  5.               android:layout_height="match_parent" 
  6.               android:orientation="vertical"> 
  7.  
  8.     <com.nan.cnshop.widget.CNToolbar 
  9.         android:id="@+id/toolbar" 
  10.         android:layout_width="match_parent" 
  11.         android:layout_height="wrap_content" 
  12.         android:background="?attr/colorPrimary" 
  13.         android:minHeight="?actionBarSize" 
  14.         app:leftButtonIcon="@mipmap/icon_back_32px" 
  15.         app:showSearchView="false" 
  16.         app:myTitle="首頁" 
  17.         /> 
  18.  
  19.     <WebView 
  20.         android:id="@+id/webview" 
  21.         android:layout_width="match_parent" 
  22.         android:layout_height="match_parent" 
  23.         /> 
  24.        </LinearLayout> 

代碼當(dāng)中也可以使用了，具體就不再贅述了。

  1. final CNToolbar toolbar = (CNToolbar) v.findViewById(R.id.toolbar); 
  2.  
  3. toolbar.setOnLeftButtonClickListener(new CNToolbar.OnLeftButtonClickListener() {     
  4.     @Override 
  5.     public void onClick() { 
  6.         toolbar.setShowSearchView(); 
  7.     } 
  8. }); 
責(zé)任編輯：龐桂玉 來源： 安卓巴士Android開發(fā)者門戶
AndroidToolbar
相關(guān)推薦

2010-08-26 10:28:43

2024-01-09 12:06:55

MVCC并發(fā)控制MySQL

2015-05-19 11:11:29

JavaScript事件使用指南

2016-12-22 19:53:46

AndroidAPPReactNative

2023-11-30 08:32:31

OpenFeign工具

2012-10-31 09:16:36

IT管理

2014-04-09 09:55:12

2013-08-05 11:34:02

2012-12-25 09:53:40

域名

2009-10-10 13:56:44

IIS應(yīng)用程序VB開發(fā)

2024-07-02 08:36:09

JavaScriptUnicode模式

2013-08-26 11:09:10

產(chǎn)品經(jīng)理產(chǎn)品

2011-08-29 09:19:25

c語言

2011-01-20 17:59:53

網(wǎng)絡(luò)安全路由配置路由安全

2012-10-18 18:40:24

2015-07-23 09:40:24

爛代碼程序員

2014-04-23 16:31:42

Windows背景音樂

2020-04-09 11:23:30

微軟域名僵尸網(wǎng)絡(luò)

2013-08-26 11:08:55

產(chǎn)品經(jīng)理移動開發(fā)

2024-02-07 08:22:36

點贊
收藏

51CTO技術(shù)棧公眾號