android 自定义TopBar的使用

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);