Android 顶部切换实现（二）

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

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

先看布局文件。

<RelativeLayout    android:id="@+id/tab3"    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:background="@color/color_white">    <!-- 标题栏 -->    <RelativeLayout        android:id="@+id/frameHead"        style="@style/head_style"        android:gravity="center_vertical">        <RelativeLayout            android:id="@+id/returnBtn"            android:layout_width="50dp"            android:layout_height="fill_parent"            android:background="@drawable/btn_right">            <ImageView                android:id="@+id/returnBtn1"                style="@style/font5"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_centerHorizontal="true"                android:layout_centerVertical="true"                android:contentDescription="@string/no_word"                android:enabled="false"                android:background="@drawable/btn_back_new"                android:duplicateParentState="true"                android:gravity="center"/>        </RelativeLayout>        <Button            android:id="@+id/returnBtn2"            style="@style/font5"            android:layout_width="wrap_content"            android:layout_height="fill_parent"            android:layout_alignParentLeft="true"            android:layout_centerVertical="true"            android:background="@drawable/btn_right"            android:gravity="center"            android:paddingLeft="18dp"            android:paddingRight="18dp"            android:visibility="gone"/>        <TextView            android:id="@+id/title"            style="@style/font1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:layout_marginLeft="130dp"            android:ellipsize="end"            android:gravity="center_vertical"            android:singleLine="true"            />        <LinearLayout            android:id="@+id/searchBtnArea"            android:layout_width="50dp"            android:layout_height="match_parent"            android:layout_alignParentRight="true"            android:layout_centerVertical="true"            android:background="@drawable/btn_right"            android:gravity="center"            android:visibility="gone"            android:orientation="horizontal"/>        <Button            android:id="@+id/rightBtn2"            style="@style/font5"            android:layout_width="wrap_content"            android:layout_height="fill_parent"            android:layout_alignParentRight="true"            android:layout_centerVertical="true"            android:background="@drawable/btn_right"            android:gravity="center"            android:paddingLeft="18dp"            android:paddingRight="18dp"            android:visibility="gone"/>        <View            android:layout_alignParentBottom="true"            style="@style/title_line_style"/>        <RadioGroup            android:id="@+id/contentLayout"            android:layout_width="wrap_content"            android:layout_height="28dp"            android:layout_centerInParent="true"            android:background="@drawable/address_class_tab_bg"            android:orientation="horizontal"/>    </RelativeLayout>    <!-- 搜索框 -->    <LinearLayout        android:id="@+id/searchLayout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_below="@id/frameHead"        android:background="@color/color_search_bg"        android:focusable="true"        android:focusableInTouchMode="true"        android:gravity="center_vertical"        android:paddingLeft="10dp"        android:paddingRight="10dp"        android:visibility="visible"        android:orientation="horizontal">        <xxx.view.DelEditText            android:id="@+id/keySearch"            style="@style/search_area"            android:background="@drawable/search_back_new">        </xxx.view.DelEditText>        <TextView            android:id="@+id/clearSearch"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:padding="10dp"            android:text="@string/qu_xiao"            android:textColor="@color/color_9b9b9b"            android:textSize="16sp"            android:visibility="gone"/>    </LinearLayout>    <RelativeLayout        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_below="@+id/searchLayout">        <LinearLayout            android:id="@+id/addressLinearLayout"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_above="@+id/photoArea"            android:orientation="vertical">            <ListView                android:id="@+id/addressListView"                android:layout_width="fill_parent"                android:layout_height="fill_parent"                android:cacheColorHint="#00000000"                android:divider="@null"                android:drawSelectorOnTop="false"                android:listSelector="@drawable/listitem_selector"                android:scrollbars="none"                android:scrollingCache="false"/>        </LinearLayout>        <RelativeLayout            android:id="@+id/photoArea"            android:layout_width="match_parent"            android:layout_height="51dp"            android:layout_alignParentBottom="true"            android:background="#f0f0f0"            android:visibility="gone">            <View                android:layout_width="match_parent"                android:layout_height="1px"                android:layout_alignParentTop="true"                android:background="#989898"/>            <HorizontalScrollView                android:id="@+id/hscrollView"                android:layout_width="wrap_content"                android:layout_height="match_parent"                android:layout_alignParentLeft="true"                android:layout_marginRight="45dp"                android:layout_toLeftOf="@+id/addGroupBtn"                android:scrollbars="none">                <LinearLayout                    android:id="@+id/photoLinearLayout"                    android:layout_width="wrap_content"                    android:layout_height="match_parent"                    android:gravity="center_vertical"                    android:orientation="horizontal"                    android:paddingRight="10dp">                    <ImageView                        android:layout_width="40dp"                        android:layout_height="40dp"                        android:contentDescription="@string/no_word"                        android:paddingLeft="10dp"                        android:src="@drawable/avatar_default_80"/>                    <ImageView                        android:layout_width="40dp"                        android:layout_height="40dp"                        android:contentDescription="@string/no_word"                        android:paddingLeft="10dp"                        android:src="@drawable/avatar_default_80"/>                    <ImageView                        android:layout_width="40dp"                        android:layout_height="40dp"                        android:contentDescription="@string/no_word"                        android:paddingLeft="10dp"                        android:src="@drawable/avatar_default_80"/>                    <ImageView                        android:layout_width="40dp"                        android:layout_height="40dp"                        android:contentDescription="@string/no_word"                        android:paddingLeft="10dp"                        android:src="@drawable/avatar_default_80"/>                    <ImageView                        android:layout_width="40dp"                        android:layout_height="40dp"                        android:contentDescription="@string/no_word"                        android:paddingLeft="10dp"                        android:src="@drawable/avatar_default_80"/>                    <ImageView                        android:layout_width="40dp"                        android:layout_height="40dp"                        android:contentDescription="@string/no_word"                        android:paddingLeft="10dp"                        android:src="@drawable/avatar_default_80"/>                    <ImageView                        android:layout_width="40dp"                        android:layout_height="40dp"                        android:contentDescription="@string/no_word"                        android:paddingLeft="10dp"                        android:src="@drawable/avatar_default_80"/>                </LinearLayout>            </HorizontalScrollView>            <Button                android:id="@+id/addGroupBtn"                style="@style/choose_member_btn"/>        </RelativeLayout>    </RelativeLayout>    <TextView        android:id="@+id/no_msg_result"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_below="@id/searchLayout"        android:gravity="top|center"        android:paddingTop="150dp"        android:singleLine="true"        android:text="暂无搜索信息"        android:textColor="@color/color_main_text1"        android:textSize="18sp"        android:visibility="gone"/>    <ImageView        android:id="@+id/shadeLayer"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_below="@id/searchLayout"        android:contentDescription="@string/no_word"        android:src="@color/color_translucent"        android:visibility="gone"/></RelativeLayout>

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.

<RadioButton xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="60dp"    android:layout_height="match_parent"    android:paddingTop="8dp"    android:paddingBottom="8dp"    android:paddingLeft="18dp"    android:paddingRight="18dp"    android:button="@null"    android:gravity="center"    android:textSize="12sp"    android:includeFontPadding="false"    android:textColor="@color/address_class_tab"/>

这里介绍下，一般是在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());里更新的。