Android to achieve the top bottom of the dual navigation interface function _android

Recently want to get a dual navigation function, look at a lot of information, finally realize the function, this side even give yourself a few notes!

Let's see the effect first.

So it's starting to happen!

The bottom navigation bar I choose to use fragmenttabhost+fragment to achieve, this method I feel quite good, the code quantity is not many

The first is the beginning of the Activity_main.xml

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android"
 xmlns:tools= "http:// Schemas.android.com/tools "
 android:layout_width=" match_parent "
 android:layout_height=" Match_parent "
 tools:context= "${relativepackage}.${activityclass}" >

 <framelayout
 android:id= "@+id/main_ View "
 android:layout_width=" match_parent "
 android:layout_height=" match_parent "
 android:layout_ Above= "@+id/main_tab"
 android:layout_alignparentleft= "true"
 android:layout_alignparenttop= "true" >

 </FrameLayout>

 <view
 android:id= "@+id/main_tab"
 android:layout_width= "Match_ Parent "
 android:layout_height=" 50DP "
 android:layout_alignparentbottom=" true "
 android:layout_ Alignparentleft= "true" 
 class= "Android.support.v4.app.FragmentTabHost"/>

</RelativeLayout>

Where I was directly pulling the view so it was formed by the Fragmenttabhost

You can also write directly in the XML file
<android.support.v4.view.fragmenttabhost >
</android.support.v4.view.FragmentTabHost>
The XML file is a view plus a tab view to show the fragmentation, the number of buttons used to place the bottom button

Again, Tab_foot.xml.

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android=
"http://schemas.android.com/apk/" Res/android "
 android:layout_width=" match_parent "
 android:layout_height=" Match_parent "
 android: Background= "#F6F6F6"
 android:gravity= "center"
 android:orientation= "vertical" >

 <imageview
 android:id= "@+id/foot_iv"
 android:layout_width= "wrap_content"
 android:layout_height= "WRAP_" Content "
 android:src=" @drawable/home1 "/>

 <textview
 android:id=" @+id/foot_tv "
 Android : layout_width= "wrap_content"
 android:layout_height= "wrap_content"
 android:layout_margintop= "3DP"
 android:text= "Home"
 android:textcolor= "@color/tab_color"/>

</LinearLayout>

This is the XML file for the layout settings of each bottom button

Displays the effect.

Again, it's mainactivity code.

Package com.gjn.mynavigation;
Import Android.os.Bundle;
Import android.support.v4.app.FragmentActivity;
Import Android.support.v4.app.FragmentTabHost;
Import Android.view.LayoutInflater;
Import Android.view.View;
Import Android.view.Window;
Import Android.widget.ImageView;
Import Android.widget.TabWidget;
Import Android.widget.TextView;
Import Android.widget.TabHost.OnTabChangeListener;

Import Android.widget.TabHost.TabSpec;
 public class Mainactivity extends Fragmentactivity implements Ontabchangelistener {private Fragmenttabhost mtabhost;
 @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
 Requestwindowfeature (Window.feature_no_title);
 
 Setcontentview (R.layout.activity_main);
 Initialization of Fragmenttabhost inithost ();
 Initialize the bottom navigation bar initTab ();
 The default check mtabhost.ontabchanged (Tabdb.gettabstxt () [0]);
 private void InitTab () {string[] tabs = Tabdb.gettabstxt (); for (int i = 0; i < tabs.length i++) {//new Tabspec Tabspec Tabspec= Mtabhost.newtabspec (Tabdb.gettabstxt () [i]);
 Set the view View view = Layoutinflater.from (this). Inflate (r.layout.tabs_foot, NULL);
 ((TextView) View.findviewbyid (R.ID.FOOT_TV)). SetText (Tabdb.gettabstxt () [i]);
 ((ImageView) View.findviewbyid (R.id.foot_iv)). Setimageresource (Tabdb.gettabsimg () [i]);
 Tabspec.setindicator (view);
 Join Tabspec Mtabhost.addtab (tabspec,tabdb.getframgent () [i],null);
 }/*** * Initialize host */private void Inithost () {mtabhost = (fragmenttabhost) Findviewbyid (R.id.main_tab);
 Call the Setup method to set the view Mtabhost.setup (this, Getsupportfragmentmanager (), R.id.main_view);
 Remove the split line Mtabhost.gettabwidget (). setdividerdrawable (NULL);
 Monitor Event Mtabhost.setontabchangedlistener (this);
 @Override public void ontabchanged (String arg0) {//How many toggle interfaces are obtained from the split line tabwidget TABW = Mtabhost.gettabwidget ();
 for (int i = 0; i < Tabw.getchildcount (); i++) {View v = tabw.getchildat (i); 
 TextView TV = (TextView) V.findviewbyid (R.ID.FOOT_TV); ImageView IV = (ImageView) v.findviewbyiD (R.ID.FOOT_IV); Modify the current interface button color Picture if (i = = Mtabhost.getcurrenttab ()) {Tv.settextcolor (Getresources ()). GetColor (R.color.tab_light_color
 ));
 Iv.setimageresource (Tabdb.gettabsimglight () [i]);
 }else{Tv.settextcolor (Getresources (). GetColor (R.color.tab_color));
 Iv.setimageresource (Tabdb.gettabsimg () [i]);

 }
 }
 }
}

Where the Tabdb class is used to set the navigation bar data and picture switching resources
The following is the Tabdb class

Package com.gjn.mynavigation;

public class Tabdb {
 /***
 * Get bottom all items
 *
 /public static string[] Gettabstxt () {
 string[] tabs = {"Home", "pay Easy "," place "," my "};
 return tabs;
 }
 /***
 * Get all fragments
 /public static class[] Getframgent () {
 class[] cls = {Onefm.class,twofm.class, Threefm.class,fourfm.class};
 return CLS;
 }
 /***
 * Get all the pictures before clicking * * Public
 static int[] Gettabsimg () {
 int[] img = {r.drawable.home1, R.drawable.glod1,r.drawable.xc1,r.drawable.user1};
 return img;
 }
 /***
 * Get all clicked Pictures/public
 static int[] Gettabsimglight () {
 int[] img = {r.drawable.home2, R.drawable.glod2,r.drawable.xc2,r.drawable.user2};
 return img;
 }
}

To this end, the bottom navigation bar is fully implemented.

--------------------------------------------------------------------------------------------------------------- -----------

Now to implement the top navigation bar, see a lot of the last use of Radiogroup+viewpager to achieve

The first is to design an XML layout for the first fragment

Fm_one.xml

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android=
"http://schemas.android.com/apk/" Res/android "
 android:layout_width=" match_parent "
 android:layout_height=" match_parent "
 android:o" rientation= "vertical" >

  
 

Set top navigation bar and display view
After that, the layout of each item in the navigation bar

Tab_rb.xml

<?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=" Wrap_content "
 android: background= "@drawable/tab_rb_selector"
 android:button= "@null"
 android:paddingbottom= "10DP"
 Android :p addingleft= "15DP"
 android:paddingright= "15DP"
 android:paddingtop= "10DP"
 android:text= "Today" >
</RadioButton>

Where the selector file is set to control the click and no click Status

Tab_rb_selector.xml

<?xml version= "1.0" encoding= "Utf-8"?> <selector xmlns:android=
"http://schemas.android.com/apk/res/" Android ">
 <!--click-->
 <item android:state_checked=" true ">
 <layer-list >
  < Item >
  <shape android:shape= "Rectangle" >
   <stroke android:width= "5DP" android:color= "@color/tab _light_color "/>
  </shape>
  </item>
  <item android:bottom=" 5DP ">
  <shape Android:shape= "Rectangle" >
   <solid android:color= "#fff"/>
  </shape>
  </item>
 </layer-list>
 </item>
 <!--default-->
 <item >
 <shape >
  <solid android:color= "#fafafa"/>
 </shape>
 </item>
</selector>

Set the display status of the click and default
Finally to implement the ONEFM class

Package com.gjn.mynavigation;
Import java.util.ArrayList;

Import java.util.List;
Import Android.os.Bundle;
Import android.support.annotation.Nullable;
Import android.support.v4.app.Fragment;
Import Android.support.v4.view.ViewPager;
Import Android.support.v4.view.ViewPager.OnPageChangeListener;
Import Android.util.DisplayMetrics;
Import Android.view.LayoutInflater;
Import Android.view.View;
Import Android.view.ViewGroup;
Import Android.widget.HorizontalScrollView;
Import Android.widget.RadioButton;
Import Android.widget.RadioGroup;
Import Android.widget.RadioGroup.LayoutParams;

Import Android.widget.RadioGroup.OnCheckedChangeListener;
 public class Onefm extends Fragment implements Onpagechangelistener {private View view;
 Private Radiogroup Rg_;
 Private Viewpager Vp_;
 Private Horizontalscrollview hv_;
 Private list<fragment> newslist = new arraylist<fragment> ();

 Private Onefmadapter adapter; @Override public View Oncreateview (Layoutinflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedinstancestate) {if (view = = null) {//Initialize view view = Inflater.inflate (r.la
 Yout.fm_one, Container,false);
 Rg_ = (radiogroup) View.findviewbyid (R.ID.ONE_RG);
 Vp_ = (Viewpager) View.findviewbyid (R.id.one_view);
 Hv_ = (Horizontalscrollview) View.findviewbyid (R.ID.ONE_HV); Set Radiogroup Click event Rg_.setoncheckedchangelistener (New Oncheckedchangelistener () {@Override public void Oncheckedchan
 Ged (radiogroup Group, int id) {Vp_.setcurrentitem (ID);
 }
 });
 Initializes the top navigation bar initTab (inflater);
 Initialization of Viewpager Initview (); }/* * After the bottom navigation bar switch, because the top setting has not been destroyed, if you do not reset view * Causes the bottom switch to cut back the top page data will disappear and so on bug * The following settings each re-create view can be * * * viewgroup parent = (Viewgrou
 p) view.getparent ();
 if (parent!= null) {Parent.removeview (view);
 } return view;
 }/*** * Initialize Viewpager/private void Initview () {list 

There are two data classes and one fragment class

Data class

Htab.java

Package com.gjn.mynavigation;

/***
 * Head tab attribute
 *
/public class Htab {
 private String name;

 Public Htab (String name) {
 super ();
 This.setname (name);

 Public String GetName () {return
 name;
 }

 public void SetName (String name) {
 this.name = name;
 }
 
}

Htabdb.java

Package com.gjn.mynavigation;

Import java.util.ArrayList;
Import java.util.List;

public class Htabdb {
 private static final list 
 

Fragment class
Onefm1.java

 Package com.gjn.mynavigation;

Import Android.os.Bundle;
Import android.support.annotation.Nullable;
Import android.support.v4.app.Fragment;
Import Android.view.LayoutInflater;
Import Android.view.View;
Import Android.view.ViewGroup;
Import Android.widget.TextView;

public class OneFm1 extends Fragment {

 private String name;

 @Override public
 void Setarguments (Bundle args) {
 name = args.getstring (' name ');
 }

 @Override public
 View Oncreateview (layoutinflater inflater,
 @Nullable viewgroup container, @Nullable Bundle Savedinstancestate) {
 View view = Inflater.inflate (R.layout.fragment, container,false);
 ((TextView) View.findviewbyid (R.id.fm_text)). SetText (name);
 return view;
 }

In this way, the top navigation bar is added to the first fragment and the switching function is implemented.

Finally put the fragment.xml, which is the most default display page for each fragment

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android=
"http://schemas.android.com/apk/" Res/android "
 android:layout_width=" match_parent "
 android:layout_height=" Match_parent "
 android: gravity= "center"
 android:orientation= "vertical" >

 <textview
 android:id= "@+id/fm_text"
 Android:layout_width= "Wrap_content"
 android:layout_height= "wrap_content"
 android:text= "Large text"
 android:textappearance= "Android:attr/textappearancelarge"/>

</LinearLayout>

Summarize:

It's a note-taking record! A period of time has not been updated, because just graduated a time, walk stop and leave some of their own records, afraid of their own later to write forget.

Download Address: Click to open the link

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.