使用FragmentTabHost实现类似微信底部的效果
2016-10-06 13:54
435 查看
我也是新手,多的不讲,直接看代码。
一: 首先我们看看XML,注意以下三个标红的id必须使用android固定的id,不能使用其他id:
1.activity_main.xml
2. tab_item.xml
一: 首先我们看看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]); } } } }
相关文章推荐
- 滑动菜单解决方案之三:使用TabHost控件实现微信界面的底部菜单效果
- 自定义ImageView实现类似微信朋友圈发图片点击出来阴影效果;同时使用Picasso加载网络图片
- 使用ViewPager+RadioGroup+Fragment实现类似微信的底部导航
- Android 实现类似微信页面底部导航效果
- android 中使用TabHost控件实现微信界面的底部菜单效果
- dojo的connect方法使用与源代码剖析(在JavaScript里实现类似AOP的效果)
- Android中如何使用ViewPager实现类似laucher左右拖动效果
- Android中如何使用ViewPager实现类似laucher左右拖动效果
- 深层切换效果实现原理的理解(类似微信)
- 在asp.net中使用jQuery实现类似QQ网站的图片切割效果
- dojo的connect方法使用与源代码剖析(在JavaScript里实现类似AOP的效果)
- Android中如何使用ViewPager实现类似laucher左右拖动效果
- Android中如何使用ViewPager实现类似laucher左右拖动效果
- 两种方法使用js读写cookie实现一个底部广告浮层效果
- Android中如何使用ViewPager实现类似laucher左右拖动效果
- Silverlight使用DataGrid的模板列(DataGridTemplateColumn)实现类似TreeListView控件的效果
- silverlight使用DataGrid实现类似Treelistview效果
- Android中如何使用ViewPager实现类似laucher左右拖动效果
- Silverlight使用DataGrid的模板列(DataGridTemplateColumn)实现类似TreeListView控件的效果
- .NET在WebForm里实现类似WinForm里面TrackBar控件的效果(AJAX Control Toolkit的使用)