Android UI 模板设计之组合模式

import android.util.AttributeSet;

import android.view.Gravity;

import android.view.View;

import android.view.ViewGroup;

import android.widget.Button;

import android.widget.RelativeLayout;

import android.widget.TextView;

import android.widget.Toast;

import androidx.annotation.RequiresApi;

/**

• 顶部导航栏控件

• 这是一个组合控件，由左右两个Button和一个TextView组成

*/

public class TopBar extends RelativeLayout {

// 步骤2：定义需要使用的控件

private Button leftButton , rightButton;

private TextView tvTitle;

// 步骤3：声明这些控件所需要使用的属性，即之前在 atts.xml 中定义的属性

// 左 Button 属性

private String leftText;

private int leftTextColor;

private Drawable leftBackground;

// 右 Button 属性

private String rightText;

private int rightTextColor;

private Drawable rightBackground;

// 中间 TextView 属性

private String title;

private int titleTextColor;

private float titleTextSize;

private LayoutParams leftParams,rightParams,titleParams;

private topbarClickListener listener;

public interface topbarClickListener{

void leftClick();

void rightClick();

}

public void setOnTopBarClickListener(topbarClickListener listener){

this.listener = listener;

}

// 不需要自定义属性的构造方法

public TopBar(Context context) {

super(context);

}

/**

• 步骤1：添加构造方法

•    需要自定义属性就使用这一个构造方法，使用atts参数
  

• @param context

• @param attrs

*/

@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)

public TopBar(final Context context, AttributeSet attrs) {

super(context, attrs);

// 步骤4：给声明好的属性赋值，以将属性和控件关联

// 4.1 通过TypedArray存储从xml文件中获取到的自定义属性的值，并赋给相应的变量

TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TopBar);

leftText = ta.getString(R.styleable.TopBar_leftText);

leftTextColor = ta.getColor(R.styleable.TopBar_leftTextColor,0);

leftBackground = ta.getDrawable(R.styleable.TopBar_leftBackground);

rightText = ta.getString(R.styleable.TopBar_rightText);

rightTextColor = ta.getColor(R.styleable.TopBar_rightTextColor,0);

rightBackground = ta.getDrawable(R.styleable.TopBar_rightBackground);

title = ta.getString(R.styleable.TopBar_title);

titleTextSize = ta.getDimension(R.styleable.TopBar_titleTextSize,0);

titleTextColor = ta.getColor(R.styleable.TopBar_titleTextColor,0);

// 回收。1.避免浪费资源 2.避免由于缓存而引起的错误

ta.recycle();

// 4.2 实例化控件

leftButton = new Button(context);

rightButton = new Button(context);

tvTitle = new Button(context);

// 4.3 将属性值和控件关联

leftButton.setText(leftText);

leftButton.setTextColor(leftTextColor);

leftButton.setBackground(leftBackground);

rightButton.setText(rightText);

rightButton.setTextColor(rightTextColor);

rightButton.setBackground(rightBackground);

tvTitle.setText(title);

tvTitle.setTextSize(titleTextSize);

tvTitle.setTextColor(titleTextColor);

tvTitle.setGravity(Gravity.CENTER);

tvTitle.setBackgroundColor(Color.argb(0,0,0,0));

setBackgroundColor(0xFFF59563);

// 步骤5：将控件放到layout中，通过LayoutParams控制摆放方式

leftParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);

leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,TRUE);

addView(leftButton, leftParams);

rightParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);

rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,TRUE);

addView(rightButton, rightParams);

titleParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.MATCH_PARENT);

titleParams.addRule(RelativeLayout.CENTER_IN_PARENT,TRUE);

addView(tvTitle, titleParams);

// 步骤6：动态控制 TopBar

leftButton.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

listener.leftClick();

}

});

rightButton.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

listener.rightClick();

}

});

}

/**

• 是否显示左Button

• @param flag

*/

public void setLeftIsVisable(boolean flag){

if(flag){

leftButton.setVisibility(View.VISIBLE);

}else {

leftButton.setVisibility(View.GONE);

}

}

}

第三步：使用

在Android Studio中引用一个第三方命名控件只要：添加xmlns:custom="http://schemas.android.com/apk/res-auto"即可

给重新引用的名字空间命名为custom，就可通过custom引用所有自定义的属性了

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

<RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”

xmlns:custom=“http://schemas.android.com/apk/res-auto”

xmlns:tools=“http://schemas.android.com/tools”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

tools:context=“.MainActivity”>

<com.lzw.topbar.TopBar

android:id=“@+id/topbar”

android:layout_width=“match_parent”

android:layout_height=“48dp”

custom:leftBackground=“#03A9F4”

custom:leftText=“Back”

custom:leftTextColor=“#E91E63”

custom:rightBackground=“#03A9F4”

custom:rightText=“More”

custom:rightTextColor=“#E91E63”

custom:title=“自定义标题”

custom:titleTextColor=“#123412”

custom:titleTextSize=“8sp”></com.lzw.topbar.TopBar>

2. 在MainActivity中使用TopBar

最后

下面是辛苦给大家整理的学习路线

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

2. 在MainActivity中使用TopBar

最后

下面是辛苦给大家整理的学习路线

[外链图片转存中…(img-Qz95FGay-1714296701408)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！