欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-08-20 17:07:33
在上一篇中,简单的使用透明主题的activity实现了仿微信右侧顶部的对话框,上午又花了两个小时研究了一下淘宝底部的导航栏实现,网上的做法也有很多,今天我就使用一种通过基本...

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

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

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

绘制主界面

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实现的

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