1. 首页
  2. 文章中心
  3. Android

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

212 阅读 0 评论
我是靠谱客的博主 清爽毛巾，这篇文章主要介绍Android实现淘宝底部图标导航栏，现在分享给大家，希望可以做个参考。

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

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

绘制主界面

activity_layout.xml代码如下：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<?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代码：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
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代码：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?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代码：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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实现的

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

最后

以上就是清爽毛巾最近收集整理的关于Android实现淘宝底部图标导航栏的全部内容，更多相关Android实现淘宝底部图标导航栏内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(140)

相关文章

Android编译的注意事项
Android编译的注意事项
Android实现微信右侧顶部下拉对话框
Android实现微信右侧顶部下拉对话框
Android画板开发之橡皮擦功能
Android画板开发之橡皮擦功能
Android自定义控件实现带文字提示的SeekBar
Android自定义控件实现带文字提示的SeekBar
Android实现淘宝底部图标导航栏
Android实现淘宝底部图标导航栏
Android画板开发之基本画笔功能
Android画板开发之基本画笔功能
Android Canvas drawText文字居中的一些事（图解）
Android Canvas drawText文字居中的一些事（图解）
Android获得设备状态信息、Mac地址、IP地址的方法
Android获得设备状态信息、Mac地址、IP地址的方法

评论列表共有 0 条评论

立即
投稿
返回
顶部