Android实现淘宝底部图标导航栏

在上一篇中，简单的使用透明主题的Activity实现了仿微信右侧顶部的对话框，上午又花了两个小时研究了一下淘宝底部的导航栏实现，网上的做法也有很多，今天我就使用一种通过基本控件加上布局的方式，没有任何的自定义风格，控件等来实现，还是老样子，先看一下效果图：

下面就来具体看一看如何实现的，还是按照步骤来吧：

绘制主界面

activity_layout.xml代码如下：

界面的逻辑控制Activity:

MainActivity.java代码：

package com.hfut.enmulatetaobaonavbar;
 
import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
 
import com.hfut.enmulatetaobaonavbar.fragment.BuycarFragment;
import com.hfut.enmulatetaobaonavbar.fragment.FirstPageFragment;
import com.hfut.enmulatetaobaonavbar.fragment.MessageFragment;
import com.hfut.enmulatetaobaonavbar.fragment.MicroTaoFragment;
import com.hfut.enmulatetaobaonavbar.fragment.MyfileFragment;
 

public class MainActivity extends AppCompatActivity implements View.onClickListener {
 
  LinearLayout microTaoLay;
  LinearLayout messageLay;
  LinearLayout buycarLay;
  LinearLayout myfileLay;
  LinearLayout firstPageLay;
 
  ImageView microTaoIcon;
  ImageView messageIcon;
  ImageView buycarIcon;
  ImageView myfileIcon;
  ImageView firstPageIcon;
  ImageView titleImage;
 
  TextView microTaoText;
  TextView messageText;
  TextView buycarText;
  TextView myfileText;
 
 
  FragmentManager manager;
  FragmentTransaction transaction;
  Fragment firFragment, microFragment, messageFragment, buycarFragment, myfileFragment;
 
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
 
    manager = getSupportFragmentManager();
    transaction = manager.beginTransaction();
    firFragment = new FirstPageFragment();
    transaction.add(R.id.fragment_container, firFragment);
    transaction.commit();
    initUI();
  }
 
  private void initUI() {
    microTaoLay = findViewById(R.id.micro_tao_layout);
    messageLay = findViewById(R.id.message_layout);
    buycarLay = findViewById(R.id.buycar_layout);
    myfileLay = findViewById(R.id.myfile_layout);
    firstPageLay = findViewById(R.id.first_page_layout);
    firstPageLay.setVisibility(View.INVISIBLE);
 
    microTaoIcon = findViewById(R.id.microtao_icon);
    messageIcon = findViewById(R.id.message_icon);
    buycarIcon = findViewById(R.id.buycar_icon);
    myfileIcon = findViewById(R.id.myfile_icon);
    firstPageIcon = findViewById(R.id.first_page_icon);
    titleImage = findViewById(R.id.title_image);
 
    microTaoText = findViewById(R.id.microtao_text);
    messageText = findViewById(R.id.message_text);
    buycarText = findViewById(R.id.buycar_text);
    myfileText = findViewById(R.id.myfile_text);
 
    microTaoLay.setonClickListener(this);
    messageLay.setonClickListener(this);
    buycarLay.setonClickListener(this);
    myfileLay.setonClickListener(this);
    firstPageLay.setonClickListener(this);
 
  }
 
  @Override
  public void onClick(View v) {
    transaction = manager.beginTransaction();
    hideFragment(transaction);//隐藏之前的Fragment
    switch (v.getId()) {
      case R.id.micro_tao_layout:
 microFragment = new MicroTaoFragment();
 transaction.add(R.id.fragment_container, microFragment);
 transaction.commit();
 microTaoIcon.setImageDrawable(getResources().getDrawable(R.drawable.microtao_choosen));
 microTaoText.setTextColor(Color.RED);
 
 //显示首页布局，隐藏标题淘宝图片
 if (firstPageLay.getVisibility() != View.VISIBLE) {
   firstPageLay.setVisibility(View.VISIBLE);
   titleImage.setVisibility(View.INVISIBLE);
 }
 
 break;
      case R.id.message_layout:
 messageFragment = new MessageFragment();
 transaction.add(R.id.fragment_container, messageFragment);
 transaction.commit();
 messageIcon.setImageDrawable(getResources().getDrawable(R.drawable.message_choosen));
 messageText.setTextColor(Color.RED);
 
 //显示首页布局，隐藏标题淘宝图片
 if (firstPageLay.getVisibility() != View.VISIBLE) {
   firstPageLay.setVisibility(View.VISIBLE);
   titleImage.setVisibility(View.INVISIBLE);
 }
 break;
      case R.id.buycar_layout:
 buycarFragment = new BuycarFragment();
 transaction.add(R.id.fragment_container, buycarFragment);
 transaction.commit();
 buycarIcon.setImageDrawable(getResources().getDrawable(R.drawable.buycar_choosen));
 buycarText.setTextColor(Color.RED);
 
 //显示首页布局，隐藏标题淘宝图片
 if (firstPageLay.getVisibility() != View.VISIBLE) {
   firstPageLay.setVisibility(View.VISIBLE);
   titleImage.setVisibility(View.INVISIBLE);
 }
 break;
      case R.id.myfile_layout:
 myfileFragment = new MyfileFragment();
 transaction.add(R.id.fragment_container, myfileFragment);
 transaction.commit();
 myfileIcon.setImageDrawable(getResources().getDrawable(R.drawable.myfile_choosen));
 myfileText.setTextColor(Color.RED);
 
 //显示首页布局，隐藏标题淘宝图片
 if (firstPageLay.getVisibility() != View.VISIBLE) {
   firstPageLay.setVisibility(View.VISIBLE);
   titleImage.setVisibility(View.INVISIBLE);
 }
 break;
 
      case R.id.first_page_layout:
 firFragment = new FirstPageFragment();
 transaction.add(R.id.fragment_container, firFragment);
 transaction.commit();
 firstPageLay.setVisibility(View.INVISIBLE);
 titleImage.setVisibility(View.VISIBLE);
 
      default:
 break;
    }
  }
 
  private void hideFragment(FragmentTransaction transaction) {
    if (firFragment != null) {
      transaction.remove(firFragment);
 
    }
    if (microFragment != null) {
      transaction.remove(microFragment);
      microTaoIcon.setImageDrawable(getResources().getDrawable(R.drawable.microtao));
      microTaoText.setTextColor(Color.BLACK);
 
    }
    if (messageFragment != null) {
      transaction.remove(messageFragment);
      messageIcon.setImageDrawable(getResources().getDrawable(R.drawable.message));
      messageText.setTextColor(Color.BLACK);
    }
    if (buycarFragment != null) {
      transaction.remove(buycarFragment);
      buycarIcon.setImageDrawable(getResources().getDrawable(R.drawable.buycar));
      buycarText.setTextColor(Color.BLACK);
    }
    if (myfileFragment != null) {
      transaction.remove(myfileFragment);
      myfileIcon.setImageDrawable(getResources().getDrawable(R.drawable.myfile));
      myfileText.setTextColor(Color.BLACK);
    }
  }
}

Fragment对应的布局代码（这里为了简化，所有Fragment使用的是同一个很简单的布局）：
fragment_layout.xml代码：

自定义Fragment代码（这里我就给出一个，其他的完全一样，只是修改了Fragment布局中的文本内容）：
FirstPageFragment.java代码：

package com.hfut.enmulatetaobaonavbar.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 android.widget.TextView;
 
import com.hfut.enmulatetaobaonavbar.R;
 

public class FirstPageFragment extends Fragment {
 
  TextView message;
  @Nullable
  @Override
  public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_layout, container, false);
    message=view.findViewById(R.id.tip_message);
    message.setText("这是首页");
    return view;
  }
}

上面就是几个主要的组成部分了，其他的素材就不介绍了，还有就是很多代码可以优化的地方也没有做在太多考虑，下面就来说一说几个需要注意的点：

• Fragment，FragmentManager，FragmentTransaction的配合使用
• 淘宝图标与首页菜单项的切换
• Fragment的包不要使用错了，不是android.app.Fragment
• 填充FramLayout的时候，注意FragmentTransaction里面的内容的添加与删除
• 实现的本质其实就是点击事件与FramLayout配合Fragment实现的
  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。