android 自定义Button,满足你对Button呈现样式的一系列要求

转载请注明出处:王亟亟的大牛之路

我们平时自定义的一些Button通常是改改颜色啊,文本啊,圆角啊之类的。如果要做到再高级点就需要用一个大布局还拼接了,如果一个页面有很多样式不同的这样的按钮,还真不怎么好操作。

今天给大家上一个FancyButton能很好的帮助我们简化这些操作

项目结构:

只有一个类外加一些assets包下的字体文件或资源文件的一些Icon就能呈现以下效果:

首先先介绍下FancyButton这个类的一些重要的方法和实现:

继承LinearLayout根据我们的实际场景需要再判断为水平还是垂直的LinearLayout

public class FancyButton extends LinearLayout

一系列的初始化操作和参数申明

 private Context mContext;

    // 初始化背景参数
    private int mDefaultBackgroundColor         = Color.BLACK;
    private int mFocusBackgroundColor           = 0;

    //初始化字体参数
    private int mDefaultTextColor               = Color.WHITE;
    private int mDefaultIconColor               = Color.WHITE;
    private int mTextPosition                   = 1;
    private int mDefaultTextSize                = 15;
    private int mDefaultTextGravity             = 0x11; // Gravity.CENTER
    private String mText                        = null;

    // 初始化Icon参数
    private Drawable mIconResource              = null;
    private int  mFontIconSize                  = 15;
    private String mFontIcon                    = null;
    private int mIconPosition                   = 1;

    private int mIconPaddingLeft                = 10;
    private int mIconPaddingRight               = 10;
    private int mIconPaddingTop                 = 0;
    private int mIconPaddingBottom              = 0;

    private int mBorderColor                    = Color.TRANSPARENT;
    private int mBorderWidth                    = 0;

    private int mRadius                         = 0;

    private Typeface mTextTypeFace = null;
    private Typeface mIconTypeFace = null;

    /**
     * 标识图标位置的标记
     */
    public static final int POSITION_LEFT       = 1;
    public static final int POSITION_RIGHT      = 2;
    public static final int POSITION_TOP        = 3;
    public static final int POSITION_BOTTOM     = 4;
    //默认字体
    private String mDefaultIconFont = "fontawesome.ttf";
    private String mDefaultTextFont = "robotoregular.ttf";

    private ImageView mIconView;
    private TextView mFontIconView;
    private TextView mTextView;

构造函数

 /**
     * 默认构造函数
     * @param context : Context
     */
    public FancyButton(Context context){
        super(context);
        this.mContext   = context;

        mTextTypeFace   = Typeface.createFromAsset(mContext.getAssets(), String.format("fonts/%s", mDefaultTextFont));
        mIconTypeFace   = Typeface.createFromAsset(mContext.getAssets(), String.format("iconfonts/%s", mDefaultIconFont));

        initializeFancyButton();
    }

    /**
     * 默认构造函数调用布局
     * @param context : Context
     * @param attrs : Attributes Array
     */
    public FancyButton(Context context, AttributeSet attrs){
        super(context,attrs);
        this.mContext = context;

        TypedArray attrsArray   = context.obtainStyledAttributes(attrs,R.styleable.FancyButtonsAttrs, 0, 0);
        initAttributsArray(attrsArray);
        attrsArray.recycle();

        initializeFancyButton();

    }

对一些控件所需的素材进行初始化操作

 /**
     * 各种初始化
     */
    private void initializeFancyButton(){

        initializeButtonContainer();

        mTextView       = setupTextView();
        mIconView       = setupIconView();
        mFontIconView   = setupFontIconView();

        int iconIndex,textIndex;
        View view1,view2;

        if(mIconView == null && mFontIconView == null && mTextView == null){
            Button tempTextView = new Button(mContext);
            tempTextView.setText("Fancy Button");
            this.addView(tempTextView);

        }else{
            this.removeAllViews();
            setupBackground();

            ArrayList<View> views = new ArrayList<>();

            if(mIconPosition == POSITION_LEFT || mIconPosition == POSITION_TOP){

                if(mIconView != null){
                    views.add(mIconView);
                }

                if(mFontIconView != null){
                    views.add(mFontIconView);
                }
                if(mTextView != null){
                    views.add(mTextView);
                }

            }else{
                if(mTextView != null){
                    views.add(mTextView);
                }

                if(mIconView != null){
                    views.add(mIconView);
                }

                if(mFontIconView != null){
                    views.add(mFontIconView);
                }

            }

            for(View view : views){
                this.addView(view);
            }
        }
    }
 /**
     * 设置文本视图
     * @return : TextView
     */
    private TextView setupTextView(){
        if (mText != null) {
            TextView textView = new TextView(mContext);
            textView.setText(mText);
            textView.setGravity(mDefaultTextGravity);
            textView.setTextColor(mDefaultTextColor);
            textView.setTextSize(mDefaultTextSize);

            textView.setLayoutParams(new TableLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT, 1f));
            if (!isInEditMode() && mTextTypeFace!=null) {
                textView.setTypeface(mTextTypeFace);
            }
            return textView;
        }
        return null;
    }

    /**
     * 设置字体图标视图
     * @return : TextView
     */
    private TextView setupFontIconView(){

        if(mFontIcon!=null){
            TextView fontIconView = new TextView(mContext);
            fontIconView.setTextColor(mDefaultIconColor);

            LayoutParams iconTextViewParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT,1f);
            iconTextViewParams.rightMargin = mIconPaddingRight;
            iconTextViewParams.leftMargin = mIconPaddingLeft;
            iconTextViewParams.topMargin = mIconPaddingTop;
            iconTextViewParams.bottomMargin = mIconPaddingBottom;

            if(mTextView != null){

                if(mIconPosition==POSITION_TOP || mIconPosition==POSITION_BOTTOM){
                    iconTextViewParams.gravity = Gravity.CENTER;
                    fontIconView.setGravity(Gravity.CENTER);
                }
                else{
                    fontIconView.setGravity(Gravity.CENTER_VERTICAL);
                    iconTextViewParams.gravity = Gravity.CENTER_VERTICAL;
                }
            }else{
                iconTextViewParams.gravity = Gravity.CENTER;
                fontIconView.setGravity(Gravity.CENTER_VERTICAL);
            }

            fontIconView.setLayoutParams(iconTextViewParams);
            if(!isInEditMode()){
                fontIconView.setTextSize(mFontIconSize);
                fontIconView.setText(mFontIcon);
                fontIconView.setTypeface(mIconTypeFace);
            }else{
                fontIconView.setText("O");
            }
            return fontIconView;
        }
        return null;
    }

    /**
     * 文本图标资源视图
     * @return : ImageView
     */
    private ImageView setupIconView(){
        if (mIconResource != null){
            ImageView iconView = new ImageView(mContext);
            iconView.setImageDrawable(mIconResource);
            iconView.setPadding(mIconPaddingLeft, mIconPaddingTop, mIconPaddingRight, mIconPaddingBottom);

            LayoutParams iconViewParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            if(mTextView!=null){
                if(mIconPosition==POSITION_TOP || mIconPosition==POSITION_BOTTOM)
                    iconViewParams.gravity = Gravity.CENTER;
                else
                    iconViewParams.gravity = Gravity.START;

                iconViewParams.rightMargin = 10;
                iconViewParams.leftMargin = 10;
            }else{
                iconViewParams.gravity = Gravity.CENTER_VERTICAL;
            }
            iconView.setLayoutParams(iconViewParams);

            return iconView;
        }
        return null;
    }

    /**
     * 初始化属性数组
     * @param attrsArray : Attributes array
     */
    private void initAttributsArray(TypedArray attrsArray){

        mDefaultBackgroundColor         = attrsArray.getColor(R.styleable.FancyButtonsAttrs_defaultColor,mDefaultBackgroundColor);
        mFocusBackgroundColor           = attrsArray.getColor(R.styleable.FancyButtonsAttrs_focusColor,mFocusBackgroundColor);

        mDefaultTextColor               = attrsArray.getColor(R.styleable.FancyButtonsAttrs_textColor,mDefaultTextColor);
        // if default color is set then the icon‘s color is the same (the default for icon‘s color)
        mDefaultIconColor               = attrsArray.getColor(R.styleable.FancyButtonsAttrs_iconColor,mDefaultTextColor);
        mDefaultTextSize                = (int) attrsArray.getDimension(R.styleable.FancyButtonsAttrs_textSize,mDefaultTextSize);
        mDefaultTextGravity             = attrsArray.getInt(R.styleable.FancyButtonsAttrs_textGravity, mDefaultTextGravity);

        mBorderColor                    = attrsArray.getColor(R.styleable.FancyButtonsAttrs_borderColor,mBorderColor);
        mBorderWidth                    = (int) attrsArray.getDimension(R.styleable.FancyButtonsAttrs_borderWidth,mBorderWidth);

        mRadius                         = (int)attrsArray.getDimension(R.styleable.FancyButtonsAttrs_radius,mRadius);
        mFontIconSize                   = (int)attrsArray.getDimension(R.styleable.FancyButtonsAttrs_fontIconSize,mFontIconSize);

        mIconPaddingLeft                = (int)attrsArray.getDimension(R.styleable.FancyButtonsAttrs_iconPaddingLeft,mIconPaddingLeft);
        mIconPaddingRight               = (int)attrsArray.getDimension(R.styleable.FancyButtonsAttrs_iconPaddingRight,mIconPaddingRight);
        mIconPaddingTop                 = (int)attrsArray.getDimension(R.styleable.FancyButtonsAttrs_iconPaddingTop,mIconPaddingTop);
        mIconPaddingBottom              = (int)attrsArray.getDimension(R.styleable.FancyButtonsAttrs_iconPaddingBottom,mIconPaddingBottom);

        String text                     = attrsArray.getString(R.styleable.FancyButtonsAttrs_text);
        mIconPosition                   = attrsArray.getInt(R.styleable.FancyButtonsAttrs_iconPosition,mIconPosition);

        String fontIcon                 = attrsArray.getString(R.styleable.FancyButtonsAttrs_fontIconResource);

        String iconFontFamily           = attrsArray.getString(R.styleable.FancyButtonsAttrs_iconFont);
        String textFontFamily           = attrsArray.getString(R.styleable.FancyButtonsAttrs_textFont);

        Drawable icon = null;
        try{
            mIconResource               = attrsArray.getDrawable(R.styleable.FancyButtonsAttrs_iconResource);

        }catch(Exception e){
            mIconResource = null;
        }

        if(fontIcon!=null)
            mFontIcon = fontIcon;

        if(text!=null)
            mText = text;

        if(!isInEditMode()){
            if(iconFontFamily!=null){
                try{
                    mIconTypeFace = Typeface.createFromAsset(mContext.getAssets(), String.format("iconfonts/%s", iconFontFamily));
                }catch(Exception e){
                    Log.e("Fancy", e.getMessage());
                    mIconTypeFace= Typeface.createFromAsset(mContext.getAssets(), String.format("iconfonts/%s", mDefaultIconFont));
                }

            }else{
                mIconTypeFace= Typeface.createFromAsset(mContext.getAssets(), String.format("iconfonts/%s", mDefaultIconFont));
            }

            if(textFontFamily!=null){
                try{
                    mTextTypeFace = Typeface.createFromAsset(mContext.getAssets(), String.format("fonts/%s", textFontFamily));
                }
                catch(Exception e){
                    mTextTypeFace= Typeface.createFromAsset(mContext.getAssets(), String.format("fonts/%s", mDefaultTextFont));
                }

            }else{
                mTextTypeFace= Typeface.createFromAsset(mContext.getAssets(), String.format("fonts/%s", mDefaultTextFont));
            }

        }

    }
    @SuppressLint("NewApi")
    private void setupBackground(){

        // 默认Drawable
        GradientDrawable drawable = new GradientDrawable();
        drawable.setCornerRadius(mRadius);
        drawable.setColor(mDefaultBackgroundColor);
        if (mBorderColor != 0) {
            drawable.setStroke(mBorderWidth, mBorderColor);
        }

        // 焦点/按下 Drawable
        GradientDrawable drawable2 = new GradientDrawable();
        drawable2.setCornerRadius(mRadius);
        drawable2.setColor(mFocusBackgroundColor);
        if (mBorderColor != 0) {
            drawable2.setStroke(mBorderWidth, mBorderColor);
        }

        StateListDrawable states = new StateListDrawable();

        if(mFocusBackgroundColor!=0){
            states.addState(new int[] { android.R.attr.state_pressed }, drawable2);
            states.addState(new int[] { android.R.attr.state_focused }, drawable2);
        }
        states.addState(new int[] {}, drawable);

        if(android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.JELLY_BEAN) {
            this.setBackgroundDrawable(states);
        } else {
            this.setBackground(states);
        }
    }

    /**
     * 初始化按钮的容器
     */
    private void initializeButtonContainer(){

        if(mIconPosition == POSITION_TOP || mIconPosition == POSITION_BOTTOM){
            this.setOrientation(LinearLayout.VERTICAL);
        }else{
            this.setOrientation(LinearLayout.HORIZONTAL);
        }
        LayoutParams containerParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        this.setLayoutParams(containerParams);
        this.setGravity(Gravity.CENTER_VERTICAL);
        this.setClickable(true);
        this.setFocusable(true);
        if(mIconResource==null && mFontIcon==null && getPaddingLeft()==0 && getPaddingRight()==0 && getPaddingTop()==0 && getPaddingBottom()==0){
            this.setPadding(20, 20, 20, 20);
        }
    }

    /**
     * 设置文字内容
     * @param text : Text
     */
    public void setText(String text){
        this.mText = text;
        if(mTextView == null)
            initializeFancyButton();
        else
            mTextView.setText(text);
    }

    /**
     * 设置文字颜色
     * @param color : Color
     * use Color.parse(‘#code‘)
     */
    public void setTextColor(int color){
        this.mDefaultTextColor = color;
        if(mTextView == null)
            initializeFancyButton();
        else
            mTextView.setTextColor(color);

    }

    /**
     * 设置图标的颜色独立于文本颜色
     * @param color : Color
     */
    public void setIconColor(int color){
        if(mFontIconView != null) {
            mFontIconView.setTextColor(color);
        }
    }

    /**
     * 设置背景颜色
     * @param color : use Color.parse(‘#code‘)
     */
    public void setBackgroundColor(int color){
        this.mDefaultBackgroundColor = color;
        if(mIconView != null || mFontIconView != null || mTextView != null){
            this.setupBackground();
        }
    }

    /**
     * 设置焦点时按钮的颜色
     * @param color : use Color.parse(‘#code‘)
     */
    public void setFocusBackgroundColor(int color){
        this.mFocusBackgroundColor = color;
        if(mIconView != null || mFontIconView != null || mTextView != null)
            this.setupBackground();

    }

    /**
     * 设置文字的大小
     * @param textSize : Text Size
     */
    public void setTextSize(int textSize){
        this.mDefaultTextSize = textSize;
        if(mTextView != null)
            mTextView.setTextSize(textSize);
    }

    /**
     * 设置文本重力位置
     * @param gravity : Text Gravity
     */

    public void setTextGravity(int gravity) {
        this.mDefaultTextGravity = gravity;
        if (mTextView != null) {
            mTextView.setGravity(gravity);
        }
    }

    /**
     * 设置间距
     * @param paddingLeft : Padding Left
     * @param paddingTop : Padding Top
     * @param paddingRight : Padding Right
     * @param paddingBottom : Padding Bottom
     */
    public void setIconPadding(int paddingLeft, int paddingTop, int paddingRight, int paddingBottom){
        this.mIconPaddingLeft = paddingLeft;
        this.mIconPaddingTop = paddingTop;
        this.mIconPaddingRight = paddingRight;
        this.mIconPaddingBottom = paddingBottom;
        if(mIconView != null){
            mIconView.setPadding(this.mIconPaddingLeft, this.mIconPaddingTop, this.mIconPaddingRight, this.mIconPaddingBottom);
        }
        if(mFontIconView != null){
            mFontIconView.setPadding(this.mIconPaddingLeft, this.mIconPaddingTop, this.mIconPaddingRight, this.mIconPaddingBottom);
        }
    }

    /**
     * 设置icon来自于资源文件
     * @param drawable : Drawable resource
     */
    public void setIconResource(int drawable){
        this.mIconResource = mContext.getResources().getDrawable(drawable);
        if(mIconView == null || mFontIconView != null) {
            mFontIconView= null;
            initializeFancyButton();
        }
        else
            mIconView.setImageDrawable(mIconResource);
    }

    /**
     * 设置一种字符作为Icon图
     * @param icon : Icon value eg : \uf082
     */
    public void setIconResource(String icon){
        this.mFontIcon = icon;
        if(mFontIconView == null) {
            mIconView=null;
            initializeFancyButton();
        }
        else
            mFontIconView.setText(icon);
    }

    /**
     * 设置Icon尺寸(仅限字符Icon)
     * @param iconSize : Icon Size
     */
    public void setFontIconSize(int iconSize){
        this.mFontIconSize = iconSize;
        if(mFontIconView!=null)
            mFontIconView.setTextSize(iconSize);
    }

    /**
     * 设置图标位置
     * 使用全局变量 (FancyButton.POSITION_LEFT, FancyButton.POSITION_RIGHT, FancyButton.POSITION_TOP, FancyButton.POSITION_BOTTOM)
     * @param position : Position
     */
    public void setIconPosition(int position){
        if(position>0 && position<5)
            mIconPosition = position;
        else
            mIconPosition = POSITION_LEFT;

        initializeFancyButton();
    }

    /**
     * 设置按钮边框的颜色
     * @param color : Color
     * use Color.parse(‘#code‘)
     */
    public void setBorderColor(int color){
        this.mBorderColor = color;
        if(mIconView!=null || mFontIconView!=null || mTextView!=null){
            this.setupBackground();
        }
    }

    /**
     * 设置按钮的宽度
     * @param width : Width
     */
    public void setBorderWidth(int width){
        this.mBorderWidth = width;
        if(mIconView != null || mFontIconView != null || mTextView != null){
            this.setupBackground();
        }
    }

    /**
     * 设置按钮的边框半径
     * @param radius : Radius
     */
    public void setRadius(int radius){
        this.mRadius = radius;
        if(mIconView != null || mFontIconView != null || mTextView != null){
            this.setupBackground();
        }
    }

    /**
     * 设置按钮文本的自定义字体
     * @param fontName : Font Name
     * Place your text fonts in assets/fonts/
     */
    public void setCustomTextFont(String fontName){
        try{
            mTextTypeFace = Typeface.createFromAsset(mContext.getAssets(), String.format("fonts/%s", fontName));
        }catch(Exception e){
            Log.e("FancyButtons", e.getMessage());
            mTextTypeFace= Typeface.createFromAsset(mContext.getAssets(), String.format("fonts/%s", mDefaultTextFont));
        }

        if(mTextView==null)
            initializeFancyButton();
        else
            mTextView.setTypeface(mTextTypeFace);

    }

    /**
     * 设置按钮图标的自定义字体
     * @param fontName : Font Name
     * Place your icon fonts in assets/iconfonts/
     */
    public void setCustomIconFont(String fontName){
        try{
            mIconTypeFace = Typeface.createFromAsset(mContext.getAssets(), String.format("iconfonts/%s", fontName));
        }catch(Exception e){
            Log.e("FancyButtons", e.getMessage());
            mIconTypeFace= Typeface.createFromAsset(mContext.getAssets(), String.format("iconfonts/%s", mDefaultIconFont));
        }

        if(mFontIconView == null)
            initializeFancyButton();
        else
            mFontIconView.setTypeface(mIconTypeFace);

    }

}

布局文件

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:fancy="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/section1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/section_facebook"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#3b5998"
            android:gravity="center_horizontal"
            android:orientation="vertical"
            android:padding="20dp" >

            <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                android:id="@+id/btn_facebook_like"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:padding="10dp"
                fancy:borderColor="#FFFFFF"
                fancy:borderWidth="1dp"
                fancy:defaultColor="#3b5998"
                fancy:focusColor="#5577bd"
                fancy:fontIconResource="@string/icon_like"
                fancy:fontIconSize="10sp"
                fancy:iconPosition="right"
                fancy:radius="30dp"
                fancy:text="Like my facebook page"
                fancy:textColor="#FFFFFF"/>

            <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                android:id="@+id/btn_facebook_share"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:padding="10dp"
                fancy:borderColor="#FFFFFF"
                fancy:borderWidth="1dp"
                fancy:defaultColor="#3b5998"
                fancy:focusColor="#5577bd"
                fancy:fontIconResource="@string/icon_share"
                fancy:fontIconSize="10sp"
                fancy:iconPosition="right"
                fancy:iconPaddingLeft="20dp"
                fancy:iconPaddingRight= "0dp"
                fancy:radius="30dp"
                fancy:text="Share the link"
                fancy:textColor="#FFFFFF"/>

            <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                android:id="@+id/btn_facebook_follow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:padding="10dp"
                fancy:borderColor="#FFFFFF"
                fancy:borderWidth="1dp"
                fancy:defaultColor="#3b5998"
                fancy:focusColor="#5577bd"
                fancy:fontIconResource="@string/icon_follow"
                fancy:fontIconSize="10sp"
                fancy:iconPosition="right"
                fancy:radius="30dp"
                fancy:text="Follow Mehdi Sakout"
                fancy:textColor="#FFFFFF" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/section_socialnetworks"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:gravity="center_horizontal"
            android:minHeight="200dp"
            android:orientation="vertical"
            android:padding="20dp" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginBottom="15dp"
                android:gravity="center" >

                <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                    android:id="@+id/btn_android"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="10dp"
                    android:padding="10dp"
                    fancy:defaultColor="#55acee"
                    fancy:focusColor="#313131"
                    fancy:iconResource="@drawable/twitter"
                    fancy:iconPaddingLeft="0dp"
                    fancy:iconPaddingRight="0dp"
                    fancy:radius="30dp"
                    fancy:textColor="#FFFFFF" />

                <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                    android:id="@+id/btn_dropbox"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="10dp"
                    android:padding="10dp"
                    fancy:defaultColor="#007ee5"
                    fancy:iconPaddingLeft="0dp"
                    fancy:iconPaddingRight="0dp"
                    fancy:focusColor="#313131"
                    fancy:iconResource="@drawable/dropbox"
                    fancy:radius="30dp">
                </fancybuttons.wjj.com.fancybuttonsdemo.FancyButton>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/sn_pos2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginBottom="15dp"
                android:gravity="center"
                android:orientation="horizontal" >

                <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                    android:id="@+id/btn_instagram"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="10dp"
                    android:padding="10dp"
                    fancy:defaultColor="#3f729b"
                    fancy:iconPaddingLeft="0dp"
                    fancy:iconPaddingRight="0dp"
                    fancy:focusColor="#313131"
                    fancy:iconResource="@drawable/instagram"
                    fancy:radius="30dp">
                </fancybuttons.wjj.com.fancybuttonsdemo.FancyButton>

                <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                    android:id="@+id/btn_sound"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="10dp"
                    android:padding="10dp"
                    fancy:defaultColor="#ff8800"
                    fancy:iconPaddingLeft="0dp"
                    fancy:iconPaddingRight="0dp"
                    fancy:focusColor="#313131"
                    fancy:iconResource="@drawable/soundcloud"
                    fancy:radius="30dp">
                </fancybuttons.wjj.com.fancybuttonsdemo.FancyButton>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/LinearLayout1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:orientation="horizontal" >

                <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                    android:id="@+id/btn_gplus"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="10dp"
                    android:padding="10dp"
                    fancy:defaultColor="#dd4b39"
                    fancy:iconPaddingLeft="0dp"
                    fancy:iconPaddingRight="0dp"
                    fancy:focusColor="#313131"
                    fancy:iconResource="@drawable/gplus"
                    fancy:radius="30dp">
                </fancybuttons.wjj.com.fancybuttonsdemo.FancyButton>

                <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                    android:id="@+id/btn_facebook"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="10dp"
                    android:padding="10dp"
                    fancy:defaultColor="#000000"
                    fancy:iconPaddingLeft="0dp"
                    fancy:iconPaddingRight="0dp"
                    fancy:focusColor="#313131"
                    fancy:iconResource="@drawable/github"
                    fancy:radius="30dp" >
                </fancybuttons.wjj.com.fancybuttonsdemo.FancyButton>
            </LinearLayout>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/section_spotify"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#222326"
            android:gravity="center_horizontal"
            android:orientation="vertical"
            android:padding="20dp" >
            <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                android:id="@+id/btn_spotify"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:paddingBottom="10dp"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:paddingTop="10dp"
                fancy:defaultColor="#7ab800"
                fancy:focusColor="#9bd823"
                fancy:fontIconResource=""
                fancy:iconPosition="left"
                fancy:radius="30dp"
                fancy:text="SHUFFLE PLAY"
                fancy:textColor="#FFFFFF" />

            <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                android:id="@+id/btn_spotify_pause"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:paddingBottom="10dp"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:paddingTop="10dp"
                fancy:defaultColor="#7ab800"
                fancy:focusColor="#9bd823"
                fancy:fontIconResource=""
                fancy:iconPosition="left"
                fancy:radius="30dp"
                fancy:text="PAUSE"
                fancy:textColor="#FFFFFF" />
            <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                android:id="@+id/btn_spotify_follow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingBottom="10dp"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:paddingTop="10dp"
                fancy:defaultColor="#222326"
                fancy:focusColor="#424243"
                fancy:radius="30dp"
                fancy:text="FOLOW"
                fancy:borderColor="#88898c"
                fancy:borderWidth="1dp"
                fancy:textColor="#dfe0d9" />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/section_twitter"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#55acee"
            android:gravity="center_horizontal"
            android:orientation="vertical"
            android:padding="20dp" >

            <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                android:id="@+id/btn_twitter_follow"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="20dp"
                android:padding="5dp"
                fancy:borderColor="#FFFFFF"
                fancy:borderWidth="2dp"
                fancy:defaultColor="#55acee"
                fancy:focusColor="#8cc9f8"
                fancy:iconPaddingLeft="40dp"
                fancy:iconResource="@drawable/twitter"
                fancy:text="Follow me on Twitter"
                fancy:textColor="#FFFFFF"/>

            <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                android:id="@+id/btn_twitter_followers"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:padding="10dp"
                fancy:borderColor="#FFFFFF"
                fancy:borderWidth="2dp"
                fancy:defaultColor="#55acee"
                fancy:focusColor="#8cc9f8"
                fancy:fontIconResource="@string/icon_user"
                fancy:fontIconSize="10sp"
                fancy:iconPosition="top"
                fancy:text="2145 followers"
                fancy:textColor="#FFFFFF"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ff5f69"
            android:gravity="center"
            android:paddingBottom="30dp"
            android:paddingTop="30dp" >

            <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                android:id="@+id/btn_create_account"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="20dp"
                android:padding="10dp"
                fancy:borderColor="#FFFFFF"
                fancy:borderWidth="1dp"
                fancy:defaultColor="#ff5f69"
                fancy:focusColor="#ff838b"
                fancy:radius="30dp"
                fancy:text="Create an account"
                fancy:textColor="#FFFFFF" >
            </fancybuttons.wjj.com.fancybuttonsdemo.FancyButton>

            <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                android:id="@+id/btn_login"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingBottom="10dp"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:paddingTop="10dp"
                fancy:borderColor="#FFFFFF"
                fancy:borderWidth="1dp"
                fancy:defaultColor="#ff5f69"
                fancy:focusColor="#ff838b"
                fancy:fontIconResource="@string/icon_user"
                fancy:iconPosition="left"
                fancy:radius="30dp"
                fancy:text="Login"
                fancy:textColor="#FFFFFF" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:padding="20dp"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                    android:id="@+id/btn_download"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="10dp"
                    android:padding="10dp"
                    fancy:borderColor="#FFFFFF"
                    fancy:borderWidth="2dp"
                    fancy:defaultColor="#3b414f"
                    fancy:focusColor="#8cc9f8"
                    fancy:fontIconResource="@string/icon_download"
                    fancy:fontIconSize="10sp"
                    fancy:iconPosition="top"
                    fancy:radius="10dp"
                    fancy:text="Download the file"
                    fancy:textColor="#FFFFFF">
                </fancybuttons.wjj.com.fancybuttonsdemo.FancyButton>

                <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                    android:id="@+id/btn_upload"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="10dp"
                    android:padding="10dp"
                    fancy:borderColor="#FFFFFF"
                    fancy:borderWidth="2dp"
                    fancy:defaultColor="#3b414f"
                    fancy:focusColor="#8cc9f8"
                    fancy:fontIconResource="@string/icon_upload"
                    fancy:fontIconSize="10sp"
                    fancy:radius="10dp"
                    fancy:iconPosition="bottom"
                    fancy:text="Upload"
                    fancy:textColor="#FFFFFF">
                </fancybuttons.wjj.com.fancybuttonsdemo.FancyButton>

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                    android:id="@+id/btn_twitter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="10dp"
                    android:padding="10dp"
                    fancy:borderColor="#FFFFFF"
                    fancy:borderWidth="2dp"
                    fancy:defaultColor="#40a75a"
                    fancy:focusColor="#8cc9f8"
                    fancy:fontIconResource="@string/icon_user"
                    fancy:fontIconSize="15sp"
                    fancy:iconPosition="left"
                    fancy:text="Send"
                    fancy:radius="10dp"
                    fancy:textColor="#FFFFFF">
                </fancybuttons.wjj.com.fancybuttonsdemo.FancyButton>

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                    android:id="@+id/btn_decline"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="20dp"
                    android:padding="10dp"
                    fancy:borderColor="#FFFFFF"
                    fancy:borderWidth="0dp"
                    fancy:defaultColor="#d86262"
                    fancy:focusColor="#2e5071"
                    fancy:fontIconResource="@string/icon_mute"
                    fancy:fontIconSize="10dp"
                    fancy:iconPosition="right"
                    fancy:radius="30dp"
                    fancy:text="Mute"
                    fancy:textColor="#ffffff" />

                <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                    android:id="@+id/btn_answer"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="20dp"
                    android:gravity="right"
                    android:padding="10dp"
                    fancy:defaultColor="#7ed862"
                    fancy:focusColor="#2e5071"
                    fancy:fontIconResource="@string/icon_answer"
                    fancy:fontIconSize="10dp"
                    fancy:iconPosition="right"
                    fancy:radius="30dp"
                    fancy:text="Answer the call"
                    fancy:textColor="#ffffff" />

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

</ScrollView>

MainActivity补贴了,什么代码都没写,自动生成的一个Activity.

所有的一系列你所需的一些格式要求都可以在XML文件内预设,如果需要用代码编写就只需要调用上面的一些列Set方法就可以了。

源码地址:http://yunpan.cn/cmy8gXMhNr8Zj 访问密码 a74d

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-06 11:28:27

android 自定义Button,满足你对Button呈现样式的一系列要求的相关文章

android 自定义ViewGroup实现可记载并呈现选择的ListView

转载请注明出处:王亟亟的大牛之路 之前也做过一些用TextView之类的记录ListView选项的东西,但是总觉得好难看,发现个不错的实现就贴给大家. 项目目录 运行效果: 自定义视图: @TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH) public class FlowLayout extends ViewGroup { private int mGravity = (isIcs() ? Gravity.START : Gravity.LEF

Android自定义无下划线ClickableSapn超链接文本样式

最近在做评论的时候需要实现这种效果网上百度了一下,就是自定义一个类继承4ClickableSpan,然后在updateDrawState方法中设置是否下划线为false,但是看了一下网上实现的方法是直接在新类的OnClick方法中实现onClick操作,感觉不太容易扩展使用,于是我自定义了一个接口,通过接口实现了外部代码调用,具体代码如下: public class NoLineClickableSpan extends ClickableSpan{ private IOnNoLineTextC

Android自定义Button背景色,弧度

Android自定义Button背景色,弧度 作为selector放在drawable中 android:state_pressed="true" 点击 android:state_focused="true" 聚焦 自定义的Button的xml文件(res/drawable/button_selector.xml) <?xml version="1.0" encoding="utf-8"?> <select

[Android学习笔记]ListView中含有Button导致无法响应onItemClick回调的解决办法

转自:http://www.cnblogs.com/eyu8874521/archive/2012/10/17/2727882.html 问题描述: 当ListView的Item中的控件只是一些展示类控件时(比如TextView),注册ListView的监听setOnItemClickListener之后,当点击Item时候会触发onItemClick回调. 但是,当Item中存在Button(继承于Button)的控件时,onItemClick回调不会被触发. 解决方案: 在Item的布局文件

android自定义UI模板图文详解

不知道大家在实际开发中有没有自定义过UI模板?今天花时间研究了一下android中自定义UI模板,与大家分享一下. 每个设计良好的App都是自定义标题栏,在自定义标题栏的过程中大部分人可能都是自定义一个标题的xml文件,然后在需要的地方直接通过include来引用,这比起在每个布局文件中写标题栏已经进化很多了,但仍然不是最简单有效的方法,我们为什么不能自定义一个标题控件呢?今天就带大家自己做一个标题栏控件.效果图如下: 开始啦: 第一步:自定义xml属性 新建一个android项目,在value

Android 自定义UI圆角按钮

Android实际开发中我们一般需要圆角的按钮,一般情况下我们可以让美工做出来相应的按钮图片,然后放上去即可,另外我们可以在布局文件中直接设置,也可以达到一样的效果.下面讲解在布局文件中自定义圆角按钮的小Demo. 代码很简单,实现效果图: 源代码: 源代码: 这里主要是xml布局文件实现: MainActivity: package com.android_drawableresource; import android.app.Activity; import android.os.Bund

Android自定义View之自定义复合控件--标题栏

1 实现效果 2 例子代码讲解 2.1 attrs.xml <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="TopBar"> <attr name="title" format="string" /> <attr name="titleTex

Android自定义视图四:定制onMeasure强制显示为方形

这个系列是老外写的,干货!翻译出来一起学习.如有不妥,不吝赐教! Android自定义视图一:扩展现有的视图,添加新的XML属性 Android自定义视图二:如何绘制内容 Android自定义视图三:给自定义视图添加"流畅"的动画 Android自定义视图四:定制onMeasure强制显示为方形 上一篇开发之后的效果如上图.不过看着这张图,需要注意的不是我们自定义视图展示了什么,而是这个视图的大小和位置.你会看到这个折线图有一个特定的大小(size).这个size是怎么定的呢?现在的代

【转】Android自定义Adapter的ListView的思路及代码

原文网址:http://www.jb51.net/article/37236.htm Android自定义Adapter的ListView的思路及代码,需要的朋友可以参考一下 在开发中,我们经常使用到ListView这个控件.Android的API也提供了许多创建ListView适配器的快捷方式.例如ArrayAdapter.SimpleAdapter和SimpleCursorAdapter等.但你是否发现,如果采用这些系统自带的适配器,对于事件的响应只能局限在一个行单位.假设一行里面有一个按钮