demo:https://github.com/linliangliang/BottomNavagationBar
android底部导航栏的实现方式比较多,今天学习其中两种方式:
一、使用tabLayout+Fragment实现。
二、使用BottomNavigationBar实现。
第二种实现方式:https://blog.csdn.net/qq_25066049/article/details/84647988
下面介绍tablayou+fregment的实现:
1、在app的gradle添加
implementation 'com.android.support:appcompat-v7:26.0.0'
compile 'com.android.support:design:26.0.0'
2、activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="none"></android.support.v4.view.ViewPager>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_marginBottom="5dp"
android:background="@android:color/darker_gray" />
<android.support.design.widget.TabLayout
android:id="@+id/bottom_tab_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="2dp"
app:tabIndicatorHeight="0dp"
app:tabSelectedTextColor="#03A9F4"
app:tabTextColor="@android:color/darker_gray">
</android.support.design.widget.TabLayout>
</LinearLayout>
主界面有一个viewpage和一个tablayout构成,分别表示主显示界面和底部导航栏,其中涉及的样式、颜色、图片都自己添加,后面的一样。
其中viewpage盛放的四个fragment都是类似的,只是显示的文本不一样,这里只贴一个如下:fragment_attention.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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="爱好" />
</LinearLayout>
新建好四个fragment后,分别为四个fragment写一个对应的类,这里只贴一个:AttentionFragment.java
其他地方一个,只是return inflater.inflate(R.layout.fragment_attention,container,false);填充对应的fragment布局文件
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.zhengyuan.bottomnaviagtionbar.R;
/**
* Created by 林亮 on 2018/11/29
*/
public class AttentionFragment extends Fragment{
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_attention,container,false);
}
@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
}
}
接下来为主界面的viewpage写一个对应的适配器:MyFragmentPagerAdapter.java
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import com.zhengyuan.bottomnaviagtionbar.fragment.AttentionFragment;
import com.zhengyuan.bottomnaviagtionbar.fragment.DiscoveryFragment;
import com.zhengyuan.bottomnaviagtionbar.fragment.HomeFragment;
import com.zhengyuan.bottomnaviagtionbar.fragment.ProfileFragment;
/**
* Created by 林亮 on 2018/11/29
*/
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
private String[] mTitles = new String[]{"爱好", "发现", "主页", "我的"};
public MyFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
if (position == 0) {
return new AttentionFragment();
} else if (position == 1) {
return new DiscoveryFragment();
} else if (position == 2) {
return new HomeFragment();
}
return new ProfileFragment();
}
@Override
public int getCount() {
return mTitles.length;
}
//ViewPager与TabLayout绑定后,这里获取到PageTitle就是Tab的Text
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}
}
最后是主函数mainActivity.class:
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.zhengyuan.bottomnaviagtionbar.adapter.MyFragmentPagerAdapter;
public class MainActivity extends AppCompatActivity {
public static final int[] mTabRes = new int[]{R.drawable.tab_home_selector, R.drawable.tab_discovery_selector, R.drawable.tab_attention_selector, R.drawable.tab_profile_selector};
public static final int[] mTabResPressed = new int[]{R.drawable.ic_tab_strip_icon_feed_selected, R.drawable.ic_tab_strip_icon_category_selected, R.drawable.ic_tab_strip_icon_pgc_selected, R.drawable.ic_tab_strip_icon_profile_selected};
private TabLayout mTabLayout;
private ViewPager mViewPager;
private MyFragmentPagerAdapter myFragmentPagerAdapter;
private TabLayout.Tab one;
private TabLayout.Tab two;
private TabLayout.Tab three;
private TabLayout.Tab four;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化视图
initViews();
}
private void initViews() {
//使用适配器将ViewPager与Fragment绑定在一起
mViewPager = (ViewPager) findViewById(R.id.viewPager);
myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(myFragmentPagerAdapter);
//将TabLayout与ViewPager绑定在一起
mTabLayout = (TabLayout) findViewById(R.id.bottom_tab_layout);
mTabLayout.setupWithViewPager(mViewPager);
//指定Tab的位置
one = mTabLayout.getTabAt(0);
two = mTabLayout.getTabAt(1);
three = mTabLayout.getTabAt(2);
four = mTabLayout.getTabAt(3);
//设置Tab的图标,假如不需要则把下面的代码删去
one.setIcon(mTabResPressed[0]);
two.setIcon(mTabRes[1]);
three.setIcon(mTabRes[2]);
four.setIcon(mTabRes[3]);
mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//改变Tab 状态
for (int i = 0; i < mTabLayout.getTabCount(); i++) {
if (i == tab.getPosition()) {
mTabLayout.getTabAt(i).setIcon(getResources().getDrawable(mTabResPressed[i]));
} else {
mTabLayout.getTabAt(i).setIcon(getResources().getDrawable(mTabRes[i]));
}
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
}
其中涉及的图片需要自己导入。