android标题栏的设计,Android UI自定义模板TopBar标题栏设计

在平时开发android过程中，我们都是直接使用系统自带的UI模板，不知道有没有朋友想过，当你要修改某样东西的时候，是不是大部分都要进行修改呢？这样的话工作量就大了。下面我们以一个标题栏TopBar来为大家讲解如何自定义一个UI模板。看看效果图

首先打开android studio，在res资源目录下的values目录中，新建一个attrs.xml文件，这个文件用来存放自定义的view属性常量，如图

新建好文件后，写入上述代码。代码中定义了一个declare-styleable标签，取名为TopBar。标签内包含了标题栏中的三个控件，左边的back按钮，中间的标题栏，右边的more按钮。

写完属性后，就可以新建一个名为TopBar的java文件了，但是注意，这个文件要继承RelativeLayout类

接下来要做的事情就是把刚才定义的那些属性封装起来，然后加入到view中，下面我直接把代码贴出来，供大家参考。

public class TopBar extends RelativeLayout {

private Button leftButton,rightButton;

private TextView titleTV;

private String titleText,leftText,rightText;

private float titleTextSize;

private int titleTextColor,leftTextColor,rightTextColor;

private Drawable leftBackground,rightBackground;

private LayoutParams titleParams,leftParams,rightParams;

//左右按钮点击事件的接口(接口回调机制)

public interface topbarClickListener{

public void leftClick();

public void rightClick();

}

private topbarClickListener listener;

public void setOnTopbarClickListener(topbarClickListener listener){

this.listener = listener;

}

@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)

public TopBar(Context context, @Nullable AttributeSet attrs) {

super(context, attrs);

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

titleText = typedArray.getString(R.styleable.TopBar_titleText);

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

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

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

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

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

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

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

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

//回收

typedArray.recycle();

//设置属性值

titleTV = new TextView(context);

leftButton = new Button(context);

rightButton = new Button(context);

titleTV.setText(titleText);

titleTV.setTextSize(titleTextSize);

titleTV.setTextColor(titleTextColor);

titleTV.setGravity(Gravity.CENTER); //设置标题为居中

leftButton.setText(leftText);

leftButton.setTextColor(leftTextColor);

leftButton.setBackground(leftBackground);

rightButton.setText(rightText);

rightButton.setTextColor(rightTextColor);

rightButton.setBackground(rightBackground);

//设置整个TopBar的背景色

setBackgroundColor(Color.WHITE);

//把控件放入layout中,属性参数(宽，高)

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

titleParams.addRule(RelativeLayout.CENTER_IN_PARENT,TRUE); //增加规则(居中)

addView(titleTV,titleParams); //增加到View中

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

leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,TRUE); //增加规则(左对齐)

addView(leftButton,leftParams);

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

rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,TRUE); //增加规则(右对齐)

addView(rightButton,rightParams);

leftButton.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View view) {

listener.leftClick();

}

});

rightButton.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View view) {

listener.rightClick();

}

});

}

}

上面的代码中使用了一个接口回调机制，这是一个很好用的机制，android源码中经常会碰到这种，有不会的同学可以参考一下，详细解释可以自行百度。

自定义的java文件已经写好了，接下来就是如何引用的问题。我们都知道在layout目录下的xml文件就是一个页面，在里面写布局时都会引用一段代码

xmlns:android="http://schemas.android.com/apk/res/android"

这句话的意思就是引用android系统的控件，那么我们要用自定义的控件又如何引用呢？其实也是类似的，下面给出主页面activity_main.xml的布局代码

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:layout_width="wrap_content"

android:layout_height="40dp"

android:id="@+id/topbar"

app:titleText="众校"

app:titleTextSize="5dp"

app:titleTextColor="#000"

app:leftText="back"

app:leftTextColor="#f30"

app:leftBackground="#22f"

app:rightText="more"

app:rightTextColor="#f30"

app:rightBackground="#22f">

可以看到在引用自定义的控件中，所用的属性就是刚才自己在attrs.xml文件中定义的那些属性，到此为止，自定义的TopBar就用到页面上了，下面我们在MainActivity.java文件中给左右两边的按钮添加一个点击事件，以证明自己定义的View时真实可用的

public class MainActivity extends FragmentActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//标题栏

TopBar topBar = (TopBar) findViewById(R.id.topbar);

topBar.setOnTopbarClickListener(new TopBar.topbarClickListener() {

@Override

public void leftClick() {

Toast.makeText(MainActivity.this,"点击了back",Toast.LENGTH_SHORT).show();

}

@Override

public void rightClick() {

Toast.makeText(MainActivity.this,"点击了more",Toast.LENGTH_SHORT).show();

}

});

}

}

至此，引用已经结束了，到时候直接修改监听器里面的代码就能控制点击事件了。