Android 顶部切换实现（二）

谁借莪１个温暖的怀抱￠ 2022-07-15 07:16 242阅读 0赞

上篇介绍了导航栏下的滑动切换实现，这次要介绍的是导航栏上的切换，在很多应用中经常见到，先看效果图。

![这里写图片描述][20161107163701912]

当点击导航条上的分类的时候，会根据选中的分类显示下面的数据。

先看布局文件。

frameHead是自定义的导航条，需要注意的是RadioGroup控件contentLayout，这正是这篇文章介绍的切换的区域。关于RadioGroup控件这里不详细介绍。导航条下面是一个搜索框和Listview显示数据。

下面看代码。

/** * 适配器显示 */
        private void setAdapter() {
            if (!Validators.isEmpty(typeList)) {
                getBaseMenuDtoList(typeList.get(0).getUserList());
            } else {
                getBaseMenuDtoList(new ArrayList<EtohUser>());
            }
            getTab(typeList);
            setSelector(0);
                       addressAdapter = new AddressClassAdapter(AddressBookClassActivity.this, baseMenuDtoList, getLoginedUser()
                        .getUserId());
            }
            addressListView.setAdapter(addressAdapter);
        }

getBaseMenuDtoList( )方法用来转换成其他对象，typeList不为空的时候，默认取第一个，给adapter装载数据。

和上篇一样，效果实现也是放在

getTab(typeList);
    setSelector(0);

里面。

getTab()代码。

/** * 获得切换页 */
        private void getTab(final List<UserType> typeList) {
            roleChangeArea.removeAllViews();
            for (int i = 0; i < typeList.size(); i++) {
                RadioButton radioButton = (RadioButton) LayoutInflater.from(this).inflate(R.layout.address_class_tab_item, null);
                radioButton.setText(typeList.get(i).getOwnerName());
                if (i == 0) {
                    radioButton.setBackgroundDrawable(DrawableUtils.getLeftTabDrawable(this));
                } else if (i == typeList.size() - 1) {
                    radioButton.setBackgroundDrawable(DrawableUtils.getRightTabDrawable(this));
                } else {
                    radioButton.setBackgroundDrawable(DrawableUtils.getCenterTabDrawable(this));
                }
                roleChangeArea.addView(radioButton);
                final int id = i;
                radioButton.setOnClickListener(new OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        setSelector(id);
                        String word = keySearch.getEditableText().toString().trim();
                        if (TextUtils.isEmpty(word)) {
                            addressAdapter.notifyDataSetChanged(baseMenuDtoList);
                        } else {
                            doSearch(word);
                        }
                    }
                });
            }
        }

其中roleChangeArea就是上面布局文件中的RadioGroup，这里也实现了根据类型数量动态添加切换按钮，R.layout.address\_class\_tab\_item是一个RadioButton.

这里介绍下，一般是在XML里写selector实现选中非选中的时候布局改变的，这里换成的代码的方式，具体可以查找StateListDrawable，这里不加详细介绍。这是其中的一个方法-DrawableUtils.getLeftTabDrawable(this)，其他两个类似。

public static Drawable getLeftTabDrawable(Context context){
            StateListDrawable drawable = new StateListDrawable();
            drawable.addState(new int[]{-android.R.attr.state_checked}, context.getResources().getDrawable(R.color.color_transparent));
            drawable.addState(new int[]{android.R.attr.state_checked}, context.getResources().getDrawable(R.drawable.address_class_tab_bg_left_checked));
            return drawable;
        }

String word = keySearch.getEditableText().toString().trim();
                        if (TextUtils.isEmpty(word)) {
                            addressAdapter.notifyDataSetChanged(baseMenuDtoList);
                        } else {
                            doSearch(word);
                        }

是实现搜索的这里也不详细介绍。

下面看下setSelector(int id)方法。

/** * 选中效果 */
        public void setSelector(int id) {
            position = id;
            RadioButton radioButton = (RadioButton) roleChangeArea.getChildAt(position);
            radioButton.setChecked(true);
            getBaseMenuDtoList(typeList.get(id).getUserList());
        }

其实就是改变状态，不要忘记上面我们已经在代码里添加了相当于selector的StateListDrawable。即：

radioButton.setBackgroundDrawable(DrawableUtils.getLeftTabDrawable(this));

所以这里

RadioButton radioButton = (RadioButton) roleChangeArea.getChildAt(position);
            radioButton.setChecked(true);

获取到点击的RadioButton，设置选中状态背景就会相应改变。

getBaseMenuDtoList(typeList.get(id).getUserList());

用来加载对应的分类数据。

回到getTab()代码。

if (TextUtils.isEmpty(word)) {
                            addressAdapter.notifyDataSetChanged(baseMenuDtoList);
                        } else {
                            doSearch(word);
                        }

可以看到当word空的时候，会刷新数据，这个数据就是上面 getBaseMenuDtoList(typeList.get(id).getUserList());里更新的。

[20161107163701912]: /images/20220715/f9d15aab94ab4c338e2db1c53fa490dd.png