使用FragmentTabHost实现类似微信底部的效果

来源：互联网发布：网络作家富豪榜 2016 编辑：程序博客网时间：2024/05/01 12:11

我也是新手，多的不讲，直接看代码。

一：首先我们看看XML:

1.activity_main.xml

<?xml version="1.0" encoding="utf-8"?><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="com.example.yangmin.fragmenttabhostdemo.MainActivity">    <android.support.v4.app.FragmentTabHost        android:id="@android:id/tabhost"        android:layout_width="match_parent"        android:layout_height="match_parent">       <LinearLayout           android:layout_width="match_parent"           android:layout_height="match_parent"           android:orientation="vertical">           <FrameLayout               android:id="@android:id/tabcontent"               android:layout_width="match_parent"               android:layout_height="0dp"               android:layout_weight="1"/>            <TabWidget                android:id="@android:id/tabs"                android:layout_width="match_parent"                android:layout_height="wrap_content"/>       </LinearLayout>    </android.support.v4.app.FragmentTabHost></RelativeLayout>

2. tab_item.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center">    <ImageView        android:id="@+id/image"        android:layout_width="30dp"        android:layout_height="30dp"        android:src="@drawable/mes"/>    <TextView        android:id="@+id/title"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="微信"        android:textSize="15sp"/></LinearLayout>3.Fragemnt很简单，就不写了。4.看MainActivity

public class MainActivity extends FragmentActivity implements TabHost.OnTabChangeListener {    private FragmentTabHost tabHost;    private LayoutInflater layoutInflater;    private String[] bottom_title={"微信","通讯录","发现","我"};    private  int[] image_sed={R.drawable.mes_sed,R.drawable.con_sed,R.drawable.find_sed,R.drawable.mine_sed};//选中是TabWidget的图标    private  int[] image_non={R.drawable.mes,R.drawable.cont,R.drawable.find,R.drawable.mine};                  //未选中的图标    private Class[] fragment_class = {MsgFragment.class,ContFragment.class,FindFragment.class,MineFragment.class};    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        init();        //初始默认将第一个设为选中状态        tabHost.setCurrentTab(0);        ImageView imageView= (ImageView) tabHost.getTabWidget().getChildAt(0).findViewById(R.id.image);        imageView.setImageResource(image_sed[0]);        tabHost.setOnTabChangedListener(this);    }    public void init(){        tabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);        //初始化Tabhost        tabHost.setup(this,getSupportFragmentManager(),android.R.id.tabcontent);        for(int i=0;i<bottom_title.length;i++){            TabHost.TabSpec spec=tabHost.newTabSpec(bottom_title[i]).setIndicator(getTabView(i,image_non));            tabHost.addTab(spec,fragment_class[i],null);        }    }    /**     *     * @param index tab的id     * @param resouces  图标资源数组     * @return  生成的TabWidget试图     */    public View getTabView(int index,int[] resouces){        layoutInflater=getLayoutInflater();        View view=layoutInflater.inflate(R.layout.tab_item,null);        ImageView imageView= (ImageView) view.findViewById(R.id.image);        imageView.setImageResource(resouces[index]);        TextView textView= (TextView) view.findViewById(R.id.title);        textView.setText(bottom_title[index]);        return view;    }    //Tab切换后会调用此方法    @Override    public void onTabChanged(String tabId) {        int id=0;        //tabId就是上面设的TabSpec的tag,根据tag找出对应的id        for(int i=0;i<bottom_title.length;i++){            if(bottom_title[i].equals(tabId)){                id=i;            }        }        Log.w("onTabChanged","id="+id);        //将当前选中的底部图标设为选中状态        ImageView imageView= (ImageView) tabHost.getTabWidget().getChildAt(id).findViewById(R.id.image);        imageView.setImageResource(image_sed[id]);        //将其他的tab恢复初始状态        for (int i=0;i<bottom_title.length;i++){            if(i!=id){                imageView= (ImageView) tabHost.getTabWidget().getChildAt(i).findViewById(R.id.image);                imageView.setImageResource(image_non[i]);            }        }    }}

0 0