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,如果能帮助到你~