android自带的有TabHost,但好像无法满足要求,

本文只记录使用 TabLayout + Fragment  和 android 自带的 BottomNavigationView + Fragment 来实现

由于测试的时候使用的是一个工程,所以看起来可能有点乱,但是里面的工程目录没有变化,变化的只是代码部分

需要新建的部分如下:

新建一个工程,如果是在做项目,不要在原项目中进行操作,以免损坏原项目,

通用部分,Fragment部分,(xml和对应的java代码),Androidstudio中会自带代码,不需要改动里面的代码

添加对应的包依赖

menu是 BottomNavigationView + Fragment需要的,如果工程中不使用自带的新建的话,可以不需要建立这一部分,

接下来先介绍 TabLayout + Fragment :

主页面的布局代码,

 1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 xmlns:app="http://schemas.android.com/apk/res-auto"
4 android:orientation="vertical"
5 android:layout_width="match_parent"
6 android:layout_height="match_parent">
7
8 <FrameLayout
9 android:id="@+id/home_container"
10 android:layout_width="match_parent"
11 android:layout_height="0dp"
12 android:layout_weight="1"
13 >
14 </FrameLayout>
15
16 <View android:layout_width="match_parent"
17 android:layout_height="0.5dp"
18 android:alpha="0.6"
19 android:background="@android:color/darker_gray"
20 />
21 <android.support.design.widget.TabLayout
22 android:id="@+id/bottom_tab_layout"
23 android:layout_width="match_parent"
24 app:tabIndicatorHeight="0dp"
25 app:tabSelectedTextColor="@android:color/black"
26 app:tabTextColor="@android:color/darker_gray"
27 android:layout_height="48dp">
28 <!--app:menu="@menu/tab_menu" 如果需要使用 BottomNavigationView + Fragment 布局的话取消注释,更改id即可-->
29
30 </android.support.design.widget.TabLayout>
31
32 </LinearLayout>
 3 import android.content.Context;
4 import android.support.v4.app.Fragment;
5 import android.view.LayoutInflater;
6 import android.view.View;
7 import android.widget.ImageView;
8 import android.widget.TextView;
9
10 import com.example.tabhostcostom.AttentionFragment;
11 import com.example.tabhostcostom.DiscoveryFragment;
12 import com.example.tabhostcostom.HomeFragment;
13 import com.example.tabhostcostom.ProfileFragment;
14 import com.example.tabhostcostom.R;
15
16 public class DataGenerator {
17
18 public static final int []mTabRes = new int[]{R.mipmap.index_blue_icon, R.mipmap.index_message, R.mipmap.index_publish, R.mipmap.index_ying, R.mipmap.index_me};
19 //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};
20 public static final String []mTabTitle = new String[]{"首页","发现","", "关注","我的"};
21
22 public static Fragment[] getFragments(String from){
23 Fragment fragments[] = new Fragment[4];
24 fragments[0] = HomeFragment.newInstance(from, "a");
25 fragments[1] = DiscoveryFragment.newInstance(from, "b");
26 fragments[2] = AttentionFragment.newInstance(from, "c");
27 fragments[3] = ProfileFragment.newInstance(from, "d");
28 return fragments;
29 }
30
31 /**
32 * 获取Tab 显示的内容
33 * @param context
34 * @param position
35 * @return
36 */
37 public static View getTabView(Context context, int position){
38 View view = LayoutInflater.from(context).inflate(R.layout.home_tab_content,null);
39 ImageView tabIcon = view.findViewById(R.id.tab_content_image);
40 tabIcon.setImageResource(DataGenerator.mTabRes[position]);
41 TextView tabText = view.findViewById(R.id.tab_content_text);
42 tabText.setText(mTabTitle[position]);
43 return view;
44 }
45 }

以上是一个工具类将所有的数据全部封装在一块,

我也没搞明白为什么需要传两个参数,应该是可以改的吧,自己没有尝试,随便传一个字符串即可,

主函数中也就是主页面的代码

  1 import android.net.Uri;
2 import android.support.annotation.Nullable;
3 import android.support.design.widget.BottomNavigationView;
4 import android.support.annotation.NonNull;
5 import android.support.design.widget.TabLayout;
6 import android.support.v4.app.Fragment;
7 import android.support.v7.app.AppCompatActivity;
8 import android.os.Bundle;
9 import android.view.MenuItem;
10 import android.view.View;
11 import android.widget.ImageView;
12 import android.widget.TextView;
13 import android.widget.Toast;
14
15 import com.example.tabhostcostom.Utils.DataGenerator;
16
17 public class MainActivity extends AppCompatActivity implements HomeFragment.OnFragmentInteractionListener, DiscoveryFragment.OnFragmentInteractionListener ,
18 AttentionFragment.OnFragmentInteractionListener, ProfileFragment.OnFragmentInteractionListener
19 {
20
21 private BottomNavigationView mBottomNavigationView;
22 //private Fragment []mFragments;
23 private TabLayout mTabLayout;
24 private Fragment []mFragmensts;
25
26 @Override
27 protected void onCreate(@Nullable Bundle savedInstanceState) {
28 super.onCreate(savedInstanceState);
29 setContentView(R.layout.activity_main);
30
31 mFragmensts = DataGenerator.getFragments("TabLayout Tab");
32
33 initView();
34 }
35
36 private void initView() {
37 mTabLayout = findViewById(R.id.bottom_tab_layout);
38
39 mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
40 @Override
41 public void onTabSelected(TabLayout.Tab tab) {
42 onTabItemSelected(tab.getPosition());
43 // Tab 选中之后,改变各个Tab的状态,如果点击下面的导航栏,需要改变颜色的话取消注释,同时取消掉工具类中的注释即可
44 /*
45 for (int i=0;i<mTabLayout.getTabCount();i++){
46 View view = mTabLayout.getTabAt(i).getCustomView();
47 ImageView icon = (ImageView) view.findViewById(R.id.tab_content_image);
48 TextView text = (TextView) view.findViewById(R.id.tab_content_text);
49
50 if(i == tab.getPosition()){ // 选中状态
51 icon.setImageResource(DataGenerator.mTabResPressed[i]);
52 text.setTextColor(getResources().getColor(android.R.color.black));
53 }else{// 未选中状态
54 icon.setImageResource(DataGenerator.mTabRes[i]);
55 text.setTextColor(getResources().getColor(android.R.color.darker_gray));
56 }
57 }*/
58
59
60 }
61
62 @Override
63 public void onTabUnselected(TabLayout.Tab tab) {
64
65 }
66
67 @Override
68 public void onTabReselected(TabLayout.Tab tab) {
69
70 }
71 });
72
73 for(int i=0;i<5;i++){
74 mTabLayout.addTab(mTabLayout.newTab().setCustomView(DataGenerator.getTabView(this,i)));
75 }
76
77 }
78
79 private void onTabItemSelected(int position){
80 Fragment fragment = null;
81 switch (position){
82 case 0:
83 fragment = mFragmensts[0];
84 break;
85 case 1:
86 fragment = mFragmensts[1];
87 break;
88 case 2:
89 fragment = mFragmensts[2];
90 break;
91 case 3:
92 fragment = mFragmensts[3];
93 break;
94 case 4:
95 fragment = mFragmensts[3];
96 break;
97 }
98 if(fragment!=null) {
99 getSupportFragmentManager().beginTransaction().replace(R.id.home_container,fragment).commit();
100 }
101 }
102
103 @Override
104 public void onFragmentInteraction(Uri uri) {
105 Toast.makeText(this, "hello", Toast.LENGTH_SHORT).show();
106 }
107 }

这是 TabLayout + Fragment 全部代码

下面介绍 BottomNavigationView + Fragment 实现,带有动画效果,点击的那个会自动将其他的挤出去,所以建议使用上面的布局方式,当然,需要动画效果的布局也可以

需要 menu 菜单

 1 <?xml version="1.0" encoding="utf-8"?>
2 <menu xmlns:android="http://schemas.android.com/apk/res/android">
3 <item
4 android:id="@+id/tab_menu_home"
5 android:icon="@mipmap/index_blue_icon"
6 android:title="首页"
7 />
8 <item
9 android:id="@+id/tab_menu_discovery"
10 android:icon="@mipmap/index_message"
11 android:title="发现"
12 />
13 <item
14 android:id="@+id/tab_menu_attention1"
15 android:icon="@mipmap/index_publish"
16 android:title=""
17 />
18 <item
19 android:id="@+id/tab_menu_profile"
20 android:icon="@mipmap/index_ying"
21 android:title="Ying"
22 />
23 <item
24 android:id="@+id/tab_menu_attention"
25 android:icon="@mipmap/index_me"
26 android:title="我"
27 />
28
29 </menu>

主函数中代码:

package com.example.tabhostcostom;

import android.net.Uri;
import android.support.annotation.Nullable;
import android.support.design.widget.BottomNavigationView;
import android.support.annotation.NonNull;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast; import com.example.tabhostcostom.Utils.DataGenerator; public class MainActivity extends AppCompatActivity implements HomeFragment.OnFragmentInteractionListener, DiscoveryFragment.OnFragmentInteractionListener ,
AttentionFragment.OnFragmentInteractionListener, ProfileFragment.OnFragmentInteractionListener
{ private BottomNavigationView mBottomNavigationView;
private Fragment []mFragments;
private TabLayout mTabLayout;
private Fragment []mFragmensts; @Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); mFragments = DataGenerator.getFragments("TabLayout Tab"); initView();
} private void initView() {
mBottomNavigationView = findViewById(R.id.bottom_navigation_view);
//mBottomNavigationView.getMaxItemCount() mBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
onTabItemSelected(item.getItemId());
return true;
}
}); // 由于第一次进来没有回调onNavigationItemSelected,因此需要手动调用一下切换状态的方法
onTabItemSelected(R.id.tab_menu_home);
} private void onTabItemSelected(int id){
Fragment fragment = null;
switch (id){
case R.id.tab_menu_home:
fragment = mFragments[0];
break;
case R.id.tab_menu_discovery:
fragment = mFragments[1];
break; case R.id.tab_menu_attention:
fragment = mFragments[2];
break;
case R.id.tab_menu_profile:
fragment = mFragments[3];
break;
}
if(fragment!=null) {
getSupportFragmentManager().beginTransaction().replace(R.id.home_container,fragment).commit();
}
} @Override
public void onFragmentInteraction(Uri uri) {
Toast.makeText(this, "hello", Toast.LENGTH_SHORT).show();
}
}

大致就这么多,因为是将两个布局杂糅在一块,如果有问题可以在博客后面进行留言,

android底部导航栏小结的更多相关文章

  1. Android底部导航栏——FrameLayout + RadioGroup

    原创文章,转载请注明出处http://www.cnblogs.com/baipengzhan/p/6285881.html Android底部导航栏有多种实现方式,本文详细介绍FrameLayout ...

  2. Android底部导航栏创建——ViewPager + RadioGroup

    原创文章,引用请注明出处:http://www.cnblogs.com/baipengzhan/p/6270201.html Android底部导航栏有多种实现方式,本文详解其中的ViewPager ...

  3. Android底部导航栏

    Android底部导航栏 今天简单写了一个底部导航栏,封装了一个库,用法比较简单 效果图 Github地址:https://github.com/kongqw/KqwBottomNavigation ...

  4. Android底部导航栏(可滑动)----TabLayout+viewPager

    [TabLayout] ①TabLayout是选项卡,在屏幕空间有限的情况下,对不同的空间进行分组.属于android support design,更多的用于新闻上,如果放在底部也可做底部导航栏 ② ...

  5. Android 底部导航栏实现一 Fragment-replace

    [效果](这里下载的软件收费的试用有水印) [推荐]这里推荐一个图标网http://iconfont.cn/.以上图标来自此图标网 [项目结构] [步骤] ①创建布局文件,写底部导航栏 <?xm ...

  6. android底部导航栏实现

    第一种用radiobutton实现 https://wizardforcel.gitbooks.io/w3school-android/content/75.html 布局文件,使用radiogrou ...

  7. Android 底部导航栏的xml

    <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q ...

  8. Android 五种方式实现Android底部导航栏

    https://segmentfault.com/a/1190000007697941

  9. Android应用底部导航栏(选项卡)实例

    现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其 ...

随机推荐

  1. K8S(14)监控实战-grafana出图_alert告警

    k8s监控实战-grafana出图_alert告警 目录 k8s监控实战-grafana出图_alert告警 1 使用炫酷的grafana出图 1.1 部署grafana 1.1.1 准备镜像 1.1 ...

  2. K8S(09)交付实战-通过流水线构建dubbo服务

    k8s交付实战-流水线构建dubbo服务 目录 k8s交付实战-流水线构建dubbo服务 1 jenkins流水线准备工作 1.1 参数构建要点 1.2 创建流水线 1.2.1 创建流水线 1.2.2 ...

  3. Gitlab日常维护(三)之Gitlab的备份、迁移、升级

    一.Gitlab的备份 使用Gitlab一键安装包安装Gitlab非常简单, 同样的备份恢复与迁移也非常简单. 使用一条命令即可创建完整的Gitlab备份 [root@gitlab ~]# gitla ...

  4. PicGo:搭建图床

    PicGo:搭建图床 PicGo 免费搭建个人图床工具PicGo: 支持Windows.MacOS 和 Linux 软件目前覆盖的图床有8个平台: SM.MS图床.腾讯云COS.GitHub图床.七牛 ...

  5. Apple iOS 触控按钮 自动关闭 bug

    Apple iOS 触控按钮 自动关闭 bug bug 轻点 iPhone 背面可执行操作 您可以轻点两下或轻点三下 iPhone 背面以执行某些操作,如向上或向下滚动.截屏.打开"控制中心 ...

  6. js bitwise operation all in one

    js bitwise operation all in one 位运算 & 按位与 | 按位或 ^ 按位异或 / XOR let a = 5; // 000000000000000000000 ...

  7. React In Depth

    React In Depth React Component Lifecycle https://reactjs.org/docs/react-component.html https://react ...

  8. Redis 博文索引

    博文索引 Redis 对象与编码 Redis 持久化 Redis 主从复制 Redis 哨兵 Redis 缓存淘汰 Redis 集合统计 Redis 简介

  9. django学习-27.admin管理后台里:对列表展示页面的数据展示进行相关优化

    目录结构 1.前言 2.完整的操作步骤 2.1.第一步:查看ModelAdmin类和BaseModelAdmin类的源码 2.2.第二步:查看表animal对应的列表展示页面默认的数据展示 2.3.第 ...

  10. 关于PCA主成分分析的一点理解

    PCA 即主成分分析技术,旨在利用降维的思想,把多指标转化为少数几个综合指标. 假设目前我们的数据特征为3,即数据维度为三,现在我们想将数据降维为二维,一维: 我们之前的数据其实就是三维空间中的一个个 ...