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

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

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

绘制主界面

activity_layout.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitssystemwindows="true"
  android:orientation="vertical"
  tools:context=".mainactivity">
 
  <framelayout
    android:id="@+id/fragment_container"
    android:layout_marginbottom="50dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
  </framelayout>
 
  <linearlayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_alignparentbottom="true"
    android:background="@color/nocheckedcolor">
 
    <relativelayout
      android:gravity="center"
      android:layout_width="wrap_content"
      android:layout_height="match_parent">
    <imageview
      android:layout_margintop="5dp"
      android:id="@+id/title_image"
      android:layout_marginleft="18dp"
      android:layout_width="40dp"
      android:layout_height="40dp"
      android:background="@drawable/taobao" />
 
      <linearlayout
        android:gravity="center"
        android:orientation="vertical"
        android:id="@+id/first_page_layout"
        android:layout_width="60dp"
        android:layout_height="wrap_content">
      <imageview
        android:id="@+id/first_page_icon"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/firstpage" />
 
      <textview
        android:textcolor="#000000"
        android:id="@+id/first_page_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="首页" />
      </linearlayout>
 
    </relativelayout>
 
      <linearlayout
        android:layout_marginleft="26dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightsum="4">
 
        <linearlayout
          android:id="@+id/micro_tao_layout"
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:gravity="center"
          android:orientation="vertical">
 
          <imageview
            android:id="@+id/microtao_icon"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@drawable/microtao" />
 
          <textview
            android:textcolor="#000000"
            android:id="@+id/microtao_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="微淘" />
        </linearlayout>
 
        <linearlayout
          android:id="@+id/message_layout"
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:gravity="center"
          android:orientation="vertical">
 
          <imageview
            android:id="@+id/message_icon"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@drawable/message" />
 
          <textview
            android:textcolor="#000000"
            android:id="@+id/message_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="消息" />
        </linearlayout>
 
 
        <linearlayout
          android:id="@+id/buycar_layout"
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:gravity="center"
          android:orientation="vertical">
 
          <imageview
            android:id="@+id/buycar_icon"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@drawable/buycar" />
 
          <textview
            android:textcolor="#000000"
            android:id="@+id/buycar_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="购物车" />
        </linearlayout>
 
        <linearlayout
          android:id="@+id/myfile_layout"
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:gravity="center"
          android:orientation="vertical">
 
          <imageview
            android:id="@+id/myfile_icon"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@drawable/myfile" />
 
          <textview
            android:textcolor="#000000"
            android:id="@+id/myfile_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="我的淘宝" />
        </linearlayout>
      </linearlayout>
    </linearlayout>
</relativelayout>

界面的逻辑控制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;
 
/**
 * @author why
 * @date 2018-10-3 11:12:39
 */
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代码：

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:gravity="center"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
 
  <textview
    android:gravity="center"
    android:id="@+id/tip_message"
    android:textsize="30sp"
    android:text="首页"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
 
</linearlayout>

自定义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;
 
/**
 * author:why
 * created on: 2018/10/3 12:11
 * description:
 */
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实现的
  

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