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());
}
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 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.
"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());里更新的。