Android Typical interface design--viewpage+fragment implementation of the Area top tab sliding switch

First, the problem description

This series will be combined with case application, introduced to you some of the typical Android interface design, first of all, the tab navigation, navigation into a layer and two layers (bottom block + region head navigation), the main implementation of the scheme has radiogroup+viewpage+fragment, Viewpager Indicator, ActionBar Tabs, Fragmenttabhost+fragment, and so on, we first use radiogroup+viewpage+fragment to achieve regional head navigation.

：

Ii. main components of the case

　　1, first look at the mainactivity layout

 
 <linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android" Android:layout_width= "Match_parent" android:layout_height= "match_parent" android:orientation= "vertical" > &L T Horizontalscrollview android:id= "@+id/hvchannel" android:layout_width= "Match_parent" Android:layout_ height= "Wrap_content" android:scrollbars= "None" > <radiogroup android:id= "@+id/rgchanne L "android:layout_width=" wrap_content "android:layout_height=" wrap_content "android:orientation=" Horizontal              "> </RadioGroup> </HorizontalScrollView> <android.support.v4.view.viewpager Android:id= "@+id/vpnewslist" android:layout_width= "Match_parent" android:layout_height= "     0DP "android:layout_weight=" 1 "> </android.support.v4.view.ViewPager></LinearLayout> 

2, mainactivity code:

public class Mainactivity extends fragmentactivity implements onpagechangelistener{private Viewpager Viewpager;    Private Radiogroup Rgchannel=null;    Private Horizontalscrollview Hvchannel;    Private Pagefragmentadapter Adapter=null;    Private list<fragment> fragmentlist=new arraylist<fragment> ();        @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);        Setcontentview (R.layout.activity_main);    Initview ();        } private void Initview () {rgchannel= (Radiogroup) Super.findviewbyid (R.id.rgchannel);        Viewpager= (Viewpager) Super.findviewbyid (r.id.vpnewslist);        Hvchannel= (Horizontalscrollview) Super.findviewbyid (R.id.hvchannel);            Rgchannel.setoncheckedchangelistener (New Radiogroup.oncheckedchangelistener () {@Override public void OnCheckedChanged (radiogroup group, int checkedid) {Viewpager.setcurr Entitem (checkEDID);        }        });        Viewpager.setonpagechangelistener (this);        InitTab ();//Dynamic generation of RadioButton Initviewpager ();    Rgchannel.check (0);        } private void InitTab () {list<channel> channellist=channeldb.getselectedchannel ();                    for (int i=0;i<channellist.size (), i++) {RadioButton rb= (RadioButton) Layoutinflater.from (this).            Inflate (R.LAYOUT.TAB_RB, NULL);            Rb.setid (i);            Rb.settext (Channellist.get (i). GetName ());                            Radiogroup.layoutparams params=new radiogroup.layoutparams (RadioGroup.LayoutParams.WRAP_CONTENT,            RadioGroup.LayoutParams.WRAP_CONTENT);        Rgchannel.addview (Rb,params);        }} private void Initviewpager () {list<channel> channellist=channeldb.getselectedchannel ();            for (int i=0;i<channellist.size (); i++) {newsfragment frag=new newsfragment (); Bundle bundle=new BUndle ();            Bundle.putstring ("Weburl", Channellist.get (i). Getweburl ());            Bundle.putstring ("Name", Channellist.get (i). GetName ());     Frag.setarguments (bundle);        Incoming data to Fragment Fragmentlist.add (Frag);        } adapter=new Pagefragmentadapter (Super.getsupportfragmentmanager (), fragmentlist);        Viewpager.setadapter (adapter);    Viewpager.setoffscreenpagelimit (0); }/** * Adjust the position of the scroollview when sliding Viewpager to display the button * @param idx */private void Settab (int idx) {Radi        Obutton rb= (RadioButton) rgchannel.getchildat (IDX);        Rb.setchecked (TRUE);        int Left=rb.getleft ();        int Width=rb.getmeasuredwidth ();        Displaymetrics metrics=new displaymetrics ();        Super.getwindowmanager (). Getdefaultdisplay (). Getmetrics (metrics);        int screenwidth=metrics.widthpixels;        int LEN=LEFT+WIDTH/2-SCREENWIDTH/2; Hvchannel.smoothscrollto (len, 0);//Slide Scroollview} @Override public void Onpagescrollstatechanged (int arg0) {} @Override public void onpagescrolled (int arg0, float arg1, int arg2) {} @Override public void onpageselected (int position) {//TODO auto-generated Method stub Settab (Positi    ON); }}

where the Inittab () method implements dynamically adding RadioButton to Radiogroup

Navigation button data from Channeldb

    private static list<channel>   selectedchannel=new arraylist<channel> ();    static{        Selectedchannel.add (New Channel ("", "headline", 0, "", ""));        Selectedchannel.add (New Channel ("", "entertainment", 0, "", ""));        Selectedchannel.add (New Channel ("", "Sport", 0, "", ""));        Selectedchannel.add (New Channel ("", "Finance", 0, "", ""));        Selectedchannel.add (New Channel ("", "Hotspot", 0, "", ""));        Selectedchannel.add (New Channel ("", "technology", 0, "", ""));        Selectedchannel.add (New Channel ("", "Picture", 0, "", ""));        Selectedchannel.add (New Channel ("", "car", 0, "", ""));        Selectedchannel.add (New Channel ("", "fashion", 0, "", ""));    public static  list<channel> Getselectedchannel () {         return selectedchannel;    }

Navigation button Appearance: Tab_rb.xml and Tab_selector.xml background selector (with red underline effect after selection)

<?xml version= "1.0" encoding= "Utf-8"? ><radiobutton xmlns:android= "http://schemas.android.com/apk/res/ Android "Android:layout_width=" Wrap_content "android:layout_height=" 30DP "and                Roid:text= "Today" android:background= "@drawable/tab_selector" android:paddingleft= "15DP"                   android:paddingright= "15DP" android:paddingtop= "10DP" android:paddingbottom= "10DP" android:button= "@null"/>tab_selector.xml:<selector xmlns:android= "HTTP://SCHEMAS.A Ndroid.com/apk/res/android "> <item android:state_checked=" true "><!--selected state--<layer-list > <item > <shape android:shape= "Rectangle" > <stroke Android  : width= "5DP" android:color= "#ff0000"/> </shape> </item> <item          android:bottom= "5DP" >      <shape android:shape= "Rectangle" > <solid android:color= "#fff"/> &L        t;/shape> </item> </layer-list> </item> <item ><!--default state-- <shape > <solid android:color= "#FAFAFA"/> </shape> </item></selec Tor>

3, Pagefragmentadapter Adapter

public class Pagefragmentadapter extends fragmentpageradapter{    private list<fragment> fragmentlist;    Private Fragmentmanager FM;    Public Pagefragmentadapter (Fragmentmanager fm,list<fragment> fragmentlist) {        super (FM);        This.fragmentlist=fragmentlist;        THIS.FM=FM;    }    @Override public    Fragment getItem (int idx) {        return Fragmentlist.get (Idx%fragmentlist.size ());    }    @Override public    int GetCount () {        return fragmentlist.size ();    }    @Override public      int GetItemPosition (Object object) {         return position_none;  Child not found requested reload    }  }

4. Newsfragment Components:

public class Newsfragment extends Fragment {private String weburl;    Private String ChannelName;    @Override public void Onattach (activity activity) {Super.onattach (activity);    } private View view; @Override public View Oncreateview (layoutinflater inflater, ViewGroup container, Bundle savedinstancestate)            {if (view==null) {//optimize view reduce the number of views created//This section can be designed via XML file fragment interface, and then converted to view component by Layoutinflater            Here, add a TextView TextView tvtitle=new TextView (getactivity ()) for fragment by code;            Tvtitle.settext (ChannelName);            Tvtitle.settextsize (16);            Tvtitle.setgravity (Gravity.center);            Tvtitle.setlayoutparams (New Layoutparams (layoutparams.match_parent,layoutparams.match_parent));        View=tvtitle;        } viewgroup parent= (ViewGroup) view.getparent ();        if (parent!=null) {//If the view has been added to the container, to be deleted, the responsibility will be error parent.removeview (view);    } return view; }    @Override public void Setarguments (bundle bundle) {//Receive incoming Data weburl=bundle.getstring ("Weburl");        Channelname=bundle.getstring ("name"); }    }

To learn more about the small partners, you can click to view the source code , run the test yourself.

Inquiries or technical exchanges, please join the official QQ Group: (452379712)

Jerry Education
Source:http://blog.csdn.net/jerehedu/
This article is the copyright of Yantai Jerry Education Technology Co., Ltd. and CSDN Common, welcome reprint, but without the author's consent must retain this paragraph statement, and in the article page obvious location to the original link, otherwise reserves the right to pursue legal responsibility.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Android Typical interface design--viewpage+fragment implementation of the Area top tab sliding switch