extends:http://blog.163.com/xueshanhaizi@126/blog/static/37250245201410541721892/

1：近期要做一个含有两个tab切换页面，两个页面有公共的描述信息区域，两个tab都是listview，可以向上或向下拉动刷新，在页面中部有一个tab切换区域，向上滑动的时候tab区域到顶部后就不在移动，向下拉又重新回到初始位置，先看一样样式图吧！

 整个需求大致如上图所示，其中上拉刷新和下拉刷新没有截图，采用了开源控件PullToRefreshListView来实现这个效果。

2：总体思路，为了简单不想监控很多手势问题，因此投机取巧的采用下面的方式来实现，

     a.  整个页面是一个listview，公共的区域作为listview的header添加进来，两个切换的tab也作为一个header加入，

     b. 在页面布局的时候在listview上面添加一层，里面放tab的布局，这个tab的布局与listview的header中的是同一个布局，

     c. 之后当listview滑动时候在onScroll函数中处理页面tab布局的显示与隐藏，当listview的tab布局到达屏幕顶部时，显示页面中的tab布局，向下滑动当整个tab都出现是影藏界面中的tab布局

     d. tab切换，由于tab1，tab2的数据不同，因此采用了三个数据源，在tab切换的时候，数据来回切换，当点击tab时，记住当前显示的tab的pos和偏移量（只记住pos重定位的时候会有偏差）

     demo的大致流程就是这样了，没有添加刷新的处理，虽然实际项目中时处理了更多的逻辑，但是demo不想写太复杂（主要是没有人看，就自己看，稍稍写写）。

3：说了这么多，可能看的人的还是不怎么明白，下面就来看代码吧

     a. 首先是界面布局，保护两层，底层一个listview，顶部一个tab布局，界面布局up_float_first_activity.xml

 

b. tab布局，up_float_tab_layout.xml，text都采用了selector，这样在选中时可以高亮显示

 

c .公共部分布局up_float_common_layout.xml

 

d.接下来就是主页面的代码了

package com.example.toolbox.upFloat.activity;import java.util.ArrayList;import android.os.Bundle;import android.support.v7.app.ActionBarActivity;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.widget.AbsListView;import android.widget.AbsListView.OnScrollListener;import android.widget.ArrayAdapter;import android.widget.LinearLayout;import android.widget.ListView;import android.widget.TextView;import com.example.toolbox.R;import com.example.toolbox.upFloat.PullToRefreshBase;import com.example.toolbox.upFloat.PullToRefreshBase.OnRefreshListener2;import com.example.toolbox.upFloat.PullToRefreshListView;/*** * * @author sunyoujun* */public class UpFloatFirstActivity extends ActionBarActivity implements OnClickListener {public static final int TYPE_TAB_1 = 1;public static final int TYPE_TBA_2 = 2;private int tab2Pos = 0;private int tab2OffsetY = 0;private int tab1Pos = 0;private int tab1OffsetY = 0;private ArrayList
       
         item = new ArrayList
        
         ();private ArrayList
         
           item1 = new ArrayList
          
           ();private ArrayList
           
             item2 = new ArrayList
            
             ();protected PullToRefreshListView listView;private LinearLayout titleView;private LayoutInflater infater;private LinearLayout titleTab;private LinearLayout titleFloatTab;private TextView latestTv;private TextView latestFloatTv;private TextView hotTv;private TextView hotFloatTv;private int currentType = TYPE_TAB_1;private ArrayAdapter
             
               adapter;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.up_float_first_activity);findViews();setViewsListener();updateTabSelectState();initData();initListView();}private void findViews() {listView = (PullToRefreshListView) findViewById(R.id.up_float_listview);titleFloatTab = (LinearLayout) findViewById(R.id.up_float_tab_root);latestFloatTv = (TextView) titleFloatTab.findViewById(R.id.up_float_tab2);hotFloatTv = (TextView) titleFloatTab.findViewById(R.id.up_fload_tab1);infater = LayoutInflater.from(this);titleView = (LinearLayout) infater.inflate(R.layout.up_float_common_layout, null);titleTab = (LinearLayout) infater.inflate(R.layout.up_float_tab_layout, null);latestTv = (TextView) titleTab.findViewById(R.id.up_float_tab2);hotTv = (TextView) titleTab.findViewById(R.id.up_fload_tab1);}private void setViewsListener() {latestTv.setOnClickListener(this);hotTv.setOnClickListener(this);latestFloatTv.setOnClickListener(this);hotFloatTv.setOnClickListener(this);updateTabSelectState();}/*** 更新tab栏选中状态*/private void updateTabSelectState() {boolean isTab1 = (currentType == TYPE_TAB_1);hotTv.setSelected(isTab1);hotFloatTv.setSelected(isTab1);latestTv.setSelected(!isTab1);latestFloatTv.setSelected(!isTab1);}private void initData() {for (int i = 1; i <= 50; i++) {item1.add("tab1-- item ---" + i);item2.add("tab2-- item ---" + i);}}private void initListView() {setListViewListener();listViewAddHeader();listViewLoadData();}private void setListViewListener() {listView.setOnRefreshListener(new OnRefreshListener2
              
               () {@Overridepublic void onPullDownToRefresh(PullToRefreshBase
               
                 refreshView) {// loadNews();}@Overridepublic void onPullUpToRefresh(PullToRefreshBase
                
                  refreshView) {// loadOlds();}});listView.setOnScrollListener(new OnScrollListener() {@Overridepublic void onScrollStateChanged(AbsListView view, int scrollState) {}@Overridepublic void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {if (firstVisibleItem < 2) { // 悬浮tab出现时机，listview含有三个headertitleFloatTab.setVisibility(View.GONE);} elsetitleFloatTab.setVisibility(View.VISIBLE);;}});}private void listViewAddHeader() {listView.getRefreshableView().addHeaderView(titleView);listView.getRefreshableView().addHeaderView(titleTab);}protected void listViewLoadData() {item.clear();item.addAll(item1);adapter = new ArrayAdapter
                 
                  (this, R.layout.list_item, android.R.id.text1, item);listView.setAdapter(adapter);}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.up_fload_tab1:switchTabtList(true);break;case R.id.up_float_tab2:switchTabtList(false);break;default:break;}}private void switchTabtList(boolean isTab1) {if (isTab1) {if (currentType == TYPE_TAB_1) {return;// 说明点击的是相同的活动列表，不用改变} else { // tab2 switch tab1tab2Pos = listView.getRefreshableView().getFirstVisiblePosition();tab2OffsetY = getOffsetY();currentType = TYPE_TAB_1;item2.clear();item2.addAll(item);item.clear();item.addAll(item1);}} else {if (currentType == TYPE_TBA_2) {return;} else { // tab1 switch tab2tab1Pos = listView.getRefreshableView().getFirstVisiblePosition();tab1OffsetY = getOffsetY();currentType = TYPE_TBA_2;item1.clear();item1.addAll(item);item.clear();item.addAll(item2);}}updateTabSelectState();relocationLastPos();}private int getOffsetY(){View view = listView.getRefreshableView().getChildAt(0);return view != null ? view.getTop() : 0;}/*** 重新定位到上次的位置*/private void relocationLastPos() {if (adapter != null) {adapter.notifyDataSetChanged();}if (currentType == TYPE_TAB_1) {listView.post(new Runnable() {@Overridepublic void run() {listView.getRefreshableView().setSelectionFromTop(tab1Pos, tab1OffsetY);}});} else {listView.post(new Runnable() {@Overridepublic void run() {listView.getRefreshableView().setSelectionFromTop(tab2Pos, tab2OffsetY);}});}}}
                 
                
               
              
             
            
           
          
         
        
       

 

 

4. 总结,

   a .  上面的demo只是实现了向上滑动的效果，其实有很大的局限性，两个tab的item布局要一致，才能自由切换，其次是两个tab不能左右滑动

   b .  上面的只适合两个或者一个tab，再多要控制的变量状态就更多，很容易出错，并且上面还没有包含刷新的效果，数据返回时不能仅仅是添加到item，而要判断刷新tab与当前显示tab的关系。

   c .   看了其他的开源项目，之后如果有时间会写一个demo，做真正的多个tab，并且能左右切换的效果。

 

 

 

ps: 鉴于还是有很多人要源代码，我就在下一篇重新实现了现有的方式，并且附上了git的代码地址