Android實現(xiàn)簡單底部導(dǎo)航欄 Android仿微信滑動切換效果
Android仿微信滑動切換最終實現(xiàn)效果:

大體思路:
1. 主要使用兩個自定義View配合實現(xiàn); 底部圖標(biāo)加文字為一個自定義view,底部導(dǎo)航欄為一個載體,根據(jù)需要來添加底部圖標(biāo);
2. 底部導(dǎo)航欄的設(shè)置方法類似于TabLayout的關(guān)聯(lián),View需要創(chuàng)建關(guān)聯(lián)方法,用來關(guān)聯(lián)VIewPager;
3. 通過關(guān)聯(lián)方法獲取ViewPager實例后,根據(jù)ViewPager頁面數(shù)創(chuàng)建底部導(dǎo)航欄的圖標(biāo)按鈕;
代碼實現(xiàn):
1. 新建第一個自定義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 方法;接收一個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) {
//使用顏色過濾器,改變選中時的顏色
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)建第二個自定義View,該View為底部導(dǎo)航欄載體,根據(jù) 關(guān)聯(lián)的ViewPager頁面 個數(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的點擊事件
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)建多少個圖標(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);
//為每個view設(shè)置點擊事件,點擊跳轉(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);
//由于初始化時,onPageSelected()選中方法并沒有的到執(zhí)行,所以主動去調(diào)用回調(diào)方法
if (mBottomPageChangeListener != null) {
mBottomPageChangeListener.onPageChangeListener(i);
}
}
addView(tabView);
}
}
/**
* 提供接口回調(diào)方法,每次滑動都通知外界
*/
public interface BottomPageChangeListener{
void onPageChangeListener(int position);
}
}
3. 添加 圖標(biāo)自定義類, 該類封裝著底部導(dǎo)航欄中每一個選項的的圖標(biāo)和文字,將該類型對象添加到集合中,用于給底部導(dǎo)航欄設(shè)置圖標(biāo);
/**
* 底部導(dǎo)航欄的封裝類,該類對象用于在底部導(dǎo)航欄添加對應(yīng)圖標(biāo)和文字
* Created by MrZheng on 2017/8/2.
*/
public class BotBean {
String content;//圖標(biāo)名字
int uncheckedId;//未選中時的圖標(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實現(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. 在活動或碎片中添加:
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) {
//滑動后的回調(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é):該代碼耦合度較高,有些代碼可能不太合理;歡迎大牛們給出合理建議;
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android程序開發(fā)之Fragment實現(xiàn)底部導(dǎo)航欄實例代碼
- Android實現(xiàn)底部導(dǎo)航欄功能(選項卡)
- 超簡單的幾行代碼搞定Android底部導(dǎo)航欄功能
- Android 彈出Dialog時隱藏狀態(tài)欄和底部導(dǎo)航欄的方法
- android 全屏去掉底部虛擬導(dǎo)航欄的方法
- 解決android 顯示內(nèi)容被底部導(dǎo)航欄遮擋的問題
- Android底部導(dǎo)航欄的三種風(fēng)格實現(xiàn)
- Android中TabLayout+ViewPager 簡單實現(xiàn)app底部Tab導(dǎo)航欄
- Android實現(xiàn)底部導(dǎo)航欄的主界面
- android實現(xiàn)簡單底部導(dǎo)航欄
相關(guān)文章
Android開發(fā)MediaCodec和lamemp3多段音頻截取拼接
這篇文章主要為大家介紹了Android開發(fā)使用MediaCodec和lamemp3實現(xiàn)多段音頻截取拼接的編程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04
Android實現(xiàn)自定義帶刪除功能的EditText實例
本篇文章主要介紹了Android實現(xiàn)自定義帶刪除功能的EditText實例,非常具有實用價值,需要的朋友可以參考下2017-06-06
Android應(yīng)用開發(fā)中使用Fragment的入門學(xué)習(xí)教程
這篇文章主要介紹了Android應(yīng)用開發(fā)中Fragment的入門學(xué)習(xí)教程,可以把Fragment看作為Activity基礎(chǔ)之上的模塊,需要的朋友可以參考下2016-02-02
如何使用Matrix對bitmap的旋轉(zhuǎn)與鏡像水平垂直翻轉(zhuǎn)
本篇文章是對使用Matrix對bitmap的旋轉(zhuǎn)與鏡像水平垂直翻轉(zhuǎn)進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06
Android 使用FragmentTabhost代替Tabhost
這篇文章主要介紹了Android 使用FragmentTabhost代替Tabhost的相關(guān)資料,需要的朋友可以參考下2017-05-05
Qt6.5.3?Android環(huán)境配置的實現(xiàn)
本文主要介紹了Qt6.5.3?Android環(huán)境配置的實現(xiàn),文中通過圖文介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01

