一个自定义的Topbar模板
最后更新于:2022-04-01 14:27:39
### 1、Topbar模板功能介绍:自定义UI布局,自定义UI属性,自定义按钮监听事件,自定义左、右button的显示!效果图如下:
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-06_5704ccee55776.jpg)
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-06_5704ccee682f2.jpg)
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-06_5704ccee7923a.jpg)
### 2、自定义属性:values——mytopbar.xml:
~~~
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- 自定义属性 -->
<declare-styleable name="MyTopBar">
<attr name="leftTextColor" format="color"/>
<!-- BackGround属性可以颜色,也可以是一个资源文件 -->
<!-- 所以BackGround是 format="reference|color"-->
<attr name="leftBackGround" format="reference|color"/>
<attr name="leftText" format="string"/>
<attr name="title" format="string"/>
<attr name="titleTextSize" format="dimension"/>
<attr name="titleTextColor" format="color"/>
<attr name="rightTextColor" format="color"/>
<attr name="rightBackGround" format="reference|color"/>
<attr name="rightText" format="string"/>
</declare-styleable>
</resources>
~~~
### 3、自定义VIew:MyTopBar.java
~~~
//继承RelativeLayout并重写构造方法
public class MyTopBar extends RelativeLayout {
// 自定义的控件和自定义的属性(values下mytopbar.xml)的声明
private Button leftButton, rightButton;
private TextView tvTitle;
private int leftTextColor;
private Drawable leftDrawable;
private String leftText;
private float titleTextSize;
private int titleTextColor;
private String title;
private int rightTextColor;
private Drawable rightDrawable;
private String rightText;
private LayoutParams leftLayoutParams, titleLayoutParams, rightLayoutParams;
private myTopbarClicklistenter clicklistenter;
//自定义click的监听回调接口
public interface myTopbarClicklistenter{
public void leftClick();
public void rightClick();
}
//自定义一个setOnClickListenter方法
public void setOnTopbarClickListenter(myTopbarClicklistenter clicklistenter){
this.clicklistenter=clicklistenter; //调用的时候通过一个匿名内部类映射进来
}
//重写构造方法
public MyTopBar(Context context, AttributeSet attrs) {
super(context, attrs);
// 获取自定义的属性,并将自定义的属性映射到自定义的属性值中去
// 通过obtainStyledAttributes获取自定义属性,并存到TypedArray
TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.MyTopBar);
leftTextColor = ta.getColor(R.styleable.MyTopBar_leftTextColor, 0); //从TypedArray中取出来,并对应到自定义的属性值上
leftDrawable = ta.getDrawable(R.styleable.MyTopBar_leftBackGround);
leftText = ta. getString(R.styleable.MyTopBar_leftText);
titleTextSize = ta.getDimension(R.styleable.MyTopBar_titleTextSize, 0);
titleTextColor = ta.getColor(R.styleable.MyTopBar_titleTextColor, 0);
title = ta.getString(R.styleable.MyTopBar_title);
rightTextColor = ta.getColor(R.styleable.MyTopBar_rightTextColor, 0);
rightDrawable = ta.getDrawable(R.styleable.MyTopBar_rightBackGround);
rightText = ta.getString(R.styleable.MyTopBar_rightText);
ta.recycle();
//组件定义
leftButton = new Button(context);
tvTitle = new TextView(context);
rightButton = new Button(context);
// 将自定义的属性设置到控件上
leftButton.setTextColor(leftTextColor);
leftButton.setBackground(leftDrawable);
leftButton.setText(leftText);
tvTitle.setTextColor(titleTextColor);
tvTitle.setTextSize(titleTextSize);
tvTitle.setText(title);
tvTitle.setGravity(Gravity.CENTER); // 设置文字居中
rightButton.setTextColor(rightTextColor);
rightButton.setBackground(rightDrawable);
rightButton.setText(rightText);
setBackgroundColor(0xFFF59563); // 设置背景颜色
//将自定义的控件放到Layout中(以LayoutParams的形式)
leftLayoutParams=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
leftLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,TRUE); //设置左对齐
addView(leftButton,leftLayoutParams); //leftButton以leftLayoutParams的形式加入到ViewGroup中
titleLayoutParams=new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.MATCH_PARENT);
titleLayoutParams.addRule(RelativeLayout.CENTER_IN_PARENT,TRUE); //设置居中对齐
addView(tvTitle,titleLayoutParams); //tvTitle以titleLayoutParams的形式加入到ViewGroup中
rightLayoutParams=new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
rightLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,TRUE); //设置右对齐
addView(rightButton,rightLayoutParams);//rightButton以rightLayoutParams的形式加入到ViewGroup中
//设置监听事件
leftButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
clicklistenter.leftClick();
}
});
rightButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
clicklistenter.rightClick();
}
});
}
//设置左Button是否显示
public void setLeftIsVisible(boolean flag){
if(flag){
leftButton.setVisibility(View.VISIBLE);
}else{
leftButton.setVisibility(View.GONE);
}
}
// 设置右Button是否显示
public void setRightIsVisible(boolean flag) {
if (flag) {
rightButton.setVisibility(View.VISIBLE);
} else {
rightButton.setVisibility(View.GONE);
}
}
}
~~~
### 4、activity_main.xml引用自定义控件:
~~~
<!-- 引用自定义控件 -->
<com.example.topbar.MyTopBar
android:id="@+id/my_topbar"
android:layout_width="match_parent"
android:layout_height="40dp"
app:leftBackGround="@drawable/blue"
app:leftTextColor="#ffffff"
app:leftText="Back"
app:title="自定义标题"
app:titleTextSize="10sp"
app:titleTextColor="#123412"
app:rightBackGround="@drawable/blue"
app:rightTextColor="#ffffff"
app:rightText="More">
</com.example.topbar.MyTopBar>
~~~
### 5、MainActivity.java使用控件:
~~~
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
MyTopBar topBar =(MyTopBar) findViewById(R.id.my_topbar);
//调用自定义的Topbar的自定义的click监听事件
topBar.setOnTopbarClickListenter(new MyTopBar.myTopbarClicklistenter() {
@Override
public void leftClick() {
// TODO Auto-generated method stub
Toast.makeText(MainActivity.this, "点击了Back", Toast.LENGTH_SHORT).show();
}
@Override
public void rightClick() {
// TODO Auto-generated method stub
Toast.makeText(MainActivity.this, "点击了More", Toast.LENGTH_SHORT).show();
}
});
//topBar.setLeftIsVisible(false);
//topBar.setRightIsVisible(false);
}
}
~~~
6、使用Topbar模板提示:正如上面MainActivity中,实例化后,可以调用TopBar里面的方法。
[**完整代码下载:https://github.com/songshimvp/AndroidStudy/tree/master/TopBar**](https://github.com/songshimvp/AndroidStudy/tree/master/TopBar)