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