1.效果图:
2.布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="45dip">
<ImageView
android:layout_width="fill_parent"
android:layout_height="45dip"
android:background="@color/orange"/>
<RelativeLayout
android:id="@+id/left_touch"
android:layout_width="wrap_content"
android:layout_height="45dip"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:minWidth="50dip">
<ImageView
android:id="@+id/left_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
/>
<TextView
android:id="@+id/left_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dip"
android:text="<"
android:textColor="@android:color/white"
android:textSize="30sp"/>
</RelativeLayout>
<TextView
android:id="@+id/title_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginLeft="60dip"
android:layout_marginRight="60dip"
android:clickable="true"
android:focusable="false"
android:focusableInTouchMode="true"
android:gravity="center"
android:scrollHorizontally="true"
android:singleLine="true"
android:text="@string/app_name"
android:textColor="@android:color/white"
/>
<RelativeLayout
android:id="@+id/right_touch"
android:layout_width="wrap_content"
android:layout_height="45dip"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:minWidth="50dip">
<TextView
android:id="@+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:paddingLeft="4dip"
android:paddingRight="4dip"
android:textColor="@android:color/white"
android:textSize="14sp"/>
<ImageView
android:id="@+id/right_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/egg_confirm"
android:layout_centerInParent="true"/>
</RelativeLayout>
</RelativeLayout>
3.自定义View
public class MyTopBar extends RelativeLayout{ private LayoutInflater mLayoutInflater; private ViewGroup mMyTopBar; private RelativeLayout mLeftLayout,mRightLayout; private ImageView mLeftImage,mRightImage; private TextView mTitle,mRightText; private OnMyTopBarListener onMyTopBarListener; public MyTopBar(Context context) { super(context); initView(context); } public MyTopBar(Context context, AttributeSet attrs) { super(context, attrs); initView(context); } public MyTopBar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initView(context); } /** * 初始化界面 * @param context */ private void initView(Context context) { mLayoutInflater=(LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); mMyTopBar=(ViewGroup)mLayoutInflater.inflate(R.layout.my_view_topbar, null); //对左右两边进行监听 mLeftLayout=(RelativeLayout)mMyTopBar.findViewById(R.id.left_touch); mLeftLayout.setOnClickListener(mOnClickListener); mRightLayout=(RelativeLayout)mMyTopBar.findViewById(R.id.right_touch); mRightLayout.setOnClickListener(mOnClickListener); mLeftImage=(ImageView)mMyTopBar.findViewById(R.id.left_img); mRightImage=(ImageView)mMyTopBar.findViewById(R.id.right_image); mTitle=(TextView)mMyTopBar.findViewById(R.id.left_text); mRightText=(TextView)mMyTopBar.findViewById(R.id.title_name); this.addView(mMyTopBar); } //自定义监听,只要实现这个TopBar的监听。就能实现对左右两边的点击事件的接口 public static abstract interface OnMyTopBarListener{ public abstract void onMyTopBarLeftClicked(); public abstract void onMyTopBarRightClicked(); } /** * 对myTopBar 设置点击监听 * @param listener */ public void setOnMyTopBarListener(OnMyTopBarListener listener){ onMyTopBarListener=listener; } private OnClickListener mOnClickListener=new OnClickListener() { @Override public void onClick(View v) { if(onMyTopBarListener!=null){ if(v.getId()==R.id.left_touch){ onMyTopBarListener.onMyTopBarLeftClicked(); return; } if(v.getId()==R.id.right_touch){ onMyTopBarListener.onMyTopBarRightClicked(); return; } } } }; /** * 设置title name * * @param flag * @param text */ public void setTitleName(boolean flag, int text) { if (flag) { mTitle.setText(text); } } public void setTitleName(boolean flag, String text) { if (flag) { mTitle.setText (text); } } public void setTitleTextSize(float size) { mTitle.setTextSize(size); } /** * 显示左边按钮 * * @param flag */ public void showLeftBtn(boolean flag) { if (flag) { mLeftLayout.setVisibility(View.VISIBLE); } else { mLeftLayout.setVisibility (View.GONE); } } /** * 显示右边按钮 * * @param flag */ public void showRightBtn(boolean flag) { if (flag) { mRightLayout.setVisibility(View.VISIBLE); } else { mRightLayout.setVisibility(View.GONE); } } /** * 设置左边图片 */ public void setLeftImageView(int resId){ mLeftLayout.setVisibility(View.VISIBLE); mLeftImage.setBackgroundResource(resId); mLeftImage.setVisibility(View.VISIBLE); mMyTopBar.findViewById(R.id.left_text).setVisibility(View.GONE); } public void setRightText(int text) { mRightText.setText(text); } public void setRightText(String text) { mRightText.setText(text); } /** * 设置右边图片 * * @param view */ public void setRightImageView(int view) { mRightImage.setBackgroundResource(view); invalidate(); } }
4.使用方式:
public class MainActivity extends Activity implements MyTopBar.OnMyTopBarListener {
private MyTopBar mMyTopBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mMyTopBar=(MyTopBar)findViewById(R.id.myTopBar);
mMyTopBar.setOnMyTopBarListener(this);
}
5.注意事项:
使用自定义标题栏,要实现MyTopBar.OnMyTopBarListener 然后会实现以下两个接口
//点击topbar左边事件处理
@Override
public void onMyTopBarLeftClicked() {
}
//点击topbar右边事件处理
@Override
public void onMyTopBarRightClicked() {
}
在使用是一定要设置监听: mMyTopBar.setOnMyTopBarListener(this);