每个软件都有属于自的TopBar,比如QQ,微信。。。。。
今天我们就来简单讲解一下自定义的TopBar的做法。
首先先来一张效果图:
一般的TopBar都有三个属性,一个左Button、右Button,还有就是中间的标题。
然后每个文字都会有各自的属性,字体大小,字体颜色,背景等等。。。
所以这次,我们先把最基础的属性将他配置上
先在value文件下新建attrs.xml文件
<declare-styleable name="TopBar">
<!-- 标题属性 -->
<attr name="titleText" format="string"/>
<attr name="titleTextSize" format="dimension"/>
<attr name="titleTextColor" format="color"/>
<attr name="titleBackground" format="reference|color"/>
<!-- 左按钮属性 -->
<attr name="leftText" format="string"/>
<attr name="leftBackground" format="reference|color"/>
<attr name="leftTextCloor" format="color"/>
<!-- 右按钮属性 -->
<attr name="rightText" format="string"/>
<attr name="rightBackground" format="reference|color"/>
<attr name="rightTextColor" format="color"/>
</declare-styleable>
format是值该属性的取值类型,一共有:
string,color,demension,integer,enum,reference,float,boolean,fraction,flag;
基础的属性弄好之后,想想一般的button还是需要点击事件的处理,所以下面的代码已经做了处理,对外暴露出左右按钮的点击事件:
package com.jp.view;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.jp.activity.R;
/**
* Created by Administrator on 2015/9/3.
*/
public class TopBar extends RelativeLayout
{
/**
* torbar的左右两个按钮
*/
private Button leftButton;
private Button rightButton;
/**
* torbar的标题
*/
private TextView title;
/**
* torbar的左按钮的字体颜色
*/
private int leftTextColor;
/**
* torbar的左按钮的背景
*/
private Drawable leftDrawable;
/**
* torbar的左按钮的标题
*/
private String leftText;
/**
* torbar的右按钮的字体颜色
*/
private int rightTextColor;
/**
* torbar的右按钮的背景
*/
private Drawable rightDrawable;
/**
* torbar的右按钮的标题
*/
private String rightText;
/**
* torbar的标题字体大小
*/
private float titleTextSize;
/**
* torbar的标题字体贪色
*/
private int titleTextColor;
/**
* torbar的标题
*/
private String titleText;
private Drawable titleBrackgroud;
private RelativeLayout.LayoutParams leftParams, rightParams, titleParams;
private TopBarClickListener listener;
//点击事件监听器接口
public interface TopBarClickListener
{
public void leftclick();
public void rightclick();
}
public TopBar(Context context, AttributeSet attrs)
{
super(context, attrs);
//获取自定义属性和值的映射集合
TypedArray td = context.obtainStyledAttributes(attrs, R.styleable.TopBar);
//取出自定义属性 - 左侧
leftTextColor = td.getColor(R.styleable.TopBar_leftTextCloor, Color.WHITE);
leftDrawable = td.getDrawable(R.styleable.TopBar_leftBackground);
leftText = td.getString(R.styleable.TopBar_leftText);
//取出自定义属性 - 右侧
rightTextColor = td.getColor(R.styleable.TopBar_rightTextColor, Color.BLACK);
rightDrawable = td.getDrawable(R.styleable.TopBar_rightBackground);
rightText = td.getString(R.styleable.TopBar_rightText);
//取出自定义属性 - 标题
titleTextSize = td.getDimension(R.styleable.TopBar_titleTextSize, 12);
titleText = td.getString(R.styleable.TopBar_titleText);
titleTextColor = td.getColor(R.styleable.TopBar_titleTextColor, Color.BLACK);
titleBrackgroud = td.getDrawable(R.styleable.TopBar_titleBackground);
//回收TypedArray(避免浪费资源,避免因为缓存导致的错误)
td.recycle();
leftButton = new Button(context);
rightButton = new Button(context);
title = new Button(context);
//设置属性 - 左侧
leftButton.setText(leftText);
leftButton.setTextColor(leftTextColor);
leftButton.setBackground(leftDrawable);
//设置属性 - 右侧
rightButton.setText(rightText);
rightButton.setTextColor(rightTextColor);
rightButton.setBackground(rightDrawable);
//设置属性 - 标题
title.setText(titleText);
title.setTextColor(titleTextColor);
title.setTextSize(titleTextSize);
title.setBackground(titleBrackgroud);
title.setGravity(Gravity.CENTER);
//设置整体背景颜色
setBackgroundColor(0xffeb933e);
//设置布局 - 左
leftParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
leftParams.addRule(RelativeLayout.CENTER_VERTICAL, TRUE);
addView(leftButton, leftParams);
//设置布局 - 右
rightParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
rightParams.addRule(RelativeLayout.CENTER_VERTICAL, TRUE);
addView(rightButton, rightParams);
//设置布局 - 标题
titleParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
titleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
addView(title, titleParams);
//设置监听器
leftButton.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
listener.leftclick();
}
});
rightButton.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
listener.rightclick();
}
});
}
//是否显示左右按钮
public void setLeftIsVisible(boolean visible)
{
if (visible) {
leftButton.setVisibility(View.VISIBLE);
} else {
leftButton.setVisibility(View.GONE);
}
}
public void setRightIsVisible(boolean visible)
{
if (visible) {
rightButton.setVisibility(View.VISIBLE);
} else {
rightButton.setVisibility(View.GONE);
}
}
}
接下来看布局文件,这里有一点是要提一下
android studio一定要引入
xmlns:custom=”http://schemas.android.com/apk/res-auto”
而ecplice一定要引入
xmlns:custom=”http://schemas.android.com/apk/res/com.example.customview01”我们的命名空间,后面的包路径指的是项目的package
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
tools:context=".MainActivity">
<com.jp.view.TopBar
android:background="#eb933e"
android:id="@+id/topbar_title"
android:layout_width="match_parent"
android:layout_height="40dp"
custom:leftText="左菜单"
custom:leftBackground="#eb933e"
custom:rightBackground="#00eb933e"
custom:leftTextCloor="#ffffff"
custom:rightText="右菜单"
custom:rightTextColor="#ffffff"
custom:titleText="我是自定义的"
custom:titleTextColor="#000000"
custom:titleTextSize="10sp"
/>
</RelativeLayout>
最后在MainActivity中使用的方法:
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TopBar topBar = (TopBar) findViewById(R.id.topbar);
/* topBar.setLeftIsVisible(false);
topBar.setRightIsVisible(false);*/
topBar.setOnTopBarClickListener(new TopBarClickListener() {
@Override
public void rightclick(){
Toast.makeText(MainActivity.this, "Right Clicked", Toast.LENGTH_SHORT).show();
}
@Override
public void leftclick(){
Toast.makeText(MainActivity.this, "Left Clicked", Toast.LENGTH_SHORT).show();
}
});
}
}