自定义toolbar

来源:互联网 发布:淘宝联盟手机版分享赚 编辑:程序博客网 时间:2024/04/20 12:30

    Toolbar 是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件是actionBar的升级版。相比actionBar,更加的灵活,可任意放置。在现在的app开发中有很多需要标题栏与状态栏背景色一致,所以我们需要对其适配,但是toolbar的标题栏和菜单栏不太符合我们在项目中的使用,所以我们还需要对其进行一些自定义。

     让我们来看看怎么对toolbar进行自定义?

      1.我们使用framelayout作为父容器,将toolbar添加到父容器中,同时自定义一个布局用于覆盖在toolbar上。

package com.project.coordinatortablayout.toolbar.widget;import android.content.Context;import android.content.res.TypedArray;import android.support.v7.widget.Toolbar;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.FrameLayout;import com.project.coordinatortablayout.R;/** * 自定义toolbar * Created by meijing on 2017/2/12. */public class ToolBarHelper {      //上下文     private Context  mContext;     /*视图构造器*/     private LayoutInflater  mLayoutInflater;     //帧布局 容器父布局     private FrameLayout mRootView;     //用户的布局     private View        mUserView;     //toolbar     private Toolbar     mToolBar;    /**     * 两个属性     * 1.toolbar是否悬浮在窗口之上     * 2.toolbar的高度获取     */    private  static  int[]  ATTRS=new int[]{            R.attr.windowActionBarOverlay,            R.attr.actionBarSize};    public ToolBarHelper(Context context, int resId) {        this.mContext=context;        mLayoutInflater=LayoutInflater.from(context);        //初始化父布局        initRootView();        //初始化用户定义的布局        initUserView(resId);        //初始化toolbar        initToolBar();    }    /**     * 初始化布局  直接创建一个帧布局,作为视图容器的父布局     */    private void initRootView() {        mRootView=new FrameLayout(mContext);        ViewGroup.LayoutParams  params=new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,                ViewGroup.LayoutParams.MATCH_PARENT);        mRootView.setLayoutParams(params);    }    /**     * 初始化用户定义的布局     * @param resId     */    private void initUserView(int resId) {        mUserView = mLayoutInflater.inflate(resId, null);        FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);        TypedArray typedArray = mContext.getTheme().obtainStyledAttributes(ATTRS);        /*获取主题中定义的悬浮标志*/        boolean overly = typedArray.getBoolean(0, false);        /*获取主题中定义的toolbar的高度*/        int toolBarSize = (int) typedArray.getDimension(1,(int) mContext.getResources().getDimension(R.dimen.abc_action_bar_default_height_material));        typedArray.recycle();        /*如果是悬浮状态,则不需要设置间距*/        params.topMargin = overly ? 0 : toolBarSize;        mRootView.addView(mUserView, params);    }    /**     * 初始化toolbar     */    private void initToolBar() {        View toolbarView=mLayoutInflater.inflate(R.layout.toolbar,mRootView);        mToolBar= (Toolbar) toolbarView.findViewById(R.id.id_tool_bar);    }    /**     * 获取父布局     * @return     */    public   FrameLayout  getRootView(){        return   mRootView;    }    /**     * 获取toolbar布局     * @return     */    public  Toolbar  getToolBarView(){        return  mToolBar;    }}
      

    布局文件:toolbar.xml

<?xml version="1.0" encoding="utf-8"?><FrameLayout 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.support.v7.widget.Toolbar        android:minHeight="?attr/actionBarSize"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:id="@+id/id_tool_bar"        android:paddingTop="@dimen/toolbar_padding_top"        android:background="?attr/colorPrimary"        app:navigationIcon="?attr/homeAsUpIndicator"        >    </android.support.v7.widget.Toolbar></FrameLayout>

       2.创建一个基类

package com.project.coordinatortablayout.toolbar.config;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.MenuItem;import com.project.coordinatortablayout.utils.ToolBarHelper;public class BaseTransparentBar2Activity extends AppCompatActivity {    private ToolBarHelper mToolBarHelper ;    public Toolbar toolbar ;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);    }    @Override    public void setContentView(int layoutResID) {        mToolBarHelper = new ToolBarHelper(this,layoutResID) ;        toolbar = mToolBarHelper.getToolBar() ;        setContentView(mToolBarHelper.getContentView());        /*把 toolbar 设置到Activity 中*/        setSupportActionBar(toolbar);        /*自定义的一些操作*/        onCreateCustomToolBar(toolbar) ;    }    public void onCreateCustomToolBar(Toolbar toolbar){        toolbar.setContentInsetsRelative(0,0);    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        if (item.getItemId() == android.R.id.home){            finish();            return true ;        }        return super.onOptionsItemSelected(item);    }}

       3.创建一个类继承于基类

package com.project.coordinatortablayout.toolbar;import android.os.Bundle;import android.support.v7.widget.Toolbar;import android.view.Menu;import android.view.MenuItem;import com.project.coordinatortablayout.R;import com.project.coordinatortablayout.toolbar.config.BaseTransparentBar2Activity;/** * 自定义toolbae布局 */public class CustomToolbarActivity extends BaseTransparentBar2Activity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_custom_toolbar);    }    @Override    public void onCreateCustomToolBar(Toolbar toolbar) {        super.onCreateCustomToolBar(toolbar);        toolbar.showOverflowMenu() ;        getLayoutInflater().inflate(R.layout.toobar_button, toolbar) ;//        TextView btn = (TextView) toolbar.findViewById(R.id.id_txt_btn);//        btn.setOnClickListener(new View.OnClickListener() {//            @Override//            public void onClick(View v) {//                Toast.makeText(v.getContext(),"test",Toast.LENGTH_SHORT).show();//            }//        });    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.//        getMenuInflater().inflate(R.menu.menu_main, menu);//        MenuItem itemCompat = menu.findItem(R.id.action_search) ;//        SearchView mSearchView = (SearchView) MenuItemCompat.getActionView(itemCompat);//        mSearchView.setIconified(false);//        mSearchView.setIconifiedByDefault(false);        return true;    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        // Handle action bar item clicks here. The action bar will        // automatically handle clicks on the Home/Up button, so long        // as you specify a parent activity in AndroidManifest.xml.        int id = item.getItemId();        //noinspection SimplifiableIfStatement        if (id == R.id.action_settings) {            return true;        }        return super.onOptionsItemSelected(item);    }}

       视图:toolbar_button.xml为自定义的标题栏,用于覆盖在在toolbar上

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:background="@android:color/transparent"    >    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        >        <TextView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_centerVertical="true"            android:gravity="center"            android:text="toolBar"            android:textColor="@android:color/white"            android:textSize="18sp"            android:layout_marginRight="?attr/actionBarSize"            />        <TextView            android:id="@+id/id_txt_btn"            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:layout_alignParentRight="true"            android:layout_marginRight="8dp"            android:gravity="center"            android:text="按钮"/>    </RelativeLayout></RelativeLayout>

      视图:activity_custom_toolbar.xml为用户的布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_custom_toolbar"    android:layout_width="match_parent"    android:orientation="vertical"    android:layout_height="match_parent">    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center"        android:text="自定义toolbar"/></LinearLayout>


      4.在res下新建values  values-v19文件

    

     5.在values中的dimens.xml设置  

       values   dimens.xml

 <dimen name="toolbar_padding_top">0dp</dimen>

      values-v19  dimens.xml 

<dimen name="toolbar_padding_top">25dp</dimen>
     
      6.在values-v19文件夹下的style.xml文件中  在AppTheme中设置
<item name="android:windowTranslucentStatus">true</item>
        7.清单文件中声明theme
      
运行效果图:







0 0
原创粉丝点击