分析:
首先來看看我們要實(shí)現(xiàn)的效果，下面這張圖是大眾點(diǎn)評APP里面的一個(gè)多條目下拉菜單篩選的一個(gè)效果线椰，這是很多App里面都比較常見的一種多條目篩選菜單。
GIF.gif
結(jié)構(gòu)分析:
Screenshot_2017-08-01-20-44-12-15.png
整個(gè)控件我么用一個(gè)LinearLayout 實(shí)現(xiàn)，所以我們要繼承LinearLayout .然后是上面紅色長方形部分的Tab欄，下面最外層黑色框框是一個(gè)FrameLayout用來存放陰影（綠色框框部分）和菜單布局(最里面紅色框框部分)
實(shí)現(xiàn)
分析完了宿亡，我們就可以用代碼來實(shí)現(xiàn)了，代碼如下：
1纳令、基本布局:
public class ListDataScreenView extends LinearLayout {
private Context mContext;
// 1.1 創(chuàng)建頭部用來存放 Tab
private LinearLayout mMenuTabView;
// 1.2 創(chuàng)建 FrameLayout 用來存放 = 陰影（View） + 菜單內(nèi)容布局(FrameLayout)
private FrameLayout mMenuMiddleView;
// 陰影
private View mShadowView;
// 創(chuàng)建菜單用來存放菜單內(nèi)容
private FrameLayout mMenuContainerView;
// 陰影的顏色
private int mShadowColor = 0x88888888;
// 篩選菜單的 Adapter
private BaseMenuAdapter mAdapter;
// 內(nèi)容菜單的高度
private int mMenuContainerHeight;
// 當(dāng)前打開的位置
private int mCurrentPosition = -1;
private long DURATION_TIME = 350;
// 動畫是否在執(zhí)行
private boolean mAnimatorExecute;
public ListDataScreenView(Context context) {
this(context, null);
}
public ListDataScreenView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public ListDataScreenView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mContext = context;
initLayout();
}
/**
* 1.布局實(shí)例化好 （組合控件）
*/
private void initLayout() {
// 1. 先創(chuàng)建一個(gè) xml 布局 挽荠，再加載，findViewById
// 2. 簡單的效果用代碼去創(chuàng)建 早期IOS 用代碼創(chuàng)建布局
setOrientation(VERTICAL);
// 1.1 創(chuàng)建頭部用來存放 Tab
mMenuTabView = new LinearLayout(mContext);
mMenuTabView.setLayoutParams(new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
addView(mMenuTabView);
// 1.2 創(chuàng)建 FrameLayout 用來存放 = 陰影（View） + 菜單內(nèi)容布局(FrameLayout)
mMenuMiddleView = new FrameLayout(mContext);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT, 0);
params.weight = 1;
mMenuMiddleView.setLayoutParams(params);
addView(mMenuMiddleView);
// 創(chuàng)建陰影 可以不用設(shè)置 LayoutParams 默認(rèn)就是 MATCH_PARENT 泊碑，MATCH_PARENT
mShadowView = new View(mContext);
mShadowView.setBackgroundColor(mShadowColor);
mShadowView.setAlpha(0f);
mShadowView.setOnClickListener(this);
mShadowView.setVisibility(GONE);
mMenuMiddleView.addView(mShadowView);//陰影View在下面
// 創(chuàng)建菜單用來存放菜單內(nèi)容
mMenuContainerView = new FrameLayout(mContext);
mMenuContainerView.setBackgroundColor(Color.WHITE);
mMenuMiddleView.addView(mMenuContainerView);//菜單內(nèi)容在上面
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
Log.e("TAG", "onMeasure");
int height = MeasureSpec.getSize(heightMeasureSpec);
if (mMenuContainerHeight == 0 && height > 0) {
// 內(nèi)容的高度應(yīng)該不是全部 應(yīng)該是整個(gè) View的 75%
mMenuContainerHeight = (int) (height * 75f / 100);
//獲取菜單內(nèi)容View的LayoutParams
ViewGroup.LayoutParams params = mMenuContainerView.getLayoutParams();
//設(shè)置菜單內(nèi)容的高度
params.height = mMenuContainerHeight;
mMenuContainerView.setLayoutParams(params);
// 進(jìn)來的時(shí)候陰影不顯示 坤按，內(nèi)容也是不顯示的（把它移上去）
//放菜單內(nèi)容
mMenuContainerView.setTranslationY(-mMenuContainerHeight);
}
}
}
2毯欣、設(shè)置點(diǎn)擊事件馒过，以及過程中的動畫
/**
* 設(shè)置tab的點(diǎn)擊
*
* @param tabView
* @param position
*/
private void setTabClick(final View tabView, final int position) {
tabView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (mCurrentPosition == -1) {
// 沒打開
openMenu(position, tabView);
} else {
if (mCurrentPosition == position) {
// 打開了,關(guān)閉
closeMenu();
} else {
// 切換一下顯示
//拿到菜單容器里的子view(TextView)
View currentMenu = mMenuContainerView.getChildAt(mCurrentPosition);
currentMenu.setVisibility(View.GONE);//將子view(TextView)設(shè)置無不可見
mAdapter.menuClose(mMenuTabView.getChildAt(mCurrentPosition));
//拿到當(dāng)前點(diǎn)擊的位置
mCurrentPosition = position;
currentMenu = mMenuContainerView.getChildAt(mCurrentPosition);
currentMenu.setVisibility(View.VISIBLE);
mAdapter.menuOpen(mMenuTabView.getChildAt(mCurrentPosition));
}
}
}
});
}
/**
* 關(guān)閉菜單
*/
private void closeMenu() {
//動畫正在執(zhí)行，點(diǎn)擊無效
if (mAnimatorExecute) {
return;
}
// 關(guān)閉動畫 位移動畫 透明度動畫
ObjectAnimator translationAnimator = ObjectAnimator.ofFloat(mMenuContainerView, "translationY", 0, -mMenuContainerHeight);
translationAnimator.setDuration(DURATION_TIME);
translationAnimator.start();
mShadowView.setVisibility(View.VISIBLE);
ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(mShadowView, "alpha", 1f, 0f);
alphaAnimator.setDuration(DURATION_TIME);
// 要等關(guān)閉動畫執(zhí)行完才能去隱藏當(dāng)前菜單
alphaAnimator.addListener(new AnimatorListenerAdapter() {
//動畫執(zhí)行完畢
@Override
public void onAnimationEnd(Animator animation) {
View menuView = mMenuContainerView.getChildAt(mCurrentPosition);
menuView.setVisibility(View.GONE);
mCurrentPosition = -1;
mShadowView.setVisibility(GONE);
mAnimatorExecute = false;
}
//關(guān)閉菜單動畫開始
@Override
public void onAnimationStart(Animator animation) {
mAnimatorExecute = true;
mAdapter.menuClose(mMenuTabView.getChildAt(mCurrentPosition));
}
});
alphaAnimator.start();
}
/**
* 打開菜單
*
* @param position
* @param tabView
*/
private void openMenu(final int position, final View tabView) {
//動畫正在執(zhí)行酗钞，點(diǎn)擊無效
if (mAnimatorExecute) {
return;
}
//設(shè)置陰影可見
mShadowView.setVisibility(View.VISIBLE);
// 獲取當(dāng)前位置顯示當(dāng)前菜單腹忽，菜單是加到了菜單容器
View menuView = mMenuContainerView.getChildAt(position);
menuView.setVisibility(View.VISIBLE);
// 打開開啟動畫 位移動畫 透明度動畫
//位移動畫
ObjectAnimator translationAnimator = ObjectAnimator.ofFloat(mMenuContainerView, "translationY", -mMenuContainerHeight, 0);
translationAnimator.setDuration(DURATION_TIME);
translationAnimator.start();
//透明度動畫
ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(mShadowView, "alpha", 0f, 1f);
alphaAnimator.setDuration(DURATION_TIME);
alphaAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
mAnimatorExecute = false;
mCurrentPosition = position;
}
@Override
public void onAnimationStart(Animator animation) {
mAnimatorExecute = true;
// 把當(dāng)前的 tab 傳到外面
mAdapter.menuOpen(tabView);
}
});
alphaAnimator.start();
}
3、寫Adapter提供數(shù)據(jù)源
這個(gè)時(shí)候我們的效果還是死的砚作，我么得給他設(shè)置寫一個(gè)Adapter,現(xiàn)實(shí)情況下窘奏，我們的數(shù)據(jù)也是通常要去網(wǎng)絡(luò)獲取，所以不能寫死葫录。
>BaseMenuAdapter
/**
* 篩選菜單的 Adapter
*/
public abstract class BaseMenuAdapter {
// 獲取總共有多少條
public abstract int getCount();
// 獲取當(dāng)前的TabView
public abstract View getTabView(int position, ViewGroup parent);
// 獲取當(dāng)前的菜單內(nèi)容
public abstract View getMenuView(int position, ViewGroup parent);
/**
* 菜單打開
* @param tabView
*/
public void menuOpen(View tabView) {
}
/**
* 菜單關(guān)閉
* @param tabView
*/
public void menuClose(View tabView) {
}
}
具體的Adapter：
public class ListScreenMenuAdapter extends BaseMenuAdapter{
private Context mContext;
public ListScreenMenuAdapter(Context context){
this.mContext = context;
}
private String[] mItems ={"附近","美食","智能排序","篩選"};
@Override
public int getCount() {
return mItems.length;
}
@Override
public View getTabView(int position, ViewGroup parent) {
TextView tabView = (TextView) LayoutInflater.from(mContext).inflate(R.layout.ui_list_data_screen_tab,parent,false);
tabView.setText(mItems[position]);
tabView.setTextColor(Color.BLACK);
return tabView;
}
@Override
public View getMenuView(int position, ViewGroup parent) {
// 真正開發(fā)過程中着裹，不同的位置顯示的布局不一樣
TextView menuView = (TextView) LayoutInflater.from(mContext).inflate(R.layout.ui_list_data_screen_menu,parent,false);
menuView.setText(mItems[position]);
return menuView;
}
@Override
public void menuClose(View tabView) {
TextView tabTv = (TextView) tabView;
tabTv.setTextColor(Color.BLACK);
}
@Override
public void menuOpen(View tabView) {
TextView tabTv = (TextView) tabView;
tabTv.setTextColor(Color.RED);
}
}
有了Adapter之后，我們就可以給ListDataScreenView 以下方法米同，是不是感覺跟ListView很像骇扇。
/**
* 設(shè)置 Adapter
*
* @param adapter
*/
public void setAdapter(BaseMenuAdapter adapter) {
this.mAdapter = adapter;
// 獲取有多少條
int count = mAdapter.getCount();
for (int i = 0; i < count; i++) {
// 獲取菜單的Tab
View tabView = mAdapter.getTabView(i, mMenuTabView);
mMenuTabView.addView(tabView);//加一個(gè)TextView
LinearLayout.LayoutParams params = (LayoutParams) tabView.getLayoutParams();
params.weight = 1;
tabView.setLayoutParams(params);
// 設(shè)置tab點(diǎn)擊事件
setTabClick(tabView, i);
// 獲取菜單的內(nèi)容(一個(gè)TextView)
View menuView = mAdapter.getMenuView(i, mMenuContainerView);
menuView.setVisibility(GONE);
mMenuContainerView.addView(menuView);
}
// 內(nèi)容還沒有顯示出來,打開的時(shí)候顯示當(dāng)前位置的菜單摔竿，關(guān)閉的時(shí)候隱藏，陰影點(diǎn)擊應(yīng)該要關(guān)閉菜單
// 動畫在執(zhí)行的情況下就不要在響應(yīng)動畫事件
// 打開和關(guān)閉 變化tab的顯示 少孝， 肯定不能把代碼寫到 ListDataScreen 里面來
// 當(dāng)菜單是打開的狀態(tài) 不要執(zhí)行動畫只要切換
}
最后看下我們實(shí)現(xiàn)的效果：
GI88F.gif
