Android Listview s'ouvre de haut en bas pour actualiser la fonction de commutation coulissante des onglets

Je vais créer une page avec deux onglets dans un avenir proche. Les deux pages ont une zone d'informations de description commune. Les deux onglets sont des vues de liste. Vous pouvez les tirer vers le haut ou vers le bas pour les actualiser. au milieu de la page. Faites-le glisser vers le haut lorsque la zone de l'onglet atteint le haut, elle cesse de bouger et revenons à la même position initiale.

L'ensemble des exigences est à peu près comme indiqué dans l'image ci-dessus. Il n'y a pas de captures d'écran pour l'actualisation déroulante et l'actualisation déroulante. Le contrôle open source PullToRefreshListView est utilisé pour. obtenir cet effet.
1. L'idée générale est que par souci de simplicité, je ne souhaite pas surveiller de nombreux problèmes de gestes, j'adopte donc la méthode suivante pour l'implémenter de manière opportuniste,

a. une vue de liste, et la zone publique est ajoutée comme en-tête de la vue de liste. Les deux onglets de commutation sont également ajoutés comme en-tête,
b. Lors de la mise en page de la page, ajoutez un calque au-dessus de la vue de liste et placez la disposition des onglets. à l'intérieur. La disposition de cet onglet est la même que celle de l'en-tête de la liste,
c. Plus tard, lorsque la liste glisse, l'affichage et le masquage de la disposition des onglets de la page sont traités dans la fonction onScroll. Lorsque la disposition des onglets de la liste atteint le haut de l'écran, la disposition des onglets dans la page s'affiche. Lorsque la liste glisse vers le bas, l'onglet entier apparaît sous la forme d'une disposition d'onglets fantôme dans l'interface
d. Étant donné que les données de tab1 et tab2 sont différentes, trois sources de données sont utilisées. Lorsque l'onglet est changé, les données basculent d'avant en arrière lorsque vous cliquez sur l'onglet, la position et le décalage de l'onglet actuellement affiché sont mémorisés. sera un écart lorsque pos sera déplacé)
Le processus général de la démo est comme ceci, sans ajouter de traitement de rafraîchissement Bien que plus de logique soit traitée dans le projet lui-même, la démo que je ne veux pas écrire est trop compliquée (principalement parce que. personne ne le lira, alors je le lis moi-même et j'écris un peu).
2. Cela dit, certaines personnes ne le comprennent peut-être toujours pas. Jetons un coup d'œil au code
a. Le premier est la disposition de l'interface, avec deux couches de protection, une vue en liste en bas et. une disposition des onglets en haut. 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. >c.Mise en page de la partie publique up_float_common_layout.xml

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

d. Vient ensuite le code de la page principale

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

Résumé,

a La démo ci-dessus n'obtient que l'effet. de glisser vers le haut. En fait, il y a Une grande limitation. La disposition des éléments des deux onglets doit être cohérente afin de basculer librement. Deuxièmement, les deux onglets ne peuvent pas glisser vers la gauche ou la droite

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

b Ce qui précède ne convient que pour deux. ou un onglet. Plus il y a d'états variables à contrôler, plus il y en a beaucoup, il est facile de faire des erreurs et l'effet de rafraîchissement n'est pas inclus dans ce qui précède. Lorsque les données sont renvoyées, elles ne peuvent pas simplement être ajoutées au. élément, mais la relation entre l'onglet d'actualisation et l'onglet actuellement affiché doit être jugée.

c Après avoir regardé d'autres projets open source, si j'ai le temps, j'écrirai une démo pour créer de véritables onglets multiples et pouvoir basculer à gauche et à droite.


Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde d'apprendre la programmation de logiciels Android.

Pour plus d'articles liés à la fonction de commutation coulissante de l'onglet d'actualisation déroulant Android Listview, veuillez faire attention au site Web PHP chinois !