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

桃扇骨 2022-07-15 07:00 170阅读 0赞

先看效果图，在导航栏下面分类的两个切换按钮，页面滑动也能像微信底部导航一样实现跳转。  
![这里写图片描述][20161107112718268]

--------------------

下面看主要代码。

布局文件。

这里没有包含导航条，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布局效果：

![这里写图片描述][20161107140231863]

下面看下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);
        }

[20161107112718268]: /images/20220715/40fa641961d145caaecc30ac3daa8739.png
[20161107140231863]: /images/20220715/f0a1fd578c8640fcaa2ade630ebce0b3.png