Android实现淘宝底部图标导航栏
程序员文章站
2022-08-20 17:07:33
在上一篇中,简单的使用透明主题的activity实现了仿微信右侧顶部的对话框,上午又花了两个小时研究了一下淘宝底部的导航栏实现,网上的做法也有很多,今天我就使用一种通过基本...
在上一篇中,简单的使用透明主题的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实现的
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 【如何缓解晕动症】旅途中怎么缓解晕动症