Android仿微信滑動切換最終實現效果：

大體思路：

1. 主要使用兩個自定義View配合實現; 底部圖標加文字為一個自定義view,底部導航欄為一個載體,根據需要來添加底部圖標;

2. 底部導航欄的設置方法類似于TabLayout的關聯,View需要創建關聯方法,用來關聯VIewPager;

3. 通過關聯方法獲取ViewPager實例后,根據ViewPager頁面數創建底部導航欄的圖標按鈕;

代碼實現:

1. 新建第一個自定義View, 圖標 + 文字 的底部按鈕;

/**

* 自定義控件,該控件為底部導航欄中的圖標

* 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);

//添加小圖標

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);

//標題

title = new TextView(getContext());

LinearLayout.LayoutParams titleParams = new LayoutParams(LayoutParams.WRAP_CONTENT,

LayoutParams.WRAP_CONTENT);

title.setLayoutParams(titleParams);

title.setText(mBean.getContent());

addView(title);

}

//判斷選擇狀態,改變圖標

//供外部調用

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. 創建第二個自定義View,該View為底部導航欄載體,根據 關聯的ViewPager頁面 個數創建 底部導航欄圖標;

/**

* 該控件為底部導航欄圖標載體

* 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進行綁定

*/

public void setViewPager(ViewPager viewPager, ArrayList botBeen,BottomPageChangeListener bottomPageChangeListener) {

if (viewPager == null) {

return;

}

vp = viewPager;

mBottomPageChangeListener = bottomPageChangeListener;

initTabView(botBeen);

//設置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);

}

}

});

}

/**

* 初始化底部導航欄,ViewPager有多少頁,就創建多少個圖標

*/

public void initTabView(ArrayList 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設置點擊事件,點擊跳轉過去

final int finalI = i;

tabView.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View view) {

vp.setCurrentItem(finalI);

}

});

//設置一開始選中狀態

if (i == 0) {

tabView.setSelected(true);

//由于初始化時,onPageSelected()選中方法并沒有的到執行,所以主動去調用回調方法

if (mBottomPageChangeListener != null) {

mBottomPageChangeListener.onPageChangeListener(i);

}

}

addView(tabView);

}

}

/**

* 提供接口回調方法,每次滑動都通知外界

*/

public interface BottomPageChangeListener{

void onPageChangeListener(int position);

}

}

3. 添加 圖標自定義類, 該類封裝著底部導航欄中每一個選項的的圖標和文字,將該類型對象添加到集合中,用于給底部導航欄設置圖標;

/**

* 底部導航欄的封裝類,該類對象用于在底部導航欄添加對應圖標和文字

* Created by MrZheng on 2017/8/2.

*/

public class BotBean {

String content;//圖標名字

int uncheckedId;//未選中時的圖標

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實現完成,在Fragment或Activity中使用該View:

1. 在布局文件中添加:

android:id="@+id/bottom"

android:layout_width="match_parent"

android:layout_height="60dp">

2. 在活動或碎片中添加:

public class MainActivity extends AppCompatActivity {

ArrayList mFragments;

ArrayList mItemIcon;//存放底部圖標和文字

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("發現", 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) {

//滑動后的回調

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();

}

}

}

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的android滑动菜单图标,Android实现简单底部导航栏 Android仿微信滑动切换效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。