Google官方推荐使用它来代替ActionBar,ToolBar应该都是很熟悉了,随便一搜都能找到一大堆资料,现在之所以还写算是记录一下成长的足迹吧,也希望能够帮助到需要的人,在这里有两种使用方式,但从某一点上看算是一种,话不多说了
1、从上图可以看出ToolBar继承自ViewGroup,所以可以直接把它当做一个ViewGroup来使用, 一定要使用V7包中的ToolBar才可以,而不是V7包中的ToolBar只有 API Level 21 也就是 Android 5.0 以上的版本才能使用。
layout 布局文件:
?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar_Main" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimary"> <TextView android:text="石头" android:gravity="center" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="center" /> <ImageView android:src="@drawable/img_q" android:layout_width="48dp" android:layout_height="48dp" android:layout_gravity="right" /> </android.support.v7.widget.Toolbar> </RelativeLayout>效果图: 一开始也看到很多人写的使用这种方式,但是当自己用的时候才发现title不能居中,icon也不能显示在bar的左(右)侧,后来尝试使用gravity来控制子view的位置,但是在使用studio的时候,输入gravity并没有给出有关设置这个属性的提示,一开始还以为没有这个属性,后来从别的地方拷了一个这个属性发现这个属性可以使用,而且并没有报错,如果有碰到这个问题的赶紧试试吧。 (温馨提示:使用的时候不要忘了把manifest中application的theme设置为或继承Theme.AppCompat.Light.NoActionBar)
自定义view继承ToolBar(这种方式忘了是从哪个视频上看到的了,就仿里面的就造了一个)
先看一下效果:
使用:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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:orientation="vertical"> <com.example.l.toolbardemo.CustomToolBar android:id="@+id/toolbar" android:background="?attr/colorPrimary" android:minHeight="@dimen/actionBarSize" android:layout_width="match_parent" android:layout_height="wrap_content" app:rightButtonText="更多" app:isShowButton="true" app:tvToolBarTitle="标题" android:layout_alignParentTop="true" app:imgBackWidth="@dimen/dimen_25dp" app:imgBackHight="@dimen/dimen_25dp" /> </RelativeLayout>自定义ToolBar:
在构造器中填充 layout: /** * 填充 layout */ private void initView() { if (mView == null) { mInflater = LayoutInflater.from(getContext()); mView = mInflater.inflate(R.layout.layout_custom_toolbar, null); imgToolBarBack = ((ImageView) mView.findViewById(R.id.img_custom_toolbar_back)); tvToolBarTitle = ((TextView) mView.findViewById(R.id.tv_custom_toolbar_title)); btnToolBarRight = ((Button) mView.findViewById(R.id.btn_custom_toolbar_right)); //设置 params LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL); addView(mView, lp); } } layout_custom_toolbar 布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="@dimen/actionBarSize"> <ImageView android:id="@+id/img_custom_toolbar_back" android:layout_width="@dimen/dimen_25dp" android:layout_height="@dimen/dimen_25dp" android:layout_centerVertical="true" android:layout_marginLeft="@dimen/dimen_10dp" android:padding="@dimen/dimen_3dp" android:src="@mipmap/ic_action_back" /> <TextView android:id="@+id/tv_custom_toolbar_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:textColor="@color/color_white" android:textSize="@dimen/dimen_16sp" /> <Button android:id="@+id/btn_custom_toolbar_right" style="@android:style/Widget.Material.Toolbar.Button.Navigation" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:textColor="@color/color_white" android:visibility="gone" /> </RelativeLayout> 获取自定义属性,并给layout的子view 设置属性 private void initAttrs(AttributeSet attrs, int defStyleAttr) { if (attrs != null) { final TintTypedArray typedArray = TintTypedArray.obtainStyledAttributes(getContext(), attrs, R.styleable.CustomToolBar, defStyleAttr, 0); //# 设置返回图片 img 宽高属性 int imgBackWidth = (int) typedArray.getDimension(R.styleable.CustomToolBar_imgBackWidth, imgBackWidthDefault); int imgBackHight = (int) typedArray.getDimension(R.styleable.CustomToolBar_imgBackHight, imgBackHightDefault); if (imgToolBarBack != null) { ViewGroup.LayoutParams layoutParams = imgToolBarBack.getLayoutParams(); layoutParams.width = imgBackWidth; layoutParams.height = imgBackHight; imgToolBarBack.setLayoutParams(layoutParams); } //# 设置标题 tv 属性 String strTitle = typedArray.getString(R.styleable.CustomToolBar_tvToolBarTitle); float strTitleSize = typedArray.getDimension(R.styleable.CustomToolBar_tvToolBarTitleSize, strTitleSizeDefault); if (tvToolBarTitle != null) { tvToolBarTitle.setText("".equals(strTitle) ? strTitleDefault : strTitle); tvToolBarTitle.setTextSize(strTitleSize); } //# 设置右侧 btn 属性 final Drawable rightIcon = typedArray.getDrawable(R.styleable.CustomToolBar_rightButtonIcon); if (rightIcon != null) { setRightButtonIcon(rightIcon); } boolean isShowButton = typedArray.getBoolean(R.styleable.CustomToolBar_isShowButton, false); if (isShowButton) { showBhtton(); } CharSequence rightButtonText = typedArray.getText(R.styleable.CustomToolBar_rightButtonText); if (rightButtonText != null) setRightButtonText(rightButtonText); typedArray.recycle(); } } 方法的定义: private void setRightButtonText(CharSequence text) { btnToolBarRight.setText(text); btnToolBarRight.setVisibility(View.VISIBLE); } /** * 是否显示右侧 btn */ private void showBhtton() { if (btnToolBarRight != null) btnToolBarRight.setVisibility(VISIBLE); } @TargetApi(Build.VERSION_CODES.JELLY_BEAN) private void setRightButtonIcon(Drawable icon) { if (btnToolBarRight != null) { btnToolBarRight.setBackground(icon); btnToolBarRight.setVisibility(VISIBLE); } } public void setRightButtonIcon(int icon) { setRightButtonIcon(getResources().getDrawable(icon)); } 自定义属性: <declare-styleable name="CustomToolBar"> <attr name="imgBack" format="reference" /> <attr name="imgBackWidth" format="dimension|reference"/> <attr name="imgBackHight" format="dimension|reference"/> <attr name="tvToolBarTitle" format="dimension|string" /> <attr name="tvToolBarTitleSize" format="dimension|reference" /> <attr name="rightButtonIcon" format="reference" /> <attr name="isShowButton" format="boolean" /> <attr name="rightButtonText" format="dimension|string" /> </declare-styleable>写到这感觉和第一种方法差不多,就是看起来比前一种高大上一些,但是要复杂不少,具体使用哪一个,还要看自己了。写第二种就是因为可以熟悉一下自定义View,如果能帮助到你~
Demo地址