Android自定义控件简单实现ratingbar效果

先上图：

一开始让我自定义控件我是拒绝的，因为android很早以前就有一个控件ratingbar，但是设置样式的时候我发现把图片设置小一点就显示不全，一直找不到解办法!（可以设置系统的自带的小样式），反正就是无法任意的改变星星的大小！反正很坑啊。

下面来描述这个控件需要实现的功能：

1：水平放置，布局文件里面可以设置星星图标和背景星星，宽高，边距，星星数量，当前星级

2；实现点击效果

3：添加点击的监听器

下面实现第一步：

定义属性

<!--自定星级控件-->

<declare-styleable name="StarView">

    <attr name="mImageWidth" format="dimension"/>

    <attr name="mImageHeight" format="dimension" />

    <attr name="mDefaultImageId" format="reference" />

    <attr name="mClickImageId" format="reference" />

    <attr name="mMargin" format="dimension" />

    <attr name="mStarNum" format="integer" />

    <attr name="mStarChoose" format="integer" />

</declare-styleable>

本控件继承线性布局的starbar，代码过于简单，直接贴出来

package cn.ihealthcom.ihealth.widget;

import android.content.Context;

import android.content.res.TypedArray;

import android.util.AttributeSet;

import android.view.View;

import android.widget.ImageView;

import android.widget.LinearLayout;

import cn.ihealthcom.ihealth.R;

/**

 * 简单实现星级评选控件：内部填充多个ImageView

 * 继承LinearLayout 设置水平方向

 * Created by qiuchunjia on 2016/4/12.

 */

public class StarView extends LinearLayout {

    private int mImageWidth = ;  //图片设置默认的宽度

    private int mImageHeight = ; //图片设置默认的高度

    private int mDefaultImageId = R.drawable.ic_launcher;

    private int mClickImageId = R.drawable.ic_launcher;

    private int mMargin = ;   //图片之间默认的margin

    private int mStarNum = ;  //星星默认的个数

    private int mStarChoose = ;  //默认默认是三颗星

    private boolean isClick = true;

    private OnStarItemClickListener mStarItemClickListener;

    public StarView(Context context, AttributeSet attrs) {

        super(context, attrs);

        initData(context, attrs);

    }

    public StarView(Context context, AttributeSet attrs, int defStyleAttr) {

        super(context, attrs, defStyleAttr);

        initData(context, attrs);

    }

    /**

     * 初始化数据

     *

     * @param context

     * @param attrs

     */

    private void initData(Context context, AttributeSet attrs) {

        this.setOrientation(HORIZONTAL);  //设置水平

        TypedArray a = context.getTheme().obtainStyledAttributes(attrs,

                R.styleable.StarView, , );

        int n = a.getIndexCount();

        for (int i = ; i < n; i++) {

            int attr = a.getIndex(i);

            switch (attr) {

                case R.styleable.StarView_mImageWidth:

                    mImageWidth = (int) a.getDimension(attr, mImageWidth);

                    break;

                case R.styleable.StarView_mImageHeight:

                    mImageHeight = (int) a.getDimension(attr, mImageHeight);

                    break;

                case R.styleable.StarView_mDefaultImageId:

                    mDefaultImageId = a.getResourceId(attr, mDefaultImageId);

                    break;

                case R.styleable.StarView_mClickImageId:

                    mClickImageId = a.getResourceId(attr, mClickImageId);

                    break;

                case R.styleable.StarView_mMargin:

                    mMargin = (int) a.getDimension(attr, mMargin);

                    break;

                case R.styleable.StarView_mStarNum:

                    mStarNum = a.getInt(attr, mStarNum);

                    break;

                case R.styleable.StarView_mStarChoose:

                    mStarChoose = a.getInt(attr, mStarChoose);

                    break;

            }

        }

        a.recycle();

    }

    @Override

    protected void onFinishInflate() {

        super.onFinishInflate();

        setStarNum(mStarNum);  //设置个数

    }

    /**

     * 设置星星数量

     *

     * @param number

     */

    public void setStarNum(int number) {

        if (number <= ) {

            try {

                throw new Exception("设置的数据不能小于等于零");

            } catch (Exception e) {

                e.printStackTrace();

            }

        }

        this.removeAllViews(); //清空所有view

        for (int i = ; i < number; i++) {

            ImageView imageView = new ImageView(getContext());

            final LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(mImageWidth, mImageHeight);

            layoutParams.leftMargin = mMargin;

            layoutParams.rightMargin = mMargin;

            imageView.setLayoutParams(layoutParams);

            this.addView(imageView);

            imageView.setImageResource(mDefaultImageId);

            setStarOnClick(imageView, i);

        }

        setCurrentChoose(mStarChoose);  //设置当前选择

    }

    /**

     * 设置点击事件

     *

     * @param imageView

     * @param i

     */

    private void setStarOnClick(final ImageView imageView, final int i) {

        if (imageView != null) {

            imageView.setOnClickListener(new OnClickListener() {

                @Override

                public void onClick(View view) {

                    resetDefaultImage();

                    setCurrentChoose(i+);

                    if (mStarItemClickListener != null) {

                        mStarItemClickListener.onItemClick(imageView, i);

                    }

                }

            });

        }

    }

    /**

     * 设置当前选择

     *

     * @param index

     */

    private void setCurrentChoose(int index) {

        if(isClick){

            for (int i = ; i < index; i++) {

                ImageView imageView = (ImageView) getChildAt(i);

                imageView.setImageResource(mClickImageId);

            }

        }

    }

    /**

     * 重置默认为默认的图片

     */

    private void resetDefaultImage() {

        int cNum = getChildCount();

        for (int i = ; i < cNum; i++) {

            ImageView imageView = (ImageView) getChildAt(i);

            imageView.setImageResource(mDefaultImageId);

        }

    }

    public int getImageWidth() {

        return mImageWidth;

    }

    public void setImageWidth(int mImageWidht) {

        this.mImageWidth = mImageWidht;

    }

    public int getImageHeight() {

        return mImageHeight;

    }

    public void setImageHeight(int mImageHeight) {

        this.mImageHeight = mImageHeight;

    }

    public int getDefaultImageId() {

        return mDefaultImageId;

    }

    public void setDefaultImageId(int resouceId) {

        this.mDefaultImageId = mDefaultImageId;

    }

    public int getClickImageId() {

        return mClickImageId;

    }

    public void setClickImageId(int mClickImageId) {

        this.mClickImageId = mClickImageId;

    }

    public OnStarItemClickListener getStarItemClickListener() {

        return mStarItemClickListener;

    }

    public void setmStarItemClickListener(OnStarItemClickListener mStarItemClickListener) {

        this.mStarItemClickListener = mStarItemClickListener;

    }

    /**

     * 星星点击事件

     */

    public interface OnStarItemClickListener {

        public void onItemClick(View view, int pos);

    }

}

代码中只实现了ratingbar常用的功能，能满足项目的需求.xml使用

<cn.ihealthcom.ihealth.widget.StarView

    android:layout_alignParentRight="true"

    android:layout_marginLeft="5dp"

    android:layout_marginRight="10dp"

    android:id="@+id/start_view"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    fresco:mClickImageId="@mipmap/star_y"

    fresco:mDefaultImageId="@mipmap/star_n"

    fresco:mImageHeight="@dimen/margin_15dp"

    fresco:mImageWidth="@dimen/margin_15dp"

    fresco:mMargin="2dp"

    fresco:mStarChoose=""

    fresco:mStarNum="" />

下面来看看同一张切图的设置不同的宽高显示的效果

代码和功能都比较简单就不做过多的解释了

巴特西

Android自定义控件简单实现ratingbar效果

最新文章

热门文章