一个自定义的Topbar模板

1、Topbar模板功能介绍:自定义UI布局,自定义UI属性,自定义按钮监听事件,自定义左、右button的显示!效果图如下:

一个自定义的Topbar模板_第1张图片


一个自定义的Topbar模板_第2张图片


一个自定义的Topbar模板_第3张图片

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

你可能感兴趣的:(android,模板,自定义,topbar)