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<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 顶部切换实现（二）相关推荐

Android开发-应用中英文（语言）切换（二）
APP中针对不同国家不同地区的人群使用那么应用的语言自然也要能够随时进行切换,最近做的项目有中文和英文切换的需求,所以在了解了一下网上常用的方法后记录一下我使用的方法,只是简单的应用,后续如果有不同需 ...
Android audio切换设备通道流程(二十八)
Android audio切换设备通道流程 1.frameworks/base/media/java/android/media/AudioManager.java public void setMo ...
android 电容屏（二）：驱动调试之基本概念篇
关键词:android 电容屏 tp 工作队列中断多点触摸协议平台信息: 内核:linux2.6/linux3.0 系统:android/android4.0 平台:S5PV310(sams ...
（转载）Android项目实战（二十八）：使用Zxing实现二维码及优化实例
Android项目实战(二十八):使用Zxing实现二维码及优化实例作者:听着music睡字体:[增加减小] 类型:转载时间:2016-11-21 我要评论这篇文章主要介绍了Android项 ...
Android开发笔记（二十四）res目录的结构与配置
res目录结构 res是Android项目工程中存放各类的目录,主要包括布局.图形与配置等等.res的子目录主要有: anim : 存放动画的描述文件 drawable : 存放各类图形的描述文件,包 ...
Android项目实战（二十）：浅谈ListView悬浮头部展现效果
Android项目实战(二十):浅谈ListView悬浮头部展现效果原文:Android项目实战(二十):浅谈ListView悬浮头部展现效果先看下效果:需求是滑动列表 ,其中一部分视图(粉丝数 ...
（转载）Android项目实战（二十七）：数据交互（信息编辑）填写总结
Android项目实战(二十七):数据交互(信息编辑)填写总结前言: 项目中必定用到的数据填写需求.比如修改用户名的文字编辑对话框,修改生日的日期选择对话框等等.现总结一下,方便以后使用. 注: 先 ...
Android图表库MPAndroidChart(二)——线形图的方方面面，看完你会回来感谢我的
Android图表库MPAndroidChart(二)--线形图的方方面面,看完你会回来感谢我的在学习本课程之前我建议先把我之前的博客看完,这样对整体的流程有一个大致的了解 Android图表库MP ...
Android 天气APP（二十七）增加地图天气的逐小时天气、太阳和月亮数据
上一篇:Android 天气APP(二十六)增加自动更新(检查版本.通知栏下载.自动安装) 效果图开发流程 1.功能优化 2.地图天气中增加逐小时天气 3.地图天气中增加太阳和月亮数据 1.功能优化 ...

Android 顶部切换实现（二）

Android 顶部切换实现（二）相关推荐

最新文章

热门文章