自定义顶部导航栏

简介: 自定义顶部导航栏

创建自定义属性

在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();
            }
        });
    }
相关文章
|
6月前
|
前端开发
顶部导航栏
顶部导航栏
52 0
|
4月前
|
安全
uniapp实战 —— 自定义顶部导航栏
uniapp实战 —— 自定义顶部导航栏
188 2
|
6月前
uniapp项目怎么删除顶部导航栏
uniapp项目怎么删除顶部导航栏
327 0
|
6月前
|
前端开发 JavaScript
uniapp联动左侧导航栏分类?
uniapp联动左侧导航栏分类?
|
6月前
|
前端开发 JavaScript
左侧导航菜单
左侧导航菜单
|
6月前
左侧导航栏分类 ---联动版本
左侧导航栏分类 ---联动版本
80 0
|
搜索推荐
右侧边锚点导航栏
右侧边锚点导航栏
221 0
|
小程序 JavaScript 数据库
小程序分类页实现三级分类,顶部导航栏,左侧分类栏,右侧数据列表
小程序分类页实现三级分类,顶部导航栏,左侧分类栏,右侧数据列表
209 0
|
小程序 JavaScript
小程序顶部导航栏,可滑动,可动态选中放大
小程序顶部导航栏,可滑动,可动态选中放大
200 0
4.3 自定义菜单栏
4.3 自定义菜单栏
4.3 自定义菜单栏