[android进阶]自定义View之TopBar
2015-04-06 14:54
246 查看
大家可能都用过QQ、微博,所谓的TopBar就是如图中的:
这里以上面的UI为例,记述一下怎么自定义View:
步骤一:新建一个attrs文件,定义视图属性
步骤二:继承一个View,或ViewGroup的子类,并可使用这些自定义的属性
步骤三:在资源文件或java代码中使用自己的View
由于整个Topbar由左右两个Button和中间一个TextView构成,所以设置的属性如下:
androidstudio里在布局中使用第三方控件时,修改命名空间:
其中custom可以自定义。
布局文件activity_main.xml的代码如下:
在代码中使用自定义View
MainActivity.java的代码如下:
源码下载
这里以上面的UI为例,记述一下怎么自定义View:
步骤一:新建一个attrs文件,定义视图属性
步骤二:继承一个View,或ViewGroup的子类,并可使用这些自定义的属性
步骤三:在资源文件或java代码中使用自己的View
自定义属性
在values文件夹下新建一个资源文件attrs.xml,整个项目的目录结构如下图所示:由于整个Topbar由左右两个Button和中间一个TextView构成,所以设置的属性如下:
[code] <declare-styleable name="TopBar" > <!-- TextView的属性--> <attr name="titleText" format="string"/> <attr name="titleTextSize" format="dimension"/> <attr name="titleTextColor" format="color"/> <!-- LeftButton的属性--> <attr name="leftText" format="string" /> <attr name="leftColor" format="color" /> <attr name="leftBackground" format="reference|color" /> <!-- RightButton的属性--> <attr name="rightText" format="string" /> <attr name="rightColor" format="color" /> <attr name="rightBackground" format="reference|color" /> </declare-styleable>
自定义View
自定义一个View,继承一个View,或ViewGroup的子类,并可使用这些自定义的属性。我这里的TopBar继承的是RelativeLayout,下面直接贴出TopBar的代码,在代码里讲述实现的过程:[code]public class TopBar extends RelativeLayout{ //定义TopBar的组成控件 private Button leftButton,rightButton; private TextView tvTitle; //定义要获取的自定义属性 private String titleText,leftText,rightText; private int leftTextColor,rightTextColor,titleTextColor; private Drawable leftTextBackground,rightTextBackground; private float titleTextSize; //定义组成控件的布局 private RelativeLayout.LayoutParams leftParams,rightParams,titleParams; private OnClickTopBarListener listener; //接口回调,真正做到模版UI public interface OnClickTopBarListener{ public void onLeftClickListener(); public void onRightClickListener(); } //设置TopBar的左右Button点击事件 public void SetOnClickTopBarListener(OnClickTopBarListener listener){ this.listener=listener; } //由于自定义了属性值,所以选用带有AttributeSet参数的这个构造函数 public TopBar(Context context, AttributeSet attrs) { super(context, attrs); //.获取自定义属性的值/键值对 TypedArray ta=context.obtainStyledAttributes(attrs,R.styleable.TopBar); //获取TypedArray里面的单个值,提取自定义属性 titleText=ta.getString(R.styleable.TopBar_titleText); leftText =ta.getString(R.styleable.TopBar_leftText); rightText=ta.getString(R.styleable.TopBar_rightText); leftTextColor=ta.getColor(R.styleable.TopBar_leftColor,0); rightTextColor=ta.getColor(R.styleable.TopBar_rightColor,0); titleTextColor=ta.getColor(R.styleable.TopBar_titleTextColor,0); leftTextBackground=ta.getDrawable(R.styleable.TopBar_leftBackground); rightTextBackground=ta.getDrawable(R.styleable.TopBar_rightBackground); titleTextSize=ta.getDimension(R.styleable.TopBar_titleTextSize,0); //调用recycle()方法,对其进行回收 ta.recycle(); //设置Topbar的控件 leftButton=new Button(context); rightButton=new Button(context); tvTitle=new TextView(context); //为控件绑定自定义的属性 leftButton.setText(leftText); leftButton.setTextColor(leftTextColor); leftButton.setBackground(leftTextBackground); rightButton.setText(rightText); rightButton.setTextColor(rightTextColor); rightButton.setBackground(rightTextBackground); tvTitle.setText(titleText); tvTitle.setTextSize(titleTextSize); tvTitle.setTextColor(titleTextColor); tvTitle.setGravity(Gravity.CENTER); //设置TopBar的背景色 setBackgroundColor(0xFFF59536); //将leftButton添加到布局里,并设置宽高 leftParams=new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT); leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,TRUE); addView(leftButton,leftParams); //将rightButton添加到布局里,并设置宽高 rightParams=new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT); rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,TRUE); addView(rightButton,rightParams); //将tvTitle添加到布局里,并设置宽高 titleParams=new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); titleParams.addRule(RelativeLayout.CENTER_IN_PARENT,TRUE); addView(tvTitle,titleParams); //通过接口回调机制设置左右Button的点击事件,使自定义View成为一个更好的模版UI,方便使用 leftButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { listener.onLeftClickListener(); } }); rightButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { listener.onRightClickListener(); } }); } }
使用自定义的View
在布局文件中使用:androidstudio里在布局中使用第三方控件时,修改命名空间:
xmlns:custom="http://schemas.android.com/apk/res-auto"
其中custom可以自定义。
布局文件activity_main.xml的代码如下:
[code]<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" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <com.example.young.myapplication.TopBar android:layout_height="40dp" android:layout_width="match_parent" android:id="@+id/topBar" custom:titleText="自定义标题" custom:titleTextColor="#123412" custom:titleTextSize="10sp" custom:leftText="back" custom:leftColor="#FFFFFF" custom:rightText="more" custom:rightColor="#FFFFFF"> </com.example.young.myapplication.TopBar> </RelativeLayout>
在代码中使用自定义View
MainActivity.java的代码如下:
[code] public class MainActivity extends ActionBarActivity { private TopBar myTopBar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); myTopBar=(TopBar)this.findViewById(R.id.topBar); myTopBar.SetOnClickTopBarListener(new TopBar.OnClickTopBarListener() { @Override public void onLeftClickListener() { Toast.makeText(getApplicationContext(),"这是back",Toast.LENGTH_SHORT).show(); } @Override public void onRightClickListener() { Toast.makeText(getApplicationContext(),"这是more",Toast.LENGTH_SHORT).show(); } }); } }
效果图
下面看一下效果图:源码下载
相关文章推荐
- Android 自定义view实现TopBar效果
- Android高手进阶教程(三)之----Android 中自定义View的应用.
- Android高手进阶教程(三)之----Android 中自定义View的应用
- Android高手进阶之自定义View,自定义属性(带进度的圆形进度条)
- Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)
- Android高手进阶教程(三)之----Android 中自定义View的应用.
- Android高手进阶教程(三)之----Android 中自定义View的应用
- Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)
- Android高手进阶之自定义View,自定义属性(带进度的圆形进度条)
- Android 自定义View (二) 进阶
- Android高手进阶教程(三)之----Android 中自定义View的应用.
- Android高手进阶教程(二十七)之---基于ViewFlipper实现的自定义新手指引控件.
- Android高手进阶教程(三)之----Android 中自定义View的应用.
- Android高手进阶教程(三)之----Android 中自定义View的应用.
- Android高手进阶教程(二十七)之---基于ViewFlipper实现的自定义新手指引控件.
- Android高手进阶教程(二十七)之---基于ViewFlipper实现的自定义新手指引控件.
- Android高手进阶教程(三)之----Android 中自定义View的应用.
- Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)
- Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)
- Android高手进阶教程(三)之 ----Android 中自定义View的应用