美文网首页
自定义底部标题栏

自定义底部标题栏

作者: f6a40ba32131 | 来源:发表于2016-06-28 10:19 被阅读87次

    效果


    11.png

    源码

    public class MyTabWidget extends LinearLayout  {
        private static final String TAG = "MyTabWidget";
        //图片集
        private int[] mDrawableIds = new int[] { R.drawable.bg_home_icon_page,
                R.drawable.bg_home_icon_check, R.drawable.bg_home_icon_shop };
        // 存放底部菜单的各个文字CheckedTextView
        private List<CheckedTextView> mCheckedList = new ArrayList<CheckedTextView>();
        // 存放在底部菜单的头像
        private CircleImageView mCheckImage;
        // 存放底部菜单每项View
        private List<View> mViewList = new ArrayList<View>();
        // 底部菜单的文字数组
        private CharSequence[] mLabels;
    
        public MyTabWidget(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
    
            TypedArray a = context.obtainStyledAttributes(attrs,
                    R.styleable.TabWidget, defStyle, 0);
    
            // 读取xml中,各个tab使用的文字
            mLabels = a.getTextArray(R.styleable.TabWidget_bottom_labels);
    
            if (null == mLabels || mLabels.length <= 0) {
                try {
                    throw new ErrorException("底部菜单的文字数组未添加...");
                } catch (ErrorException e) {
                    e.printStackTrace();
                } finally {
                    Logger.i(MyTabWidget.class.getSimpleName() + " 出错");
                }
                a.recycle();
                return;
            }
    
            a.recycle();
    
            // 初始化控件
            init(context);
        }
    
        public MyTabWidget(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
    //      init(context);
        }
    
        public MyTabWidget(Context context) {
            super(context);
    //      init(context);
        }
    
        private CircleImageView mImage = null;
        /**
         * 初始化控件
         */
        private void init(final Context context) {
            this.setOrientation(LinearLayout.HORIZONTAL);
            this.setBackgroundResource(R.color.white_fa);
    
            LayoutInflater inflater = LayoutInflater.from(context);
    
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            params.gravity = Gravity.CENTER_VERTICAL | Gravity.LEFT;
    
            int size = mLabels.length;
            for(int i = 0; i < size; i++) {
                final int index = i;
                CheckedTextView itemName = null;
                View viewText = null;
                View viewImage = null;
                if(i < (size - 1)) {
    
                    //每个tab对应的layout
                    viewText = inflater.inflate(R.layout.layout_bottom_tab_item, null);
                    itemName = (CheckedTextView) viewText
                            .findViewById(R.id.item_name);
                    itemName.setCompoundDrawablesWithIntrinsicBounds(
                            context.getResources().getDrawable(mDrawableIds[i]), null, null, null);
                    itemName.setText(mLabels[i]);
    
    //              if(i == 0) {
    //                  params.leftMargin = 20;
    //              } else {
    //                  params.leftMargin = 10;
    //              }
    
                    this.addView(viewText, params);
    
                    // CheckedTextView设置索引作为tag,以便后续更改颜色、图片等
                    itemName.setTag(index);
    
                    // 将CheckedTextView添加到list中,便于操作
                    mCheckedList.add(itemName);
                    // 将各个tab的View添加到list
                    mViewList.add(viewText);
    
                    viewText.setOnClickListener(new OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            // 设置底部图片和文字的显示
                            setTabsDisplay(context, index);
    
                            if (null != mTabListener) {
                                // tab项被选中的回调事件
                                mTabListener.onTabSelected(index);
                            }
                        }
                    });
    
    
                } else {
                    viewImage = inflater.inflate(R.layout.layout_bottom_tab_image_bar, null);
                    mImage = (CircleImageView) viewImage
                            .findViewById(R.id.item_image);
                    RelativeLayout imageLayout = (RelativeLayout)viewImage.findViewById(R.id.image_layout);
    
                    //设置图片
    //              params.weight = 1.0f;
    //              params.rightMargin = 20;
                    this.addView(viewImage, params);
    
                    mViewList.add(viewImage);
    
                    viewImage.setOnClickListener(new OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            // 设置底部图片和文字的显示
                            setTabsDisplay(context, index);
    
                            if (null != mTabListener) {
                                // tab项被选中的回调事件
                                mTabListener.onTabSelected(index);
                            }
                        }
                    });
                }
    
                // 初始化 底部菜单选中状态,默认第一个选中
                if(itemName != null) {
                    if (i == 0) {
                        itemName.setChecked(true);
                        itemName.setTextColor(Color.rgb(255, 0, 64));
    //                  viewText.setBackgroundColor(Color.rgb(240, 241, 242));
                    } else {
                        itemName.setChecked(false);
                        itemName.setTextColor(Color.rgb(191, 191, 191));
    //                  viewText.setBackgroundColor(Color.rgb(250, 250, 250));
                    }
                }
            }
        }
    
        /**
         * 设置指示点的显示
         *
         * @param context
         * @param position
         *            显示位置
         * @param visible
         *            是否显示,如果false,则都不显示
         */
    //  public void setIndicateDisplay(Context context, int position,
    //                                 boolean visible) {
    //      int size = mIndicateImgs.size();
    //      if (size <= position) {
    //          return;
    //      }
    //      ImageView indicateImg = mIndicateImgs.get(position);
    //      indicateImg.setVisibility(visible ? View.VISIBLE : View.GONE);
    //  }
    
        /**
         * 设置底部导航中图片显示状态和字体颜色
         */
        public void setTabsDisplay(Context context, int index) {
            int size = mLabels.length;
            for (int i = 0; i < size; i++) {
                if(i < (size - 1)) {
                    CheckedTextView checkedTextView = mCheckedList.get(i);
                    if ((Integer) (checkedTextView.getTag()) == index) {
                        Logger.i(mLabels[index] + " is selected...");
                        checkedTextView.setChecked(true);
                        checkedTextView.setTextColor(Color.rgb(255, 0, 64));
    //                  mViewList.get(i).setBackgroundColor(Color.rgb(240, 241, 242));                  
                    } else {
                        checkedTextView.setChecked(false);
                        checkedTextView.setTextColor(Color.rgb(191, 191, 191));
    //                  mViewList.get(i).setBackgroundColor(Color.rgb(250, 250, 250));
                    }
                } 
            }
        }
    
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
            int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
    
            int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
            int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
    
            if (widthSpecMode != MeasureSpec.EXACTLY) {
                widthSpecSize = 0;
            }
    
            if (heightSpecMode != MeasureSpec.EXACTLY) {
                heightSpecSize = 0;
            }
    
            if (widthSpecMode == MeasureSpec.UNSPECIFIED
                    || heightSpecMode == MeasureSpec.UNSPECIFIED) {
            }
    
            // 控件的最大高度,就是下边tab的背景最大高度
            int width;
            int height;
            width = Math.max(getMeasuredWidth(), widthSpecSize);
            height = Math.max(this.getBackground().getIntrinsicHeight(),
                    heightSpecSize);
            setMeasuredDimension(width, height);
        }
    
        // 回调接口,用于获取tab的选中状态
        private OnTabSelectedListener mTabListener;
    
        public void setOnTabSelectedListener(OnTabSelectedListener listener) {
            this.mTabListener = listener;
        }
    
        /**
         * 设置个人头像
         * @param url
         */
        public void onToBitmap(final String url) {
            if(url == null) {
                mImage.setImageResource(R.drawable.icon_head);
            } else {
                if (mImage != null) {
                    Bitmap bitmap = BitmapUtils.getLocalOrNetBitmap(url);
                    if(bitmap == null) {
                        mImage.setImageResource(R.drawable.icon_head);
                    } else {
                        mImage.setImageBitmap(bitmap);
                    }
                }
            }
        }
    }
    
    

    相关文章

      网友评论

          本文标题:自定义底部标题栏

          本文链接:https://www.haomeiwen.com/subject/uvktjttx.html