美文网首页
仿照Ios segmentView效果的实现

仿照Ios segmentView效果的实现

作者: 木小伍 | 来源:发表于2017-12-21 09:39 被阅读0次
    直接上效果图片
    图片效果1 图片效果二
    实现思路

    通过自定义view 继承至RadioGroup,通过RadioGroup的监听事件,来达到选项切换的效果。

        setOrientation(LinearLayout.HORIZONTAL); //设置横向排列
           line.setBounds(0, 0, 1, line.getMinimumHeight()); //设置分割线
           if (null != attrs) {
               TypedArray typedArray = mContext.obtainStyledAttributes(attrs, R.styleable.SegmentView);
               //设置选项的个数
               number = typedArray.getInt(R.styleable.SegmentView_sv_number, DEFAULT_NUM);
               //文字的大小
               textSize = typedArray.getInt(R.styleable.SegmentView_text_size, 16);
               initTextView(number);
               typedArray.recycle();
           }
           //注册监听事件
           setOnCheckedChangeListener(this);
    

    初始化视图

     private void initTextView(int number) {
            if (number <= 0)
                return;
    
            setBackgroundResource(R.drawable.shape_guide_corner20_gray);
            radioButtons = new RadioButton[number];
            titles = new String[number];
    
            //不同状态下的按钮显示不同的颜色
            ColorStateList csl = getResources().getColorStateList(R.color.selector_segment_color_tab);
            RadioButton radioButton;
            //实现中间部分的textview,两边都是圆角
            for (int i = 0; i < number; i++) {
                radioButton = new RadioButton(mContext);
                radioButton.setId(START_ID + i);
                // 设置textview的布局宽高并设置为weight属性都为1
                radioButton.setLayoutParams(new LayoutParams(dip2px(mContext, 90),
                        LayoutParams.MATCH_PARENT, 1));
    
                radioButton.setBackgroundResource(R.drawable.selector_tv_corner20_guid);
                radioButton.setCompoundDrawables(null, null, line, null);
                radioButton.setTextColor(csl);
                radioButton.setText(titles[i]);
                radioButton.setGravity(Gravity.CENTER);
                radioButton.setPadding(0, 12, 0, 12);
                radioButton.setButtonDrawable(null);
                setSegmentTextSize(radioButton, textSize);
                radioButtons[i] = radioButton;
            }
            //处理最后一个radiobutton,去掉右边的线
            radioButtons[number - 1].setCompoundDrawables(null, null, null, null);
            // 加入textview
            this.removeAllViews();
            for (RadioButton rb : radioButtons) {
                this.addView(rb);
            }
            this.invalidate();//重新draw()
    
            //有时候会出现点击了一次,再点击其他的时候总是会出现两个
            if (number > 1) {
                radioButtons[1].setChecked(true);
            }
            radioButtons[0].setChecked(true);
    
        }
    

    在监听事件中,每一次切状态的时候,将所有的按钮都恢复为未选中的状态

       @Override
        public void onCheckedChanged(RadioGroup radioGroup, int checkId) {
            int index = checkId - START_ID; //当前选中的按钮序号
            if (null == radioButtons || number <= index)
                return;
            for (RadioButton button : radioButtons) { //恢复为默认的状态
                button.setCompoundDrawables(null, null, line, null);
            }
            if (index > 0) {
                radioButtons[index - 1].setCompoundDrawables(null, null, null, null);
            }
            radioButtons[index].setCompoundDrawables(null, null, null, null);
            lastCheckIndex = index;
            //最后一个需要将右边的分割线去掉
            radioButtons[number - 1].setCompoundDrawables(null, null, null, null);
    
            if (null != segmentListener) { //处理自定义接口事件
                segmentListener.onSegmentViewClick(this, index);
            }
        }
    

    在按钮选项状态发生变化的时候,触发自定义的一个接口

        // 定义一个接口接收点击事件
        public interface onSegmentViewClickListener {
            public void onSegmentViewClick(View view, int postion);
        }
    
        public void setOnSegmentViewClickListener(onSegmentViewClickListener segmentListener) {
            this.segmentListener = segmentListener;
        }
    

    最后附上完整的代码链接完整项目demo

    相关文章

      网友评论

          本文标题:仿照Ios segmentView效果的实现

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