上篇介紹了導航欄下的滑動切換實現，這次要介紹的是導航欄上的切換，在很多應用中經常見到，先看效果圖。

當點擊導航條上的分類的時候，會根據選中的分類顯示下面的數據。

先看布局文件。

<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() {@Overridepublic 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());里更新的。

總結

以上是生活随笔為你收集整理的Android 顶部切换实现（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。