自定义组合控件TopBar

为了保证应用程序风格的统一,在应用程序中一般都会有样式相同的顶部标题栏,在日常的开发中一般会隐藏掉Android系统提供的ActionBar选择自己定制(实在是太丑了/(ㄒoㄒ)/~~)。下面记录一下创建组合控件TopBar的几个步骤:

下面是运行效果:
自定义组合控件TopBar_第1张图片

(自己这么丑了,还敢说ActionBar丑……呼呼 审美有限)

1.在XML中自定义所需的属性
为了方便使用,需要在values文件夹中创建attrs.xml进行属性的自定义,方便以后对TopBar的修改,包括字体大小,按钮
背景的设置。


<resources>

    <declare-styleable name="TopBar">

        <attr name="mtitle" format="string" />
        <attr name="mtitleSize" format="dimension" />
        <attr name="mtitleColor" format="color" />
        <attr name="leftText" format="string" />
        <attr name="leftTextColor" format="color" />
        <attr name="leftBackground" format="color|reference" />
        <attr name="leftTextSize" format="dimension" />
        <attr name="rightText" format="string" />
        <attr name="rightTextColor" format="color" />
        <attr name="rightBackground" format="color|reference" />
        <attr name="rightTextSize" format="dimension" />

    declare-styleable>


resources>

在代码中使用标签声明使用自定义属性,并通过name属性来指定引用的名称。

"rightBackground" format="color|reference" />

需要注意的是,在给button设置背景的时候可以是颜色属性,可以是引用属性(图片),可以使用 “|” 来分隔不同的属性。

2.创建TopBar,为了简单操作选择继承已有的RelativeLayout

/**
 * Created by 春水碧于天 on 2017/1/20.
 */

public class TopBar extends RelativeLayout {

    private String mTitleText;
    private int mTitleTextColor;
    private float mTitleTextSize;

    private String mLeftText;
    private float mLeftTextSize;
    private int mLeftTextColor;
    private Drawable mLeftBackground;

    private String mRightText;
    private float mRightTextSize;
    private int mRightTextColor;
    private Drawable mRightBackground;

    private onPressMenuListener onPressMenuListener;


    public TopBar(Context context) {
        super(context);
    }

    public TopBar(Context context, AttributeSet attrs) {
        super(context, attrs);

        //从XML中获取自定义的属性
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TopBar);
        mTitleText = ta.getString(R.styleable.TopBar_mtitle);
        mTitleTextSize = ta.getDimension(R.styleable.TopBar_mtitleSize, 10);
        mTitleTextColor = ta.getColor(R.styleable.TopBar_mtitleColor, 0);


        mLeftText = ta.getString(R.styleable.TopBar_leftText);

        mLeftTextColor = ta.getColor(R.styleable.TopBar_leftTextColor, 0);

        mLeftBackground = ta.getDrawable(R.styleable.TopBar_leftBackground);

        mLeftTextSize = ta.getDimension(R.styleable.TopBar_leftTextSize, 10);

        mRightText = ta.getString(R.styleable.TopBar_rightText);

        mRightTextColor = ta.getColor(R.styleable.TopBar_rightTextColor, 0);

        mRightBackground = ta.getDrawable(R.styleable.TopBar_rightBackground);

        mRightTextSize = ta.getDimension(R.styleable.TopBar_rightTextSize, 10);

        //资源回收,避免重新创建时候的错误
        ta.recycle();


        Button mLeftButton = new Button(context);
        TextView mTitle = new TextView(context);
        Button mRightButton = new Button(context);

        //左边按钮
        mLeftButton.setText(mLeftText);
        mLeftButton.setTextSize(mLeftTextSize);
        mLeftButton.setBackground(mLeftBackground);
        mLeftButton.setTextColor(mLeftTextColor);

        //中间标题
        mTitle.setText(mTitleText);
        mTitle.setTextColor(mTitleTextColor);
        mTitle.setTextSize(mTitleTextSize);

        //右边按钮
        mRightButton.setText(mRightText);
        mRightButton.setTextSize(mRightTextSize);
        mRightButton.setBackground(mRightBackground);
        mRightButton.setTextColor(mRightTextColor);


        //为左边Button设置参数
        LayoutParams mLeftButtonParams = new LayoutParams(LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        mLeftButtonParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
        addView(mLeftButton, mLeftButtonParams);

        //为中间的标题栏设置参数
        LayoutParams mTitleParams = new LayoutParams(LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        mTitleParams.addRule(RelativeLayout.CENTER_IN_PARENT);
        addView(mTitle, mTitleParams);

        //为右边的Button设置参数
        LayoutParams mRightButtonParams = new LayoutParams(LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        mRightButtonParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
        addView(mRightButton, mRightButtonParams);

        //按钮点击的回调
        mLeftButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {

                onPressMenuListener.LeftMenu();
            }
        });

        mRightButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                onPressMenuListener.RightMenu();
            }
        });


    }

    public TopBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    public void setOnPressMenuListener(onPressMenuListener onPressMenuListener) {

        this.onPressMenuListener = onPressMenuListener;
    }

    //左右菜单按钮点击的回调接口
    public interface onPressMenuListener {

        void LeftMenu();

        void RightMenu();

    }


}

attrs.xml自定义属性的获取:

      TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TopBar)

注意:
属性获取完成之后不要忘记调用recyle来对TypedArray进行资源的回收,以避免重新创建时候的错误。

通过LayoutParams这个类来进行控件参数的设置,使用addView(mRightButton, mRightButtonParams)将当前创建的View添加到父view。

3.在布局文件中添加TopBar:

   <com.example.topbar.CustomUi.TopBar
        android:id="@+id/topBar"
        android:background="@color/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        mycustom:leftBackground="@mipmap/back"
        mycustom:rightBackground="@mipmap/refresh"
        mycustom:mtitle="这是一个标题栏"
        mycustom:mtitleColor="#ffffff"
        mycustom:mtitleSize="20sp"

        >

注:如果使用第三方的控件就需要创建自己的命名控件,在AS中,第三方的控件都是用如下的代码引用命名
空间:xmlns:mycustom="http://schemas.android.com/apk/res-auto"
这里给引用的自定义的控件的命名控件取名为mycustom.

4.在Activity中进行使用,监听按钮的点击事件

public class MainActivity extends AppCompatActivity {

    private TopBar topBar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        topBar = (TopBar) findViewById(R.id.topBar);

        topBar.setOnPressMenuListener(new TopBar.onPressMenuListener() {
            @Override
            public void LeftMenu() {

                Toast.makeText(MainActivity.this,"左边的按钮被点击了",Toast.LENGTH_SHORT).show();

            }


            @Override
            public void RightMenu() {

                Toast.makeText(MainActivity.this,"右边的按钮被点击了",Toast.LENGTH_SHORT).show();
            }
        });

    }
}

这样一个简单的TopBar就完成了,在博客里重新梳理一遍加深一下印象
O(∩_∩)O

你可能感兴趣的:(Android)