您的位置:首页 > 移动开发 > 微信开发

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

2016-10-06 13:54 435 查看
我也是新手,多的不讲,直接看代码。

一: 首先我们看看XML,注意以下三个标红的id必须使用android固定的id,不能使用其他id:

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]);
}
}
}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐