Android 自定義ToolBar詳細使用


自定義xml設置ToolBar,通過menu文件擴展選項,通過繼承baseactivity使用

1.ToolBar布局

<?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_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:background="@color/color_bg_toolbar">
    <ImageView
        android:id="@+id/title_back"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:visibility="gone"
        android:src="@mipmap/ic_back"/>
    <TextView
        android:id="@+id/title_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:layout_gravity="center_horizontal"
        android:textSize="20sp"
        android:textColor="@color/color_bg_write"
        android:text="@string/app_name"/>
    <TextView
        android:id="@+id/title_rightTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:layout_marginRight="10dp"
        android:layout_gravity="right"
        android:textColor="@color/color_bg_write"
        android:text="@string/app_name"
        android:visibility="gone"/>
</android.support.v7.widget.Toolbar>

2.menu文件(title右側圖標,測試發現最多只能顯示三個,如果超過三個第三個會變成更多的選項),另一種方式就是像上邊那樣在xml布局里寫在Toolbar標簽里

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <!--掃描-->
    <item android:id="@+id/title_scan"    //id
        android:title="@string/scan"     //title長按顯示的文字
        android:visible="false"        //默認全部不顯示
        android:icon="@mipmap/ic_scan"    //圖標
        app:showAsAction="ifRoom"/>
    <!--添加-->
    <item android:id="@+id/title_add"
        android:title="@string/add"
        android:icon="@mipmap/ic_add"
        app:showAsAction="ifRoom"/>
    <!--設置-->
    <item android:id="@+id/title_setting"
        android:title="@string/setting"
        android:visible="false"
        android:icon="@mipmap/ic_setting"
        app:showAsAction="ifRoom"/>
    <!--搜索-->
    <item android:id="@+id/title_search"
        android:title="@string/search"
        android:visible="false"
        android:icon="@mipmap/ic_search"
        app:showAsAction="ifRoom"/>
    <!--日期-->
    <item android:id="@+id/title_date"
        android:title="@string/date"
        android:visible="false"
        android:icon="@mipmap/ic_calendar"
        app:showAsAction="ifRoom"/>
    <!--刷新-->
    <item android:id="@+id/title_refresh"
        android:title="@string/refresh"
        android:visible="false"
        android:icon="@mipmap/botton_refresh"
        app:showAsAction="ifRoom"/>
    <!--<item android:id="@+id/title_more1"-->
        <!--android:title="@string/right2"-->
        <!--app:showAsAction="never"/>-->
    <!--<item android:id="@+id/title_more2"-->
        <!--android:title="@string/right2"-->
        <!--app:showAsAction="never"/>-->
</menu>
只有android:title沒有icon則直接顯示文字

 

 改變文字顏色,修改style.xml文件(theme)

<item name="actionMenuTextColor">#ffffff</item>

3.BaseActivity

/**
 * Created by Administrator on 2016/9/5 0005.
 */

public class BaseActivity extends AppCompatActivity implements View.OnClickListener, Toolbar.OnMenuItemClickListener {
    /*Toolbar*/
    private Toolbar toolBar;
    /**/
    private CoordinatorLayout coordinatorLayout;
    /*是否第一次加載圖標(主要針對首頁一對多fragment)*/
    private boolean title_menu_first = true;
    /*是否第一次加載返回*/
    private boolean title_back_first = true;
    /*是否是返回(有可能是代表別的功能)*/
    private boolean is_title_back = true;
    /*返回*/
    private ImageView titleBack;
    /*標題名稱*/
    private TextView titleName;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //豎屏
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
        setRootView();
//        coordinatorLayout = getView(R.id.coordinatorLayout);
        initToolbar();
        initWidght();
    }
    protected void setRootView(){}
    protected void initWidght(){};
    //
    protected <T extends View>T getView(int resourcesId){
        return (T) findViewById(resourcesId);
    }/*初始化toolbar*/
    private void initToolbar(){
        toolBar = getView(R.id.toolbar);
        toolBar.setTitle("");
        toolBar.setTitleTextColor(Color.WHITE);
        titleName = getView(R.id.title_name);
//        setSupportActionBar(toolBar);
    }
    /**
     * 設置返回
     * @param back :是否返回:是-->返回,不是則設置其他圖標
     * @param resourcesId :圖標id,返回時隨意設置,不使用
     * */
    protected void setTitleBack(final boolean back,int resourcesId){
        is_title_back = back;
        if (title_back_first || titleBack == null){
            titleBack= getView(R.id.title_back);
            titleBack.setOnClickListener(this);
            title_back_first = false;
        }
        titleBack.setVisibility(View.VISIBLE);
        if (!back){
            titleBack.setImageResource(resourcesId);
        }
    }
    /**
     * 設置title
     * @param title :title
     * */
    protected void setTitleName(String title){
        titleName.setText(title);
    }
    /**
     * title右側:圖標類
     * */
    protected void setRightRes(){
        //擴展menu
        toolBar.inflateMenu(R.menu.base_toolbar_menu);
        //添加監聽
        toolBar.setOnMenuItemClickListener(this);
    }
    /**
     * 顯示title圖標
     * @param itemId :itemId :圖標對應的選項id(1個到3個),最多顯示3兩個
     * */
    protected void showTitleRes(int... itemId){
        if (title_menu_first){
            setRightRes();
            title_menu_first = false;
        }
        for (int item:itemId){
            //顯示
            toolBar.getMenu().findItem(item).setVisible(true);//通過id查找,也可以用setIcon()設置圖標
//            toolBar.getMenu().getItem(0).setVisible(true);//通過位置查找
        }
    }
    /**
     * 隱藏title圖標
     * @param itemId :圖標對應的選項id
     * */
    protected void goneTitleRes(int... itemId){
        if (titleBack != null)
            titleBack.setVisibility(View.GONE);
        for (int item:itemId){
            //隱藏
            toolBar.getMenu().findItem(item).setVisible(false);
        }
    }
    /**
     * title右側文字
     * @param str :文字內容
     * */
    protected void setTitleRightText(String str){
        TextView textView = getView(R.id.title_rightTv);
        textView.setVisibility(View.VISIBLE);
        textView.setText(str);
        textView.setOnClickListener(this);
    }
    @Override
    public void onClick(View v) {
        if (v.getId() == R.id.title_back && is_title_back){
            onBackPressed();
        }
    }
    //toolbar菜單監聽
    @Override
    public boolean onMenuItemClick(MenuItem item) {
        return false;
    }
}

 

3.Activity使用

 

public class MainActivity extends BaseActivity{
    @Override
    protected void setRootView() {
        super.setRootView();
        setContentView(R.layout.activity_main);
    }
    @Override
    protected void initWidght() {
        super.initWidght();
       setTitleName(getResources().getString(R.string.chat));//title
//                  setTitleBack(false,R.mipmap.ic_search);//有圖標,但不是返回
                    //setTitleBack(true,0);//返回
//                  setTitleRightText("保存");//右側文字
                    showTitleRes(R.id.title_add,R.id.title.setting);//擴展menu(圖標)
                    //goneTitleRes(R.id.title_add);隱藏圖標,一般用不到
    }
    @Override
    public void onClick(View v) {
        if (v.getId() == R.id.title_back){
            workFragment.titleSearch();
        }
    }
    @Override
    public boolean onMenuItemClick(MenuItem item) {
        switch (item.getItemId()){
            case R.id.title_add://添加
                break;
            case R.id.title_apps://應用break;
            case R.id.title_setting://設置
                break;
        }
        return super.onMenuItemClick(item);
    }
}

 

 Toolbar其他設置

1.去掉左邊空白,在style文件里設置

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorAppTheme</item>
        <item name="colorPrimaryDark">@color/colorAppTheme</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="toolbarStyle" tools:ignore="NewApi">@style/MyToolBar</item>
    </style>
    <style name="MyToolBar" parent="Widget.AppCompat.Toolbar">
         <!--左邊邊距-->
        <item name="contentInsetStart">0dp</item>
    </style>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM