自定义顶部导航栏

简介: 自定义顶部导航栏

创建自定义属性

在res/values中创建名为attrs的文件。

定义2个属性,分别是左边按钮和右边按钮,值是drawable,所以格式应该为refrence。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyTopBar">
        <attr name="leftButton" format="reference" />
        <attr name="rightButton" format="reference" />
    </declare-styleable>
</resources>

创建自定义视图类

创建自定义view类,并继承自RelativeLayout。

/**
 * Created by ado on 1:49 2016/10/17.
 */
public class MyTopBar extends RelativeLayout {
    private Context mContext;
    //两张图片
    private Drawable leftResId, rightResId;
    //左右按钮
    private ImageButton leftButton, rightButton;
    //两个按钮的点击回调接口
    private OnLeftClickListener onLeftClickListener;
    private OnRightClickListener onRightClickListener;

    public MyTopBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        initAttr(attrs);
        initUi();
        setlistener();
    }

    private void initAttr(AttributeSet attrs) {
        //获取两张图片的drawalbe
        TypedArray typedArray = mContext.getTheme().obtainStyledAttributes(attrs, R.styleable.MyTopBar, 0, 0);
        leftResId = typedArray.getDrawable(R.styleable.MyTopBar_leftButton);
        rightResId = typedArray.getDrawable(R.styleable.MyTopBar_rightButton);
        //获取完了记得回收对象
        typedArray.recycle();
    }

    private void initUi() {
        //创建布局参数
        LayoutParams params1 = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        LayoutParams params2 = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        //设置左右按钮分别对齐父布局的左右两边
        params1.addRule(ALIGN_PARENT_LEFT);
        params2.addRule(ALIGN_PARENT_RIGHT);
        //创建左右按钮
        leftButton = new ImageButton(mContext);
        rightButton = new ImageButton(mContext);
        //因为是ImageButton,所以需要设置背景为全透明
        leftButton.setBackgroundResource(R.color.bg_alpha);
        rightButton.setBackgroundResource(R.color.bg_alpha);
        //设置对应的图片
        leftButton.setImageDrawable(leftResId);
        rightButton.setImageDrawable(rightResId);
        //将两个按钮添加到父布局
        addView(leftButton, params1);
        addView(rightButton, params2);
    }

    private void setlistener() {
        //为2个按钮设置点击回调
        leftButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                if (null != onLeftClickListener) {
                    onLeftClickListener.onClick(view);
                }
            }
        });
        rightButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                if (null != onRightClickListener) {
                    onRightClickListener.onClick(view);
                }
            }
        });
    }

    //return 自定义view对象,链式编程
    public MyTopBar setOnLeftButtonClickListener(OnLeftClickListener onLeftButtonClickListener) {
        this.onLeftClickListener = onLeftButtonClickListener;
        return this;
    }

    public MyTopBar setOnRightButtonClickListener(OnRightClickListener onRightButtonClickListener) {
        this.onRightClickListener = onRightButtonClickListener;
        return this;
    }

    public interface OnLeftClickListener {
        void onClick(View view);
    }

    public interface OnRightClickListener {
        void onClick(View view);
    }
}

在布局中使用

    <com.ado.video.ui.view.MyTopBar
        android:id="@+id/topbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:leftButton="@android:drawable/ic_menu_share"
        app:rightButton="@android:drawable/ic_media_pause"
        android:background="#7c7b7b"/>

在activity中使用

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myTopBar = (MyTopBar) findViewById(R.id.topbar);
        myTopBar.setOnLeftButtonClickListener(new MyTopBar.OnLeftClickListener() {
            @Override
            public void onClick(View view) {
                Logger.i("左边点击了========================");
                Toast.makeText(getApplicationContext(), "左边", Toast.LENGTH_SHORT).show();
            }
        }).setOnRightButtonClickListener(new MyTopBar.OnRightClickListener() {
            @Override
            public void onClick(View view) {
                Logger.i("右边点击了========================");
                Toast.makeText(getApplicationContext(), "右边", Toast.LENGTH_SHORT).show();
            }
        });
    }
相关文章
|
8月前
|
前端开发
顶部导航栏
顶部导航栏
75 0
Foundation 顶部导航栏7
通过将导航栏放置在带有 `.sticky` 类的 `&lt;div&gt;` 中,可以实现导航栏的绝对定位效果。当页面滚动至该区域时,导航栏会固定在顶部。此外,可以通过 `data-options=&quot;sticky_on: small|medium|large&quot;` 属性控制导航栏在特定屏幕尺寸上的固定行为。例如,仅在大屏幕上固定导航栏或在小屏幕和大屏幕上固定导航栏。
Foundation 顶部导航栏6
导航栏可以固定在页面顶部,即使页面滚动,导航栏也会保持在顶部不动。实现方法是将导航栏放置在带有 `class=&quot;fixed&quot;` 的 `&lt;div&gt;` 标签内。
Foundation 顶部导航栏3
通过在 `&lt;li&gt;` 元素内添加 `&lt;label&gt;` 标签,可以为下拉菜单设置分类标题。例如,使用 `&lt;label&gt;Fruit&lt;/label&gt;` 和 `&lt;label&gt;Vegetable&lt;/label&gt;` 来区分水果和蔬菜选项。
|
2月前
|
UED
Foundation 顶部导航栏5
导航栏支持多种交互方式,默认情况下下拉菜单在鼠标悬停时显示,但可通过 `data-options=&quot;is_hover: false&quot;` 设置为点击显示。此外,导航栏还支持添加按钮和图标,增强界面功能与美观度。例如,通过引入 Foundation 图标库,可在导航项中加入图标,提升用户体验。
Foundation 顶部导航栏2
顶部导航栏可通过在 `&lt;li&gt;` 元素上添加 `.has-dropdown` 类来设置下拉菜单。示例代码展示了如何创建包含多个链接的下拉菜单,并使用 `.divider` 类来添加分割线。
Foundation 顶部导航栏1
顶部导航栏位于页面头部,包含网站Logo、菜单按钮及导航链接。在小屏幕上,菜单按钮可展开隐藏的选项。通过`.left`和`.right`类可设置链接对齐方式,`.divider`类用于添加分割线。
|
6月前
|
安全
uniapp实战 —— 自定义顶部导航栏
uniapp实战 —— 自定义顶部导航栏
226 2
|
8月前
uniapp项目怎么删除顶部导航栏
uniapp项目怎么删除顶部导航栏
360 0
|
8月前
|
前端开发 JavaScript
uniapp联动左侧导航栏分类?
uniapp联动左侧导航栏分类?

热门文章

最新文章