安卓项目实践——仿淘宝界面(一)——底部导航栏技术（Fragment实现）

1、实现效果展示

2、技术简述

该导航栏主要使用Fragment技术实现，关于Fragment的介绍大家可以自行百度，导航栏只是该技术的一个方面，并不是唯一，当然，可以实现导航栏的技术中，fragment也并不是唯一！

3、布局

万事讲布局
主布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"tools:context=".MainActivity"android:orientation="vertical"><FrameLayoutandroid:id="@+id/tb_fragment"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /><include layout="@layout/bottom" /></LinearLayout>

五个不同的界面用FrameLayout作为容器，底部导航栏我做了一个单独的布局，方便修改和重复利用。
底部导航栏的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/bottom"android:layout_width="match_parent"android:layout_height="85dp"android:background="#D6D7D7"android:baselineAligned="false"android:orientation="horizontal"><LinearLayoutandroid:id="@+id/home"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:orientation="vertical"><ImageButtonandroid:id="@+id/imageButton_home"android:layout_width="55dp"android:layout_height="55dp"android:layout_gravity="center_horizontal"android:clickable="false"android:scaleType="centerCrop"app:srcCompat="@drawable/taobao" /><TextViewandroid:id="@+id/textView_1"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center_horizontal"android:textColor="#000000"android:text="淘宝"android:clickable="false"android:textSize="15sp" /></LinearLayout><LinearLayoutandroid:id="@+id/weiTao"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:orientation="vertical"><ImageButtonandroid:id="@+id/imageButton_weiTao"android:layout_width="55dp"android:layout_height="55dp"android:layout_gravity="center_horizontal"android:clickable="false"android:scaleType="centerCrop"app:srcCompat="@drawable/weitao" /><TextViewandroid:id="@+id/textView_2"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center_horizontal"android:text="微淘"android:textColor="#000000"android:clickable="false"android:textSize="15sp" /></LinearLayout><LinearLayoutandroid:id="@+id/message"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:orientation="vertical"><ImageButtonandroid:id="@+id/imageButton_message"android:layout_width="55dp"android:layout_height="55dp"android:layout_gravity="center_horizontal"android:clickable="false"android:scaleType="centerCrop"app:srcCompat="@drawable/message" /><TextViewandroid:id="@+id/textView_3"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center_horizontal"android:text="消息"android:textColor="#000000"android:clickable="false"android:textSize="15sp" /></LinearLayout><LinearLayoutandroid:id="@+id/shop"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:orientation="vertical"><ImageButtonandroid:id="@+id/imageButton_shop"android:layout_width="55dp"android:layout_height="55dp"android:layout_gravity="center_horizontal"android:clickable="false"android:scaleType="centerCrop"app:srcCompat="@drawable/shop" /><TextViewandroid:id="@+id/textView_4"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center_horizontal"android:text="购物车"android:textColor="#000000"android:clickable="false"android:textSize="15sp" /></LinearLayout><LinearLayoutandroid:id="@+id/me"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:orientation="vertical"><ImageButtonandroid:id="@+id/imageButton_me"android:layout_width="55dp"android:layout_height="55dp"android:layout_gravity="center_horizontal"android:clickable="false"android:scaleType="centerCrop"app:srcCompat="@drawable/me" /><TextViewandroid:id="@+id/textView_5"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center_horizontal"android:text="微信"android:textColor="#000000"android:clickable="false"android:textSize="15sp" /></LinearLayout></LinearLayout>

关于布局倒是没有太多需要讲的，自己要是不想写就直接复制我的把，但是记得把图标换成自己的，我是在阿里巴巴矢量图标库找的。

3、逻辑部分

package com.example.fuliuyang.lytaobao;import android.content.DialogInterface;
import android.graphics.Color;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;import com.example.fuliuyang.lytaobao.Fragment.HomeFragment;
import com.example.fuliuyang.lytaobao.Fragment.MessageFragment;
import com.example.fuliuyang.lytaobao.Fragment.MyFragment;
import com.example.fuliuyang.lytaobao.Fragment.ShopFragment;
import com.example.fuliuyang.lytaobao.Fragment.WeiFragment;public class MainActivity extends AppCompatActivity implements View.OnClickListener {//底部导航栏开始//底部五个Fragmentprivate HomeFragment    homeFragment;private WeiFragment     weiFragment;private MessageFragment messageFragment;private ShopFragment    shopFragment;private MyFragment      myFragment;//底部五个Linearlayoutprivate LinearLayout    ll_home;private LinearLayout    ll_wei;private LinearLayout    ll_message;private LinearLayout    ll_shop;private LinearLayout    ll_my;//底部五个ImageViewprivate ImageView       iv_home;private ImageView       iv_wei;private ImageView       iv_message;private ImageView       iv_shop;private ImageView       iv_my;//底部五个标题private TextView        tv_home;private TextView        tv_wei;private TextView        tv_message;private TextView        tv_shop;private TextView        tv_my;//底部导航栏结束@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//初始化控件initView();//初始化底部按钮事件initEvent();initFragment(1);}private void initView(){ll_home=(LinearLayout)findViewById(R.id.home);ll_wei=(LinearLayout)findViewById(R.id.weiTao);ll_message=(LinearLayout)findViewById(R.id.message);ll_shop=(LinearLayout)findViewById(R.id.shop);ll_my=(LinearLayout)findViewById(R.id.me);iv_home=(ImageView)findViewById(R.id.imageButton_home);iv_wei=(ImageView)findViewById((R.id.imageButton_weiTao));iv_message=(ImageView)findViewById(R.id.imageButton_message);iv_shop=(ImageView)findViewById(R.id.imageButton_shop);iv_my=(ImageView)findViewById(R.id.imageButton_me);tv_home=(TextView)findViewById(R.id.textView_1);tv_wei=(TextView)findViewById(R.id.textView_2);tv_message=(TextView)findViewById(R.id.textView_3);tv_shop=(TextView)findViewById(R.id.textView_4);tv_my=(TextView)findViewById(R.id.textView_5);}private void initEvent(){ll_home.setOnClickListener(this);ll_wei.setOnClickListener(this);ll_message.setOnClickListener(this);ll_shop.setOnClickListener(this);ll_my.setOnClickListener(this);}@Overridepublic void onClick(View view) {//刷新底部图标和标题的颜色refreshBottom();if(view==ll_home){iv_home.setImageResource(R.drawable.taobaoclick);tv_home.setTextColor(Color.rgb(216, 30, 6));initFragment(1);}else if(view==ll_wei){iv_wei.setImageResource(R.drawable.weitaoclick);tv_wei.setTextColor(Color.rgb(216, 30, 6));initFragment(2);}else if (view==ll_message){iv_message.setImageResource(R.drawable.messageclick);tv_message.setTextColor(Color.rgb(216, 30, 6));initFragment(3);}else if (view==ll_shop){iv_shop.setImageResource(R.drawable.shopclick);tv_shop.setTextColor(Color.rgb(216, 30, 6));initFragment(4);}else if (view==ll_my){iv_my.setImageResource(R.drawable.meclick);tv_my.setTextColor(Color.rgb(216, 30, 6));initFragment(5);}}private void refreshBottom(){iv_home.setImageResource(R.drawable.taobao);iv_wei.setImageResource(R.drawable.weitao);iv_message.setImageResource(R.drawable.message);iv_shop.setImageResource(R.drawable.shop);iv_my.setImageResource(R.drawable.me);tv_home.setTextColor(Color.rgb(0, 0, 0));tv_wei.setTextColor(Color.rgb(0, 0, 0));tv_message.setTextColor(Color.rgb(0, 0, 0));tv_shop.setTextColor(Color.rgb(0, 0, 0));tv_my.setTextColor(Color.rgb(0, 0, 0));}private void initFragment(int i){//开始事务FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();//隐藏所有的fragmenthideFragment(transaction);switch (i){case 1:if(homeFragment == null){homeFragment = new HomeFragment();transaction.add(R.id.tb_fragment,homeFragment);}else{iv_home.setImageResource(R.drawable.taobaoclick);tv_home.setTextColor(Color.rgb(216, 30, 6));transaction.show(homeFragment);// Toast.makeText(this,"home",Toast.LENGTH_SHORT).show();}break;case 2:if(weiFragment == null){weiFragment = new WeiFragment();transaction.add(R.id.tb_fragment,weiFragment);}else{transaction.show(weiFragment);//Toast.makeText(this,"wei",Toast.LENGTH_SHORT).show();}break;case 3:if(messageFragment == null){messageFragment = new MessageFragment();transaction.add(R.id.tb_fragment,messageFragment);}else{transaction.show(messageFragment);//Toast.makeText(this,"mesage",Toast.LENGTH_SHORT).show();}break;case 4:if(shopFragment == null){shopFragment = new ShopFragment();transaction.add(R.id.tb_fragment,shopFragment);}else{transaction.show(shopFragment);// Toast.makeText(this,"shop",Toast.LENGTH_SHORT).show();}break;case 5:if(myFragment == null){myFragment = new MyFragment();transaction.add(R.id.tb_fragment,myFragment);}else{transaction.show(myFragment);}break;}transaction.commit();}private void hideFragment(FragmentTransaction transaction){if(homeFragment!= null){transaction.hide(homeFragment);}if(weiFragment!= null){transaction.hide(weiFragment);}if(messageFragment!= null){transaction.hide(messageFragment);}if(shopFragment!= null){transaction.hide(shopFragment);}if(myFragment!=null){transaction.hide(myFragment);}}}

4、Fragment逻辑部分

这个逻辑没什么说的，直接创建不用管，创建完成后就和下面一样，然后你想做啥就在这里就行，我展示了界面二的Fragment的逻辑，其他的没有写东西前类似

package com.example.fuliuyang.lytaobao.Fragment;import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;import com.example.fuliuyang.lytaobao.R;/*** A simple {@link Fragment} subclass.*/
public class WeiFragment extends Fragment {public WeiFragment() {// Required empty public constructor}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.fragment_wei, container, false);}}

不懂得可以私信我，在这里面就不多说了，逻辑代码可以直接用，有错误的地方也欢迎指正！

安卓项目实践——仿淘宝界面(二)——底部导航栏技术（Fragment实现）相关推荐

仿淘宝Android实现底部导航栏图标溢出效果-clipChildren属性
1.clipChildren和clipPadding说明 clipChildren用来定义他的子控件是否要在他应有的边界内进行绘制. 默认情况下,clipChild被设置为true. 也就是不允许进行 ...
前端案例——2.仿淘宝关闭二维码案例
  <! ...
js: 动画筋斗云导航栏仿淘宝关闭二维码
筋斗云导航栏 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF ...
Dom——仿淘宝关闭二维码
仿淘宝关闭二维码效果整体的样式如上图所示.(素材图片可去淘宝保存图片) 当点击二维码广告旁边的叉叉,则会把广告关闭. 核心思路点击叉叉,关闭整个广告,则需要的事件源有叉叉符号,整个广告盒子:事件 ...
DOM ------ 仿淘宝关闭二维码
仿淘宝关闭二维码完成效果如下: //css代码.box{position: relative;width: 74px;height: 88px;border: 1px solid #ccc;marg ...
JS仿淘宝网顶部的导航菜单
代码简介: JS仿淘宝网顶部的导航菜单.整合了购物车,收藏夹,搜索,搜索,网站导航等功能的导航. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
仿淘宝网站的TabPage导航效果
代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
Android界面被底部导航栏挡住
资料解决android 显示内容被底部导航栏遮挡的问题 AndroidBug5497Workaround Android手机底部NavigationBar挡住界面的解决方法 android 显示内容 ...
微信小程序开发笔记二—底部导航栏tabar
文章目录一.实现效果二.实现方法 1.准备图标 2.app.json文件添加新页面 3.app.json中添加tabar组件三.注意事项一.实现效果首先展示一下实现效果底部导航栏有三个按键 ...

安卓项目实践——仿淘宝界面(二)——底部导航栏技术（Fragment实现）