Android 顶部滑动切换实现（一）
先看效果图，在导航栏下面分类的两个切换按钮，页面滑动也能像微信底部导航一样实现跳转。
下面看主要代码。
布局文件。
<RelativeLayout
android:id="@+id/contentLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone" >
<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 headTeacherFirst = headTeacherFirst(typeList.get(0).getUserList());
getBaseMenuDtoList(headTeacherFirst);
}
else {
getBaseMenuDtoList(typeList.get(0).getUserList());
}
}
else {
getBaseMenuDtoList(new ArrayList());
}
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 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：
<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 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);
}