仿京东商城系列2------自定义toolbar

本项目来自菜鸟窝,有兴趣者点击http://www.cniao5.com/course/

项目已经做完,源码地址。https://github.com/15829238397/CN5E-shop

仿京东商城系列0------项目简介
仿京东商城系列1------fragmentTabHost实现底部导航栏
仿京东商城系列2------自定义toolbar
仿京东商城系列3------封装Okhttp
仿京东商城系列4------轮播广告条
仿京东商城系列5------商品推荐栏
仿京东商城系列6------下拉刷新上拉加载的商品列表
仿京东商城系列7------商品分类页面
仿京东商城系列8------自定义的数量控制器
仿京东商城系列9------购物车数据存储器实现
仿京东商城系列10------添加购物车,管理购物车功能实现
仿京东商城系列11------商品排序功能以及布局切换实现(Tablayout)
仿京东商城系列12------商品详细信息展示(nativie与html交互)
仿京东商城系列13------商品分享(shareSDK)
仿京东商城系列14------用户登录以及app登录拦截
仿京东长城系列15------用户注册,SMSSDK集成
仿京东商城系列16------支付SDK集成
仿京东商城系列17------支付功能实现
仿京东商城系列18------xml文件读取(地址选择器)
仿京东商城系列19------九宫格订单展示
仿京东商城系列20------终章


前言

这篇文章,我们来介绍一个自定义toolbar(建造自己的轮子,才能跑得更快),废话少说。上效果

仿京东商城系列2------自定义toolbar_第1张图片
toolbar

内容

1.建立自己的toolbar,首先你需要一个布局。老规矩先上代码!




    
    

    
    

    
    

这里我采用了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,
                R.styleable.CnToolbar, 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(R.layout.cntoolbar_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( R.styleable.CnToolbar_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(R.styleable.CnToolbar_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( R.styleable.CnToolbar_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(R.styleable.CnToolbar_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(R.styleable.CnToolbar_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(R.styleable.CnToolbar_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,
    R.styleable.CnToolbar, defStyleAttr, 0)获得。其中R.styleable.CnToolbar为你自定义的类型。使用完后通过b.recycle()进行回收。
  • 随后可以获得自定义的属性值,对之前自定义的view进行数据填充和设置,设置完毕后。使用 this.addView(mView, lp);
    将View添加入toolbar中。

使用自定义ToolBar

 

注意,自定义属性要使用app:引用。

求助:

我在使用时,会遇到toolbar在不设置右按钮,不显示操作框时,显示长度会跟随下方text框的内容长度。求大神解答。

你可能感兴趣的:(仿京东商城系列2------自定义toolbar)