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); //標題 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<BotBean> 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<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設置點擊事件,點擊跳轉過去 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. 在布局文件中添加:
<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;//存放底部圖標和文字 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(); } } } 總結：該代碼耦合度較高,有些代碼可能不太合理;歡迎大牛們給出合理建議;
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
