Die Android-Listenansicht lässt sich nach oben und unten ziehen, um die Tab-Schiebeschaltfunktion zu aktualisieren

Ich werde in naher Zukunft eine Seite mit zwei Tabs zum Wechseln erstellen. Beide Tabs sind Listenansichten. Es gibt einen Tab-Umschaltbereich In der Mitte der Seite schieben Sie es nach oben. Ziehen Sie es nach unten und kehren Sie zur Ausgangsposition zurück.

Die gesamte Anforderung entspricht in etwa der Abbildung oben. Es gibt keine Screenshots für Pull-Up-Refresh und Pull-Down-Refresh diesen Effekt erzielen.
1. Der Einfachheit halber möchte ich nicht viele Gestenprobleme überwachen, daher verwende ich die folgende Methode, um sie opportunistisch umzusetzen:

a Eine Listenansicht, und der öffentliche Bereich wird als Kopfzeile der Listenansicht hinzugefügt.
Fügen Sie beim Layout der Seite eine Ebene über der Listenansicht hinzu und legen Sie das Registerkartenlayout fest Das Layout dieser Registerkarte entspricht dem Layout in der Kopfzeile der Listenansicht. Wenn das Tab-Layout der Listenansicht den oberen Rand des Bildschirms erreicht, wird das Tab-Layout auf der Seite angezeigt. Wenn die Listenansicht nach unten verschoben wird, erscheint das gesamte Tab-Layout in der Benutzeroberfläche
d. Da die Daten von Tab1 und Tab2 unterschiedlich sind, werden drei Datenquellen verwendet. Wenn Sie auf den Tab klicken, werden die aktuell angezeigte Position und der Offset gespeichert wird eine Abweichung sein, wenn die Position verschoben wird)
Der allgemeine Prozess der Demo ist so, ohne dass die Aktualisierungsverarbeitung hinzugefügt wird. Obwohl im eigentlichen Projekt mehr Logik verarbeitet wird, möchte ich die Demo nicht zu kompliziert schreiben (hauptsächlich, weil Niemand wird es lesen, also lese ich es einfach selbst und schreibe ein wenig.
2. Nachdem wir so viel gesagt haben, werfen wir einen Blick auf den Code
a ein Tab-Layout oben >c. Öffentliches Teillayout up_float_common_layout.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>

d. Als nächstes folgt der Code der Hauptseite

<?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>

Zusammenfassung,

a Die obige Demo erzielt nur den Effekt Tatsächlich gibt es eine große Einschränkung. Das Elementlayout der beiden Registerkarten muss konsistent sein, damit die beiden Registerkarten nicht nach links oder rechts verschoben werden können.

b Das Obige ist nur für zwei geeignet oder eine Registerkarte. Je mehr Variablenzustände gesteuert werden müssen, desto einfacher ist es, Fehler zu machen, und das oben Genannte beinhaltet nicht den Effekt der Aktualisierung. Wenn die Daten zurückgegeben werden, können sie nicht nur dem Element hinzugefügt werden, sondern auch der Beziehung Der Unterschied zwischen der aktualisierten Registerkarte und der aktuell angezeigten Registerkarte muss beurteilt werden.

<?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>

c Nachdem ich andere Open-Source-Projekte gelesen habe, schreibe ich, wenn ich Zeit habe, eine Demo, um echte mehrere Registerkarten zu erstellen und nach links und rechts zu wechseln.

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);
        }
      });
    }
  }
 
}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein, die Programmierung von Android-Software zu erlernen.

Weitere Artikel zur Android-Listview-Pull-Up- und Down-Refresh-Tab-Schiebeschaltfunktion finden Sie auf der chinesischen PHP-Website!