Android實(shí)現(xiàn)淘寶底部圖標(biāo)導(dǎo)航欄
在上一篇中,簡單的使用透明主題的Activity實(shí)現(xiàn)了仿微信右側(cè)頂部的對話框,上午又花了兩個(gè)小時(shí)研究了一下淘寶底部的導(dǎo)航欄實(shí)現(xiàn),網(wǎng)上的做法也有很多,今天我就使用一種通過基本控件加上布局的方式,沒有任何的自定義風(fēng)格,控件等來實(shí)現(xiàn),還是老樣子,先看一下效果圖:
下面就來具體看一看如何實(shí)現(xiàn)的,還是按照步驟來吧:
繪制主界面
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); //顯示首頁布局,隱藏標(biāo)題淘寶圖片 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); //顯示首頁布局,隱藏標(biāo)題淘寶圖片 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); //顯示首頁布局,隱藏標(biāo)題淘寶圖片 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); //顯示首頁布局,隱藏標(biāo)題淘寶圖片 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對應(yīng)的布局代碼(這里為了簡化,所有Fragment使用的是同一個(gè)很簡單的布局):
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代碼(這里我就給出一個(gè),其他的完全一樣,只是修改了Fragment布局中的文本內(nèi)容):
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; } }
上面就是幾個(gè)主要的組成部分了,其他的素材就不介紹了,還有就是很多代碼可以優(yōu)化的地方也沒有做在太多考慮,下面就來說一說幾個(gè)需要注意的點(diǎn):
- Fragment,F(xiàn)ragmentManager,F(xiàn)ragmentTransaction的配合使用
- 淘寶圖標(biāo)與首頁菜單項(xiàng)的切換
- Fragment的包不要使用錯(cuò)了,不是android.app.Fragment
- 填充FramLayout的時(shí)候,注意FragmentTransaction里面的內(nèi)容的添加與刪除
- 實(shí)現(xiàn)的本質(zhì)其實(shí)就是點(diǎn)擊事件與FramLayout配合Fragment實(shí)現(xiàn)的
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android程序開發(fā)之Fragment實(shí)現(xiàn)底部導(dǎo)航欄實(shí)例代碼
- Android實(shí)現(xiàn)沉浸式通知欄通知欄背景顏色跟隨app導(dǎo)航欄背景顏色而改變
- Android實(shí)現(xiàn)底部導(dǎo)航欄功能(選項(xiàng)卡)
- Android 沉浸式狀態(tài)欄與隱藏導(dǎo)航欄實(shí)例詳解
- Android仿網(wǎng)易客戶端頂部導(dǎo)航欄效果
- Android實(shí)現(xiàn)頂部導(dǎo)航欄可點(diǎn)擊可滑動(dòng)效果(仿微信仿豆瓣網(wǎng))
- Android項(xiàng)目實(shí)戰(zhàn)之仿網(wǎng)易頂部導(dǎo)航欄效果
- 超簡單的幾行代碼搞定Android底部導(dǎo)航欄功能
- Android中TabLayout+ViewPager 簡單實(shí)現(xiàn)app底部Tab導(dǎo)航欄
相關(guān)文章
Android實(shí)現(xiàn)將View轉(zhuǎn)化為圖片并保存到本地
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)將View轉(zhuǎn)化為圖片并保存到本地,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02Android中選項(xiàng)菜單(OptionMenu)的創(chuàng)建方法
這篇文章主要介紹了Android中選項(xiàng)菜單(OptionMenu)的創(chuàng)建方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-01-01android通過servlet服務(wù)器保存文件到手機(jī)
這篇文章主要為大家詳細(xì)介紹了android通過servlet服務(wù)器保存文件到手機(jī),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06Android 同時(shí)setTag兩次保存多種值的示例代碼
這篇文章主要介紹了Android 同時(shí)setTag兩次保存多種值的示例代碼,需要的朋友可以參考下2017-02-02Flutter狀態(tài)管理Provider的使用示例詳解
這篇文章主要為大家介紹了Flutter狀態(tài)管理Provider的使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11詳解android項(xiàng)目由Gradle 2.2 切換到 3.0的坑
本篇文章主要介紹了詳解android項(xiàng)目由Gradle 2.2 切換到 3.0的坑,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02Android高級界面組件之拖動(dòng)條和評星條的功能實(shí)現(xiàn)
這篇文章主要介紹了Android高級界面組件之拖動(dòng)條和評星條的實(shí)現(xiàn)實(shí)例,需要的的朋友參考下2017-03-03