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"><FrameLayoutandroid:id="@+id/fragment_container"android:layout_marginBottom="50dp"android:layout_width="match_parent"android:layout_height="match_parent"></FrameLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="50dp"android:layout_alignParentBottom="true"android:background="@color/noCheckedColor"><RelativeLayoutandroid:gravity="center"android:layout_width="wrap_content"android:layout_height="match_parent"><ImageViewandroid:layout_marginTop="5dp"android:id="@+id/title_image"android:layout_marginLeft="18dp"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/taobao" /><LinearLayoutandroid:gravity="center"android:orientation="vertical"android:id="@+id/first_page_layout"android:layout_width="60dp"android:layout_height="wrap_content"><ImageViewandroid:id="@+id/first_page_icon"android:layout_width="30dp"android:layout_height="30dp"android:background="@drawable/firstpage" /><TextViewandroid: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><LinearLayoutandroid:layout_marginLeft="26dp"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:weightSum="4"><LinearLayoutandroid:id="@+id/micro_tao_layout"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageViewandroid:id="@+id/microtao_icon"android:layout_width="30dp"android:layout_height="30dp"android:background="@drawable/microtao" /><TextViewandroid:textColor="#000000"android:id="@+id/microtao_text"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="微淘" /></LinearLayout><LinearLayoutandroid:id="@+id/message_layout"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageViewandroid:id="@+id/message_icon"android:layout_width="30dp"android:layout_height="30dp"android:background="@drawable/message" /><TextViewandroid:textColor="#000000"android:id="@+id/message_text"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="消息" /></LinearLayout><LinearLayoutandroid:id="@+id/buycar_layout"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageViewandroid:id="@+id/buycar_icon"android:layout_width="30dp"android:layout_height="30dp"android:background="@drawable/buycar" /><TextViewandroid:textColor="#000000"android:id="@+id/buycar_text"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="购物车" /></LinearLayout><LinearLayoutandroid:id="@+id/myfile_layout"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageViewandroid:id="@+id/myfile_icon"android:layout_width="30dp"android:layout_height="30dp"android:background="@drawable/myfile" /><TextViewandroid: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;@Overrideprotected 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);}@Overridepublic void onClick(View v) {transaction = manager.beginTransaction();hideFragment(transaction);//隐藏之前的Fragmentswitch (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"><TextViewandroid: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@Overridepublic 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实现的

注：欢迎扫码关注

Android仿淘宝底部图标导航栏相关推荐

仿淘宝左侧菜单导航栏纯Html + css 写的
这俩天闲来没事淘宝逛了一圈看到淘宝的左侧导航菜单做的是真心的棒啊,一时兴起,查了点资料抓了几个图片仿淘宝写了个css,时间紧写的不太好,大神勿喷,给小白做个参考废话不多说先来个效果图接下来直接上代 ...
Android仿淘宝首页UI（附代源代码及示例图片）
Android仿淘宝首页UI(附代源代码及示例图片) 可以收获运行出来的效果部分代码源代码可以收获更改Layout中的文字和drawble中的图片即可生成适应于不同情景的APP,帮助开发者完 ...
Android仿淘宝详情页面viewPager滑动到最后一张图片跳转的功能
需要做一个仿淘宝客户端ViewPager滑动到最后一页,再拖动的时候跳到详情的功能,刚开始我也迷糊了,通过查阅相关资料发现有好多种实现方法,下面小编给大家分享实例代码,感兴趣的朋友一起看看吧需要做一 ...
Android仿淘宝、京东Banner滑动查看图文详情
文章目录写在前面效果图原理分析核心代码源码地址写在前面本文基于 ViewPager2 实现的 Banner 效果,进而实现了仿淘宝.京东Banner滑动至最后一页时继续滑动来查看图文详情 ...
jquery特效-基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. ...
一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
Android仿淘宝淘口令实现
先复制信息到剪切板,然后再打开淘宝,.既然是复制,肯定是复制到系统的剪切板了,我们可以通过下边的代码来把口令给复制到系统的剪切板里 1 2 3 4 5 6 //获取剪贴板管理器: ClipboardM ...
仿淘宝网首页导航条效果
< html > < head > < meta http - equiv = " Content-Type " content = " ...
Android仿淘宝tab返回
一.概述淘宝相信大家都在用过,不过不知道各位有没有仔细观察过淘宝的tab界面,尤其是返回的时候的逻辑.最近闲来无事,猛然发现淘宝的tab界面还真的挺好玩,废话不多说, ...

Android仿淘宝底部图标导航栏

Android仿淘宝底部图标导航栏相关推荐

最新文章

热门文章