自定义属性之LinearLayout ImageView TextView模拟图片文字按钮

一、资源文件：

1、文字选择器：

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" android:color="#FF111111"/>

    <!-- pressed -->

    <item android:state_focused="true" android:color="#FF222222"/>

    <!-- focused -->

    <item android:state_selected="true" android:color="#FF333333"/>

    <!-- selected -->

    <item android:state_active="true" android:color="#FF444444"/>

    <!-- active -->

    <item android:state_checkable="true" android:color="#FF555555"/>

    <!-- checkable -->

    <item android:state_checked="true" android:color="#FF666666"/>

    <!-- checked -->

    <item android:state_enabled="true" android:color="#FF777777"/>

    <!-- enabled -->

    <item android:state_window_focused="true" android:color="#FF888888"/>

    <!-- window_focused -->

</selector>

　　2、背景选择器：

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle" >

    <stroke

        android:width="0.5dip"

        android:color="#ff9d9d9d" />

    <corners android:radius="2dip" >

    </corners>

    <padding android:left="5dip" android:top="5dip" android:right="5dip" android:bottom="5dip"/>

    <gradient android:startColor="#ff9d9d9d"

        android:centerColor="#ff9e9e9e"

        android:endColor="#ff9d9d9d"

        />

</shape>

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle" >

    <stroke

        android:width="0.5dip"

        android:color="#ff505050" />

    <corners android:radius="2dip" >

    </corners>

    <padding android:left="5dip" android:top="5dip" android:right="5dip" android:bottom="5dip"/>

    <gradient android:startColor="#ff404040"

        android:centerColor="#ff383838"

        android:endColor="#ff404040"

        />

</shape>

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/item_background" android:state_enabled="true" android:state_window_focused="false"/>

    <item android:drawable="@drawable/item_background_selected" android:state_pressed="true"/>

    <item android:drawable="@drawable/item_background" android:state_focused="true"/>

    <item android:drawable="@drawable/item_background"/>

</selector>

3、属性文件：

 <!-- imageview text -->

    <declare-styleable name="ImageViewText">

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

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

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

        <attr name="text" format="string" />

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

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

        <!-- 取值  left top right bottom  -->

        <attr name="text_direction" format="string" />

        <attr name="state_normal" format="color" />

        <attr name="state_pressed" format="color" />

        <attr name="state_selected" format="color" />

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

    </declare-styleable>

二、自定义图片文字：

　　1、采用后台代码实现：

public class ImageViewText extends LinearLayout {

    private ImageView mImageView;

    private TextView mTextView;

    private View view;

    public ImageViewText(Context context) {

        super(context);

        initView(context, null);

    }

    public ImageViewText(Context context, AttributeSet attrs) {

        super(context, attrs);

        initView(context, attrs);

    }

    private void initView(Context context, AttributeSet attrs) {

        mImageView = new ImageView(context);

        mTextView = new TextView(context);

        view = this;

        view.setBackgroundColor(Color.GRAY);

        this.setGravity(Gravity.CENTER_VERTICAL | Gravity.LEFT);

        this.setPadding(5, 5, 5, 5);

        view.setClickable(true);

        view.setFocusable(true);

        view.setOnClickListener(ocl);

//        view.setOnTouchListener(otl);

        TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.ImageViewText);

        float textSize = typedArray.getDimension(R.styleable.ImageViewText_textSize, 14);

        Logger.getLogger().e("size: "+typedArray.getDimensionPixelSize(R.styleable.ImageViewText_textSize, 0));

//      textSize = textSize/3;

        String text = typedArray.getString(R.styleable.ImageViewText_text);

        float textMarginLeft = typedArray.getDimension(R.styleable.ImageViewText_textMargin, 10);

        float image_width = typedArray.getDimension(R.styleable.ImageViewText_image_width, 10);

        float image_height = typedArray.getDimension(R.styleable.ImageViewText_image_height, 10);

        int textColor = typedArray.getColor(R.styleable.ImageViewText_textColor, Color.TRANSPARENT);

        if(textColor!=Color.TRANSPARENT){

             mTextView.setTextColor(textColor);

        }else {

            int pressed = typedArray.getColor(R.styleable.ImageViewText_state_pressed, Color.BLACK);

            int normal = typedArray.getColor(R.styleable.ImageViewText_state_normal, Color.BLACK);

            int selected = typedArray.getColor(R.styleable.ImageViewText_state_selected, Color.BLACK);

            mTextView.setTextColor(createColorStateList(normal,pressed,selected));

        }

        int background = typedArray.getResourceId(R.styleable.ImageViewText_view_background, 0);

        int image_src = typedArray.getResourceId(R.styleable.ImageViewText_image_src, 0);

        if (image_src!=0) {

            mImageView.setBackgroundResource(image_src);

        }

        if (background!=0) {

            view.setBackgroundResource(background);

        }

        String text_direction = typedArray.getString(R.styleable.ImageViewText_text_direction);

        mTextView.setText(text);

        mTextView.setTextSize(textSize);

        LayoutParams imageLayoutParams = new LayoutParams((int) image_width,

                (int) image_height);

        Logger.getLogger().e("size: "+textSize+" w: "+image_width+" h: "+image_height );

        Logger.getLogger().e("size: "+textSize+" w: "+DensityUtil.dip2px(context, image_width)+" h: "+DensityUtil.dip2px(context, image_height) );

        mImageView.setLayoutParams(imageLayoutParams);

        typedArray.recycle();//

        LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,

                LayoutParams.WRAP_CONTENT);

        if (TextDirection.LEFT.equals(text_direction)) {

            this.setOrientation(HORIZONTAL);

            params.rightMargin = (int) textMarginLeft;

            mTextView.setLayoutParams(params);

            addView(mTextView);

            addView(mImageView);

        } else if (TextDirection.RIGHT.equals(text_direction)) {

            this.setOrientation(HORIZONTAL);

            params.leftMargin = (int) textMarginLeft;

            mTextView.setLayoutParams(params);

            addView(mImageView);

            addView(mTextView);

        } else if (TextDirection.TOP.equals(text_direction)) {

            this.setOrientation(VERTICAL);

            params.bottomMargin = (int) textMarginLeft;

            mTextView.setLayoutParams(params);

            addView(mTextView);

            addView(mImageView);

        } else if (TextDirection.BOTTOM.equals(text_direction)) {

            this.setOrientation(VERTICAL);

            params.topMargin = (int) textMarginLeft;

            mTextView.setLayoutParams(params);

            addView(mImageView);

            addView(mTextView);

        }

    }

    public OnClickListener ocl = new OnClickListener() {

        @Override

        public void onClick(View v) {

            if (listener != null) {

                listener.onClick(v);

            }

        }

    };

    public OnClickListenerView listener;

    public void setOnClickListener(OnClickListenerView listenerView) {

        this.listener = listenerView;

    }

    public interface OnClickListenerView {

        public void onClick(View v);

    }

    /** 对TextView设置不同状态时其文字颜色。 */

    private ColorStateList createColorStateList(int normal, int pressed,

            int selected) {

        int[] colors = new int[] { pressed,  selected, normal };

        int[][] states = new int[3][];

        states[0] = new int[] { android.R.attr.state_pressed,

                android.R.attr.state_enabled };

        states[1] = new int[] { android.R.attr.selectable,

                android.R.attr.state_focused };

        states[2] = new int[] {};

        ColorStateList colorList = new ColorStateList(states, colors);

        return colorList;

    }

    public class TextDirection {

        public static final String LEFT = "left";

        public static final String TOP = "top";

        public static final String RIGHT = "right";

        public static final String BOTTOM = "bottom";

    }

}

　　2、采用后台代码和布局文件：

注意属性duplicateParentState的使用

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@drawable/me_app_selector"

    android:gravity="center_vertical"

    android:orientation="horizontal"

    android:paddingLeft="15dip" >

    <ImageView

        android:id="@+id/iv_button_icon"

        android:layout_width="35dip"

        android:layout_height="35dip"

        android:src="@drawable/me_settings" />

    <TextView

        android:id="@+id/tv_button_text"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginLeft="10dip"

        android:duplicateParentState="true"

        android:text="收藏"

        android:textColor="@color/blue_shallow"

        android:textSize="@dimen/font_body_16" />

</LinearLayout>

public class ImageViewText extends LinearLayout {

    private LayoutInflater inflater;

    private ImageView mImageView;

    private TextView mTextView;

    private View view;

    public ImageViewText(Context context) {

        super(context);

        initView(context, null);

    }

    public ImageViewText(Context context, AttributeSet attrs) {

        super(context, attrs);

        initView(context, attrs);

    }

    private void initView(Context context, AttributeSet attrs) {

        inflater = LayoutInflater.from(context);

        view = inflater.inflate(R.layout.widget_imageview_text, null);

        mImageView = (ImageView) view.findViewById(R.id.iv_button_icon);

        mTextView = (TextView) view.findViewById(R.id.tv_button_text);

        view.setClickable(true);

        view.setFocusable(true);

        view.setOnClickListener(ocl);

        TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.ImageViewText);

        String text = a.getString(R.styleable.ImageViewText_text);

        int drawable = a.getResourceId(R.styleable.ImageViewText_image_src, 0);

        mTextView.setText(text);

        mImageView.setImageResource(drawable);

        a.recycle();

        addView(view, new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));

    }

    public OnClickListener ocl = new OnClickListener() {

        @Override

        public void onClick(View v) {

            if (listener!=null) {

                listener.onClick(v);

            }

        }

    };

//

//    /**

//     * 设置颜色

//     */

//    public OnTouchListener otl = new OnTouchListener() {

//        @Override

//        public boolean onTouch(View v, MotionEvent event) {

//            if (event.getAction() == MotionEvent.ACTION_DOWN) {

//                view.setBackgroundColor(context.getResources().getColor(

//                        R.color.blue_shallow));

//            } else if (event.getAction() == MotionEvent.ACTION_UP) {

//                view.setBackgroundColor(Color.GRAY);

//            }

//            return false;

//        }

//    };

    public OnClickListenerView listener;

    public void setOnClickListener(OnClickListenerView listenerView) {

        this.listener = listenerView;

    }

    public interface OnClickListenerView {

        public void onClick(View v);

    }

}