自定义RadioGroup实现TabLayout

先来看一下效果图:

其实核心功能就两个:

1、选中后改变字体颜色及加上下标

2、事件回调

实现思路:

1、通过向RadioGroup中添加RadioButton实现Tab的填充

2、通过设置设置特定属性去除选择按钮效果

3、通过使用Selector控制RadioButton的字体及下标

具体实现

准备下标的drawable:



    
        
            
        
    

效果图:

准备字体颜色切换的Selector:

主要用于字体黑灰之间的切换。



    
    

准备下标切换的Selector:

选中则显示刚才使用layer-list定义的下标Drawable,否则什么都不设置,也就是不显示下标。



    

重写RadioGroup:

核心就在add 方法了,直接通过代码创建RadioButton并加入到当前布局中即可。

public class TabLayout extends RadioGroup {
    private int layoutHeight = 50;//单位为DP

    public TabLayout(Context context) {
        super(context);
        init();
    }

    public TabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        setOrientation(HORIZONTAL);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //重置当前RadioGroup的高度
        setMeasuredDimension(widthMeasureSpec, MeasureSpec.makeMeasureSpec(dp2px(this.layoutHeight), MeasureSpec.EXACTLY));
    }

    public void addTab(String title) {
        add(new Tab(title));
    }

    public void addTab(String title, Object tag) {
        add(new Tab(title, tag));
    }
    
    //核心代码!!!!<-----------------------------------------------------------------------------------------
    @SuppressLint({"NewApi", "ResourceType"})
    private void add(Tab tab) {
        RadioButton radioButton = new RadioButton(getContext());
        radioButton.setText(tab.getTitle());
        //绑定Selector(核心!!!)
        radioButton.setTextColor(getResources().getColorStateList(R.drawable.selector_text_color));
        radioButton.setBackground(getResources().getDrawable(R.drawable.selector_indicator));
        //设置RadioButton的大小
        LayoutParams params = new LayoutParams(0, dp2px(50));
        params.weight = 1;//采用按比例划分
        //
        radioButton.setLayoutParams(params);
        radioButton.setGravity(Gravity.CENTER);
        radioButton.setTag(tab);
        radioButton.setButtonDrawable(null);//删除自带的选择按钮效果
        this.addView(radioButton);
        if (getChildCount() == 1) {//默认选中第一个Tab
            radioButton.setChecked(true);
        }
    }

    /**
     * 将特定的dp值转换为像素单位
     */
    private int dp2px(int dp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics());
    }

    public static class Tab {
        private String title;
        private Object tag;

        public Tab(String title) {
            this.title = title;
        }

        public Tab(String title, Object tag) {
            this.title = title;
            this.tag = tag;
        }

        public Object getTag() {
            return tag;
        }

        public void setTag(Object tag) {
            this.tag = tag;
        }

        public String getTitle() {
            return title;
        }

        public void setTitle(String title) {
            this.title = title;
        }
    }

}

效果图:

增加事件回调:

省略了部分无关代码。

public class TabLayout extends RadioGroup {
    private int layoutHeight = 50;//单位为DP
    private ItemClickListener itemClickListener;

    public TabLayout(Context context) {
        super(context);
        init();
    }

    public TabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        setOrientation(HORIZONTAL);
        //处理回调
        setOnCheckedChangeListener(new OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                RadioButton radio = group.findViewById(checkedId);
                if (!radio.isChecked()) return;
                Tab tab = (Tab) radio.getTag();
                if (itemClickListener != null) {
                    itemClickListener.onClick(tab, indexOfChild(radio));
                }
            }
        });
    }
    
    //注册回调
    public void setItemClickListener(ItemClickListener itemClickListener) {
        this.itemClickListener = itemClickListener;
    }
    
    //回调接口
    public interface ItemClickListener {
        void onClick(Tab tab, int position);
    }
}

具体使用:

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        this.tabLayout = findViewById(R.id.tabLayout);

        this.tabLayout.addTab("Type 1");
        this.tabLayout.addTab("Type 2");
        this.tabLayout.addTab("Type 3");

        this.tabLayout.setItemClickListener(new TabLayout.ItemClickListener() {
            @Override
            public void onClick(TabLayout.Tab tab, int position) {
                Toast.makeText(MainActivity.this, tab.getTitle(), Toast.LENGTH_SHORT).show();
            }
        });
    }
}

布局



    

最后

主要是依靠现有的View进行组合来实现的,还可以依据这个思路搞出一些其他的View出来。

你可能感兴趣的:(android,ui,view)