先看效果圖，在導航欄下面分類的兩個切換按鈕，頁面滑動也能像微信底部導航一樣實現跳轉。

---

下面看主要代碼。

布局文件。

<RelativeLayout android:id="@+id/contentLayout"android:layout_width="fill_parent"android:layout_height="wrap_content"android:visibility="gone" ><!-- 上方tab頁 --><LinearLayout android:id="@+id/txlTabs"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"android:background="#f6f6f6" ></LinearLayout><View style="@style/common_divider_line"android:layout_below="@id/txlTabs"/></RelativeLayout><!-- 中間提示的字 --><TextView android:id="@+id/noResult"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_below="@+id/contentLayout"android:background="@color/color_white"android:gravity="center"android:text="@string/no_data1"android:textColor="@color/color_gray_content"android:textSize="24sp"android:visibility="gone" /><LinearLayout android:id="@+id/addressLinearLayout"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_above="@+id/photoArea"android:layout_below="@id/contentLayout"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>

這里沒有包含導航條，txlTabs就是添加切換按鈕的布局。下面的是一個無結果顯示頁面和listVew。

/*** 適配器顯示*/private void setAdapter() {if (!Validators.isEmpty(typeList)) {int type = typeList.get(0).getOwnerType();if (type == UserType.TEACHER.getValue()) {List<EtohUser> headTeacherFirst = headTeacherFirst(typeList.get(0).getUserList());getBaseMenuDtoList(headTeacherFirst);}else {getBaseMenuDtoList(typeList.get(0).getUserList());}}else {getBaseMenuDtoList(new ArrayList<EtohUser>());}getTab(typeList);setSelector(0);addressAdapter = new MyClassMemberAdapter(MyClassMemberActivity.this, baseMenuDtoList, getLoginedUser().getUserId());addressAdapter.setPhotoAreaLister(new Callback2() {@Overridepublic void callback(Object... params) {final ActivityMenuDto dto = (ActivityMenuDto) params[0];final String isAdd = (String) params[1];if (isAdd.equals(Constants.OK)) {selectedIds.add(dto.getUser().getUserId());} else if (isAdd.equals(Constants.ZERO)) {selectedIds.remove(dto.getUser().getUserId());}// addressAdapter.notifyDataSetChanged();}});addressListView.setAdapter(addressAdapter);}

這個方法主要就是用來填充適配器的，getBaseMenuDtoList（）用來封裝成一個轉換的對象。適配器的構造方法里實現了一個接口。回到文章主題其他不多說，這里主要看

getTab(typeList); setSelector(0);

這兩個方法，圖片上的效果就是這兩個方法實現的。

/*** 獲得切換頁**/private void getTab(final List<UserType> typeList) {for (int i = 0; i < typeList.size(); i++) {if (typeList.get(i).getOwnerType() == UserType.TEACHER.getValue()|| typeList.get(i).getOwnerType() == UserType.STUDENT.getValue()) {RelativeLayout tabLayout = (RelativeLayout) LayoutInflater.from(MyClassMemberActivity.this).inflate(R.layout.my_class_member_tab_item, null);final TextView tabName = (TextView) tabLayout.findViewById(R.id.tabTextView);final ImageView imageView = (ImageView) tabLayout.findViewById(R.id.imageView);View line = tabLayout.findViewById(R.id.line);if (i == typeList.size() - 1) {line.setVisibility(View.GONE);}tabName.setText(typeList.get(i).getOwnerName());if (typeList.get(i).getOwnerType() == UserType.TEACHER.getValue()) {imageView.setImageResource(R.drawable.icon_class_tea);}else {imageView.setImageResource(R.drawable.icon_class_stu);}final int id = i;tabLayout.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {setSelector(id);addressAdapter.notifyDataSetChanged(baseMenuDtoList);}});txlTabs.addView(tabLayout);tabLayout.getLayoutParams().width = (DisplayUtils.getDisplayMetrics(MyClassMemberActivity.this).widthPixels) / 2;imageViews.add(imageView);textViews.add(tabName);}}}

這里動態根據類型給txlTabs添加切換按鈕（每個包括背景和文字底部說明兩部分）和點擊事件。

R.layout.my_class_member_tab_item：

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical" ><ImageView android:id="@+id/imageView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:layout_marginTop="15dp"android:src="@drawable/my_class_member_teacher_1"android:contentDescription="@string/no_word" /><TextView android:id="@+id/tabTextView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:layout_below="@+id/imageView"android:layout_marginTop="10dp"android:gravity="center"android:paddingLeft="22dp"android:paddingRight="22dp"android:paddingBottom="10dp"android:singleLine="true"android:ellipsize="end"style="@style/font6"android:text="@string/test" /><View android:id="@+id/line"android:layout_width="1px"android:layout_height="40dp"android:background="@color/common_divider_line_color"android:layout_centerVertical="true"android:layout_alignParentRight="true"android:layout_marginTop="15dp"android:layout_marginBottom="10dp"/> </RelativeLayout>

就是一個添加的tab布局效果：

下面看下setSelector(int id)方法，該方法主要用來改變選中和不選中的背景。

/**** 選中效果*/public void setSelector(int id) {position = id;selectedIds.clear();for (int i = 0; i < typeList.size(); i++) {if (id == i) {imageViews.get(i).setSelected(true);textViews.get(i).setTextColor(getResources().getColor(R.color.color_head_bg));int type = typeList.get(id).getOwnerType();removeUserTypeVal = type;if (type == UserType.TEACHER.getValue()) {List<EtohUser> headTeacherFirst = headTeacherFirst(typeList.get(id).getUserList());getBaseMenuDtoList(headTeacherFirst);}else {getBaseMenuDtoList(typeList.get(id).getUserList());}}else {imageViews.get(i).setSelected(false);textViews.get(i).setTextColor(getResources().getColor(R.color.color_black_text));}}}

滑動切換主要通過GestureDetector實現。

mGestureDetector = new GestureDetector(new SimpleOnGestureListener() {@Overridepublic boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {float x = e2.getX() - e1.getX();float y = e2.getY() - e1.getY();float x_limit = 20;float x_abs = Math.abs(x);float y_abs = Math.abs(y);if (x_abs >= y_abs) {if (x > x_limit || x < -x_limit) {if (x > 0) {// rightif (position <= 2 && position > 0) {position--;}else if (position == 0) {position = 2;}setSelector(position);}else if (x <= 0) {// leftif (position < 2) {position++;}else if (position == 2) {position = 0;}setSelector(position);}}}if (addressAdapter != null) {addressAdapter.notifyDataSetChanged(baseMenuDtoList);}return true;}})

并在dispatchTouchEvent中分發。

@Overridepublic boolean dispatchTouchEvent(MotionEvent event) {if (mGestureDetector.onTouchEvent(event)) {event.setAction(MotionEvent.ACTION_CANCEL);}return super.dispatchTouchEvent(event);}

總結

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

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