安卓界面篇(一) 自定义一个topbar
步骤一: 先在values 里 新建一个attrs.xml 来设置我们的属性值:
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="TopBar" > <attr name="title" format="string"/> <attr name="titleTextSize" format="dimension"/> <attr name="titleTextColor" format="color"/> <attr name="leftText" format="string"/> <attr name="leftBackground" format="reference|color"/> <attr name="leftTextColor" format="color"/> <attr name="rightText" format="string"/> <attr name="rightBackground" format="reference|color"/> <attr name="rightTextColor" format="color"/> </declare-styleable> </resources>
步骤二: 新建Topbar类继承自RelaiveLayout :
/** * Created by Ace on 2016/2/3. */ public class Topbar extends RelativeLayout { //声明我们需要的控件 private Button leftButton,rightButton; private TextView tv_title; private int leftTextColor; private String leftText; private Drawable leftBackground; private int rightTextColor; private String rightText; private Drawable rightBackground; private String title; private int titleTextColor; private float titleTextSize; //4 定义布局属性 private LayoutParams leftParams , rightParams,titleParams; public Topbar(Context context, AttributeSet attrs) { super(context, attrs); //1 通过 context.obtainStyledAttributes 得到 TypedArray对象 并拿到属性值 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); titleTextColor = ta.getColor(R.styleable.TopBar_titleTextColor, 0); titleTextSize = ta.getDimension(R.styleable.TopBar_titleTextSize, 0); //记得回收下 防止出现一些内存问题 ta.recycle(); // 2 new出控件 leftButton = new Button(context); rightButton = new Button(context); tv_title = new TextView(context); //3 把自定义的属性赋给控件 leftButton.setTextColor(leftTextColor); leftButton.setBackground(leftBackground); leftButton.setText(leftText); rightButton.setTextColor(rightTextColor); rightButton.setBackground(rightBackground); rightButton.setText(rightText); tv_title.setTextColor(titleTextColor); tv_title.setTextSize(titleTextSize); tv_title.setText(title); tv_title.setGravity(Gravity.CENTER); setBackgroundColor(0xFFF59563); // 5 new出LayoutParams 设置宽高 leftParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT); // 6 设置规则 可以看出LayoutParams布局参数就是把你的控件以什么样的方式显示在组合控件 leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT); //7 添加到布局中(控件,布局参数) addView(leftButton ,leftParams); rightParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT); rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT); addView(rightButton, rightParams); titleParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.MATCH_PARENT); titleParams.addRule(RelativeLayout.CENTER_IN_PARENT); addView(tv_title,titleParams); //8 TopBar的静态部分已经完毕了 到这一步就很明白了 我们采用的组合方式,用系统以及有的控件组合在一起,组成一个新的控件,这个思路是否可以延伸到其他地方呢?思考下 } }
步骤三: 再Activity_main.xml中设置我们的自定义Topbar 重点我用红色和黄色标出,系统 xmlns(xml name space)的是:android 那么我们自己定义当然要有个个性的名字 我就写ace了, 再看后面res-auto ,这部分是控件属性资源地址.用AS的小伙伴
用res-auto就可以了 eslipse的小伙伴要写完整的地址 xmlns:XXXXXX="http://schemas.android.com/apk/res/包路径"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:ace="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="zb.com.topbardemo.MainActivity"> <zb.com.topbardemo.Topbar android:id="@+id/topbar" android:layout_width="wrap_content" android:layout_height="40dp" ace:leftTextColor = "#FFFFFF" ace:leftText ="后退" ace:leftBackground = "#4e32b4" ace:rightTextColor = "#FFFFFF" ace:rightText ="设置" ace:rightBackground = "#4e32b4" ace:title = "我是ACE" ace:titleTextColor = "#e20f0f" ace:titleTextSize = "15sp" > </zb.com.topbardemo.Topbar> </RelativeLayout>
静态部分完成现在写Topbar的点击事件 在Topbar类里写 :
leftButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(context,"Ace Left",Toast.LENGTH_LONG).show();
}
});
rightButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(context,"Ace Right",Toast.LENGTH_LONG).show();
}
});
这样是可以 但是却把按钮的点击事件写死了,我们要根据不同情况调用不同的点击事件就无法实现
.要解决这个问题那么要用到接口回调,系统也是如此来做得. OnclickListener是一个接口 那么我们也新建一个接口topbarClickListener,添加两个方法(左Button的点击和右Button的点击)
package zb.com.topbardemo;
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;
/**
* Created by Ace on 2016/2/3.
*/
//定义一个topbarClickListener
private topbarClickListener mListner;
//定义一个接口 两个方法
public interface topbarClickListener{
public void leftClick();
public void rightClick();
}
//暴露一个方法用来设置点击事件 并映射用户传进来的listner
public void setTopbarClickListner(topbarClickListener listner){
mListner = listner;
}
.
.
.
.
.
.中间的代码省略跟前面一样不用变动
.
.
.
.
. leftButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mListner.leftClick();
}
});
rightButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mListner.rightClick();
}
});
}
}
这样 按钮的点击按钮要做什么完全取决于用户来设置
我们用我们自己的方法来设置点击事件
MainActivity:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Topbar topbar =(Topbar)findViewById(R.id.topbar);
topbar.setTopbarClickListner(new Topbar.topbarClickListener() {
@Override
public void leftClick() {
Toast.makeText(MainActivity.this,"Ace left",Toast.LENGTH_LONG).show();
}
@Override
public void rightClick() {
Toast.makeText(MainActivity.this,"Ace right",Toast.LENGTH_LONG).show();
}
});
}
}
我的AS出了点问题 暂时没有截图 抱歉~~~