Android實(shí)現(xiàn)簡(jiǎn)單底部導(dǎo)航欄 Android仿微信滑動(dòng)切換效果

更新時(shí)間：2017年08月17日 16:21:38 作者：丶白澤

這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)簡(jiǎn)單底部導(dǎo)航欄，Android仿微信滑動(dòng)切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Android仿微信滑動(dòng)切換最終實(shí)現(xiàn)效果：

大體思路：

1. 主要使用兩個(gè)自定義View配合實(shí)現(xiàn); 底部圖標(biāo)加文字為一個(gè)自定義view,底部導(dǎo)航欄為一個(gè)載體,根據(jù)需要來添加底部圖標(biāo);
2. 底部導(dǎo)航欄的設(shè)置方法類似于TabLayout的關(guān)聯(lián),View需要?jiǎng)?chuàng)建關(guān)聯(lián)方法,用來關(guān)聯(lián)VIewPager;
3. 通過關(guān)聯(lián)方法獲取ViewPager實(shí)例后,根據(jù)ViewPager頁面數(shù)創(chuàng)建底部導(dǎo)航欄的圖標(biāo)按鈕;

代碼實(shí)現(xiàn):

1. 新建第一個(gè)自定義View, 圖標(biāo) + 文字的底部按鈕;

/** 
 * 自定義控件,該控件為底部導(dǎo)航欄中的圖標(biāo) 
 * Created by MrZheng on 2017/8/2. 
 */ 
 
public class TabView extends LinearLayout { 
 BotBean mBean; 
 private TextView title; 
 private ImageView iconImage; 
 
 
 /** 
  * 引用此控件,只能通過new 方法;接收一個(gè)TabView 
  * @param context 
  */ 
 public TabView(Context context, BotBean bean) { 
  super(context); 
  this.mBean = bean; 
  initView(); 
 } 
 
 /** 
  * 初始化布局 
  */ 
 public void initView() { 
  setOrientation(VERTICAL); 
  setGravity(Gravity.CENTER); 
 
  //添加小圖標(biāo) 
  iconImage = new ImageView(getContext()); 
  LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT 
    , ViewGroup.LayoutParams.WRAP_CONTENT); 
  iconImage.setLayoutParams(layoutParams); 
  iconImage.setImageResource(mBean.getUncheckedId()); 
 
  Drawable drawable = getContext().getResources().getDrawable(mBean.getUncheckedId()); 
  Drawable wrapDrawable = DrawableCompat.wrap(drawable); 
  DrawableCompat.setTintList(wrapDrawable, ColorStateList.valueOf(Color.BLACK)); 
  iconImage.setImageDrawable(wrapDrawable); 
 
  addView(iconImage); 
 
  //標(biāo)題 
  title = new TextView(getContext()); 
  LinearLayout.LayoutParams titleParams = new LayoutParams(LayoutParams.WRAP_CONTENT, 
    LayoutParams.WRAP_CONTENT); 
  title.setLayoutParams(titleParams); 
  title.setText(mBean.getContent()); 
  addView(title); 
 } 
 
 //判斷選擇狀態(tài),改變圖標(biāo) 
 //供外部調(diào)用 
 public void setSelected(boolean isSelected) { 
  if (mBean == null) { 
   return; 
  } 
  if (isSelected) { 
   if (iconImage != null) { 
    //使用顏色過濾器,改變選中時(shí)的顏色 
    Drawable drawable = getContext().getResources().getDrawable(mBean.getUncheckedId()); 
    Drawable wrapDrawable = DrawableCompat.wrap(drawable); 
    DrawableCompat.setTintList(wrapDrawable, ColorStateList.valueOf(Color.GREEN)); 
    iconImage.setImageDrawable(wrapDrawable); 
 
    title.setTextColor(Color.GREEN); 
   } 
  } else { 
   if (title != null) { 
//    iconImage.setImageResource(mBean.getUncheckedId()); 
    Drawable drawable = getContext().getResources().getDrawable(mBean.getUncheckedId()); 
    Drawable wrapDrawable = DrawableCompat.wrap(drawable); 
    DrawableCompat.setTintList(wrapDrawable, ColorStateList.valueOf(Color.BLACK)); 
    iconImage.setImageDrawable(wrapDrawable); 
 
    title.setTextColor(Color.GRAY); 
   } 
  } 
 } 
}

2. 創(chuàng)建第二個(gè)自定義View,該View為底部導(dǎo)航欄載體,根據(jù) 關(guān)聯(lián)的ViewPager頁面個(gè)數(shù)創(chuàng)建底部導(dǎo)航欄圖標(biāo);

/** 
 * 該控件為底部導(dǎo)航欄圖標(biāo)載體 
 * Created by MrZheng on 2017/8/2. 
 */ 
 
public class bottomView extends LinearLayout { 
 
 private ViewPager vp; 
 BottomPageChangeListener mBottomPageChangeListener; 
 
 
 public bottomView(Context context) { 
  super(context); 
 } 
 public bottomView(Context context, @Nullable AttributeSet attrs) { 
  super(context, attrs); 
 } 
 public bottomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { 
  super(context, attrs, defStyleAttr); 
 } 
 
 /** 
  * 同TabLayout用法相似,需要與ViewPager進(jìn)行綁定 
  */ 
 public void setViewPager(ViewPager viewPager, ArrayList<BotBean> botBeen,BottomPageChangeListener bottomPageChangeListener) { 
  if (viewPager == null) { 
   return; 
  } 
  vp = viewPager; 
  mBottomPageChangeListener = bottomPageChangeListener; 
  initTabView(botBeen); 
 
  //設(shè)置ViewPager的點(diǎn)擊事件 
  vp.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){ 
   @Override 
   public void onPageSelected(int position) { 
    for (int i = 0; i < getChildCount(); i++) { 
     getChildAt(i).setSelected((position == i ? true : false)); 
    } 
    if (mBottomPageChangeListener != null) { 
     mBottomPageChangeListener.onPageChangeListener(position); 
    } 
   } 
  }); 
 } 
 
 /** 
  * 初始化底部導(dǎo)航欄,ViewPager有多少頁,就創(chuàng)建多少個(gè)圖標(biāo) 
  */ 
 public void initTabView(ArrayList<BotBean> botBeen) { 
  setGravity(HORIZONTAL); 
  for (int i = 0; i < botBeen.size(); i++) { 
   BotBean bean = botBeen.get(i); 
   TabView tabView = new TabView(getContext(), bean); 
   LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT 
     , ViewGroup.LayoutParams.WRAP_CONTENT); 
   params.weight = 1; 
   params.gravity = Gravity.CENTER; 
   tabView.setLayoutParams(params); 
 
   //為每個(gè)view設(shè)置點(diǎn)擊事件,點(diǎn)擊跳轉(zhuǎn)過去 
   final int finalI = i; 
   tabView.setOnClickListener(new OnClickListener() { 
    @Override 
    public void onClick(View view) { 
     vp.setCurrentItem(finalI); 
    } 
   }); 
   //設(shè)置一開始選中狀態(tài) 
   if (i == 0) { 
    tabView.setSelected(true); 
    //由于初始化時(shí),onPageSelected()選中方法并沒有的到執(zhí)行,所以主動(dòng)去調(diào)用回調(diào)方法 
    if (mBottomPageChangeListener != null) { 
     mBottomPageChangeListener.onPageChangeListener(i); 
    } 
   } 
   addView(tabView); 
  } 
 } 
 
 
 /** 
  * 提供接口回調(diào)方法,每次滑動(dòng)都通知外界 
  */ 
 public interface BottomPageChangeListener{ 
  void onPageChangeListener(int position); 
 } 
}

3. 添加圖標(biāo)自定義類, 該類封裝著底部導(dǎo)航欄中每一個(gè)選項(xiàng)的的圖標(biāo)和文字,將該類型對(duì)象添加到集合中,用于給底部導(dǎo)航欄設(shè)置圖標(biāo);

/** 
 * 底部導(dǎo)航欄的封裝類,該類對(duì)象用于在底部導(dǎo)航欄添加對(duì)應(yīng)圖標(biāo)和文字 
 * Created by MrZheng on 2017/8/2. 
 */ 
 
public class BotBean { 
 String content;//圖標(biāo)名字 
 int uncheckedId;//未選中時(shí)的圖標(biāo) 
 
 public BotBean(String content, int uncheckedId) { 
  this.content = content; 
  this.uncheckedId = uncheckedId; 
 } 
 
 public String getContent() { 
  return content; 
 } 
 
 public void setContent(String content) { 
  this.content = content; 
 } 
 
 public int getUncheckedId() { 
  return uncheckedId; 
 } 
 
 public void setUncheckedId(int uncheckedId) { 
  this.uncheckedId = uncheckedId; 
 } 
}

自定義View實(shí)現(xiàn)完成,在Fragment或Activity中使用該View:

1. 在布局文件中添加:

<zhengyanze.com.bottomdemo.widget.bottomView 
  android:id="@+id/bottom" 
  android:layout_width="match_parent" 
  android:layout_height="60dp"> 
 </zhengyanze.com.bottomdemo.widget.bottomView>

2. 在活動(dòng)或碎片中添加:

public class MainActivity extends AppCompatActivity { 
 ArrayList<Fragment> mFragments; 
 ArrayList<BotBean> mItemIcon;//存放底部圖標(biāo)和文字 
 private TextView tv; 
 
 @Override 
 protected void onCreate(Bundle savedInstanceState) { 
  super.onCreate(savedInstanceState); 
  setContentView(R.layout.activity_main); 
  mFragments = new ArrayList<>(); 
  mItemIcon = new ArrayList<>(); 
 
  mFragments.add(new TextFragment()); 
  mFragments.add(new TextFragment()); 
  mFragments.add(new TextFragment()); 
  mFragments.add(new TextFragment()); 
  mItemIcon.add(new BotBean("首頁", R.mipmap.ic_home2)); 
  mItemIcon.add(new BotBean("通訊錄", R.mipmap.ic_study2)); 
  mItemIcon.add(new BotBean("發(fā)現(xiàn)", R.mipmap.ic_found2)); 
  mItemIcon.add(new BotBean("我的", R.mipmap.ic_me2)); 
 
  ViewPager vp = (ViewPager) findViewById(R.id.vp); 
  vp.setAdapter(new FAdapter(getSupportFragmentManager())); 
 
  tv = (TextView) findViewById(R.id.tv); 
 
  bottomView bottom = (bottomView) findViewById(R.id.bottom); 
  bottom.setViewPager(vp, mItemIcon, new bottomView.BottomPageChangeListener() { 
   @Override 
   public void onPageChangeListener(int position) { 
    //滑動(dòng)后的回調(diào) 
    tv.setText(mItemIcon.get(position).getContent()); 
   } 
  }); 
 } 
 
 /** 
  * 適配器 
  */ 
 class FAdapter extends FragmentPagerAdapter { 
  public FAdapter(FragmentManager fm) { 
   super(fm); 
  } 
 
  @Override 
  public Fragment getItem(int position) { 
   return mFragments.get(position); 
  } 
  @Override 
  public int getCount() { 
   return mFragments.size(); 
  } 
 } 
}

總結(jié)：該代碼耦合度較高,有些代碼可能不太合理;歡迎大牛們給出合理建議;

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: