通用型的底部導航欄示例
阿新 • • 發佈：2018-12-12
廢話不多說，上圖：
幾乎所有的應用app都有這麼一塊導航欄。現在把最省心的一種寫法放到這裡，自己的輪子，用著放心。
關鍵程式碼如下：
BottomAdapter.java
1 package com.example.gc_hank.evolutionpro.ui.bottom; 2 3 import android.app.Activity; 4 import android.content.Context; 5 import android.graphics.drawable.Drawable; 6View Codeimport android.support.annotation.NonNull; 7 import android.support.v7.widget.RecyclerView; 8 import android.util.DisplayMetrics; 9 import android.view.LayoutInflater; 10 import android.view.View; 11 import android.view.ViewGroup; 12 import android.view.WindowManager; 13 import android.widget.ImageView;14 import android.widget.LinearLayout; 15 import android.widget.TextView; 16 17 import com.example.gc_hank.evolutionpro.R; 18 19 import java.util.List; 20 21 import butterknife.BindView; 22 import butterknife.ButterKnife; 23 24 /** 25 * 底部導航欄專用RecyclerView.Adapter示例 26 */ 27 public classBottomAdapter extends RecyclerView.Adapter { 28 29 private List<TabTitle> mTitleObjectList;// 30 private int mSelectedPosition = 0; 31 private OnItemClickListener onItemClickListener; 32 33 /** 34 * 對外介面 35 */ 36 public interface OnItemClickListener { 37 void onItemClick(int position); 38 } 39 40 private Activity mActivity; 41 private int itemWidth; 42 43 public BottomAdapter(Activity activity, List<TabTitle> titleObjectList) { 44 mActivity = activity; 45 mTitleObjectList = titleObjectList; 46 } 47 48 @NonNull 49 @Override 50 public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) { 51 View view = LayoutInflater.from(mActivity).inflate(R.layout.adapter_list_item_bottom_title, null); 52 initItemWidth(); 53 return new BottomHolder(view); 54 } 55 56 @Override 57 public void onBindViewHolder(@NonNull RecyclerView.ViewHolder viewHolder, final int position) { 58 BottomHolder bHolder = (BottomHolder) viewHolder; 59 60 int titleNameId = mTitleObjectList.get(position).getTitleName(); 61 Drawable titleIconDrawable = mTitleObjectList.get(position).getDrawable(); 62 63 bHolder.tvTitle.setTextColor(mActivity.getResources().getColorStateList(mTitleObjectList.get(position).getTextColorStateList())); 64 bHolder.tvTitle.setText(mActivity.getResources().getString(titleNameId)); 65 66 bHolder.ivIcon.setImageDrawable(titleIconDrawable); 67 68 bHolder.llMain.getLayoutParams().width = itemWidth; 69 bHolder.llMain.getLayoutParams().height = (int) mActivity.getResources().getDimension(R.dimen.height_b); 70 71 bHolder.llMain.requestLayout();//由於要強制等分，所以，要重新佈局一下，調整寬高 72 73 if (mSelectedPosition == position) {// 如果當前tab被選中了 74 bHolder.ivIcon.setSelected(true); 75 bHolder.tvTitle.setSelected(true); 76 } else { 77 bHolder.ivIcon.setSelected(false); 78 bHolder.tvTitle.setSelected(false); 79 } 80 81 bHolder.llMain.setOnClickListener(new View.OnClickListener() { 82 @Override 83 public void onClick(View v) { 84 setSelection(position);//先改變當前的item的選中情況 85 if (null != onItemClickListener) 86 onItemClickListener.onItemClick(position);//再執行外界傳入的點選事件 87 } 88 }); 89 } 90 91 /** 92 * 讓每一個item等分 93 */ 94 private void initItemWidth() { 95 WindowManager windowManager = (WindowManager) mActivity.getSystemService(Context.WINDOW_SERVICE);// 得到當前螢幕的寬度，然後分成getItemCount等分,讓每個item平均分配 96 DisplayMetrics metrics = new DisplayMetrics(); 97 windowManager.getDefaultDisplay().getMetrics(metrics); 98 int w = metrics.widthPixels;//這就是寬度畫素值 99 itemWidth = w / getItemCount(); 100 } 101 102 @Override 103 public int getItemCount() { 104 return mTitleObjectList == null ? 0 : mTitleObjectList.size(); 105 } 106 107 @Override 108 public int getItemViewType(int position) { 109 return super.getItemViewType(position); 110 } 111 112 class BottomHolder extends RecyclerView.ViewHolder { 113 114 @BindView(R.id.tv_title) 115 TextView tvTitle; 116 @BindView(R.id.iv_icon) 117 ImageView ivIcon; 118 @BindView(R.id.ll_main) 119 LinearLayout llMain; 120 121 public BottomHolder(@NonNull View itemView) { 122 super(itemView); 123 ButterKnife.bind(this, itemView); 124 } 125 } 126 127 //```````````以下全都是對外介面····················// 128 public void setSelection(int position) { 129 this.mSelectedPosition = position; 130 notifyDataSetChanged(); 131 } 132 133 public void setOnItemClickListener(OnItemClickListener onItemClickListener) { 134 this.onItemClickListener = onItemClickListener; 135 } 136 137 138 }
TabTitle.java
1 package com.example.gc_hank.evolutionpro.ui.bottom; 2 3 import android.graphics.drawable.StateListDrawable; 4 5 public class TabTitle { 6 private int titleName; 7 private int textColorStateList; 8 private StateListDrawable drawable; 9 10 /** 11 * 底部導航欄配置類 12 * 13 * @param titleName 標題text 14 * @param textColorStateList 標題顏色selector 15 * @param drawable 標題icon 的selector 16 */ 17 public TabTitle(int titleName, int textColorStateList, StateListDrawable drawable) { 18 this.titleName = titleName; 19 this.drawable = drawable; 20 this.textColorStateList = textColorStateList; 21 } 22 23 public int getTitleName() { 24 return titleName; 25 } 26 27 public StateListDrawable getDrawable() { 28 return drawable; 29 } 30 31 public int getTextColorStateList() { 32 return textColorStateList; 33 } 34 35 36 }View Code
MainActivity.java
package com.example.gc_hank.evolutionpro.ui; import android.graphics.drawable.StateListDrawable; import android.os.Bundle; import android.support.v4.content.ContextCompat; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.util.Log; import com.example.gc_hank.evolutionpro.R; import com.example.gc_hank.evolutionpro.ui.bottom.BottomAdapter; import com.example.gc_hank.evolutionpro.ui.bottom.TabTitle; import java.util.ArrayList; import java.util.List; import butterknife.BindView; import butterknife.ButterKnife; public class MainActivity extends AppCompatActivity { @BindView(R.id.rv_bottom) RecyclerView mRvBottom; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this); initBottom(); } private void initBottom() { LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this); linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL); mRvBottom.setLayoutManager(linearLayoutManager); final BottomAdapter adapter = new BottomAdapter(this, getSetting()); adapter.setOnItemClickListener(new BottomAdapter.OnItemClickListener() { @Override public void onItemClick(int position) { adapter.setSelection(position); //TODO 並且這裡要切換Fragment Log.d("onItemClickTag", "" + position); } }); mRvBottom.setAdapter(adapter); } // private List<TabTitle> getSetting() { List<TabTitle> titleObjectList = new ArrayList<>(); titleObjectList.add(new TabTitle(R.string.tag_name_home, R.color.home_tab_text_selector, getStateListDrawable(R.mipmap.a_tabbar_home, R.mipmap.a_tabbar_home_p))); titleObjectList.add(new TabTitle(R.string.tag_name_quote, R.color.home_tab_text_selector, getStateListDrawable(R.mipmap.a_tabbar_market, R.mipmap.a_tabbar_market_p))); titleObjectList.add(new TabTitle(R.string.tag_name_deal, R.color.home_tab_text_selector, getStateListDrawable(R.mipmap.a_tabbar_trade, R.mipmap.a_tabbar_trade_p))); titleObjectList.add(new TabTitle(R.string.tag_name_mine, R.color.home_tab_text_selector, getStateListDrawable(R.mipmap.a_tabbar_me, R.mipmap.a_tabbar_me_p))); return titleObjectList; } /** * 返回一個Drawable物件，可以根據selected狀態改變 圖示 * * @param normalIcon * @param selectedIcon * @return */ private StateListDrawable getStateListDrawable(int normalIcon, int selectedIcon) { StateListDrawable drawable = new StateListDrawable(); drawable.addState(new int[]{android.R.attr.state_selected}, ContextCompat.getDrawable(this, selectedIcon));//選中之後的drawable drawable.addState(new int[]{}, ContextCompat.getDrawable(this, normalIcon));//正常情況下的drawable return drawable; } }View Code
然後是資原始檔：
home_tab_text_selector.xml:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="#2A60F5" android:state_checked="true" /> <item android:color="#2A60F5" android:state_selected="true" /> <item android:color="#8D939B" /> </selector>View Code
最後給出github的地址：
https://github.com/18598925736/CommonBottomBar
下載可直接執行