Android listview up and down pull refresh tab sliding Toggle function _android

Source: Internet
Author: User
Tags addall

In the near future to do a two tab switch page, two pages have a public description of the information area, two tab are ListView, you can pull up or down the refresh, in the middle of the page has a tab switch area, the upward slide when the tab area to the top after the move, Pull down and back to the original position, first look at the same style diagram!


The overall demand is roughly as shown above, where the pull refresh and drop down refresh does not have a screenshot, using the open source control Pulltorefreshlistview to achieve this effect.
1, the general idea, in order to simply do not want to monitor a lot of gesture problems, so opportunistic use the following way to achieve,

A. The entire page is a ListView, the public area is added as the header of the ListView, and Two tab tabs are joined as a header,
B. In the page layout, add a layer above the ListView, where the tab layout, the layout of the tab and ListView header is the same layout,
C. After the ListView sliding time in the onscroll function to handle the display and hidden page tab layout, when the ListView tab layout to the top of the screen, display the tab layout in the page, slide down when the whole tab appears is the tab layout in the Shadow interface
d. tab switch, because the TAB1,TAB2 data is different, so the use of three data sources, in the tab switch, the data back and forth, when you click the tab, remember the current tab POS and offset (only remember POS relocation will be biased)
The general process of demo is this, there is no added refresh processing, although the actual project in the process of processing more logic, but the demo does not want to write too complex (mainly no one to see, see for themselves, slightly write).
2, said so much, may look at the person's still don't understand, the following is to see the code
A. First is the interface layout, protect two layers, the bottom of a ListView, the top of a tab layout, 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/transpan T "android:dividerheight=" 0dip "android:fadingedge=" None "Android:fastscrollenabled=" false "Android:listse Lector= "@color/transpant" android:smoothscrollbar= "true" android:visibility= "visible" ptr:ptrheadertextcolor= " @color/color_333333 "ptr:ptrmode=" both "/> <include layout=" @layout/up_float_tab_layout "Android:visi bility= "Gone"/> </FrameLayout> 

B. tab layout, the Up_float_tab_layout.xml,text are all selector, so that you can highlight

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 "> &L T LinearLayout android:layout_width= "fill_parent" android:layout_height= "44dip" android:minheight= "44dip" an droid:orientation= "Horizontal" > <textview android:id= "@+id/up_fload_tab1" android:layout_width= "0d IP "android:layout_height=" match_parent "android:layout_weight=" 1 "android:background=" @drawable/show_ev Ent_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:te Xtcolor= "@color/show_event_detail_tab_text_selector" android:textsize= "17sp"/> </LinearLayout> <vi EW android:layout_width= "match_parent" android:layout_height= "@dimen/split_one_pixels" android:background= "@co
 Lor/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:layo" Ut_width= "Fill_parent" android:layout_height= "125dip" android:contentdescription= "@string/empty" Android:scale Type= "Fitxy" android:src= "@drawable/pic1"/> <textview android:id= "@+id/show_event_detail_desc" Andro Id:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:layout_marginbottom= "24dip" Androi d:layout_marginleft= "15dip" android:layout_marginright= "15dip" android:layout_margintop= "24dip" android:text= " @string "android:textcolor=" @color/color_black_333333 "android:textsize=" 14sp "/> <view/up_float_desc sty le= "@style/horizontal_gray_divider"/> <view style= "@style/horizontal_gray_divider"/> </LinearLayout>

 

D. Next is the code for the home 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 Onclicklis

  Tener {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 ();
    }/** * Update TAB Bar selected state/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 <= 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) {//Loadold
      S ();

    }

    }); 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) {//Suspend tab appears, ListView contains three headers
        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) {        The return;//note clicks on the same list of activities without changing} else {//TAB2 switch Tab1 tab2pos = Listview.getrefreshableview (). Get
        Firstvisibleposition ();
        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; /** * Relocate to last position * * 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.getrefresh
        Ableview (). Setselectionfromtop (Tab2pos, tab2offsety);
    }
      });
 }
  }

}

Summarize
A above demo just realize the effect of upward sliding, in fact, there are a lot of limitations, two tab of the item layout to be consistent, to free switch, followed by the two tab can not slide around
b above only for two or a tab, and more to control the variable state is more, it is easy to make mistakes, and the above has not included the effect of the refresh, the data can not be returned to just add to the item, but to determine the Refresh tab and the current Display tab relationship.
C Read other open source projects, and then if there is time to write a demo, do a real multiple tab, and can switch around the effect.
PS: In view of the fact that there are still a lot of people want to source code, I will be in the next article to implement the existing way, and attached the code address.

This is the entire content of this article, I hope to learn more about Android software programming help.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.