溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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<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();
}
}
}
總結：該代碼耦合度較高,有些代碼可能不太合理;歡迎大牛們給出合理建議;
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
