本项目来自菜鸟窝,有兴趣者点击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(建造自己的轮子,才能跑得更快),废话少说。上效果
内容
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:引用。