Android自定义点击下拉列表

以前看到点击下拉列表的以为是Spinner控件呢,去发现他们俩有很多不一样(下面图中所示),就自定义了一个View,大体实现了这个效果。
效果图:Demo效果图
其实实现的思路还是比较清晰的,就是点击一下就会显示一个下拉的列表,或是两个列表,我这是点击那个箭头就会显示下面的一个试图,不过是啥视图,只要包含到一个GroupView里面就可以,实现起来就是先把下面的试图给隐藏,然后点击就显示出来而且上面的箭头在改变的时候也要加上动画。
把代码贴出来:

package com.liushuai.com.myapplication.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.liushuai.com.myapplication.R;

/**
 * 自定义下拉列表,自己往里面加视图必须只有一个视图
 * Created by LiuShuai on 2016/3/3.
 */
public class MySpinnerSelect extends LinearLayout implements View.OnClickListener {

    /**
     * 头部点击的那个布局
     */
    private LinearLayout mHeadLinearLayout;
    /**
     * 头部布局中的文字
     */
    private TextView mTitleTextView;
    /**
     * 头部布局中的图标
     */
    private ImageView mIconImageView;

    /**
     * 其包含的视图,只能有一个总的
     */
    private View mContentView;

    /**
     * 是否加载过一次layout
     */
    private boolean loadOnce;

    /**
     * 记录点击的状态
     */
    private int i = 1;
    private static final String TAG = "MySpinnerSelect";

    /**
     * 自定义属性的值
     */
    private int mBackgroundColor, mTextColor, mSelectBackgroundColor, mSelectTextColor, mIconSrc;
    private float mViewWidth, mViewHeight;

    public MySpinnerSelect(Context context, AttributeSet attrs) {
        super(context, attrs);
        mHeadLinearLayout = (LinearLayout) LayoutInflater.from(context).inflate(R.layout.spinner_top, null, true);
        mTitleTextView = (TextView) mHeadLinearLayout.findViewById(R.id.spinner_title);
        mIconImageView = (ImageView) mHeadLinearLayout.findViewById(R.id.spinner_icon);


        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MySpinnerSelect);
        mBackgroundColor = typedArray.getColor(R.styleable.MySpinnerSelect_backgroundColor, getResources().getColor(R.color.white));
        mTextColor = typedArray.getColor(R.styleable.MySpinnerSelect_textColor, getResources().getColor(R.color.blank));
        mSelectBackgroundColor = typedArray.getColor(R.styleable.MySpinnerSelect_selectBackgroundColor, getResources().getColor(R.color.white));
        mSelectTextColor = typedArray.getColor(R.styleable.MySpinnerSelect_selectTextColor, getResources().getColor(R.color.blank));
        mIconSrc = typedArray.getResourceId(R.styleable.MySpinnerSelect_iconSrc, R.mipmap.icon_arrow_down);
        mViewWidth = typedArray.getDimensionPixelSize(R.styleable.MySpinnerSelect_viewWidth, 100);
        mViewHeight = typedArray.getDimensionPixelSize(R.styleable.MySpinnerSelect_viewHeight, 60);

        mHeadLinearLayout.setBackgroundColor(mBackgroundColor);
        mTitleTextView.setTextColor(mTextColor);
        mIconImageView.setImageResource(mIconSrc);

        LinearLayout.LayoutParams layoutParams = new LayoutParams((int) mViewWidth, (int) mViewHeight);
        mHeadLinearLayout.setLayoutParams(layoutParams);
        setOrientation(VERTICAL);
        addView(mHeadLinearLayout, 0);
        mHeadLinearLayout.setOnClickListener(this);

        typedArray.recycle();
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        if (changed && !loadOnce) {
            mContentView = getChildAt(1);
            if (mContentView != null)
                mContentView.setVisibility(GONE);
            loadOnce = true;

        }
    }

    public int getBackgroundColor() {
        return mBackgroundColor;
    }


    public int getIconSrc() {
        return mIconSrc;
    }

    public int getSelectBackgroundColor() {
        return mSelectBackgroundColor;
    }

    public int getSelectTextColor() {
        return mSelectTextColor;
    }

    public int getTextColor() {
        return mTextColor;
    }


    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.spinner_top:
                changeView();
                break;
        }
    }

    @Override
    public void setBackgroundColor(int backgroundColor) {
        mBackgroundColor = backgroundColor;
    }


    public void setIconSrc(int iconSrc) {
        mIconSrc = iconSrc;
    }

    public void setSelectBackgroundColor(int selectBackgroundColor) {
        mSelectBackgroundColor = selectBackgroundColor;
    }

    public void setSelectTextColor(int selectTextColor) {
        mSelectTextColor = selectTextColor;
    }

    public void setTextColor(int textColor) {
        mTextColor = textColor;
    }

    public float getViewHeight() {
        return mViewHeight;
    }

    public float getViewWidth() {
        return mViewWidth;
    }


    public void setViewHeight(float viewHeight) {
        mViewHeight = viewHeight;
    }

    public void setViewWidth(float viewWidth) {
        mViewWidth = viewWidth;
    }

    /**
     * 改变视图的状态,发生在点击事件中(提供给外部想让其改变时,调用该方法)
     */
    public void changeView() {
        changeViewVisiblity();
        changeIconAnimation();
        i *= -1;
    }

    /**
     * 改变视图的状态
     */
    private void changeViewVisiblity() {
        //i>0说明包含的视图是隐藏的,需要把它显示出来
        if (i > 0) {
            if (mContentView != null)
                mContentView.setVisibility(VISIBLE);
            mHeadLinearLayout.setBackgroundColor(mSelectBackgroundColor);
            mTitleTextView.setTextColor(mSelectTextColor);
        } else if (i < 0) {
            if (mContentView != null)
                mContentView.setVisibility(GONE);
            mHeadLinearLayout.setBackgroundColor(mBackgroundColor);
            mTitleTextView.setTextColor(mTextColor);
        }
    }

    /**
     * 根据当前状态改变上面箭头的方向
     */
    private void changeIconAnimation() {
        Log.i(TAG, "-->changeIconAnimation");
        float pivotX = mIconImageView.getWidth() / 2f;
        float pivotY = mIconImageView.getHeight() / 2f;
        float fromDegree = 0f;
        float toDegree = 0f;
        if (i > 0) {
            fromDegree = 0f;
            toDegree = 180f;
        } else if (i < 0) {
            fromDegree = 180f;
            toDegree = 360f;
        }


        RotateAnimation animation = new RotateAnimation(fromDegree, toDegree, pivotX, pivotY);

        animation.setDuration(100);
        animation.setFillAfter(true);

        mIconImageView.startAnimation(animation);
    }
}

那个头部的View的layout文件代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:id="@+id/spinner_top"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="100dp"
    android:layout_height="60dp"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/spinner_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="3"
        android:gravity="center"
        android:text="点击"/>

    <ImageView
        android:id="@+id/spinner_icon"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:src="@mipmap/icon_arrow_down"
        />
</LinearLayout>

另外要在values文件夹中新建一个attrs.xml存放自定义的属性:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    //自定义控件的属性设置
    <declare-styleable name="MySpinnerSelect">
        <attr name="backgroundColor" format="color"/>
        <attr name="textColor" format="color"/>
        <attr name="selectBackgroundColor" format="color"/>
        <attr name="selectTextColor" format="color"/>
        <attr name="viewWidth" format="dimension"/>
        <attr name="viewHeight" format="dimension"/>
        <attr name="iconSrc" format="reference"/>
    </declare-styleable>
</resources>

好啦这样就可以自己改变他的背景和字体颜色和点击后的颜色了,还可以设置他的宽高。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值