这里说的是自定义标题栏组件，通过设置组件的部分属性，实现标题栏的不同的展示样式，先上效果图:
自定义标题栏组件不同效果展示图
自定义组件步骤:
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<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_title_custom" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.mobile.cdtx.blog.main.activity.TitleActivityCustom"> <com.mobile.cdtx.blog.main.customview.TitleView android:id="@+id/id_title_view" android:layout_width="match_parent" android:layout_height="45dp" app:titleBackgroundColor="#18b4ed" app:leftBackground="@drawable/button_bg" app:leftTextColor="#FFFFFF" app:leftText="左边" app:leftTextSize="7sp" app:title="标题栏1" app:titleTextColor="#FFFFFF" app:titleTextSize="8sp" app:rightBackground="@drawable/button_bg" app:rightTextColor="#FFFFFF" app:rightText="右边" app:rightTextSize="7sp"/> <com.mobile.cdtx.blog.main.customview.TitleView android:id="@+id/id_title_two" android:layout_below="@id/id_title_view" android:layout_marginTop="10dp" android:layout_width="match_parent" android:layout_height="45dp" android:gravity="center_vertical" app:titleBackgroundColor="#00ff00" app:leftBackground="@drawable/backbtn" app:leftWidth="15dp" app:leftHeight="15dp" app:leftLeftMargin="5dp" app:leftTopMargin="15dp" app:title="标题栏2" app:titleTextColor="#FF0000" app:titleTextSize="8sp" app:rightBackground="@drawable/actions_about" app:rightWidth="15dp" app:rightHeight="15dp" app:rightRightMargin="5dp" app:rightTopMargin="15dp" /> <com.mobile.cdtx.blog.main.customview.TitleView android:id="@+id/id_title_three" android:layout_marginTop="10dp" android:layout_below="@id/id_title_two" android:layout_width="match_parent" android:layout_height="45dp" app:titleBackgroundColor="#18b4ed" app:leftBackground="@drawable/button_bg" app:leftTextColor="#FFFFFF" app:leftText="返回" app:leftTextSize="7sp" app:title="标题栏3" app:titleTextColor="#FFFFFF" app:titleTextSize="8sp" /> <com.mobile.cdtx.blog.main.customview.TitleView android:id="@+id/id_title_four" android:layout_marginTop="10dp" android:layout_below="@id/id_title_three" android:layout_width="match_parent" android:layout_height="45dp" app:titleBackgroundColor="#18b4ed" app:title="标题栏4" app:titleTextColor="#FFFFFF" app:titleTextSize="8sp" /> <com.mobile.cdtx.blog.main.customview.TitleView android:id="@+id/id_title_five" android:layout_below="@id/id_title_four" android:layout_marginTop="10dp" android:layout_width="match_parent" android:layout_height="45dp" android:gravity="center_vertical" app:titleBackgroundColor="#00ff00" app:leftBackground="@drawable/backbtn" app:leftWidth="15dp" app:leftHeight="15dp" app:leftLeftMargin="5dp" app:leftTopMargin="15dp" app:title="标题栏5" app:titleTextColor="#FF0000" app:titleTextSize="8sp" /> <com.mobile.cdtx.blog.main.customview.TitleView android:id="@+id/id_title_six" android:layout_marginTop="10dp" android:layout_below="@id/id_title_five" android:layout_width="match_parent" android:layout_height="45dp" app:titleBackgroundColor="#18b4ed" app:title="标题栏6" app:titleTextColor="#FFFFFF" app:titleTextSize="8sp" app:rightBackground="@drawable/actions_about" app:rightWidth="15dp" app:rightHeight="15dp" app:rightRightMargin="5dp" app:rightTopMargin="15dp" /> <com.mobile.cdtx.blog.main.customview.TitleView android:id="@+id/id_title_seven" android:layout_below="@id/id_title_six" android:layout_marginTop="10dp" android:layout_width="match_parent" android:layout_height="45dp" app:titleBackgroundColor="#18b4ed" app:leftTextColor="#FFFFFF" app:leftText="返回" app:leftTextSize="7sp" app:title="标题栏7" app:titleTextColor="#FFFFFF" app:titleTextSize="8sp" app:rightTextColor="#FFFFFF" app:rightText="更多" app:rightTextSize="7sp"/> <com.mobile.cdtx.blog.main.customview.TitleView android:id="@+id/id_title_eight" android:layout_below="@id/id_title_seven" android:layout_marginTop="10dp" android:layout_width="match_parent" android:layout_height="45dp" app:titleBackgroundColor="#18b4ed" app:leftTextColor="#FFFFFF" app:leftText="返回" app:leftTextSize="7sp" app:leftWidth="80dp" app:leftHeight="45dp" app:title="标题栏8" app:titleTextColor="#FFFFFF" app:titleTextSize="8sp" app:rightTextColor="#FFFFFF" app:rightText="更多" app:rightTextSize="7sp" app:rightWidth="80dp" app:rightHeight="45dp"/> </RelativeLayout><?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="TitleView"> <!-- 标题栏的属性 --> <attr name="titleBackgroundColor" format="color|reference"/> <attr name="title" format="string"/> <attr name="titleTextSize" format="dimension"/> <attr name="titleTextColor" format="color"/> <!-- 左边按钮的属性 --> <attr name="leftTopMargin" format="dimension"/> <attr name="leftLeftMargin" format="dimension"/> <attr name="leftWidth" format="dimension"/> <attr name="leftHeight" format="dimension"/> <attr name="leftTextSize" format="dimension"/> <attr name="leftTextColor" format="color"/> <attr name="leftBackground" format="color|reference"/> <attr name="leftText" format="string"/> <!-- 右边按钮的属性 --> <attr name="rightTopMargin" format="dimension"/> <attr name="rightRightMargin" format="dimension"/> <attr name="rightWidth" format="dimension"/> <attr name="rightHeight" format="dimension"/> <attr name="rightTextSize" format="dimension"/> <attr name="rightTextColor" format="color"/> <attr name="rightBackground" format="color|reference"/> <attr name="rightText" format="string"/> </declare-styleable> </resources>
左右按钮点击的背景效果文件，res\drawable\button_bg.xml<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- pressed --> <item android:state_pressed="true" > <shape android:shape="rectangle"> <solid android:color="#ff8c00" /> </shape> </item> <!-- focus --> <item android:state_focused="true" > <shape> <solid android:color="#ff8c00"/> </shape> </item> <!-- default --> <item> <shape> <solid android:color="#ff8c00"/> </shape> </item> </selector>
bankbtn.png 这是一张返回按钮的图标，上传总是显示不出来，截图吧![]()
actions_about.png
扫一扫
1616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
