首先,去除标题栏:
styly.xml中加两行代码去除标题栏
<resources><style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
</resources>
Toolbar基本使用:
1.布局文件
<android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:title="大标题"
app:subtitle="小标题"
app:navigationIcon="@drawable/ic_arrow_back"/>
2.activity文件
toolbar=findViewById(R.id.toolbar);toolbar.inflateMenu(R.menu.toolbar_menu); //加载菜单栏
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"clicked back",Toast.LENGTH_SHORT).show();
}
});
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.menu_save:
Toast.makeText(MainActivity.this,"clicked save",Toast.LENGTH_SHORT).show();
break;
case R.id.menu_setting:
Toast.makeText(MainActivity.this,"clicked seting",Toast.LENGTH_SHORT).show();
break;
}
return false;
}
});
3.menu文件
<?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/menu_save"
android:orderInCategory="100"
android:title="Save"
app:showAsAction="ifRoom"/>
<!--
这个属性可接受的值有:
1、always:使菜单项一直显示在ToolBar上。
2、ifRoom:如果有足够的空间,这个值会使菜单项显示在ToolBar上。
3、never:使菜单项永远都不出现在ToolBar上,在…的子项中显示。
4、withText:使菜单项和它的图标,菜单文本一起显示。
-->
<item
android:id="@+id/menu_setting"
android:enabled="true"
android:orderInCategory="100"
android:title="Setting"
android:visible="true" />
</menu>
效果如下:
下面是本篇第二部分内容,也是重点掌握部分。
自定义Toolbar
这里只做了基本功能实现,可能还不太美观,目标实现如下效果:
看似两个布局,实际是一个布局文件,先用控件的visibility="gone"属性实现隐藏,需要控件时让其显示。
这样就实现了一个应用只用一个toolbar。你可能觉得有些地方利用toolbar控件的自身属就能实现了(右侧加号),这里主要是教你自定义控件的方法。
1.首先自定义toolbar布局文件toolbar.xml如下:
<?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="wrap_content"> <EditText android:id="@+id/toolbar_searchView" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:layout_centerVertical="true" android:drawableLeft="@android:drawable/ic_menu_search" android:hint="请输入搜索内容" android:layout_marginRight="60dp" android:maxLines="1" android:visibility="gone"/> <TextView android:id="@+id/toolbar_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:gravity="center" android:layout_centerHorizontal="true" android:textColor="@android:color/white" android:textSize="20sp" android:visibility="gone"/> <ImageButton android:id="@+id/toolbar_rightButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:visibility="gone" style="@android:style/Widget.Toolbar.Button.Navigation"/> </RelativeLayout>
2.其次自定义SwToolbar继承自Toolbar
重写构造方法
public SwToolbar(Context context) { this(context,null); } public SwToolbar(Context context, @Nullable AttributeSet attrs) { this(context, attrs,0); } public SwToolbar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr);
initView();
//后续具体功能实现代码都写下这里面,
//因为一个参数的构造方法调用两个参数的构造方法,两个参数的调用三个参数的构造方法,
//所以具体实现要写在这里
}
初始化view
private void initView() { if (view==null) { mInflater = LayoutInflater.from(getContext()); view = mInflater.inflate(R.layout.toolbar, null); mTextTitle = view.findViewById(R.id.toolbar_title); mSearchView = view.findViewById(R.id.toolbar_searchView); mRightImageButton = view.findViewById(R.id.toolbar_rightButton); LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL); //如果没有这行代码,title不会居中显示 addView(view,layoutParams); } }
标题和搜索框的显示与隐藏、
public void showSearchView(){ if (mSearchView!=null){ mSearchView.setVisibility(VISIBLE); } } public void hideSearchView(){ if (mSearchView!=null){ mSearchView.setVisibility(GONE); } } public void showTitleView(){ if (mTextTitle!=null){ mTextTitle.setVisibility(VISIBLE); } } public void hideTitleView(){ if (mTextTitle!=null){ mTextTitle.setVisibility(GONE); } }
重写setTitle方法
@Override public void setTitle(int resId) { setTitle(getContext().getText(resId)); } @Override public void setTitle(CharSequence title) { initView(); if (mTextTitle!=null){ mTextTitle.setText(title); showTitleView(); } }
通过以上条件,就可以实现如下界面了
<com.baiseng.zl.swmonkmall.widget.SwToolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" app:title="主页" />
下面介绍通过标签属性设置:搜索栏是否可见、右侧按钮图片
<com.baiseng.zl.swmonkmall.widget.SwToolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" app:title="主页" app:rightButtonIcon="@android:drawable/ic_menu_add"/>
<com.baiseng.zl.swmonkmall.widget.SwToolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" app:isShowSearchView="true"/>
那么是如何通过添加一行属性实现的呢?
首先,创建属性配置文件attrs.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="SwToolbar"> <attr name="rightButtonIcon" format="reference"/> <attr name="isShowSearchView" format="boolean"/> </declare-styleable> </resources> <!-- 关于format取值,只介绍常用: 1. reference:参考某一资源ID。 2. color:颜色值。 3. string:字符串。 4. boolean:布尔值。 5. dimension:尺寸值。 -->
然后在自定义的toolbar中添加如下:
(你可能不太理解为何这样写,按住Ctrl键,鼠标点击super(context, attrs, defStyleAttr);,查看他的源码)
public SwToolbar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr);
if (attrs!=null){ final TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), attrs, R.styleable.SwToolbar, defStyleAttr, 0); final Drawable rightIcon = a.getDrawable(R.styleable.SwToolbar_rightButtonIcon); if (rightIcon != null ) { setRightButtonIcon(rightIcon); } boolean isShowSearchView=a.getBoolean(R.styleable.SwToolbar_isShowSearchView,false); if (isShowSearchView){ showSearchView(); hideTitleView(); } a.recycle(); } }
public void setRightButtonIcon(Drawable icon) { if (mRightImageButton!=null){ mRightImageButton.setImageDrawable(icon); mRightImageButton.setVisibility(VISIBLE); } }
通过以上就可以实现两种Toolbar布局。
现在再为右侧ImageButton添加点击监听:
public void setRightButtonOnClickner(OnClickListener listener){ mRightImageButton.setOnClickListener(listener); }
这样,就可以在MainActivity中直接调用了
toolbar.setRightButtonOnClickner(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this,"click rightButton",Toast.LENGTH_SHORT).show(); } });