自定义顶部导航栏

淩亂°似流年 2022-07-13 23:42 325阅读 0赞

# 创建自定义属性 #

在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();
                }
            });
        }