前言
这篇文章,我们来介绍一个自定义toolbar(建造自己的轮子,才能跑得更快),废话少说。上效果
toolbar
内容
1.建立自己的toolbar,首先你需要一个布局。老规矩先上代码!
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="/apk/res-auto"
android:id="@+id/toolbar_view"
android:background="@color/red">
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:textColor="@color/white"
android:id="@+id/tb_title"
android:text="测试数据"
android:textSize="20sp"
android:visibility="gone"
android:layout_centerVertical="true"
/>
android:id="@+id/tb_Search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:layout_marginRight="30dp"
android:hint="请输入搜索的商品"
android:textColorHint="@color/white"
android:textColor="@color/white"
android:drawableLeft="@android:drawable/ic_menu_search"
android:visibility="gone"
android:layout_centerVertical="true"
/>
android:id="@+id/tb_right_button"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="center"
android:paddingRight="20dp"
android:textSize="15sp"
android:gravity="center_vertical|right"
android:textColor="@color/white"
android:text="编辑"
android:background="?attr/colorPrimary"
android:visibility="gone"
/>
android:id="@+id/tb_right_imagebutton"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="center"
android:gravity="center_vertical|right"
android:textColor="@color/white"
android:background="?attr/colorPrimary"
android:src="@drawable/icon_grid_32"
android:paddingRight="10dp"
android:visibility="gone"
/>
android:id="@+id/tb_left_ImageButton"
android:layout_marginLeft="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_gravity="center"
android:paddingLeft="10dp"
android:background="?attr/colorPrimary"
android:layout_centerVertical="true"
android:src="@drawable/icon_back_32px"
android:visibility="gone"
/>
android:paddingTop="20dp"
android:paddingBottom="5dp"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:visibility="gone"
android:id="@+id/tb_user_photo"/>
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tb_user_name"
android:layout_centerHorizontal="false"
android:layout_below="@+id/tb_user_photo"
android:textColor="@color/white"
android:gravity="center_horizontal|center_vertical"
android:text="点击登录"
android:visibility="gone"
android:paddingBottom="10dp"/>
这里我采用了RelativeLayout布局,利用控件的android:visibility属性控制控件的显示和隐藏。以达到适应各种要求的目的.
2.建立自定义属性 代码代码:
在value文件夹下,新建attrs文件。添加如下代码。
上述代码定义了一些自定义属性,这些属性将会在后续得到使用。
3.自定义控件的建立以及自定义属性的读取
public class CnToolbar extends Toolbar {
private LayoutInflater inflater ;
private View mView ;
private TextView mTextTitle ;
private Button mRightButton ;
private ImageButton mLeftImageButton ;
private EditText mSearchView ;
private ImageButton mRightImageButton ;
private ImageView userPhoto ;
private TextView userName ;
private TintTypedArray b ;
public CnToolbar(Context context) {
this(context , null);
}
public CnToolbar(Context context, @Nullable AttributeSet attrs) {
this(context, attrs , 0);
}
public CnToolbar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
b = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
Toolbar, defStyleAttr, 0);
initView() ;
if(getIsShowSearchView()){
showSearchView();
return;
}
setRightButton(attrs, defStyleAttr) ;
setLeftButton(attrs , defStyleAttr) ;
setRightImageButton(attrs ,defStyleAttr );
setUserName(attrs , defStyleAttr);
setUserPhoto(attrs , defStyleAttr);
b.recycle();
}
//将mview布局加入toolBar中
private void initView() {
if (mView == null) {
inflater = LayoutInflater.from(this.getContext());
mView = inflater.inflate(toolbar_view, null);
mSearchView = (EditText) mView.findViewById(R.id.tb_Search_view);
mTextTitle = (TextView) mView.findViewById(R.id.tb_title);
mRightButton = (Button) mView.findViewById(R.id.tb_right_button);
mLeftImageButton = (ImageButton) mView.findViewById(R.id.tb_left_ImageButton) ;
mRightImageButton = (ImageButton) mView.findViewById(R.id.tb_right_imagebutton) ;
userPhoto = (ImageView) mView.findViewById(R.id.tb_user_photo) ;
userName = (TextView) mView.findViewById(R.id.tb_user_name) ;
mSearchView.setSelected(false);
mSearchView.setClickable(false);
LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);
this.addView(mView, lp);
}
}
@Override
public void setTitle(@StringRes int resId) {
setTitle(getContext().getText(resId));
}
@Override
public void setTitle(CharSequence title) {
initView();
if(title != null){
if(mTextTitle == null){
mTextTitle = (TextView) mView.findViewById(R.id.tab_title);
}
mTextTitle.setText(title);
mTextTitle.setVisibility(VISIBLE);
mTextTitle.setSelected(false);
mTextTitle.setFocusable(false);
}
}
private void setUserName(@Nullable AttributeSet attrs, int defStyleAttr){
if(attrs != null){
final String rightIcon = b.getString( Toolbar_userName );
if (rightIcon != null && rightIcon.length()>0) {
setUserNameText(rightIcon);
}
}
}
public void setUserNameText(String s){
userName.setText(s);
userName.setVisibility(VISIBLE);
userName.setEnabled(true);
}
private void setUserPhoto(@Nullable AttributeSet attrs, int defStyleAttr){
if(attrs != null){
final Drawable leftIcon = b.getDrawable(Toolbar_userPhotoIcon);
if (leftIcon != null) {
setUserPhotoIcon(leftIcon);
}
}
}
public void setUserClickable(boolean enable){
userPhoto.setClickable(enable);
}
private void setUserPhotoIcon(Drawable drawable) {
if( drawable != null ){
userPhoto.setImageDrawable(drawable);
userPhoto.setVisibility(VISIBLE);
userPhoto.setEnabled(true);
}
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public void setUserPhotoIcon(Context context , String resId , int defResId){
if( resId != null && resId.length() > 0){
Glide.with(context).load(resId).transform(new GlideCircleTransform(context)).into(this.userPhoto);
}else {
setUserPhotoIcon(context , defResId) ;
}
userPhoto.setVisibility(VISIBLE);
userPhoto.setEnabled(true);
}
public void setUserPhotoIcon(Context context , int resId){
Glide.with(context).load(resId).transform(new GlideCircleTransform(context)).into(this.userPhoto);
userPhoto.setVisibility(VISIBLE);
userPhoto.setEnabled(true);
}
public void setUserPhotoClickListener (OnClickListener listener) {
userPhoto.setOnClickListener(listener);
}
public void setRightButton(@Nullable AttributeSet attrs, int defStyleAttr){
if(attrs != null){
final String rightIcon = b.getString( Toolbar_rightButtonText );
if (rightIcon != null && rightIcon.length()>0) {
setRightButtonText(rightIcon);
}
}
}
public void setRightButtonText (String s) {
Log.d("----" , "----------------s---------------" + s) ;
mRightButton.setText(s);
mRightButton.setVisibility(VISIBLE);
mRightButton.setEnabled(true);
}
public void setRightButtonIcOnClickListener (OnClickListener listener) {
mRightButton.setOnClickListener(listener);
}
public void setLeftButton(@Nullable AttributeSet attrs, int defStyleAttr){
if(attrs != null){
final Drawable leftIcon = b.getDrawable(Toolbar_leftButtonIcon);
if (leftIcon != null) {
setLeftButtonIcon(leftIcon);
}
}
}
public void setLeftButtonIcon (Drawable drawable) {
if( drawable != null ){
mLeftImageButton.setImageDrawable(drawable);
mLeftImageButton.setVisibility(VISIBLE);
userPhoto.setVisibility(GONE);
userName.setVisibility(GONE);
mLeftImageButton.setEnabled(true);
}
}
public void setLeftButtonIcOnClickListener (OnClickListener listener) {
mLeftImageButton.setOnClickListener(listener);
}
public void setRightImageButton(@Nullable AttributeSet attrs, int defStyleAttr){
if(attrs != null){
final Drawable rightImage = b.getDrawable(Toolbar_rightImageButtonIcon);
if (rightImage != null) {
setRightButtonIcon(rightImage);
}
}
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public void setRightButtonIcon(int resId){
this.setRightButtonIcon(getResources().getDrawable(resId , null));
}
public void setRightButtonIcon (Drawable drawable) {
if( drawable != null ){
mRightImageButton.setImageDrawable(drawable);
mRightImageButton.setVisibility(VISIBLE);
mRightImageButton.setEnabled(true);
}
}
public void setRightImgeButtonIcOnClickListener (OnClickListener listener) {
mRightImageButton.setOnClickListener(listener);
}
public boolean getIsShowSearchView(){
final boolean isShowSearchView = b.getBoolean(Toolbar_isShowSearchView , false) ;
return isShowSearchView ;
}
public void showSearchView(){
mRightButton.setVisibility(GONE);
mLeftImageButton.setVisibility(GONE);
mTextTitle.setVisibility(GONE);
mSearchView.setVisibility(VISIBLE);
}
public void notShowSearchView(){
mRightButton.setVisibility(VISIBLE);
mLeftImageButton.setVisibility(VISIBLE);
mTextTitle.setVisibility(VISIBLE);
mSearchView.setVisibility(GONE);
}
public void setSearchViewOnClicklistener( OnClickListener listener ){
mSearchView.setOnClickListener(listener);
}
}
代码有些长。大概操作分为以下几步:
继承ToolBar类,重写构造方法。
得到一个TintTypedArray 对象,通过b = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
Toolbar, defStyleAttr, 0)获得。其中Toolbar为你自定义的类型。使用完后通过b.recycle()进行回收。
随后可以获得自定义的属性值,对之前自定义的view进行数据填充和设置,设置完毕后。使用 this.addView(mView, lp);
将View添加入toolbar中。
使用自定义ToolBar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:minWidth="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="分类"
android:titleTextColor="@color/white"
app:isShowSearchView="false"
>
注意,自定义属性要使用app:引用。
求助:
我在使用时,会遇到toolbar在不设置右按钮,不显示操作框时,显示长度会跟随下方text框的内容长度。求大神解答。