Android 字母侧栏索引菜单

最近在做选择城市的列表，需要用到那个字母索引的，觉得这个东西不难就想偷偷懒百度算了，后来找了好几个都感觉写的太复杂了，想想还行自己写一个简单一点的算了，于是就有了下面的字母侧栏索引菜单控件了。

我写的这个很简单，基本都是LinearLayout和TextView,反正就是简单的不能再简单了

有两部分，一个是侧栏控件SidebarView，一个是侧栏子控件SidebarItemView

效果图：

SideBarItemView控件代码：

public class SidebarItemView extends LinearLayout {
    private Context mContext;
    private LinearLayout vLayout;
    private TextView vTitle;
    private int screenWidth;

    public SidebarItemView(Context context) {
        this(context, null, 0);
    }

    public SidebarItemView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SidebarItemView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {
        mContext = context;
        LayoutInflater.from(mContext).inflate(R.layout.wg_sidebar_item, this);
        vLayout = (LinearLayout) findViewById(R.id.wg_sidebar_item_root);
        vTitle = (TextView) findViewById(R.id.wg_sidebar_item_title);
        screenWidth = getScreenWidth();
        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(screenWidth / 4, LayoutParams.WRAP_CONTENT);
        vLayout.setLayoutParams(lp);
    }

    /**
     * 获取屏幕的宽度（单位：px）
     *
     * @return 屏幕宽px
     */
    public int getScreenWidth() {
        WindowManager windowManager = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics dm = new DisplayMetrics();// 创建了一张白纸
        windowManager.getDefaultDisplay().getMetrics(dm);// 给白纸设置宽高
        return dm.widthPixels;
    }

    /**
     * 设置值
     *
     * @param text
     */
    public void setText(String text) {
        vTitle.setText(text);
    }

    /**
     * 设置动画
     */
    public void setItemAnimation() {
        setAnimation(-(screenWidth / 12), -(screenWidth / 12));
    }

    /**
     * 设置动画
     */
    public void setItemAnimation2() {
        setAnimation(-(screenWidth / 22), -(screenWidth / 22));
    }

    /**
     * 设置动画
     * @param fromXDelta
     * @param toXDelta
     */
    private void setAnimation(float fromXDelta, float toXDelta) {
        AnimationSet animationSet = new AnimationSet(true);
        final TranslateAnimation animation = new TranslateAnimation(fromXDelta, toXDelta, 0, 0);
        animation.setDuration(50);//设置动画持续时间
        animation.setFillAfter(false);//动画结束后是否回到原位
        animationSet.addAnimation(animation);
        vTitle.startAnimation(animation);
        animation.startNow();
    }
}

SideBarItemView控件布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/wg_sidebar_item_root"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/wg_sidebar_item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="-"
        android:gravity="center"
        android:textColor="#666"
        android:layout_gravity="right"
        android:layout_marginRight="@dimen/space_8"
        android:padding="@dimen/space_4"
        android:textSize="@dimen/font_size_22px" />
</LinearLayout>

SidebarView控件代码：

public class SidebarView extends LinearLayout implements View.OnTouchListener {
    private Context mContext;
    private LinearLayout vLayout;
    private TextView vTitle;

    public SidebarView(Context context) {
        this(context, null, 0);
    }

    public SidebarView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SidebarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {
        mContext = context;
        LayoutInflater.from(mContext).inflate(R.layout.wg_sidebar, this);
        vLayout = (LinearLayout) findViewById(R.id.wg_sidebar_layout);
        vTitle = (TextView) findViewById(R.id.wg_sidebar_title);

        vLayout.setOnTouchListener(this);
        List<String> listData = new ArrayList<>();
        listData.add("A");
        listData.add("B");
        listData.add("C");
        listData.add("D");
        listData.add("E");
        listData.add("F");
        listData.add("G");
        listData.add("H");
        listData.add("I");
        listData.add("J");
        listData.add("K");
        listData.add("L");
        listData.add("M");
        listData.add("N");
        listData.add("O");
        listData.add("P");
        listData.add("Q");
        listData.add("R");
        listData.add("S");
        listData.add("T");
        listData.add("U");
        listData.add("V");
        listData.add("W");
        listData.add("X");
        listData.add("Y");
        listData.add("Z");
        setSideDae(listData);
    }

    /**
     * 设置侧栏数据
     *
     * @param listData
     */
    public void setSideDae(List<String> listData) {
        vLayout.removeAllViews();
        for (String str : listData) {
            SidebarItemView tv = new SidebarItemView(mContext);
            tv.setTag(str);
            tv.setText(str);
            vLayout.addView(tv);
        }
    }

    private boolean isDown = false;

    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
            isDown = true;
        } else if (motionEvent.getAction() == MotionEvent.ACTION_UP || motionEvent.getAction() == MotionEvent.ACTION_CANCEL) {
            vTitle.setVisibility(View.GONE);
            isDown = false;
        }
        transformValue((LinearLayout) view, motionEvent);
        return true;
    }

    /**
     * 转换获取值
     *
     * @param layout
     * @param motionEvent
     */
    private void transformValue(LinearLayout layout, MotionEvent motionEvent) {
        SidebarItemView textView = (SidebarItemView) layout.getChildAt(0);
        float fistViewTop = textView.getTop();
        float itemHeight = textView.getMeasuredHeight();
        float currentY = motionEvent.getY();
        //不超过顶部和顶部
        if (motionEvent.getY() > 0 && motionEvent.getY() < layout.getMeasuredHeight()) {
            //不超过子控件的范围值
            if (currentY > fistViewTop && currentY < (fistViewTop + itemHeight * layout.getChildCount())) {
                float rang = currentY - fistViewTop;
                int index = (int) (rang / itemHeight);
                Log.e("kawa", "rang:" + rang + "_index:" + index + "_itemHeight:" + itemHeight);
                vTitle.setText((String) (layout.getChildAt(index).getTag()));
                if (listener!=null){
                    listener.onSelectItem(index,(String) (layout.getChildAt(index).getTag()));
                }
                if (isDown) {
                    vTitle.setVisibility(View.VISIBLE);
                    setAnimation(index, layout);
                }
            }
        }
    }

    /**
     * 设置动画
     *
     * @param index
     * @param layout
     */
    private void setAnimation(int index, LinearLayout layout) {
        if (index > 1 && index < layout.getChildCount() - 2) {
            SidebarItemView tv1 = (SidebarItemView) layout.getChildAt(index - 1);
            SidebarItemView tv2 = (SidebarItemView) layout.getChildAt(index);
            SidebarItemView tv3 = (SidebarItemView) layout.getChildAt(index + 1);
            tv1.setItemAnimation2();
            tv2.setItemAnimation();
            tv3.setItemAnimation2();
        } else {
            //第一个的
            if (index == 0) {
                SidebarItemView tv1 = (SidebarItemView) layout.getChildAt(index);
                SidebarItemView tv2 = (SidebarItemView) layout.getChildAt(index + 1);
                tv1.setItemAnimation();
                tv2.setItemAnimation2();
            }
            //最后一个的
            else {
                SidebarItemView tv1 = (SidebarItemView) layout.getChildAt(index);
                SidebarItemView tv2 = (SidebarItemView) layout.getChildAt(index - 1);
                tv1.setItemAnimation();
                tv2.setItemAnimation2();
            }
        }
    }

    private OnSidebarViewListener listener;

    public void setOnSidebarViewListener(OnSidebarViewListener l) {
        listener = l;
    }

    public interface OnSidebarViewListener {
        void onSelectItem(int index, String value);
    }
}

SidebarView控件布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffffff"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/wg_sidebar_layout"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:gravity="center"
        android:orientation="vertical">

    </LinearLayout>

    <TextView
        android:id="@+id/wg_sidebar_title"
        android:layout_width="@dimen/space_120"
        android:layout_height="@dimen/space_120"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="-"
        android:textSize="@dimen/font_size_30px"
        android:textColor="#fff"
        android:visibility="gone"
        android:background="#666"
        android:padding="@dimen/space_24"/>
</RelativeLayout>

用法，将你的控件引入到需要的页面就行

 <com.kawa.qkplug.widget.SidebarView
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

上面只是粗略写了一下，具体样式自己根据实际情况改改就行了