自定義view(十二)封裝一個通用的列表選擇器

在寫商城或者其他類型的項目時，通常會遇到各種選擇列表。可能剛開始的時候還多人都是寫死布局，因為沒有寫死布局干不來的事，但是這樣太嘍了，不如親手打造一個萬能的，不用再寫死布局。

一、創(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)建陰影 可以不用設(shè)置 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)容的高度應(yīng)該不是全部  應(yīng)該是整個 View的 75%
        mMenuContainerHeight = (int) (height * 75f / 100);
        ViewGroup.LayoutParams params = mMenuContainerView.getLayoutParams();
        params.height = mMenuContainerHeight;
        mMenuContainerView.setLayoutParams(params);
        // 進來的時候陰影不顯示 ，內(nèi)容也是不顯示的（把它移上去）
        mMenuContainerView.setTranslationY(-mMenuContainerHeight);
    }
}

四、 設(shè)置 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);

        // 設(shè)置tab點擊事件
        setTabClick(tabView, i);

        // 獲取菜單的內(nèi)容
        View menuView = mAdapter.getMenuView(i, mMenuContainerView);
        menuView.setVisibility(GONE);
        mMenuContainerView.addView(menuView);
    }

}

五、關(guān)閉和打開方法

 /**
 * 關(guān)閉菜單
 */
private void closeMenu() {
    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í)行完才能去隱藏當前菜單
    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();
}

六、 設(shè)置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) {
                    // 打開了,關(guān)閉
                    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) {

}

/**
 * 菜單關(guān)閉
 * @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應(yīng)用

  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);
}
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容