在寫商城或者其他類型的項目時套利，通常會遇到各種選擇列表『姿＃可能剛開始的時候還多人都是寫死布局肉迫，因為沒有寫死布局干不來的事，但是這樣太嘍了稿黄，不如親手打造一個萬能的喊衫，不用再寫死布局。
一杆怕、創(chuàng)建ListDataScreenView繼承LinearLayout
public class ListDataScreenView extends LinearLayout {
private Context mContext;
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;
}
二族购、實例化布局 （組合控件）
private void initLayout() {
// 1. 先創(chuàng)建一個 xml 布局 ，再加載陵珍，findViewById
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)建陰影 可以不用設置 LayoutParams 默認就是 MATCH_PARENT 寝杖，MATCH_PARENT
mShadowView = new View(mContext);
mShadowView.setBackgroundColor(mShadowColor);
mShadowView.setAlpha(0f);
mShadowView.setOnClickListener(this);
mShadowView.setVisibility(GONE);
mMenuMiddleView.addView(mShadowView);
// 創(chuàng)建菜單用來存放菜單內(nèi)容
mMenuContainerView = new FrameLayout(mContext);
mMenuContainerView.setBackgroundColor(Color.WHITE);
mMenuMiddleView.addView(mMenuContainerView);
}
三、重寫onMeasure
@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)容的高度應該不是全部 應該是整個 View的 75%
mMenuContainerHeight = (int) (height * 75f / 100);
ViewGroup.LayoutParams params = mMenuContainerView.getLayoutParams();
params.height = mMenuContainerHeight;
mMenuContainerView.setLayoutParams(params);
// 進來的時候陰影不顯示 互纯，內(nèi)容也是不顯示的（把它移上去）
mMenuContainerView.setTranslationY(-mMenuContainerHeight);
}
}
四瑟幕、 設置 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);
LinearLayout.LayoutParams params = (LayoutParams) tabView.getLayoutParams();
params.weight = 1;
tabView.setLayoutParams(params);
// 設置tab點擊事件
setTabClick(tabView, i);
// 獲取菜單的內(nèi)容
View menuView = mAdapter.getMenuView(i, mMenuContainerView);
menuView.setVisibility(GONE);
mMenuContainerView.addView(menuView);
}
}
五、關閉和打開方法
/**
* 關閉菜單
*/
private void closeMenu() {
if (mAnimatorExecute) {
return;
}
// 關閉動畫 位移動畫 透明度動畫
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);
// 要等關閉動畫執(zhí)行完才能去隱藏當前菜單
alphaAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
View menuView = mMenuContainerView.getChildAt(mCurrentPosition);
menuView.setVisibility(View.GONE);
mCurrentPosition = -1;
mShadowView.setVisibility(GONE);
mAnimatorExecute = false;
}
@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) {
if (mAnimatorExecute) {
return;
}
mShadowView.setVisibility(View.VISIBLE);
// 獲取當前位置顯示當前菜單，菜單是加到了菜單容器
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;
// 把當前的 tab 傳到外面
mAdapter.menuOpen(tabView);
}
});
alphaAnimator.start();
}
六收苏、 設置tab的點擊
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) {
// 打開了,關閉
closeMenu();
} else {
// 切換一下顯示
View currentMenu = mMenuContainerView.getChildAt(mCurrentPosition);
currentMenu.setVisibility(View.GONE);
mAdapter.menuClose(mMenuTabView.getChildAt(mCurrentPosition));
mCurrentPosition = position;
currentMenu = mMenuContainerView.getChildAt(mCurrentPosition);
currentMenu.setVisibility(View.VISIBLE);
mAdapter.menuOpen(mMenuTabView.getChildAt(mCurrentPosition));
}
}
}
});
}
七亿卤、創(chuàng)建Adapter
public abstract class BaseMenuAdapter {
// 獲取總共有多少條
public abstract int getCount();
// 獲取當前的TabView
public abstract View getTabView(int position, ViewGroup parent);
// 獲取當前的菜單內(nèi)容
public abstract View getMenuView(int position,ViewGroup parent);
/**
* 菜單打開
* @param tabView
*/
public void menuOpen(View tabView) {
}
/**
* 菜單關閉
* @param tabView
*/
public void menuClose(View tabView) {
}
}
八、使用
< com.demo.view.ListDataScreenView
android:id="@+id/list_data_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
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);
}
}
