自定义ToolBar
2016-06-26 10:20
363 查看
Android官方提供的ToolBar虽然已经很强大,但是它的样式仍然有一些单调,现在自定义ToolBar来为它添加更多的新颖样式。比如SearchText和Text可自由切换的ToolBar
实现步骤:
①自定义布局文件toolBar.xml,包括EditView,TextView和一个Button
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/toolbar_searchview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_centerVertical="true"
android:gravity="center"
android:drawableLeft="@mipmap/icon_search"
style="@style/search_view"
android:hint="请输入搜索内容"
android:visibility="gone"
/>
<TextView
android:id="@+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:gravity="center"
android:textColor="@color/white"
android:textSize="20sp"
android:visibility="gone"
/>
<Button
android:id="@+id/toolbar_rightButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:textColor="@color/white"
android:visibility="gone"
style="@android:style/Widget.Material.Toolbar.Button.Navigation"
/>
</RelativeLayout>
②自定义属性文件 attr.xml
<resources>
<declare-styleable name="MyToolBar">
<attr name="rightButtonIcon" format="reference"/>
<attr name="isShowSearchView" format="boolean"/>
<attr name="rightButtonText" format="string"/>
</declare-styleable>
</resources>
③自定义ToolBar-----MyToolBar,继承ToolBar
public class MyToolBar extends Toolbar {
}
④MyToolBar的构造函数
public CNiaoToolBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
setContentInsetsRelative(10,10);
if(attrs !=null) {
final TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
R.styleable.MyToolBar, defStyleAttr, 0);
final Drawable rightIcon = a.getDrawable(R.styleable.MyToolBar_rightButtonIcon);
if (rightIcon != null) {
setRightButtonIcon(rightIcon);
}
boolean isShowSearchView = a.getBoolean(R.styleable.MyToolBar_isShowSearchView,false);
if(isShowSearchView){
showSearchView();
hideTitleView();
}
CharSequence rightButtonText = a.getText(R.styleable.MyToolBar_rightButtonText);
if(rightButtonText !=null){
setRightButtonText(rightButtonText);
}
a.recycle();
}
}
即首先初始化布局文件中的控件initView():
private void initView() {
if(mView == null) {
mInflater = LayoutInflater.from(getContext());
mView = mInflater.inflate(R.layout.toolbar, null);
mTextTitle = (TextView) mView.findViewById(R.id.toolbar_title);
mSearchView = (EditText) mView.findViewById(R.id.toolbar_searchview);
mRightButton = (Button) mView.findViewById(R.id.toolbar_rightButton);
LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);
addView(mView, lp);
}
}
然后解析自定义属性
if(attrs !=null) {
final TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
R.styleable.CNiaoToolBar, defStyleAttr, 0);
final Drawable rightIcon = a.getDrawable(R.styleable.CNiaoToolBar_rightButtonIcon);
if (rightIcon != null) {
//setNavigationIcon(navIcon);
setRightButtonIcon(rightIcon);
}
boolean isShowSearchView = a.getBoolean(R.styleable.CNiaoToolBar_isShowSearchView,false);
if(isShowSearchView){
showSearchView();
hideTitleView();
}
CharSequence rightButtonText = a.getText(R.styleable.CNiaoToolBar_rightButtonText);
if(rightButtonText !=null){
setRightButtonText(rightButtonText);
}
a.recycle();
}
现在就算定义好了一个自定义ToolBar
⑤在项目中使用MyToolBar时,完全与ToolBar的使用方法相同,
加入布局文件,获取MyToolBar,添加监听器,添加Settings选项
⑥显示Text文本
<com.example.administrator.shopdemo.widget.CNiaoToolBar
android:id="@id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:rightButtonText="编辑"
app:title="购物车" />
显示SearchView栏
<com.example.administrator.shopdemo.widget.CNiaoToolBar
android:id="@+id/toolbar_home"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:title="商品详情"
app:isShowSearchView="true"
app:navigationIcon="@drawable/icon_back_32px"/>
⑦
private void initToolBar(View view){
mToolBar = (CNiaoToolBar) view.findViewById(R.id.toolbar_home);
mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getContext(), "back", Toast.LENGTH_LONG).show();
}
});
mToolBar.inflateMenu(R.menu.menu_main);
mToolBar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
int id = item.getItemId();
if(id == R.id.action_settings){
Toast.makeText(getContext(), "menu", Toast.LENGTH_LONG).show();
return true;
}
return false;
}
});
}
实现步骤:
①自定义布局文件toolBar.xml,包括EditView,TextView和一个Button
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/toolbar_searchview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_centerVertical="true"
android:gravity="center"
android:drawableLeft="@mipmap/icon_search"
style="@style/search_view"
android:hint="请输入搜索内容"
android:visibility="gone"
/>
<TextView
android:id="@+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:gravity="center"
android:textColor="@color/white"
android:textSize="20sp"
android:visibility="gone"
/>
<Button
android:id="@+id/toolbar_rightButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:textColor="@color/white"
android:visibility="gone"
style="@android:style/Widget.Material.Toolbar.Button.Navigation"
/>
</RelativeLayout>
②自定义属性文件 attr.xml
<resources>
<declare-styleable name="MyToolBar">
<attr name="rightButtonIcon" format="reference"/>
<attr name="isShowSearchView" format="boolean"/>
<attr name="rightButtonText" format="string"/>
</declare-styleable>
</resources>
③自定义ToolBar-----MyToolBar,继承ToolBar
public class MyToolBar extends Toolbar {
}
④MyToolBar的构造函数
public CNiaoToolBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
setContentInsetsRelative(10,10);
if(attrs !=null) {
final TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
R.styleable.MyToolBar, defStyleAttr, 0);
final Drawable rightIcon = a.getDrawable(R.styleable.MyToolBar_rightButtonIcon);
if (rightIcon != null) {
setRightButtonIcon(rightIcon);
}
boolean isShowSearchView = a.getBoolean(R.styleable.MyToolBar_isShowSearchView,false);
if(isShowSearchView){
showSearchView();
hideTitleView();
}
CharSequence rightButtonText = a.getText(R.styleable.MyToolBar_rightButtonText);
if(rightButtonText !=null){
setRightButtonText(rightButtonText);
}
a.recycle();
}
}
即首先初始化布局文件中的控件initView():
private void initView() {
if(mView == null) {
mInflater = LayoutInflater.from(getContext());
mView = mInflater.inflate(R.layout.toolbar, null);
mTextTitle = (TextView) mView.findViewById(R.id.toolbar_title);
mSearchView = (EditText) mView.findViewById(R.id.toolbar_searchview);
mRightButton = (Button) mView.findViewById(R.id.toolbar_rightButton);
LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);
addView(mView, lp);
}
}
然后解析自定义属性
if(attrs !=null) {
final TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
R.styleable.CNiaoToolBar, defStyleAttr, 0);
final Drawable rightIcon = a.getDrawable(R.styleable.CNiaoToolBar_rightButtonIcon);
if (rightIcon != null) {
//setNavigationIcon(navIcon);
setRightButtonIcon(rightIcon);
}
boolean isShowSearchView = a.getBoolean(R.styleable.CNiaoToolBar_isShowSearchView,false);
if(isShowSearchView){
showSearchView();
hideTitleView();
}
CharSequence rightButtonText = a.getText(R.styleable.CNiaoToolBar_rightButtonText);
if(rightButtonText !=null){
setRightButtonText(rightButtonText);
}
a.recycle();
}
现在就算定义好了一个自定义ToolBar
⑤在项目中使用MyToolBar时,完全与ToolBar的使用方法相同,
加入布局文件,获取MyToolBar,添加监听器,添加Settings选项
⑥显示Text文本
<com.example.administrator.shopdemo.widget.CNiaoToolBar
android:id="@id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:rightButtonText="编辑"
app:title="购物车" />
显示SearchView栏
<com.example.administrator.shopdemo.widget.CNiaoToolBar
android:id="@+id/toolbar_home"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:title="商品详情"
app:isShowSearchView="true"
app:navigationIcon="@drawable/icon_back_32px"/>
⑦
private void initToolBar(View view){
mToolBar = (CNiaoToolBar) view.findViewById(R.id.toolbar_home);
mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getContext(), "back", Toast.LENGTH_LONG).show();
}
});
mToolBar.inflateMenu(R.menu.menu_main);
mToolBar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
int id = item.getItemId();
if(id == R.id.action_settings){
Toast.makeText(getContext(), "menu", Toast.LENGTH_LONG).show();
return true;
}
return false;
}
});
}
相关文章推荐
- Struts2访问Servlet API的3种方式
- 百度的冬天:曾梦想成伟大公司 却为何陷入危机
- SparkR安装部署及数据分析实例
- 快速幂模板
- Object类源码学习
- 复习(数据结构):线性表 : C:动态分配内存
- Activiti部署的方式
- 365WaterandJugProblem
- 安装与破解photoshop
- jQuery滚动新闻实现代码
- 获取天气预报接口
- hadoop之Hbase简介
- Codeforces Round #357 (Div. 2) C. Heap Operations (优先队列)
- windows上PHP中Apache+MySQL+PHP环境的搭建
- acm之贪心算法题目5
- 简单地使用nusoap调用webservice
- Scikit-learn介绍几种常用的特征选择方法
- HTML5 文件上传
- PHP输出当前进程所有变量 / 常量 / 模块 / 函数 / 类
- C#泛型参数的约束