super.onCreate(savedInstanceState);
setContentView(R.layout.bottom_navigation_view_ac);
mFragments = DataGenerator.getFragments(“BottomNavigationView Tab”);
initView();
}
private void initView() {
mBottomNavigationView = (BottomNavigationView) 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();
}
}
}
代码比TabLayout 还简单,不用添加tab ,直接在xml 文件中设置menu属性就好了。效果如下:
效果如上,切换的时候会有动画,效果还是不错的,除此之外,每个tab还可以对应不同的背景色,有兴趣的可以去试一下。但是有一点值得吐槽,动画好像还不能禁止,要是设计成可以禁止动画和使用切换动画这两种模式,随意切换就好了。
总结:BottomNavigationView 实现底部导航栏符合Material风格,有炫酷的切换动画,且动画还不能禁止,如果App 需要这种风格的底部导航栏的,可以用这个,实现起来比较简单。但是需要注意:BottomNavigatonView 的tab 只能是3-5个,多了或者少了是会报错。还有一点,第一次进入页面的时候不会调用onNavigationItemSelected 方法(不知道是不是 哪儿没有设置对?如果有同学发现可以,评论区告诉我一下),因此第一次需要手动调用 添加fragment的方法。
3 . FragmentTabHost + Fragment
FragmentTab Host 可能是大家实现底部导航栏用得最多的一种方式,特别是在TabLayout 和 BottomNavigation 出来之前,是比较老牌的实现底部导航栏的方式,相比前两个,FragmentTabHost 的实现稍微复杂一点,具体请看代码,
<?xml version="1.0" encoding="utf-8"?><FrameLayout
android:id=“@+id/home_container”
android:layout_width=“match_parent”
android:layout_height=“0dp”
android:layout_weight=“1”
<android.support.v4.app.FragmentTabHost
android:id=“@android:id/tabhost”
android:layout_width=“match_parent”
android:layout_marginTop=“3dp”
android:layout_height=“50dp”>
<FrameLayout
android:id=“@android:id/tabcontent”
android:layout_width=“0dp”
android:layout_height=“0dp”
布局文件需要注意的地方:1,FragmentTabHost 里需要有一个id为@android:id/tabcontent的布局。2,FragmentTabHost的id 也是系统提供的id ,不能随便起。
Activity 代码如下:
public class FragmentTabHostActivity extends AppCompatActivity implements TabHost.OnTabChangeListener{
private Fragment []mFragments;
private FragmentTabHost mTabHost;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.fragment_tab_host_ac_layout);
mFragments = DataGenerator.getFragments(“FragmentTabHost Tab”);
initView();
}
private void initView(){
mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
// 关联TabHost
mTabHost.setup(this,getSupportFragmentManager(),R.id.home_container);
//注意,监听要设置在添加Tab之前
mTabHost.setOnTabChangedListener(this);
//添加Tab
for (int i=0;i<4;i++){
//生成TabSpec
TabHost.TabSpec tabSpec = mTabHost.newTabSpec(mTabTitle[i]).setIndicator(DataGenerator.getTabView(this,i));
// 添加Tab 到TabHost,并绑定Fragment
Bundle bundle = new Bundle();
bundle.putString(“from”,“FragmentTabHost Tab”);
mTabHost.addTab(tabSpec,mFragments[i].getClass(),bundle);
}
//去掉Tab 之间的分割线
mTabHost.getTabWidget().setDividerDrawable(null);
//
mTabHost.setCurrentTab(0);
}
@Override
public void onTabChanged(String tabId) {
updateTabState();
}
/**
- 更新Tab 的状态
*/
private void updateTabState(){
TabWidget tabWidget = mTabHost.getTabWidget();
for (int i=0;i<tabWidget.getTabCount();i++){
View view = tabWidget.getChildTabViewAt(i);
ImageView tabIcon = (ImageView) view.findViewById(R.id.tab_content_image);
TextView tabText = (TextView) view.findViewById(R.id.tab_content_text);
if(i == mTabHost.getCurrentTab()){
tabIcon.setImageResource(DataGenerator.mTabResPressed[i]);
tabText.setTextColor(getResources().getColor(android.R.color.black));
}else{
tabIcon.setImageResource(mTabRes[i]);
tabText.setTextColor(getResources().getColor(android.R.color.darker_gray));
}
}
}
}
FragmentTabHost 的实现就比前两个稍微复杂点。首先要通过setup()
方法建立FragmentTabHost 与Fragment container的关联。然后设置Tab切换监听,添加Tab。需要主要一点,FragmentTabHost 默认在每个Tab之间有一跟竖直的分割先,调用下面这行代码去掉分割线:
//去掉Tab 之间的分割线
mTabHost.getTabWidget().setDividerDrawable(null);
在onTabChanged
回调中需要手动设置每个Tab切换的状态。从
TabWidget 中取出每个子View 来设置选中和未选中的状态(跟前面的TabLayout 通过自定义布局添加Tab是一样的)。
效果如下:
注意:有2点需要注意,1,通过FragmentTabHost添加的Fragment 里面收不到通过 setArgment() 传递的参数,要传递参数,需要在添加Tab 的时候通过Bundle 来传参,代码如下:
// 添加Tab 到TabHost,并绑定Fragment
Bundle bundle = new Bundle();
bundle.putString(“from”,“FragmentTabHost Tab”);
2,同前面说的TabLayout一样,要在添加Tab之前设置OnTabChangeListener 监听器,否则第一次收不到onTabChange回调。
总结:FragmentTabHost 实现底部导航栏比前面两种方式稍微复杂一点,需要注意的地方有点多,不然容易踩坑,但是它的稳定性和兼容性很好,在Android 4.x 时代就大量使用了。能配合Viewpager使用。
4 . RadioGroup + RadioButton + Fragment
RadioGroup +RadioButtom 是做单选的,RadioGroup 里面的View 只能选中一个。想一下我们要做的底部导航栏,是不是就是一个单选模式呢?当然是,每次只能选中一个页面嘛,因此用RadioGroup + RadioButton 来实现底部导航栏也是一种方式。
RadioButton 有默认的选中与非选中的样式,默认颜色是colorAcent,效果是这样的:
因此我们要用RadioGroup+RadioButton 实现底部导航栏,首先,就是去掉它的默认样式,因此,我们来自定义一个style:
style 里面定义了RadioButton 的属性,现在我们直接给RadioButton 设置style 就好了,看先页面的布局文件:
<?xml version="1.0" encoding="utf-8"?><FrameLayout
android:id=“@+id/home_container”
android:layout_width=“match_parent”
android:layout_height=“0dp”
android:layout_weight=“1”
<RadioGroup
android:id=“@+id/radio_group_button”
android:layout_width=“match_parent”
android:layout_height=“50dp”
android:orientation=“horizontal”
android:gravity=“center”
android:background=“@android:color/white”
很简单,添加一个RadioGroup 和 四个 RadioButton ,因为去掉了原来的样式,因此要设置我们每个RadioButton 显示的图标。
布局文件定义好了之后,看一下Activity 中的代码:
public class RadioGroupTabActivity extends AppCompatActivity {
private RadioGroup mRadioGroup;
private Fragment []mFragments;
private RadioButton mRadioButtonHome;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.radiogroup_tab_layout);
mFragments = DataGenerator.getFragments(“RadioGroup Tab”);
initView();
}
private void initView() {
mRadioGroup = (RadioGroup) findViewById(R.id.radio_group_button);
mRadioButtonHome = (RadioButton) findViewById(R.id.radio_button_home);
mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
Fragment mFragment = null;
@Override
public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {
switch (checkedId){
case R.id.radio_button_home:
mFragment = mFragments[0];
break;
case R.id.radio_button_discovery:
mFragment = mFragments[1];
break;
case R.id.radio_button_attention:
mFragment = mFragments[2];
break;
case R.id.radio_button_profile:
mFragment = mFragments[3];
break;
}
if(mFragments!=null){
getSupportFragmentManager().beginTransaction().replace(R.id.home_container,mFragment).commit();
}
}
});
// 保证第一次会回调OnCheckedChangeListener
mRadioButtonHome.setChecked(true);
}
}
Activity 的代码就很简单了,在onCheckedChanged
回调里面切换Fragment 就行了。这种方式的Activity 代码是最简洁的,因为RadioButton 有check 和 unCheck 状态,直接用seletor 就能换状态的图标和check 文字的颜色,不用手动来设置状态。
效果如下,一步到位:
总结:RadioGroup + RadioButton 实现底部导航栏步骤有点多,需要配置style 文件,各个Tab 的 drawable selector 文件,color 文件,但是,配置完了这些之后,代码是最简洁的。这也是有好处的,以后要换什么图标啊,颜色,只需要改xml 文件就好,是不需要改代码逻辑的,因此这样方式来实现底部导航栏是个不错的选择。
5 . 自定义 CustomTabView + Fragment
除了上面的几种方式之外,还有一种方式来实现底部导航栏,那就是我们通过自定义View来实现,自定义View的好处是我们可以按照我们想要的高度定制,缺点是:比起这些现有的控件还是有点麻烦。下面就通过自定义一个CustomTabView 为例子,来实现一个底部导航栏。
CustomTabView 代码下:
public class CustomTabView extends LinearLayout implements View.OnClickListener{
private List mTabViews;//保存TabView
private List mTabs;// 保存Tab
private OnTabCheckListener mOnTabCheckListener;
public void setOnTabCheckListener(OnTabCheckListener onTabCheckListener) {
mOnTabCheckListener = onTabCheckListener;
}
public CustomTabView(Context context) {
super(context);
init();
}
public CustomTabView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public CustomTabView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public CustomTabView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
private void init(){
setOrientation(HORIZONTAL);
setGravity(Gravity.CENTER);
mTabViews = new ArrayList<>();
mTabs = new ArrayList<>();
}
/**
- 添加Tab
- @param tab
*/
public void addTab(Tab tab){
View view = LayoutInflater.from(getContext()).inflate(R.layout.custom_tab_item_layout,null);
TextView textView = (TextView) view.findViewById(R.id.custom_tab_text);
ImageView imageView = (ImageView) view.findViewById(R.id.custom_tab_icon);
imageView.setImageResource(tab.mIconNormalResId);
textView.setText(tab.mText);
textView.setTextColor(tab.mNormalColor);
view.setTag(mTabViews.size());
view.setOnClickListener(this);
mTabViews.add(view);
mTabs.add(tab);
addView(view);
}
/**
- 设置选中Tab
- @param position
*/
public void setCurrentItem(int position){
if(position>=mTabs.size() || position<0){
position = 0;
}
mTabViews.get(position).performClick();
updateState(position);
}
/**
- 更新状态
- @param position
*/
private void updateState(int position){
for(int i= 0;i<mTabViews.size();i++){
View view = mTabViews.get(i);
TextView textView = (TextView) view.findViewById(R.id.custom_tab_text);
ImageView imageView = (ImageView) view.findViewById(R.id.custom_tab_icon);
if(i == position){
imageView.setImageResource(mTabs.get(i).mIconPressedResId);
textView.setTextColor(mTabs.get(i).mSelectColor);
}else{
imageView.setImageResource(mTabs.get(i).mIconNormalResId);
textView.setTextColor(mTabs.get(i).mNormalColor);
}
}
}
@Override
public void onClick(View v) {
int position = (int) v.getTag();
if(mOnTabCheckListener!=null){
mOnTabCheckListener.onTabSelected(v, position);
}
updateState(position);
}
public interface OnTabCheckListener{
public void onTabSelected(View v,int position);
}
public static class Tab{
private int mIconNormalResId;
private int mIconPressedResId;
private int mNormalColor;
private int mSelectColor;
private String mText;
public Tab setText(String text){
mText = text;
return this;
}
public Tab setNormalIcon(int res){
mIconNormalResId = res;
return this;
}
public Tab setPressedIcon(int res){
mIconPressedResId = res;
return this;
}
public Tab setColor(int color){
mNormalColor = color;
return this;
}
public Tab setCheckedColor(int color){
mSelectColor = color;
return this;
}
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
if(mTabViews!=null){
mTabViews.clear();
}
if(mTabs!=null){
mTabs.clear();
}
}
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
// 调整每个Tab的大小
for(int i=0;i<mTabViews.size();i++){
View view = mTabViews.get(i);
int width = getResources().getDisplayMetrics().widthPixels / (mTabs.size());
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(width, ViewGroup.LayoutParams.MATCH_PARENT);
view.setLayoutParams(params);
}
}
}
还是比较简单,继承LinearLayout,有一个Tab 类来保存每个tab 的数据,比如图标,颜色,文字等等,有注释,就不一一解释了。
布局文件差不多,其他控件换成CustomTabView 就行,看一下Activity中的代码:
public class CustomTabActivity extends AppCompatActivity implements CustomTabView.OnTabCheckListener{
private CustomTabView mCustomTabView;
private Fragment []mFragmensts;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.custom_tab_ac_layout);
mFragmensts = DataGenerator.getFragments(“CustomTabView Tab”);
initView();
}
private void initView() {
mCustomTabView = (CustomTabView) findViewById(R.id.custom_tab_container);
CustomTabView.Tab tabHome = new CustomTabView.Tab().setText(“首页”)
.setColor(getResources().getColor(android.R.color.darker_gray))
.setCheckedColor(getResources().getColor(android.R.color.black))
.setNormalIcon(R.drawable.ic_tab_strip_icon_feed)
.setPressedIcon(R.drawable.ic_tab_strip_icon_feed_selected);
mCustomTabView.addTab(tabHome);
CustomTabView.Tab tabDis = new CustomTabView.Tab().setText(“发现”)
.setColor(getResources().getColor(android.R.color.darker_gray))
.setCheckedColor(getResources().getColor(android.R.color.black))
.setNormalIcon(R.drawable.ic_tab_strip_icon_category)
.setPressedIcon(R.drawable.ic_tab_strip_icon_category_selected);
mCustomTabView.addTab(tabDis);
CustomTabView.Tab tabAttention = new CustomTabView.Tab().setText(“管制”)
.setColor(getResources().getColor(android.R.color.darker_gray))
.setCheckedColor(getResources().getColor(android.R.color.black))
.setNormalIcon(R.drawable.ic_tab_strip_icon_pgc)
.setPressedIcon(R.drawable.ic_tab_strip_icon_pgc_selected);
mCustomTabView.addTab(tabAttention);
CustomTabView.Tab tabProfile = new CustomTabView.Tab().setText(“我的”)
.setColor(getResources().getColor(android.R.color.darker_gray))
.setCheckedColor(getResources().getColor(android.R.color.black))
.setNormalIcon(R.drawable.ic_tab_strip_icon_profile)
.setPressedIcon(R.drawable.ic_tab_strip_icon_profile_selected);
mCustomTabView.addTab(tabProfile);
//设置监听
mCustomTabView.setOnTabCheckListener(this);
// 默认选中tab
文末
很多人在刚接触这个行业的时候或者是在遇到瓶颈期的时候,总会遇到一些问题,比如学了一段时间感觉没有方向感,不知道该从那里入手去学习,对此我整理了一些资料,需要的可以免费分享给大家
这里笔者分享一份自己收录整理上述技术体系图相关的几十套腾讯、头条、阿里、美团等公司2021年的面试题,把技术点整理成了视频和PDF(实际上比预期多花了不少精力),包含知识脉络 + 诸多细节,由于篇幅有限,这里以图片的形式给大家展示一部分。
【视频教程】
天道酬勤,只要你想,大厂offer并不是遥不可及!希望本篇文章能为你带来帮助,如果有问题,请在评论区留言。
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
,对此我整理了一些资料,需要的可以免费分享给大家
这里笔者分享一份自己收录整理上述技术体系图相关的几十套腾讯、头条、阿里、美团等公司2021年的面试题,把技术点整理成了视频和PDF(实际上比预期多花了不少精力),包含知识脉络 + 诸多细节,由于篇幅有限,这里以图片的形式给大家展示一部分。
[外链图片转存中…(img-4MzesZqp-1714344721030)]
[外链图片转存中…(img-FGpnpss4-1714344721030)]
【视频教程】
[外链图片转存中…(img-HzKPozRw-1714344721031)]
天道酬勤,只要你想,大厂offer并不是遥不可及!希望本篇文章能为你带来帮助,如果有问题,请在评论区留言。
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!