您的位置: 首页  >  文章  >  Android 自定义标题栏 TitleBar

Android 自定义标题栏 TitleBar

分类: 文章 • 2022-10-09 22:34:21

惯例：先上图后说话，谢谢各位伙伴的支持! 有你们是我的福分！

Android 自定义标题栏 TitleBarAndroid 自定义标题栏 TitleBar

Android 自定义标题栏 TitleBar

每日一言：好看的皮囊千篇一律，有趣的灵魂万里挑一。

注意点：1.需要了解attrs中属性format

               2.自定义布局时使用this（context，null），本类中的，千万不要super（为默认）

            



第一步：

新建布局view_title_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.AppCompatCheckedTextView
      .../>

    <android.support.v7.widget.AppCompatCheckedTextView
       .../>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:orientation="horizontal">

        <android.support.v7.widget.AppCompatCheckedTextView
           .../>

        <android.support.v7.widget.AppCompatCheckedTextView
           .../>
    </LinearLayout>
</merge>

第二步：

在attrs.xml中添加属性  分别设置为 最左位置，中间标题位置，最右边位置，最右边第二个位置文字，图片

<declare-styleable name="CustomTitleBar">
    <!-- 项目中把下面这五项定义在styles.xml里 -->
    <attr name="titlebar_leftAndRightTextColor" format="reference|color" />
    <attr name="titlebar_titleTextColor" format="reference|color" />
    <attr name="titlebar_leftAndRightTextSize" format="reference|dimension" />
    <attr name="titlebar_titleTextSize" format="reference|dimension" />
    <attr name="titlebar_leftAndRightPadding" format="reference|dimension" />
    <!-- 下面这几项更具每个页面的业务写在layout中 -->
    <attr name="titlebar_leftText" format="reference|string" />
    <attr name="titlebar_rightText" format="reference|string" />
    <attr name="titlebar_rightSecondaryText" format="reference|string" />
    <attr name="titlebar_titleText" format="reference|string" />
    <attr name="titlebar_leftDrawable" format="reference" />
    <attr name="titlebar_titleDrawable" format="reference" />
    <attr name="titlebar_rightDrawable" format="reference" />
    <attr name="titlebar_rightSecondaryDrawable" format="reference" />
    <!-- 当既有leftText，又有leftDrawable时，设置该属性 -->
    <attr name="titlebar_leftDrawablePadding" format="reference|dimension" />
    <!-- 当既有titleText，又有titleDrawable时，设置该属性 -->
    <attr name="titlebar_titleDrawablePadding" format="reference|dimension" />
    <!-- 当既有rightText，又有rightDrawable时，设置该属性 -->
    <attr name="titlebar_rightDrawablePadding" format="reference|dimension" />
    <!-- 下面三项通常情况下不用，使用默认值就好。某个界面标题特别长并且左右文字短或者左右文字特别长并且标题特别短时单独配置 -->
    <attr name="titlebar_leftMaxWidth" format="reference|dimension"/>
    <attr name="titlebar_rightMaxWidth" format="reference|dimension"/>
    <attr name="titlebar_titleMaxWidth" format="reference|dimension"/>
    <!-- 标题文字是否为粗体，默认为true -->
    <attr name="titlebar_isTitleTextBold" format="boolean"/>
    <!-- 左边文字是否为粗体，默认为false -->
    <attr name="titlebar_isLeftTextBold" format="boolean"/>
    <!-- 右边文字是否为粗体，默认为false -->
    <attr name="titlebar_isRightTextBold" format="boolean"/>
</declare-styleable>

自定义标题控件 CustomTitleBar.class

public class CustomTitleBar extends RelativeLayout {
    private AppCompatCheckedTextView mTitleCtv;
    private AppCompatCheckedTextView mLeftCtv;
    private AppCompatCheckedTextView mRightCtv;
    private AppCompatCheckedTextView mRightSecondaryCtv;
    private Delegate mDelegate;

    public CustomTitleBar(Context context) {
        this(context, null);
    }

    public CustomTitleBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomTitleBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        View.inflate(context, R.layout.view_title_bar, this);
        initView();
        setListener();
        initAttrs(context, attrs);
    }


    protected void initView() {
        mLeftCtv = getViewById(R.id.ctv_title_bar_left);
        mRightCtv = getViewById(R.id.ctv_title_bar_right);
        mRightSecondaryCtv = getViewById(R.id.ctv_title_bar_right_secondary);
        mTitleCtv = getViewById(R.id.ctv_title_bar_title);
    }

    protected void setListener() {
        mLeftCtv.setOnClickListener(new OnNoDoubleClickListener() {
            @Override
            public void onNoDoubleClick(View v) {
                if (mDelegate != null) {
                    mDelegate.onClickLeftCtv();
                }
            }
        });
        mTitleCtv.setOnClickListener(new OnNoDoubleClickListener() {
            @Override
            public void onNoDoubleClick(View v) {
                if (mDelegate != null) {
                    mDelegate.onClickTitleCtv();
                }
            }
        });
        mRightCtv.setOnClickListener(new OnNoDoubleClickListener() {
            @Override
            public void onNoDoubleClick(View v) {
                if (mDelegate != null) {
                    mDelegate.onClickRightCtv();
                }
            }
        });
        mRightSecondaryCtv.setOnClickListener(new OnNoDoubleClickListener() {
            @Override
            public void onNoDoubleClick(View v) {
                if (mDelegate != null) {
                   // mDelegate.onClickRightSecondaryCtv();
                }
            }
        });

    }

    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomTitleBar);
        final int N = typedArray.getIndexCount();
        for (int i = 0; i < N; i++) {
            initAttr(typedArray.getIndex(i), typedArray);
        }
        typedArray.recycle();
    }

    protected void initAttr(int attr, TypedArray typedArray) {
        switch (attr) {
            case R.styleable.CustomTitleBar_titlebar_leftText:
                setLeftText(typedArray.getText(attr));
                break;
          ...
            default:
                break;
        }

}

    public CustomTitleBar hiddenLeftCtv() {
        mLeftCtv.setVisibility(GONE);
        return this;
    }

    public CustomTitleBar showLeftCtv() {
        mLeftCtv.setVisibility(VISIBLE);
        return this;
    }

    public CustomTitleBar setLeftText(@StringRes int resId) {
        setLeftText(getResources().getString(resId));
        return this;
    }

    public CustomTitleBar setLeftText(CharSequence text) {
        if (TextUtils.isEmpty(text)) {
            mLeftCtv.setText("");
            if (mLeftCtv.getCompoundDrawables()[0] == null) {
                hiddenLeftCtv();
            }
        } else {
            mLeftCtv.setText(text);
            showLeftCtv();
        }
        return this;
    }
    
    

    public CustomTitleBar setDelegate(Delegate delegate) {
        mDelegate = delegate;
        return this;
    }

    /**
     * 查找View
     *
     * @param id   控件的id
     * @param <VT> View类型
     */
    protected <VT extends View> VT getViewById(@IdRes int id) {
        return (VT) findViewById(id);
    }

    public static int dp2px(Context context, float dpValue) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpValue, context.getResources().getDisplayMetrics());
    }

    public static int sp2px(Context context, float spValue) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spValue, context.getResources().getDisplayMetrics());
    }

public interface Delegate {
    void onClickLeftCtv();

    void onClickTitleCtv();

    void onClickRightCtv();

    //void onClickRightSecondaryCtv();
}
}
第四步

自定义标题样式

<!--自定义标题的样式-->
<style name="TitleBar">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">?attr/actionBarSize</item>
    <item name="android:background">@color/primary_blue</item>
    <item name="titlebar_leftAndRightTextColor">@color/white</item>
    <item name="titlebar_titleTextColor">@color/white</item>
</style>

第五步  使用
 

<com.danlu.smartpos.view.CustomTitleBar
   android:id="@+id/view_toolbar"
    style="@style/TitleBar"
    app:titlebar_leftDrawable="@drawable/btn_back"
    app:titlebar_leftText="返回"
    app:titlebar_rightDrawable="@drawable/iv_scan_new"
    app:titlebar_titleText="@string/about_danlu"/>

附加一个防止快速连续点击的方法 

public abstract class OnNoDoubleClickListener implements View.OnClickListener {
    private int mThrottleFirstTime = 600;
    private long mLastClickTime = 0;

    public OnNoDoubleClickListener() {
    }

    public OnNoDoubleClickListener(int throttleFirstTime) {
        mThrottleFirstTime = throttleFirstTime;
    }

    @Override
    public void onClick(View v) {
        long currentTime = System.currentTimeMillis();
        if (currentTime - mLastClickTime > mThrottleFirstTime) {
            mLastClickTime = currentTime;
            onNoDoubleClick(v);
        }
    }

    public abstract void onNoDoubleClick(View v);
}
谢谢观看，相互学习Android 自定义标题栏 TitleBar，后续会继续优化，一直努力下去,感谢bingoogolapple 学习帮助

相关推荐