Android 自定义view实现TopBar

叁歲伎倆 2022-06-07 00:12 354阅读 0赞

布局文件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:id="@+id/activity_main"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:paddingBottom="@dimen/activity_vertical_margin"
  8.     android:paddingLeft="@dimen/activity_horizontal_margin"
  9.     android:paddingRight="@dimen/activity_horizontal_margin"
  10.     android:paddingTop="@dimen/activity_vertical_margin"
  11.     tools:context="com.bwie.test.MainActivity">
  13.     <com.bwie.test.MyView
  14.         xmlns:android="http://schemas.android.com/apk/res/android"
  15.         xmlns:lt="http://schemas.android.com/apk/res-auto"
  16.         android:id="@+id/titlebar"
  17.         android:layout_width="match_parent"
  18.         android:layout_height="60dp"
  19.         lt:leftButtonText="返回"
  20.         lt:leftButtonTextColor="@android:color/white"
  21.         lt:leftButtonTextSize="8sp"
  22.         lt:buttonBgColor="#4556ec"
  23.         lt:titleText="标题"
  24.         lt:titleColor="@android:color/white"
  25.         lt:titleSize="8sp"
  26.         lt:rightButtonText="完成"
  27.         lt:rightButtonTextColor="@android:color/white"
  28.         lt:rightButtonTextSize="8sp"
  29.         android:background="#47ea10"
  30.         android:padding="10sp"
  31.         >
  32.     </com.bwie.test.MyView>
  33. </RelativeLayout>

自定义属性attrs.xml文件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <declare-styleable name="Titlebar">
  4.         <attr name="leftButtonText" format="string|reference"></attr>
  5.         <attr name="leftButtonTextColor" format="color|reference"></attr>
  6.         <attr name="leftButtonTextSize" format="dimension|reference"></attr>
  7.         <attr name="leftButtonImage" format="color|reference"></attr>
  8.         <attr name="buttonBgColor" format="color"/>
  10.         <attr name="titleText" format="string|reference"></attr>
  11.         <attr name="titleColor" format="color|reference"></attr>
  12.         <attr name="titleSize" format="dimension|reference"></attr>
  14.         <attr name="rightButtonText" format="string|reference"></attr>
  15.         <attr name="rightButtonTextColor" format="color|reference"></attr>
  16.         <attr name="rightButtonTextSize" format="dimension|reference"></attr>
  17.         <attr name="rightButtonImage" format="color|reference"></attr>
  20.     </declare-styleable>
  22. </resources>

自定义View的Class类

  1. public class MyView extends RelativeLayout{
  3.     private String mLeftButtonText;
  4.     private int mLeftButtonTextColor;
  5.     private float mLeftButtonSize;
  6.     private Drawable mLeftButtonImage;
  7.     private String mTitleButtonText;
  8.     private int mTitleButtonTextColor;
  9.     private float mTitleButtonSize;
  10.     private String mRightButtonText;
  11.     private int mRightButtonTextColor;
  12.     private float mRightButtonSize;
  13.     private Drawable mRightButtonImage;
  14.     private TextView mRightTextView;
  15.     private TextView titleTextView;
  16.     private ImageView mLeftButton;
  17.     private TextView mLeftTextView;
  18.     private ImageView mRightButton;
  19.     int buttonBgColor;
  20.     public MyView(Context context) {
  21.         this(context,null);
  22.     }
  24.     public MyView(Context context, AttributeSet attrs) {
  25.         this(context, attrs,0);
  26.         TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.Titlebar);
  27.         buttonBgColor = typedArray.getColor(R.styleable.Titlebar_buttonBgColor,Color.BLUE);
  29. //左侧的按钮
  30.         mLeftButtonText = typedArray.getString(R.styleable.Titlebar_leftButtonText);
  31.         mLeftButtonTextColor = typedArray.getColor(R.styleable.Titlebar_leftButtonTextColor, Color.GRAY);
  32.         mLeftButtonSize = typedArray.getDimension(R.styleable.Titlebar_leftButtonTextSize, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
  33.         mLeftButtonImage = typedArray.getDrawable(R.styleable.Titlebar_leftButtonImage);
  34. //中间的按钮
  35.         mTitleButtonText = typedArray.getString(R.styleable.Titlebar_titleText);
  36.         mTitleButtonTextColor = typedArray.getColor(R.styleable.Titlebar_titleColor, Color.GRAY);
  37.         mTitleButtonSize = typedArray.getDimension(R.styleable.Titlebar_titleSize, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
  38. //右侧的按钮
  39.         mRightButtonText = typedArray.getString(R.styleable.Titlebar_rightButtonText);
  40.         mRightButtonTextColor = typedArray.getColor(R.styleable.Titlebar_rightButtonTextColor, Color.GRAY);
  41.         mRightButtonSize = typedArray.getDimension(R.styleable.Titlebar_rightButtonTextSize, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
  42.         mRightButtonImage = typedArray.getDrawable(R.styleable.Titlebar_rightButtonImage);
  44.         typedArray.recycle();//回收
  45.         /*调用方法*/
  46.         initView(context);
  47.     }
  49.     public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
  50.         this(context, attrs, defStyleAttr,0);
  51.     }
  53.     public MyView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
  54.         super(context, attrs, defStyleAttr, defStyleRes);
  55.     }
  56.     /*构建按钮*/
  57.     private void initView(Context context) {
  59.         if(mLeftButtonImage == null & mLeftButtonText != null){
  60.             // 当用户没有设置左侧按钮图片并设置了左侧的按钮文本属性时--添加左侧文本按钮
  61.             mLeftTextView = new TextView(context);
  62.             mLeftTextView.setText(mLeftButtonText);
  63.             mLeftTextView.setTextColor(mLeftButtonTextColor);
  64.             mLeftTextView.setTextSize(mLeftButtonSize);
  65.             mLeftTextView.setBackgroundColor(buttonBgColor);
  66.             RelativeLayout.LayoutParams leftParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
  67.             leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
  68.             leftParams.addRule(RelativeLayout.CENTER_VERTICAL);
  69.             addView(mLeftTextView, leftParams);
  70.         }else if(mLeftButtonImage != null){
  71.             // 添加左侧图片按钮
  72.             RelativeLayout.LayoutParams leftParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
  73.             leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
  74.             leftParams.addRule(RelativeLayout.CENTER_VERTICAL);
  75.             mLeftButton = new ImageView(context);
  76.             mLeftButton.setImageDrawable(mLeftButtonImage);
  77.             addView(mLeftButton, leftParams);
  78.         }
  80.         if(mTitleButtonText!=null){
  81.             // 添加中间标题
  82.             titleTextView = new TextView(context);
  83.             titleTextView.setText(mTitleButtonText);
  84.             titleTextView.setTextColor(mTitleButtonTextColor);
  85.             titleTextView.setTextSize(mTitleButtonSize);
  86.             RelativeLayout.LayoutParams titleTextViewParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
  87.             titleTextViewParams.addRule(RelativeLayout.CENTER_IN_PARENT);
  88.             addView(titleTextView,titleTextViewParams);
  89.         }
  91.         if(mRightButtonImage == null & mRightButtonText != null){
  92.             // 当用户没有设置右侧按钮图片并设置了左侧的按钮文本属性时--添加右侧文本按钮
  93.             mRightTextView = new TextView(context);
  94.             mRightTextView.setText(mRightButtonText);
  95.             mRightTextView.setTextColor(mRightButtonTextColor);
  96.              mRightTextView.setTextSize(mRightButtonSize);
  97.             mRightTextView.setBackgroundColor(buttonBgColor);
  98.             RelativeLayout.LayoutParams rightParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
  99.             rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
  100.             rightParams.addRule(RelativeLayout.CENTER_VERTICAL);
  101.             addView(mRightTextView,rightParams);
  102.         }else if(mRightButtonImage != null){
  103.             // 添加右侧图片按钮
  104.             RelativeLayout.LayoutParams rightParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
  105.             rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
  106.             rightParams.addRule(RelativeLayout.CENTER_VERTICAL);
  107.             mRightButton = new ImageView(context);
  108.             mRightButton.setImageDrawable(mRightButtonImage);
  109.             addView(mRightButton, rightParams);
  110.         }
  111.     }
  112.     /*监听事件*/
  113.     public interface OnButtonClickListener{
  114.         void onLeftClick();
  115.         void onRightClick();
  116.     }
  117.     /*点击事件*/
  118.     public void setOnButtonClickListener(final OnButtonClickListener onButtonClickListener) {
  119.         if(onButtonClickListener !=null){
  120.             if(mLeftTextView != null){
  121.                 mLeftTextView.setOnClickListener(new OnClickListener() {
  122.                     @Override
  123.                     public void onClick(View v) {
  124.                         onButtonClickListener.onLeftClick();
  125.                     }
  126.                 });
  127.             }
  128.             /*按钮*/
  129.             if(mLeftButton != null){
  130.                 mLeftButton.setOnClickListener(new OnClickListener() {
  131.                     @Override
  132.                     public void onClick(View v) {
  133.                         onButtonClickListener.onLeftClick();
  134.                     }
  135.                 });
  136.             }
  137.             if(mRightTextView != null){
  138.                 mRightTextView.setOnClickListener(new OnClickListener() {
  139.                     @Override
  140.                     public void onClick(View v) {
  141.                         onButtonClickListener.onRightClick();
  142.                     }
  143.                 });
  144.             }
  145.             /*按钮*/
  146.             if(mRightButton != null){
  147.                 mRightButton.setOnClickListener(new OnClickListener() {
  148.                     @Override
  149.                     public void onClick(View v) {
  150.                         onButtonClickListener.onRightClick();
  151.                     }
  152.                 });
  153.             }
  154.         }
  155.     }

Main方法的代码调用自定义的类和点击事件

  1. public class MainActivity extends AppCompatActivity {
  3.     @Override
  4.     protected void onCreate(Bundle savedInstanceState) {
  5.         super.onCreate(savedInstanceState);
  6.         setContentView(R.layout.activity_main);
  8.         /*找到控件*/
  9.         MyView Myview  = (MyView) findViewById(R.id.titlebar);
  10.         /*点击事件*/
  11.         Myview.setOnButtonClickListener(new MyView.OnButtonClickListener() {
  12.             @Override
  13.             public void onLeftClick() {
  14.                 Toast.makeText(MainActivity.this,"左侧按钮被点击了",Toast.LENGTH_SHORT).show();
  15.             }
  17.             @Override
  18.             public void onRightClick() {
  19.                 Toast.makeText(MainActivity.this,"右侧按钮被点击了",Toast.LENGTH_SHORT).show();
  20.             }
  21.         });
  23.     }
  24. }

效果图：

20190311112233344.png

发表评论

表情：
评论列表 （有 0 条评论，354人围观）

还没有评论，来说两句吧...

相关阅读

    相关 android自定义view

    最近弄的项目中在看到![Image 1][]这种![Center][]加减数量，如是就自己自定义了这样的view。 考虑到图标可能会被替换如是加了个attrs.xml文件，也

    旧城等待，旧城等待，/ 0 赞/ 395 阅读

    相关 Android自定义View

    1.View是什么？ View是屏幕上的一块矩形区域，它负责用来显示一个区域，并且响应这个区域内的事件。可以说，手机屏幕上的任意一部分看的见得地方都是View，它很常见，比

    淡淡的烟草味﹌淡淡的烟草味﹌/ 0 赞/ 337 阅读

    相关 Android自定义View

    前几天在郭霖大神的博客上看了自定义View的知识，感觉受益良多，大神毕竟大神。在此总结一下关于Android 自定义View的用法： 首先，自定义View可以由基本控件或者组

    左手的ㄟ右手左手的ㄟ右手/ 0 赞/ 478 阅读

    相关 Android自定义View

    如何自定义控件 1. 自定义属性的声明和获取 2. 测量onMeasure：测量自定义控件的尺寸 3. 绘制onDraw：绘制自定义控件 4. 状态的存储与恢复：

    蔚落蔚落/ 0 赞/ 466 阅读