最近使用FragmentTabHost+FrameLayout做APP的底部导航栏,感觉非常的快速有效,做个笔记记录下:
1.主页面代码:
public class MainActivity extends AppCompatActivity {
@BindView(R.id.real_tab_content)
FrameLayout realTabContent;
@BindView(R.id.tab_content)
FrameLayout tabContent;
@BindView(R.id.tab_host)
FragmentTabHost tabHost;
//需要的资源信息
private final String mTabSpec[]={"head","classify","heart","my"};
//文字信息
private final String mIndicator[]={"首页","分类","喜欢","我的"};
//导航图信息
private final int mTabImage[]={R.drawable.tab_home_item,R.drawable.tab_classify_item,R.drawable.tab_heart_item,R.drawable.tab_user_item};
//导航fragment
private final Class mFragmentClass[]={HomeFragment.class, ClassifyFragment.class, HeartFragment.class, MyFragment.class};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
//设置添加tab
tabHost.setup(this,getSupportFragmentManager(),R.id.real_tab_content);
for(int i=0;i<mTabSpec.length;i++){
tabHost.addTab(tabHost.newTabSpec(mTabSpec[i]).setIndicator(getTabView(i)),mFragmentClass[i],null);
}
}
//设定每一个的TabView
private View getTabView(int index){
View view=View.inflate(this,R.layout.tab_item,null);
ImageView tabImage=view.findViewById(R.id.tab_image);
TextView tabTitle=view.findViewById(R.id.tab_title);
tabImage.setImageResource(mTabImage[index]);
tabTitle.setText(mIndicator[index]);
return view;
}
}
2.主页面布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.administrator.liveviewdemo.ui.activity.MainActivity">
<FrameLayout
android:id="@+id/real_tab_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<View
android:background="#333333"
android:layout_width="match_parent"
android:layout_height="1dp"></View>
<android.support.v4.app.FragmentTabHost
android:id="@+id/tab_host"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:id="@+id/tab_content"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0">
</FrameLayout>
</android.support.v4.app.FragmentTabHost>
</LinearLayout>
3.TabView布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/tab_image"
android:paddingTop="2dp"
android:layout_width="24dp"
android:layout_height="24dp"
android:contentDescription="@string/tab_image"/>
<TextView
android:id="@+id/tab_title"
android:textSize="12sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
4.图片资源文件(ps:给出一个做为样式,代码都是一样的只是图片不同而已):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="@mipmap/ic_home_press"/>
<item android:state_selected="true" android:drawable="@mipmap/ic_home_press"/>
<item android:drawable="@mipmap/ic_home"/>
</selector>