前言
前几天写了Android底部导航栏——bottomnavigation结合viewpager的实现这是谷歌官方新发布的技术,是目前实现Android底部栏代码量最少最便捷的一种方式。今天再给大家介绍一种实现底部导航栏的比较好用的方法。注意:实现导航的实现方式有很多,大家可以选择一种自己感觉比较好的用。
一:FragmentTabHost+ViewPager+Fragment
1.1 底部菜单栏实现步骤:
- 在主xml布局里面定义一个FragmentTabHost控件
- 定义底部菜单栏布局
- 定义每个Fragment布局
- 定义每个Fragment的Java类
- 定义适配器以关联页卡和ViewPage
- 定义具体实现的MainActivity
1.2 底部菜单栏xml的书写
MainActivity.xml
在主布局中定义一个FragmentTabHost控件
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="android.com.fragmenttabhost.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" /><!--装4个Fragment-->
<!--定义FragmentTabHost控件-->
<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="48dp"
android:background="@android:color/white" ><!--装4个Fragment-->
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" /><!--装Tab的内容-->
</android.support.v4.app.FragmentTabHost>
</LinearLayout>
定义底部菜单栏的布局,上面是图片,下面是文字
tab_content.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:background="#ffffff">
<ImageView
android:id="@+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="@drawable/textcolor_selector" />
</LinearLayout>
定义点击图片和文字颜色变化的selector
tab_chat_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/chat_pressed" android:state_selected="true"> </item>
<item android:drawable="@mipmap/chat_normal" > </item>
</selector>
textcolor_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/p_select_color" android:state_pressed="true" />
<item android:color="@color/p_select_color" android:state_focused="true" />
<item android:color="@color/p_select_color" android:state_selected="true" />
<item android:color="@color/p_99_color" />
</selector>
定义MainActivity主函数
package android.com.fragmenttabhost;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTabHost;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TabWidget;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
/*
* /*实现setOnTabChangedListener接口,目的是为监听界面切换),然后实现TabHost里面图片文字的选中状态切换*/
/*简单来说,是为了当点击下面菜单时,上面的ViewPager能滑动到对应的Fragment*/
public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener,TabHost.OnTabChangeListener{
private FragmentTabHost mTabHost;
private ViewPager vp;
private LayoutInflater layoutInflater;
private String[] tabText = { "聊天", "朋友", "通讯录", "设置" };
private int[] imageRes = new int[] { R.drawable.tab_chat_selector, R.drawable.tab_friend_selector, R.drawable.tab_contacts_selector, R.drawable.tab_setting_selector };
private List<Fragment> list = new ArrayList<Fragment>();
MyFragmentAdapter mMyFragmentAdapter;
private Class[] fragments = new Class[] { ChatFragment.class, FrientFragment.class, ContactsFragment.class, SettingFragment.class };
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initPage();
}
// 控件初始化控件
private void initView() {
vp = (ViewPager) findViewById(R.id.pager);
vp.addOnPageChangeListener(this);//设置页面切换时的监听器
mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
mTabHost.setup(this, getSupportFragmentManager(), R.id.pager);//绑定viewpager
mTabHost.setOnTabChangedListener(this);
/*新建Tabspec选项卡并设置Tab菜单栏的内容和绑定对应的Fragment*/
for (int i = 0; i < tabText.length; i++) {
View view = LayoutInflater.from(this).inflate(R.layout.tab_content, null);
((TextView) view.findViewById(R.id.tv)).setText(tabText[i]);
((ImageView) view.findViewById(R.id.iv)).setImageResource(imageRes[i]);
// 给每个Tab按钮设置标签、图标和文字
TabHost.TabSpec tabSpec = mTabHost.newTabSpec(tabText[i])
.setIndicator(view);
// 将Tab按钮添加进Tab选项卡中,并绑定Fragment
mTabHost.addTab(tabSpec, fragments[i], null);
mTabHost.setTag(i);
/* mTabHost.getTabWidget().getChildAt(i)
.setBackgroundResource(R.drawable.textcolor_selector);//设置Tab被选中的时候颜色改变*/
}
}
/*初始化Fragment*/
private void initPage() {
//绑定Fragment适配器
ChatFragment chatFragment=new ChatFragment();
list.add(new ChatFragment());
list.add(new FrientFragment());
list.add(new ContactsFragment());
list.add(new SettingFragment());
vp.setAdapter(new MyFragmentAdapter(getSupportFragmentManager(), list));
mTabHost.getTabWidget().setDividerDrawable(null);
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//position是表示你当前选中的页面位置Postion,这事件是在你页面跳转完毕的时候调用的
@Override
public void onPageSelected(int position) {
TabWidget widget = mTabHost.getTabWidget();
int oldFocusability = widget.getDescendantFocusability();
widget.setDescendantFocusability(ViewGroup.FOCUS_BLOCK_DESCENDANTS);//设置View覆盖子类控件而直接获得焦点
mTabHost.setCurrentTab(position);//根据位置Postion设置当前的Tab
widget.setDescendantFocusability(oldFocusability);//设置取消分割线
}
@Override
public void onPageScrollStateChanged(int state) {
}
//自动把getCurrentTabView下的所有子View的selected状态设为true. 牛逼!
@Override
public void onTabChanged(String s) {
int position = mTabHost.getCurrentTab();
vp.setCurrentItem(position);//把选中的Tab的位置赋给适配器,让它控制页面切换
}
}
这里简单的定义四个fragement就不写了,直接上效果图。
不懂的宝宝们看demo,其实这种方法真的超级简单