Typical Android Interface Design -- FragmentTabHost + Fragment enables tab switching at the bottom and fragmenttabhost at the bottom

Typical Android Interface Design -- FragmentTabHost + Fragment enables tab switching at the bottom and fragmenttabhost at the bottom

I. Problem Description

In the last blog, we used RadioGroup + ViewPage + Fragmen to achieve the top sliding navigation (view article: http://www.cnblogs.com/jerehedu/p/4607599.html#dxjmsj), then we used FragmentTabHost + Fragment to achieve the bottom tab switch, the effect

Ii. Main Components of the case

1. MainActivity Layout

The entire Activity is divided into two TabHost and TabContent. TabHost contains each tab. switching between tabs will display the content of the respective sections in the FrameLayout area associated with TabContent.

<LinearLayout  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"    android:orientation="vertical"    tools:context=".MainActivity" >    <FrameLayout  android:id="@+id/contentLayout"         android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1">     </FrameLayout>     <android.support.v4.app.FragmentTabHost         android:id="@android:id/tabhost"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:background="#F6F6F6"         >         <FrameLayout android:id="@android:id/tabcontent"             android:layout_height="0dp" android:layout_width="0dp"             />     </android.support.v4.app.FragmentTabHost></LinearLayout>

2. MainActivity code

public class MainActivity extends FragmentActivity implements OnTabChangeListener{    private FragmentTabHost tabHost;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        tabHost=(FragmentTabHost)super.findViewById(android.R.id.tabhost);        tabHost.setup(this,super.getSupportFragmentManager()                ,R.id.contentLayout);        tabHost.getTabWidget().setDividerDrawable(null);        tabHost.setOnTabChangedListener(this);        initTab();    }    private void initTab(){        String tabs[]=TabDb.getTabsTxt();        for(int i=0;i<tabs.length;i++){            TabSpec tabSpec=tabHost.newTabSpec(tabs[i]).setIndicator(getTabView(i));            tabHost.addTab(tabSpec,TabDb.getFragments()[i],null);            tabHost.setTag(i);        }    }    private View getTabView(int idx){        View view=LayoutInflater.from(this).inflate(R.layout.footer_tabs,null);        ((TextView)view.findViewById(R.id.tvTab)).setText(TabDb.getTabsTxt()[idx]);        if(idx==0){            ((TextView)view.findViewById(R.id.tvTab)).setTextColor(Color.RED);    ((ImageView)view.findViewById(R.id.ivImg)).setImageResource(TabDb.getTabsImgLight()[idx]);        }else{            ((ImageView)view.findViewById(R.id.ivImg)).setImageResource(TabDb.getTabsImg()[idx]);        }        return view;    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.        getMenuInflater().inflate(R.menu.main, menu);        return true;    }    @Override    public void onTabChanged(String tabId) {        // TODO Auto-generated method stub        updateTab();    }    private void updateTab(){        TabWidget tabw=tabHost.getTabWidget();        for(int i=0;i<tabw.getChildCount();i++){            View view=tabw.getChildAt(i);            ImageView iv=(ImageView)view.findViewById(R.id.ivImg);            if(i==tabHost.getCurrentTab()){                ((TextView)view.findViewById(R.id.tvTab)).setTextColor(Color.RED);                iv.setImageResource(TabDb.getTabsImgLight()[i]);            }else{        ((TextView)view.findViewById(R.id.tvTab)).setTextColor(getResources().getColor(R.color.foot_txt_gray));                iv.setImageResource(TabDb.getTabsImg()[i]);            }                    }    }}

3. TabDb Components

Provides the tab text, tab image, and Fragment data required for the interface design.

Public class TabDb {public static String [] getTabsTxt () {String [] tabs = {"news", "read", "try", "Discover", "me "}; return tabs;} public static int [] getTabsImg () {int [] ids = {R. drawable. foot_news_normal, R. drawable. foot_read_normal, R. drawable. foot_vdio_normal, R. drawable. foot_fond_normal, R. drawable. foot_out_normal}; return ids;} public static int [] getTabsImgLight () {int [] ids = {R. drawable. foot_news_light, R. drawable. foot_read_light, R. drawable. foot_vdio_light, R. drawable. foot_found_light, R. drawable. foot_out_light}; return ids;} public static Class [] getFragments () {Class [] clz = {NewsFragment. class, ReadFragment. class, VideoFragment. class, FoundFragment. class, OwnerFragment. class }; return clz ;}}

4. Fragment components corresponding to each tab

There are five Fragment items in total: NewsFragment, ReadFragment, FoundFragment, OwnerFragment, and VideoFragment. You can design the interfaces based on different sections. Here, we will focus on how to implement tab switching at the bottom, the NewsFragment code is as follows:

Public class NewsFragment extends Fragment {@ Override public void onAttach (Activity activity) {// TODO Auto-generated method stub super. onAttach (activity) ;}@ Override public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {// TODO Auto-generated method stub TextView tvTitle = new TextView (super. getActivity (); tvTitle. setText ("news"); tvTitle. setLayoutParams (new LayoutParams (LayoutParams. MATCH_PARENT, LayoutParams. MATCH_PARENT); tvTitle. setGravity (Gravity. CENTER); tvTitle. setTextSize (30); return tvTitle ;}@ Override public void setArguments (Bundle args) {// TODO Auto-generated method stub super. setArguments (args );}}

5. tab layout style (footer_tabs.xml)

<? Xml version = "1.0" encoding = "UTF-8"?> <RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: gravity = "center" android: padding = "5dp" android: background = "# F6F6F6"> <ImageView android: id = "@ + id/ivImg" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_alignParentLeft = "true" android: layout_alignParentTop = "true"/> <TextView android: id = "@ + id/tvTab" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_alignParentLeft = "true" android: layout_below = "@ + id/ivImg" android: textColor = "# AEAEAE" android: text = "news" android: layout_marginTop = "2dp"/>

 

For more information, clickView Source CodeRun the test in person.

For questions or technical exchanges, please join the official QQ group: (452379712)

 

Author: Jerry Education
Source: http://www.cnblogs.com/jerehedu/
The copyright of this article belongs to Yantai Jerry Education Technology Co., Ltd. and the blog Park. You are welcome to repost it. However, you must keep this statement without the author's consent and provide the original article connection on the article page, otherwise, you are entitled to pursue legal liability.