安卓-自定义标题栏组件

这里说的是自定义标题栏组件,通过设置组件的部分属性,实现标题栏的不同的展示样式,先上效果图:


                                                            自定义标题栏组件不同效果展示图

自定义组件步骤:

1)继承自View或容器布局

2)xml中引入自定义控件

3)代码中设置属性或实现接口

直接上代码:

TitleView.java

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.View;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.mobile.cdtx.blog.R;

/**
 * Created by wangwentao on 2017/2/4.
 *自定义标题栏组件
 * 主要实现的功能:
 * 1.标题栏中包含了左边按钮、标题、右边按钮
 * 2.可以显示左边按钮、右边按钮中的某一个或都不显示或都显示
 * 3.左边或右边可以显示图片背景或只显示文字
 * 4.左边或右边按钮可以设置边距
 * 5.默认均是居中显示
 * 6.可以指定左边或右边按钮的大小或默认包裹内容
 * 7.可以指定标题栏的背景,文字大小和颜色
 * 8.可以指定按钮中的文字的大小,颜色等
 */
public class TitleView extends RelativeLayout {

	//标题栏上的三部分控件:左边按钮 + 中间标题 + 右边按钮
	private Button leftButton;//左边按钮
	private TextView titleView;//中间标题
	private Button rightButton;//右边按钮
	
	//标题栏的背景色
	private int titleBackgroundColor;

	//左边按钮的属性
	private int leftTextColor;//左侧按钮的文字的颜色
	private Drawable leftBackground;//左侧按钮的背景
	private String leftText;//左侧按钮的文字
	private float leftTextSize;//左边文字的大小
	private int leftWidth;//左侧按钮的宽度
	private int leftHeight;//左侧按钮的宽度
	private int leftLeftMargin;//左侧按钮的左边距
	private int leftTopMargin;//左侧按钮的上下边距

	//中间标题的属性
	private float titleTextSize;//标题的文字的大小
	private int titleTextColor;//标题的文字的颜色
	private String titleText;//标题的文字

	//右边按钮的属性
	private int rightTextColor;//右边按钮文字的颜色
	private Drawable rightBackground;//右边按钮的背景
	private String rightText;//右边按钮的文字
	private float rightTextSize;//左边文字的大小
	private int rightWidth;//右侧按钮的宽度
	private int rightHeight;//右侧按钮的高度
	private int rightRightMargin;//右侧按钮的边距
	private int rightTopMargin;//右侧按钮的上下边距

	//布局属性,用来控制组件元素在ViewGroup中的位置
	private LayoutParams leftParams, titleParams, rightParams;//左边布局,中间布局,右边布局
	//标题栏左边按钮和右边按钮的点击事件监听
	private TitleViewClickListener mListener;

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

		//动态创建左边按钮,中间标题,右边按钮
		leftButton = new Button(context);
		titleView = new TextView(context);
		rightButton = new Button(context);

		//将在attrs.xml中定义的declare-styleable的所有属性的值存储到TypedArray中
		TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TitleView);

		//标题的背景色
		titleBackgroundColor = ta.getColor(R.styleable.TitleView_titleBackgroundColor, 0);
		setBackgroundColor(titleBackgroundColor);

		//左侧文字的颜色
		leftTextColor = ta.getColor(R.styleable.TitleView_leftTextColor, 0);
		leftButton.setTextColor(leftTextColor);

		//左侧按钮的背景
		leftBackground = ta.getDrawable(R.styleable.TitleView_leftBackground);
		leftButton.setBackground(leftBackground);

		//左侧按钮的文字
		leftText = ta.getString(R.styleable.TitleView_leftText);
		leftButton.setText(leftText);

		//左侧按钮文字的大小
		leftTextSize = ta.getDimension(R.styleable.TitleView_leftTextSize, 12);
		leftButton.setTextSize(leftTextSize);

		//左侧按钮的边距
		leftLeftMargin = (int)ta.getDimension(R.styleable.TitleView_leftLeftMargin, 0);
		leftTopMargin = (int)ta.getDimension(R.styleable.TitleView_leftTopMargin, 0);

		//标题文字
		titleText = ta.getString(R.styleable.TitleView_title);
		titleView.setText(titleText);

		//标题文字的颜色
		titleTextColor = ta.getColor(R.styleable.TitleView_titleTextColor, 0);
		titleView.setTextColor(titleTextColor);

		//标题文字的大小
		titleTextSize = ta.getDimension(R.styleable.TitleView_titleTextSize, 12);
		titleView.setTextSize(titleTextSize);

		//右侧按钮的背景
		rightBackground = ta.getDrawable(R.styleable.TitleView_rightBackground);
		rightButton.setBackground(rightBackground);

		//右侧按钮的文字的颜色
		rightTextColor = ta.getColor(R.styleable.TitleView_rightTextColor, 0);
		rightButton.setTextColor(rightTextColor);

		//右侧按钮的文字
		rightText = ta.getString(R.styleable.TitleView_rightText);
		rightButton.setText(rightText);

		//右侧按钮的文字的大小
		rightTextSize = ta.getDimension(R.styleable.TitleView_rightTextSize, 12);
		rightButton.setTextSize(rightTextSize);

		//左侧按钮的宽度和高度
		leftWidth = (int)ta.getDimension(R.styleable.TitleView_leftWidth, 0);
		leftHeight = (int)ta.getDimension(R.styleable.TitleView_leftHeight, 0);

		//右侧按钮的宽度和高度
		rightWidth = (int)ta.getDimension(R.styleable.TitleView_rightWidth, 0);
        rightHeight = (int)ta.getDimension(R.styleable.TitleView_rightHeight, 0);

		//右侧按钮的边距
		rightRightMargin = (int)ta.getDimension(R.styleable.TitleView_rightRightMargin, 0);
		rightTopMargin = (int)ta.getDimension(R.styleable.TitleView_rightTopMargin, 0);

		ta.recycle();//获取完TypedArray的值后,调用recyle()方法回收内存,避免重新创建的时候报错

		//为左边按钮设置相应的布局元素
		leftParams = new LayoutParams(leftWidth == 0 ? LayoutParams.WRAP_CONTENT:leftWidth,leftHeight == 0 ?LayoutParams.WRAP_CONTENT:leftHeight);
		leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
		if(leftHeight > 0){
			leftParams.setMargins(leftLeftMargin,leftTopMargin,0,leftTopMargin);
		}
		addView(leftButton, leftParams);// 添加到容器(ViewGroup)中

		//为中间的标题设置相应的布局元素
		titleParams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
		titleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
		addView(titleView, titleParams);//添加到容器(ViewGroup)中

		//为右边按钮设置相应的布局元素
		rightParams = new LayoutParams(rightWidth == 0 ? LayoutParams.WRAP_CONTENT:rightWidth,rightHeight == 0 ? LayoutParams.WRAP_CONTENT:rightHeight);
		rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
		if(rightHeight > 0){//自定义了右边按钮的高度
			rightParams.setMargins(0,rightTopMargin,rightRightMargin,rightTopMargin);
		}
		addView(rightButton, rightParams);//添加到容器(ViewGroup)中
		
		//为左边按钮设置点击事件
		leftButton.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				mListener.leftClick();//执行外部实现的接口 
			}
		});
		
		//为右边按钮设置点击事件
		rightButton.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				mListener.rightClick();//执行外部实现的接口
			}
		});
	}
	
	//外部调用此方法,设置点击事件监听
	public void setOnTitleViewClickListener(TitleViewClickListener mListener){
		this.mListener = mListener;
	}
	
	//外部调用接口,实现接口的具体方法
	public interface TitleViewClickListener{
		void leftClick();//左边按钮的点击事件
		void rightClick();//右边按钮的点击事件
	}
	
	/*
	*控件左右按钮的显示
	*showStatus:0,都不显示;1,只显示左侧按钮;2,只显示右侧按钮;3,两个按钮都显示
	*/
	public void setButtonVisible(int showStatus){
		if(0 == showStatus){//都不显示
		    leftButton.setVisibility(View.GONE);
            rightButton.setVisibility(View.GONE);
		}else if(1 == showStatus){//只显示左侧按钮
		    leftButton.setVisibility(View.VISIBLE);
            rightButton.setVisibility(View.GONE);
		}else if(2 == showStatus){//只显示右侧按钮
		    leftButton.setVisibility(View.GONE);
            rightButton.setVisibility(View.VISIBLE);
		}else if(3 == showStatus){//两个按钮都显示
			leftButton.setVisibility(View.VISIBLE);
            rightButton.setVisibility(View.VISIBLE);
		}
	}
}

分析:上面代码是自定义组件的核心代码,注释写的很详细,这里不再做过多的分析.

测试代码如下:

/**
 * Created by wangwentao on 2017/2/4.
 * 测试自定义标题栏
 */
public class TitleActivityCustom extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

        setContentView(R.layout.activity_title_custom);
        //标题栏1
        TitleView titleView1 = (TitleView) findViewById(R.id.id_title_view);
        titleView1.setOnTitleViewClickListener(new  TitleView.TitleViewClickListener() {
            @Override
            public void leftClick() {
                Toast.makeText(TitleActivityCustom.this, "点中了标题1左边的按钮", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void rightClick() {
                Toast.makeText(TitleActivityCustom.this, "点中了标题1右边按钮", Toast.LENGTH_SHORT).show();
            }
        });
        titleView1.setButtonVisible(3);

        //标题栏2
        TitleView titleView2 = (TitleView) findViewById(R.id.id_title_two);
        titleView2.setOnTitleViewClickListener(new  TitleView.TitleViewClickListener() {
            @Override
            public void leftClick() {
                Toast.makeText(TitleActivityCustom.this, "点中了标题2左边的按钮", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void rightClick() {
                Toast.makeText(TitleActivityCustom.this, "点中了标题2右边按钮", Toast.LENGTH_SHORT).show();
            }
        });
        titleView2.setButtonVisible(3);

        //标题3
        TitleView titleView3 = (TitleView) findViewById(R.id.id_title_three);
        titleView3.setOnTitleViewClickListener(new  TitleView.TitleViewClickListener() {
            @Override
            public void leftClick() {
                Toast.makeText(TitleActivityCustom.this, "点中了标题3左边的按钮", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void rightClick() {

            }
        });
        titleView3.setButtonVisible(1);

        //标题栏4
        TitleView titleView4 = (TitleView) findViewById(R.id.id_title_four);
        titleView4.setButtonVisible(0);

        //标题栏5
        TitleView titleView5 = (TitleView) findViewById(R.id.id_title_five);
        titleView5.setOnTitleViewClickListener(new  TitleView.TitleViewClickListener() {
            @Override
            public void leftClick() {
                Toast.makeText(TitleActivityCustom.this, "点中了标题5左边的按钮", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void rightClick() {

            }
        });
        titleView5.setButtonVisible(1);

        //标题栏6
        TitleView titleView6 = (TitleView) findViewById(R.id.id_title_six);
        titleView6.setOnTitleViewClickListener(new  TitleView.TitleViewClickListener() {
            @Override
            public void leftClick() {

            }

            @Override
            public void rightClick() {
                Toast.makeText(TitleActivityCustom.this, "点中了标题6右边的按钮", Toast.LENGTH_SHORT).show();
            }
        });
        titleView6.setButtonVisible(2);

        //标题栏7
        TitleView titleView7 = (TitleView) findViewById(R.id.id_title_seven);
        titleView7.setOnTitleViewClickListener(new  TitleView.TitleViewClickListener() {
            @Override
            public void leftClick() {
                Toast.makeText(TitleActivityCustom.this, "点中了标题7左边的按钮", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void rightClick() {
                Toast.makeText(TitleActivityCustom.this, "点中了标题7右边按钮", Toast.LENGTH_SHORT).show();
            }
        });
        titleView7.setButtonVisible(3);

        //标题栏8
        TitleView titleView8 = (TitleView) findViewById(R.id.id_title_eight);
        titleView8.setOnTitleViewClickListener(new  TitleView.TitleViewClickListener() {
            @Override
            public void leftClick() {
                Toast.makeText(TitleActivityCustom.this, "点中了标题8左边的按钮", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void rightClick() {
                Toast.makeText(TitleActivityCustom.this, "点中了标题8右边按钮", Toast.LENGTH_SHORT).show();
            }
        });
        titleView8.setButtonVisible(3);
    }
}
布局文件

activity_title_custom.xml
 
  


    

    

    

    

    

    

    

    
自定义组件中使用的属性,res\values\attrs.xml
 
  


    
    
        
		
        
        
        
        
        
        
        
        
        
		
        
        
        
        
        
        
        
        
        
		
        
        
        
    
    


左右按钮点击的背景效果文件,res\drawable\button_bg.xml
 
  


    
    
        
            
        
    
    
    
        
            
        
    
    
    
        
            
        
    

bankbtn.png 这是一张返回按钮的图标,上传总是显示不出来,截图吧
 
  
actions_about.png
 
  
 
  
 
  

你可能感兴趣的:(安卓)