android开发中toolbar标配的控件,之前一直写布局来安排里面文字和图片,虽然不难但确实麻烦,今天自己弄了一个通用的控件,大家分享一下。看图
下面看代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="zhoufazhan.com.customtoolbar.MainActivity">
<zhoufazhan.com.customtoolbar.CustomToolBar
android:id="@+id/customToolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
app:leftImage="@drawable/ic_arrow_back_white_24dp"
app:leftText="返回"
app:leftTextColor="@color/white"
app:middleText="标题"
app:middleTextColor="@color/white"
app:rightText="更多"
app:rightTextColor="@color/white" />
</LinearLayout>
简单地不得了,所有的参数都写在一个控件里面,再也不用嵌套和布局了,里面还实现了按钮的点击实现。
接下来介绍一下我是如何实现的
首先toolbar分为3块区域,左中右
左边:图片加文字,当然也可以单独图片或是单独文字(这里没有给出图片)
中间:文字
右边:文字,也可以是文字加图片,也可以是单独的图片,与左边一样
那么图片加文字是如何排版的呢,我们知道TextView有一个属性drawLeft和drawRight等
ToolBar的布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="@color/colorPrimary"
android:layout_height="50dp">
<TextView
android:id="@+id/left"
android:padding="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center"
/>
<TextView
android:id="@+id/middle"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="center"
/>
<TextView
android:id="@+id/right"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center"
/>
</RelativeLayout>
超级简单,就是三个TextView
接下来就是重点了,自定义CustomToolBar
使用的布局文件就是上面的
自定义控件的第一步就是分析属性,这里我们要设置,文字、图片、文字的大小、文字的颜色等。
<resources>
<declare-styleable name="CustomToolBar">
<attr name="leftText" format="string" />
<attr name="middleText" format="string" />
<attr name="rightText" format="string" />
<attr name="leftTextSize" format="dimension" />
<attr name="middleTextSize" format="dimension" />
<attr name="rightTextSize" format="dimension" />
<attr name="leftTextColor" format="color" />
<attr name="middleTextColor" format="color" />
<attr name="rightTextColor" format="color" />
<attr name="leftImage" format="reference"/>
<attr name="rightImage" format="reference"/>
</declare-styleable>
</resources>
具体的含义已经很明确就不解释了。
下面看看主要的代码
public class CustomToolBar extends RelativeLayout implements View.OnClickListener {
private float leftTextSize;
private float middleTextSize;
private float rightTextSize;
private int leftTextColor;
private int middleTextColor;
private int rightTextColor;
private String leftText;
private String middleText;
private String rightText;
private int leftImage;
private int rightImage;
private TextView leftView;
private TextView middleView;
private TextView rightView;
public CustomToolBar(Context context) {
this(context, null);
}
public CustomToolBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CustomToolBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomToolBar, defStyleAttr, 0);
initView(typedArray);
typedArray.recycle();
}
public void initView(TypedArray typedArray) {
LayoutInflater.from(getContext()).inflate(R.layout.toolbar, this);
leftView = (TextView) findViewById(R.id.left);
leftView.setOnClickListener(this);
middleView = (TextView) findViewById(R.id.middle);
rightView = (TextView) findViewById(R.id.right);
rightView.setOnClickListener(this);
leftText = typedArray.getString(R.styleable.CustomToolBar_leftText);
rightText = typedArray.getString(R.styleable.CustomToolBar_rightText);
middleText = typedArray.getString(R.styleable.CustomToolBar_middleText);
leftTextSize = typedArray.getDimension(R.styleable.CustomToolBar_leftTextSize, 20);
middleTextSize = typedArray.getDimension(R.styleable.CustomToolBar_middleTextSize, 20);
rightTextSize = typedArray.getDimension(R.styleable.CustomToolBar_rightTextSize, 20);
leftTextColor = typedArray.getColor(R.styleable.CustomToolBar_leftTextColor, getResources().getColor(R.color.colorPrimary));
middleTextColor = typedArray.getColor(R.styleable.CustomToolBar_middleTextColor, getResources().getColor(R.color.colorPrimary));
rightTextColor = typedArray.getColor(R.styleable.CustomToolBar_rightTextColor, getResources().getColor(R.color.colorPrimary));
leftImage = typedArray.getResourceId(R.styleable.CustomToolBar_leftImage, 0);
rightImage = typedArray.getResourceId(R.styleable.CustomToolBar_rightImage, 0);
if (leftImage > 0) {
setLeftImage(leftImage);
} else {
setLeftText(leftText);
}
if (rightImage > 0) {
setRightImage(rightImage);
} else {
setRightText(rightText);
}
setLeftTextSize(leftTextSize);
setLeftTextColor(leftTextColor);
setMiddleTextColor(middleTextColor);
setMiddleTextSize(middleTextSize);
setMiddleText(middleText);
setRightTextColor(rightTextColor);
setRightTextSize(rightTextSize);
}
public CustomToolBar(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.left:
if (toolBarClick != null) {
toolBarClick.leftClick();
}
break;
case R.id.right:
if (toolBarClick != null) {
toolBarClick.rightClick();
}
break;
}
}
public void setLeftTextSize(float leftTextSize) {
leftView.setTextSize(leftTextSize);
}
public void setMiddleTextSize(float middleTextSize) {
middleView.setTextSize(middleTextSize);
}
public void setRightTextSize(float rightTextSize) {
rightView.setTextSize(rightTextSize);
}
public void setLeftTextColor(int leftTextColor) {
leftView.setTextColor(leftTextColor);
}
public void setMiddleTextColor(int middleTextColor) {
middleView.setTextColor(middleTextColor);
}
public void setRightTextColor(int rightTextColor) {
rightView.setTextColor(rightTextColor);
}
public void setLeftText(String leftText) {
leftView.setText(leftText);
}
public void setMiddleText(String middleText) {
middleView.setText(middleText);
}
public void setRightText(String rightText) {
rightView.setText(rightText);
}
public void setLeftImage(int leftImage) {
setLeftText(leftText);
Drawable drawable = getResources().getDrawable(leftImage, null);
drawable.setBounds(0, 0, drawable.getMinimumWidth() / 2, drawable.getMinimumHeight() / 2);
leftView.setCompoundDrawables(drawable, null, null, null);
}
public void setRightImage(int rightImage) {
setRightText(rightText);
Drawable drawable = getResources().getDrawable(rightImage, null);
drawable.setBounds(0, 0, drawable.getMinimumWidth() / 2, drawable.getMinimumHeight() / 2);
rightView.setCompoundDrawables(null, null, drawable, null);
}
interface ToolBarClick {
void leftClick();
void rightClick();
}
public ToolBarClick toolBarClick;
public void setToolBarClick(ToolBarClick toolBarClick) {
this.toolBarClick = toolBarClick;
}
}
代码不多,也很简单,基本都是初始化一些参数,然后定义了一个接口用于点击回调。