Android Material Design入门篇《一》

TopBar

主要包括左边文本 文本颜色 文本背景

中间部分包括标题 标题颜色

右边包括文本 文本颜色 文本背景

下面分别说下实现代码

其实像TopBar很多地方都是可以复用因此可以抽象出来

通过自定义View实现

下面说下在res目录下新建一个attrs.xml文件相信大家只要看过源码的应该非常清楚，TopBar继承RelativeLayout的父类是ViewGroup这里简单画张图

Created with Raphaël 2.1.0ViewgroupTopBar

下面直接看attrs文件相信大家也非常清楚想title一般都是string类型

颜色一般是color 背景颜色是reference|color其实这种与运算表示取其一

想Gravity right|center_vertical 右垂直居中显示

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="TopBar">
<!--标题-->
<attr name="title" format="string"></attr>
<attr name="content" format="string"></attr>
<!--尺寸-->
<attr name="title_text_size" format="dimension"></attr>
<attr name="title_text_color" format="color"></attr>
<!--左边文本颜色 背景颜色 文本内容-->
<attr name="leftTextColor" format="color"></attr>
<attr name="leftBackground" format="reference|color"></attr>
<attr name="leftText" format="string"></attr>
<!--右边文本颜色 背景颜色 文本内容-->
<attr name="rightTextColor" format="color"></attr>
<attr name="rightBackground" format="reference|color"></attr>
<attr name="rightText" format="string"></attr>
</declare-styleable>
</resources>

然后在TopBar自定义继承RelativeLayout使用Style/attrs里面的属性表苦熬标题的颜色 字体大小 背景 以及对齐方式等

package com.zm.mytopbar.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
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 com.zm.mytopbar.R;

/**
* Created by zhengmin on 2017/1/6.
*/
public class TopBar extends RelativeLayout {
private Button leftBtn,rightBtn;
private TextView tvTitle;
private int leftTextColor;
private Drawable leftBackground;
private String leftText;

private int rightTextColor;
private Drawable rightBackground;
private String rightText;
private float titleTextSize;
private int titleTextColor;
private String title;
private LayoutParams leftParams,rightParmas,tilteParams;
private TopBarOnClickListener listener;
private static final String TAG = "TopBar";
public interface TopBarOnClickListener{
public void leftOnClick();
public void rightOnClick();

}
/**回调**/
public void setOnTopBarListener(TopBarOnClickListener listener){
this.listener=listener;
}
public TopBar(final Context context, AttributeSet attrs) {
super(context, attrs);
//通过context obtain获取styable里面对象的值
TypedArray ta=context.obtainStyledAttributes(attrs, R.styleable.TopBar);
//文本是refrence |color类型
leftTextColor= ta.getColor(R.styleable.TopBar_leftTextColor, 0);
//背景是drawable
leftBackground=ta.getDrawable(R.styleable.TopBar_leftBackground);
//文字是string类型
leftText=ta.getString(R.styleable.TopBar_leftText);
//文本是refrence |color类型
rightTextColor= ta.getColor(R.styleable.TopBar_rightTextColor, 0);
//背景是drawable
rightBackground=ta.getDrawable(R.styleable.TopBar_rightBackground);
//文字是string类型
rightText=ta.getString(R.styleable.TopBar_rightText);
//标题字体大小
titleTextSize=ta.getDimension(R.styleable.TopBar_title_text_size, 0);
//标题文字颜色
titleTextColor=ta.getColor(R.styleable.TopBar_title_text_color, 0);
//标题
title=ta.getString(R.styleable.TopBar_title);
//回收资源 由于缓存引起的错误
ta.recycle();
//获取引用的上下文对象
leftBtn=new Button(context);
rightBtn=new Button(context);
tvTitle=new TextView(context);
leftBtn.setText(leftText);
leftBtn.setTextColor(leftTextColor);
leftBtn.setBackground(leftBackground);

rightBtn.setText(rightText);
rightBtn.setTextColor(rightTextColor);
rightBtn.setBackground(rightBackground);
//设置文本标题
tvTitle.setText(title);
//设置标题的颜色
tvTitle.setTextColor(titleTextColor);
//设置字体的大小
tvTitle.setTextSize(titleTextSize);
//设置标题居中显示
tvTitle.setGravity(Gravity.CENTER);
//设置ViewGroup背景颜色
setBackgroundColor(0xFFF59563);
leftParams=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
//设置父容器居左对齐
leftParams.addRule(ALIGN_PARENT_LEFT, TRUE);
//将左button添加ViewGroup容器中
addView(leftBtn, leftParams);
rightParmas=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
//设置父容器居左对齐
rightParmas.addRule(ALIGN_PARENT_RIGHT,TRUE);
//将右button添加ViewGroup容器中
addView(leftBtn,rightParmas);
//标题栏
tilteParams=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
//设置标题栏父容器居中对齐
tilteParams.addRule(CENTER_IN_PARENT, TRUE);
//将左button添加ViewGroup容器中
addView(leftBtn,tilteParams);
//点击左边
leftBtn.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
//点击左标题
listener.leftOnClick();
Toast.makeText(context,"OnClick Left",Toast.LENGTH_LONG).show();

}
});
//点击右边
rightBtn.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
listener.rightOnClick();
Toast.makeText(context,"OnClick Right",Toast.LENGTH_LONG).show();

}
});

}
public void TopBarLeftisVisible(boolean flag){
if(flag){
//显示左标题
leftBtn.setVisibility(View.VISIBLE);
}else{
//隐藏左标题
leftBtn.setVisibility(View.GONE);
}

}

public TopBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}

public TopBar(Context context) {
super(context);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int expandSpec=MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE>>2,MeasureSpec.AT_MOST);
super.onMeasure(widthMeasureSpec, expandSpec);
}
}

然后在主Activity中调用代码如下

package com.zm.mytopbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;

import com.zm.mytopbar.view.TopBar;

public class MainActivity extends AppCompatActivity{
private TopBar topBar;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
topBar= (TopBar) findViewById(R.id.topBar);
topBar.setOnTopBarListener(new TopBar.TopBarOnClickListener() {
@Override
public void leftOnClick() {
Toast.makeText(MainActivity.this,"leftOnClick ",Toast.LENGTH_LONG).show();
}

@Override
public void rightOnClick() {
Toast.makeText(MainActivity.this," rightOnClick ",Toast.LENGTH_LONG).show();

}
});

}

}

最后贴上布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:custome="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@color/colorPrimary"
android:padding="5dp"

tools:context=".MainActivity">
<com.zm.mytopbar.view.TopBar
android:id="@+id/topBar"
android:layout_width="match_parent"
android:layout_height="40dp"
custome:leftText="Back"
custome:leftTextColor="#ffffff"
custome:leftBackground="#666666"
custome:rightText="More"
custome:rightTextColor="#ffffff"
custome:rightBackground="#666666"
custome:title="消息"
custome:title_text_size="10sp"
custome:title_text_color="#123412"
>

</com.zm.mytopbar.view.TopBar>

</RelativeLayout>

需要注意的是你要使用自定义必须添加这个url

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

结束了很简单吧！转载请注明出处！[http://blog.csdn.net/qq_15950325/article/details/54145311]谢谢合作！另外可以加下我的Android群！大家一起开车哈！