Pagerslidingtabstrip to make Android tagged multi-interface sliding switch _android

Source: Internet
Author: User
Tags instance method

Here we use two libraries, one is the android-support-v4 in the Android SDK, the other is Pagerslidingtabstrip, the open source project address is https://github.com/astuetz/ Pagerslidingtabstrip
Using V4 is to use his viewpager and fragment, and Pagerslidingtabstrip is to apply the label above.

Results preview:

Now, let's start.
Layout

Create an activity or something don't say, like Actionbar to create a actionbaractivity, need to v7 support package.
The layout of this activity is given directly here:

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android"
  android:layout_width= "Match_ Parent "
  android:layout_height=" match_parent ">
  <com.astuetz.pagerslidingtabstrip
    android:id=" @+id/tabstrip "
    android:layout_height=" 48DP "
    android:layout_width=" match_parent "/>
  < Android.support.v4.view.ViewPager
    android:id= "@+id/viewpager"
    android:overscrollmode= "Never"
    android:layout_height= "Match_parent"
    android:layout_width= "match_parent"
    android:layout_below= "@id TabStrip "/>
</RelativeLayout>

Com.astuetz.PagerSlidingTabStrip This is a few labels above the interface. Here I specify a height of 48DP, which is also the height of the highly recommended feedback area in the Android design.
Prior to a colleague in the development of the app to see him use Radiogroup to do these tags, but also add a view to do the following activities of the indicator, error-prone not to say that the code complexity is definitely higher than my bottom to post a lot more. is not that I am lazy, do not want to realize, but I feel that the world has been so many others have been kindness to help you finish the good things you have to use, you have to twist their own set of words, it is somewhat outweigh the gains. Everyone wants to be good, want to do something better than others, but I think it is very difficult to combine some of the best things in the present.

Say something irrelevant and get back to the point. Very simple layout of the upper and lower structure, do not say more. As for the Viewpager android:overscrollmode= "never" is a tip, I do not like the viewpager of the Cross-border effect (fadingedge= "None" is not effective), this layout Parameter can invalidate the Viewpager effect of the crossing.

Code

As we all know, the members in Viewpager must be fragment, so before you configure Viewpager and Pagerslidingtabstrip, you need to create a simple fragment to do the display in Viewpager.

Package com.airk.myapplication.viewdemo.app.fragments;
Import Android.os.Bundle;
Import android.support.v4.app.Fragment;
Import android.view.Gravity;
Import Android.view.LayoutInflater;
Import Android.view.View;
Import Android.view.ViewGroup;
Import Android.widget.LinearLayout; Import Com.airk.myapplication.simplechat.app.widget.MyTextView; I customized the TextView, just modified the default font, recently feel roboto-light/thin particularly good-looking/** * simple Fragment which only has one TextView/public class Nu Mberfragment extends Fragment {Private String content, displayed in//fragment public static numberfragment newinstance (stri
  ng content) {//external provide create instance method, you give me need to display content, I give you fragment instance return new Numberfragment (content);
  Private Numberfragment (String content) {this.content = content; @Override public View Oncreateview (layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) {my
    TextView TV = new Mytextview (getactivity ()); Tv.setlayoutparams (New Linearlayout.layoutparams (viewgroup.layoutparams.
    Match_parent, ViewGroup.LayoutParams.MATCH_PARENT));
    Tv.setgravity (Gravity.center);
    Tv.settextsize (26.0f);
    Tv.settext (this.content); return TV;
 Only one TextView} for a full-screen, centered Roboto font

Fragment is created, comments are written inside the code, easy to understand, simple to read. Below is the code for the activity:

  @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
    Setcontentview (r.layout.activity_main_activity); Getsupportactionbar (). setdisplayshowhomeenabled (false); Actionbar does not show application icon Viewpager Viewpager = (viewpager) Findviewbyid (R.id.viewpager); Gets Viewpager viewpager.setadapter (new Fragmentpageradapter (Getsupportfragmentmanager ()) {// Simple to create a fragmentpageradapter @Override public charsequence getpagetitle (int position) {//must overwrite this method, open source control pagerslid
      Ingtabstrip need to get tag title return "title" + (position + 1); @Override public Fragment getitem (int i) {return numberfragment.newinstance ("Content" + (i + 1));
      Returns the fragment that we just created, showing content X} @Override public int getcount () {return 3;//test with 3 tags only
    }
    }); Pagerslidingtabstrip strip = (Pagerslidingtabstrip) Findviewbyid (R.id.tabstrip); Gets the Pagerslidingtabstrip control object Strip.setshouldexpand (trUE); Set the label to expand automatically--when the total width of the labels is not wide enough, the automatic expansion makes each label width increase to match the screen width, note! This code must be in front of the Setviewpager to be effective strip.setviewpager (Viewpager); This is the handle of Viewpager Strip.setdividercolor (color.transparent); Set the spacing line color between each label-> Transparent strip.setunderlineheight (3); Set the height of the spacing line below the tab bar, the Unit pixel strip.setindicatorheight (6);
 Set indicator cursor height, unit pixel}

Pagerslidingtabstrip This control has many customizable properties, including the color of each label, character color, interval drawable, and so on. If you have a need to take a closer look at its GitHub homepage and the official sample study.

Summarize
combined with open source control Pagerslidingtabstrip It is convenient for us to do with a tabbed multiple interface development, from the amount of code to tell the truth has been very little, but also logically understandable, Not even registered what listener has already implemented the label interaction with each interface (click the tab switch interface or sliding interface tab), and the indicator cursor has been designed to slide with the user, saving a lot of development time.

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.