Android 顶部滑动切换实现（一）

先看效果图，在导航栏下面分类的两个切换按钮，页面滑动也能像微信底部导航一样实现跳转。

---

下面看主要代码。

布局文件。

     <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() {            @Override            public 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() {                    @Override                    public 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() {                    @Override                    public 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) {                                    // right                                    if (position <= 2 && position > 0) {                                        position--;                                    }                                    else if (position == 0) {                                        position = 2;                                    }                                    setSelector(position);                                }                                else if (x <= 0) {                                    // left                                    if (position < 2) {                                        position++;                                    }                                    else if (position == 2) {                                        position = 0;                                    }                                    setSelector(position);                                }                            }                        }                        if (addressAdapter != null) {                            addressAdapter.notifyDataSetChanged(baseMenuDtoList);                        }                        return true;                    }                })

并在dispatchTouchEvent中分发。

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