Android 自定义标题栏Topbar

本文介绍了一种自定义App标题栏的方法,通过创建一个可复用的标题栏组件,简化了UI开发流程。该组件支持多种自定义属性,如背景颜色、按钮文字等,并提供了示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

       如图, 现在的app标题结构都相对统一。所以自定义一个模版,要更优于为每个页面写一个布局。


      以下为本人改进慕课网的代码,实现一个自定义的标题栏。先上个效果图吧:


一、首先是自定义属性,编写attrs.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>


    <declare-styleable name="Topbar">
        <attr name="background" format="reference|color" />
        <attr name="title" format="string" />
        <attr name="titleTextSize" format="dimension" />
        <attr name="titleTextColor" format="color" />
        <attr name="leftTextColor" format="reference|color" />
        <attr name="leftTextSize" format="dimension" />
        <attr name="leftWidth" format="dimension" />
        <attr name="leftHeight" format="dimension" />
        <attr name="leftMargin" format="dimension" />
        <attr name="leftBackground" format="reference|color" />
        <attr name="leftText" format="string" />
        <attr name="rightTextColor" format="reference|color" />
        <attr name="rightTextSize" format="dimension" />
        <attr name="rightWidth" format="dimension" />
        <attr name="rightHeight" format="dimension" />
        <attr name="rightMargin" format="dimension" />
        <attr name="rightBackground" format="reference|color" />
        <attr name="rightText" format="string" />
        <attr name="buttonMode">
            <enum name="both" value="0" />
            <enum name="left" value="1" />
            <enum name="right" value="2" />
        </attr>
    </declare-styleable>


</resources>

二、自定义的标题控件Topbar  extends RelativeLayout:

package me.jp.mytopbar.view;

import me.jp.mytopbar.R;
import android.content.Context;
import android.content.res.ColorStateList;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class Topbar extends RelativeLayout {
	/**
	 * 按钮模式 -1表示没有button ,0表示有两个button, 1表示只有leftButton,2表示只有rightButton
	 */
	private int buttonMode;

	private Button leftButton, rightButton;
	private TextView tvTitle;

	private float leftMargin;// leftButton Margin left
	private ColorStateList leftTextColor;
	private float leftTextSize;
	private Drawable leftBackground;
	private String leftText;
	private float leftWidth;
	private float leftHeight;

	private float rightMargin;// rightButton Margin right
	private ColorStateList rightTextColor;
	private float rightTextSize;
	private Drawable rightBackground;
	private String rightText;
	private float rightWidth;
	private float rightHeight;

	private float titleTextSize;
	private int titleTextColor;
	private String title;

	private LayoutParams leftParams, rightParams, titleParams;

	private Drawable background;

	private TopbarLeftClickListener leftListener;
	private TopbarRightClickListener rightListener;

	public interface TopbarLeftClickListener {
		public void leftClick();
	}

	public interface TopbarRightClickListener {
		public void rightClick();
	}

	public void setOnTopbarLeftClickListener(TopbarLeftClickListener listener) {
		this.leftListener = listener;
	}

	public void setOnTopbarRightClickListener(TopbarRightClickListener listener) {
		this.rightListener = listener;
	}

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

	@SuppressWarnings("deprecation")
	public Topbar(Context context, AttributeSet attrs) {
		super(context, attrs);
		TypedArray ta = context.obtainStyledAttributes(attrs,
				R.styleable.Topbar);

		titleTextSize = ta.getDimension(R.styleable.Topbar_titleTextSize, 0);
		Log.i("TestData", "titleTextSize:" + titleTextSize);
		titleTextColor = ta.getColor(R.styleable.Topbar_titleTextColor, 0);
		title = ta.getString(R.styleable.Topbar_title);

		buttonMode = ta.getInteger(R.styleable.Topbar_buttonMode, -1);
		background = ta.getDrawable(R.styleable.Topbar_background);

		switch (buttonMode) {
		case 0:// 0表示有两个button
			initLeftButton(context, ta);
			initRightButton(context, ta);
			break;
		case 1:// 1表示只有leftButton
			initLeftButton(context, ta);
			break;
		case 2:// 2表示只有rightButton
			initRightButton(context, ta);
			break;
		default:// 表示没有button
			break;
		}

		ta.recycle();

		setBackgroundDrawable(background);// 设置Topbar背景
		tvTitle = new TextView(context);

		tvTitle.setTextSize(titleTextSize);
		tvTitle.setTextColor(titleTextColor);
		tvTitle.setText(title);
		tvTitle.setGravity(Gravity.CENTER);

		titleParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
				LayoutParams.MATCH_PARENT);
		titleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
		addView(tvTitle, titleParams);
	}

	@SuppressWarnings("deprecation")
	private void initLeftButton(Context context, TypedArray ta) {
		leftTextColor = ta.getColorStateList(R.styleable.Topbar_leftTextColor);
		leftTextSize = ta.getDimension(R.styleable.Topbar_leftTextSize, 0);
		leftBackground = ta.getDrawable(R.styleable.Topbar_leftBackground);
		leftText = ta.getString(R.styleable.Topbar_leftText);
		leftWidth = ta.getDimension(R.styleable.Topbar_leftWidth, 0);
		leftHeight = ta.getDimension(R.styleable.Topbar_leftHeight, 0);
		leftMargin = ta.getDimension(R.styleable.Topbar_leftMargin, 0);

		leftButton = new Button(context);

		if (leftTextColor != null)
			leftButton.setTextColor(leftTextColor);
		leftButton.setBackgroundDrawable(leftBackground);
		leftButton.setText(leftText);
		if (0 != leftTextSize)
			leftButton.setTextSize(leftTextSize);

		leftParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
				LayoutParams.WRAP_CONTENT);
		leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
		leftParams.addRule(RelativeLayout.CENTER_VERTICAL);
		if (0 != leftWidth) {
			leftParams.width = (int) leftWidth;
		}
		if (0 != leftHeight) {
			leftParams.height = (int) leftHeight;
		}
		if (0 != leftMargin) {
			leftParams.setMargins((int) leftMargin, 0, 0, 0);
		}

		addView(leftButton, leftParams);

		leftButton.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				if (leftListener != null)
					leftListener.leftClick();
			}
		});
	}

	@SuppressWarnings("deprecation")
	private void initRightButton(Context context, TypedArray ta) {
		rightTextColor = ta
				.getColorStateList(R.styleable.Topbar_rightTextColor);
		rightTextSize = ta.getDimension(R.styleable.Topbar_rightTextSize, 0);
		rightBackground = ta.getDrawable(R.styleable.Topbar_rightBackground);
		rightText = ta.getString(R.styleable.Topbar_rightText);
		rightWidth = ta.getDimension(R.styleable.Topbar_rightWidth, 0);
		rightHeight = ta.getDimension(R.styleable.Topbar_rightHeight, 0);
		rightMargin = ta.getDimension(R.styleable.Topbar_rightMargin, 0);

		rightButton = new Button(context);

		if (rightTextColor != null)
			rightButton.setTextColor(rightTextColor);
		rightButton.setBackgroundDrawable(rightBackground);
		rightButton.setText(rightText);
		if (0 != rightTextSize)
			rightButton.setTextSize(rightTextSize);

		rightParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
				LayoutParams.WRAP_CONTENT);
		rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
		rightParams.addRule(RelativeLayout.CENTER_VERTICAL);
		if (0 != rightWidth) {
			rightParams.width = (int) rightWidth;
		}
		if (0 != rightHeight) {
			rightParams.height = (int) rightHeight;
		}
		if (0 != rightMargin) {
			rightParams.setMargins(0, 0, (int) rightMargin, 0);
		}

		addView(rightButton, rightParams);

		rightButton.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				if (rightListener != null)
					rightListener.rightClick();
			}
		});
	}

	// 设置标题
	public void setTitle(String title) {
		tvTitle.setText(title);
	}

	public void setTitle(int resId) {
		tvTitle.setText(resId);
	}
}


三、在布局文件中设置属性,这里仅举一个例子:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:custom="http://schemas.android.com/apk/res/me.jp.mytopbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

       <me.jp.mytopbar.view.Topbar
        android:id="@+id/topbar1"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        custom:background="#ffffff"
        custom:buttonMode="both"
        custom:leftBackground="@drawable/left_btn_topbar_selector"
        custom:leftHeight="40dp"
        custom:leftMargin="12dp"
        custom:leftWidth="40dp"
        custom:rightMargin="12dp"
        custom:rightText="完成"
        custom:rightTextColor="@android:color/black"
        custom:title="Title1"
        custom:titleTextColor="@android:color/black"
        custom:titleTextSize="16sp" />

 </LinearLayout>

四、在页面中设置Topbar的监听:

package me.jp.mytopbar;

import me.jp.mytopbar.view.Topbar;
import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.widget.Toast;

public class MainActivity extends Activity {

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

		initEvent();
	}

	private void initEvent() {
		Topbar topbar1 = (Topbar) findViewById(R.id.topbar1);
		topbar1.setOnTopbarLeftClickListener(new Topbar.TopbarLeftClickListener() {
			@Override
			public void leftClick() {
				Toast.makeText(MainActivity.this, "left", Toast.LENGTH_SHORT)
						.show();
			}
		});

		topbar1.setOnTopbarRightClickListener(new Topbar.TopbarRightClickListener() {

			@Override
			public void rightClick() {
				Toast.makeText(MainActivity.this, "right", Toast.LENGTH_SHORT)
						.show();
			}
		});		
		
	}
}

大家,还可以继续上面进行进一步的优化.......



评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值