Android Listview pulls up and down to refresh tab sliding switching function

Recently I will make a page with two tab switching. The two pages have a common description information area. Both tabs are listviews. You can pull them up or down to refresh. There is a tab switching area in the middle of the page. Slide it up. When the tab area reaches the top, it stops moving. Pull it down and return to the initial position. Let's look at the same style picture first!

The entire requirement is roughly as shown in the figure above. There are no screenshots for pull-up refresh and pull-down refresh. The open source control PullToRefreshListView is used to achieve this effect.
1. The general idea is that for the sake of simplicity, I don’t want to monitor many gesture issues, so I adopt the following method to implement it opportunistically.

a. The entire page is a listview, and the public area is added as the header of the listview. The two switching tabs are also added as a header,
b. When laying out the page, add a layer above the listview, and put the tab layout inside. The layout of this tab is the same as the layout in the header of the listview,
c. Later, when the listview slides, the display and hiding of the page tab layout are processed in the onScroll function. When the tab layout of the listview reaches the top of the screen, the tab layout in the page is displayed. When the listview slides down, the entire tab appears as a shadow. Tab layout in the interface
d. Tab switching. Since the data of tab1 and tab2 are different, three data sources are used. When the tab is switched, the data switches back and forth. When the tab is clicked, the currently displayed tab is remembered. pos and offset (just remember that there will be deviation when pos is relocated)
The general process of the demo is like this. There is no refresh processing added. Although more logic is processed in the actual project, the demo I don’t want to write too complicated (mainly because no one will read it, so I just read it myself and write a little bit).
2. Having said so much, some people may still not understand it. Let’s take a look at the code.
a. The first is the interface layout, with two layers of protection, a listview on the bottom and a tab layout on the top. The interface Layout up_float_first_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:background="@color/white_color" >
 
  <com.example.toolbox.upFloat.PullToRefreshListView
    xmlns:ptr="http://schemas.android.com/apk/res-auto"
    android:id="@+id/up_float_listview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:cacheColorHint="@color/white_color"
    android:divider="@color/transpant"
    android:dividerHeight="0dip"
    android:fadingEdge="none"
    android:fastScrollEnabled="false"
    android:listSelector="@color/transpant"
    android:smoothScrollbar="true"
    android:visibility="visible"
    ptr:ptrHeaderTextColor="@color/color_333333"
    ptr:ptrMode="both" />
 
  <include
    layout="@layout/up_float_tab_layout"
    android:visibility="gone" />
 
</FrameLayout>

b. tab layout, up_float_tab_layout.xml, text all use selector, so that it can be highlighted when selected

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/up_float_tab_root"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="@color/white_color"
  android:minHeight="44dip"
  android:orientation="vertical" >
 
  <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="44dip"
    android:minHeight="44dip"
    android:orientation="horizontal" >
 
    <TextView
      android:id="@+id/up_fload_tab1"
      android:layout_width="0dip"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:background="@drawable/show_event_detail_tab_selector"
      android:gravity="center"
      android:text="@string/up_float_tab1"
      android:textColor="@color/show_event_detail_tab_text_selector"
      android:textSize="17sp" />
 
    <TextView
      android:id="@+id/up_float_tab2"
      android:layout_width="0dip"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:background="@drawable/show_event_detail_tab_selector"
      android:gravity="center"
      android:text="@string/up_float_tab2"
      android:textColor="@color/show_event_detail_tab_text_selector"
      android:textSize="17sp" />
  </LinearLayout>
 
  <View
    android:layout_width="match_parent"
    android:layout_height="@dimen/split_one_pixels"
    android:background="@color/color_purple_bd6aff" />
 
</LinearLayout>

c. Public part layout up_float_common_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="@color/white_color"
  android:orientation="vertical" >
 
  <ImageView
    android:id="@+id/show_event_detail_bg"
    android:layout_width="fill_parent"
    android:layout_height="125dip"
    android:contentDescription="@string/empty"
    android:scaleType="fitXY"
    android:src="@drawable/pic1" />
 
  <TextView
    android:id="@+id/show_event_detail_desc"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="24dip"
    android:layout_marginLeft="15dip"
    android:layout_marginRight="15dip"
    android:layout_marginTop="24dip"
    android:text="@string/up_float_desc"
    android:textColor="@color/color_black_333333"
    android:textSize="14sp" />
 
  <View style="@style/horizontal_gray_divider" />
 
  <View style="@style/horizontal_gray_divider" />
 
</LinearLayout>

d. Next is the code of the main page

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<String> item = new ArrayList<String>();
  private ArrayList<String> item1 = new ArrayList<String>();
  private ArrayList<String> item2 = new ArrayList<String>();
 
  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<String> adapter;
 
  @Override
  protected 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<ListView>() {
 
      @Override
      public void onPullDownToRefresh(PullToRefreshBase<ListView> refreshView) {
        // loadNews();
      }
 
      @Override
      public void onPullUpToRefresh(PullToRefreshBase<ListView> refreshView) {
        // loadOlds();
      }
 
    });
 
    listView.setOnScrollListener(new OnScrollListener() {
 
      @Override
      public void onScrollStateChanged(AbsListView view, int scrollState) {
      }
 
      @Override
      public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        if (firstVisibleItem < 2) {// 悬浮tab出现时机，listview含有三个header
          titleFloatTab.setVisibility(View.GONE);
        } else
          titleFloatTab.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<String>(this, R.layout.list_item, android.R.id.text1, item);
    listView.setAdapter(adapter);
  }
 
  @Override
  public 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 tab1
        tab2Pos = 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 tab2
        tab1Pos = 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() {
 
        @Override
        public void run() {
          listView.getRefreshableView().setSelectionFromTop(tab1Pos, tab1OffsetY);
        }
      });
    } else {
      listView.post(new Runnable() {
 
        @Override
        public void run() {
          listView.getRefreshableView().setSelectionFromTop(tab2Pos, tab2OffsetY);
        }
      });
    }
  }
 
}

Summary,
a The above demo only achieves the effect of sliding up. In fact, it has great limitations, two The item layout of the tabs must be consistent so that they can be switched freely. Secondly, the two tabs cannot slide left or right
b The above is only suitable for two or one tab. The more variable states you need to control, the more variable states you need to control. It is easy to make mistakes, and the above It does not include the effect of refresh. When the data is returned, it cannot just be added to the item, but the relationship between the refresh tab and the currently displayed tab must be judged.
c After reading other open source projects, if I have time, I will write a demo to create real multiple tabs, and can switch left and right.

The above is the entire content of this article. I hope it will be helpful to everyone learning Android software programming.

For more articles related to the Android Listview pull up and down refresh tab sliding switching function, please pay attention to the PHP Chinese website!