查看: 2881|回复: 0

[手机开发] Android 组合控件实现布局的复用的方法

发表于 2017-12-25 08:00:00

看到很多项目会有实现自己的标题栏的做法,通常的界面是左边按钮或文字,加上中间的标题和右边的按钮或文字组成的。比较好的一种做法是使用include标签,复用同一个xml文件来实现布局的复用。但是这种方法是通过代码的方式来设置标题,左右按钮等其他的属性,会导致布局属性和Activity代码耦合性比较高。

因此,我们要通过自定义View,继承ViewGroup子类来实现这样的布局,降低布局文件和Activity代码耦合性。

首先,我们需要写出布局文件layout_custom_titlebar.xml。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <merge xmlns:android="http://schemas.android.com/apk/res/android">
  3. <!-- 使用merge标签减少层级 -->
  4. <Button
  5. android:id="@+id/title_bar_left"
  6. android:layout_width="wrap_content"
  7. android:layout_height="wrap_content"
  8. android:layout_alignParentLeft="true"
  9. android:layout_centerVertical="true"
  10. android:layout_marginLeft="5dp"
  11. android:background="@null"
  12. android:minHeight="45dp"
  13. android:minWidth="45dp"
  14. android:textSize="14sp" />
  15. <TextView
  16. android:id="@+id/title_bar_title"
  17. android:layout_width="wrap_content"
  18. android:layout_height="wrap_content"
  19. android:layout_centerInParent="true"
  20. android:singleLine="true"
  21. android:textSize="17sp" />
  22. <Button
  23. android:id="@+id/title_bar_right"
  24. android:layout_width="wrap_content"
  25. android:layout_height="wrap_content"
  26. android:layout_alignParentRight="true"
  27. android:layout_centerVertical="true"
  28. android:layout_marginRight="7dp"
  29. android:background="@null"
  30. android:minHeight="45dp"
  31. android:minWidth="45dp"
  32. android:textSize="14sp" />
  33. </merge>
复制代码

2.定义自定义属性

  1. <declare-styleable name="CustomTitleBar">
  2. <!--标题栏背景色-->
  3. <attr name="title_background_color" format="reference|integer" />
  4. <!--左边按钮是否可见-->
  5. <attr name="left_button_visible" format="boolean" />
  6. <!--右边按钮是否可见-->
  7. <attr name="right_button_visible" format="boolean" />
  8. <!--标题文字-->
  9. <attr name="title_text" format="string" />
  10. <!--标题文字颜色-->
  11. <attr name="title_text_color" format="color" />
  12. <!--标题文字图标-->
  13. <attr name="title_text_drawable" format="reference|integer" />
  14. <!--左边按钮文字-->
  15. <attr name="left_button_text" format="string" />
  16. <!--左边按钮文字颜色-->
  17. <attr name="left_button_text_color" format="color" />
  18. <!--左边按钮图标-->
  19. <attr name="left_button_drawable" format="reference|integer" />
  20. <!--右边按钮文字-->
  21. <attr name="right_button_text" format="string" />
  22. <!--右边按钮文字颜色-->
  23. <attr name="right_button_text_color" format="color" />
  24. <!--右边按钮图标-->
  25. <attr name="right_button_drawable" format="reference|integer" />
  26. </declare-styleable>
复制代码

3.自定义一个View继承ViewGroup子类,这里我们继承RelativeLayout。

  1. public class CustomTitleBar extends RelativeLayout {
  2. private Button titleBarLeftBtn;
  3. private Button titleBarRightBtn;
  4. private TextView titleBarTitle;
  5. public CustomTitleBar(Context context) {
  6. super(context);
  7. }
  8. public CustomTitleBar(Context context, AttributeSet attrs) {
  9. super(context, attrs);
  10. LayoutInflater.from(context).inflate(R.layout.layout_custom_titlebar,this,true);
  11. titleBarLeftBtn = (Button) findViewById(R.id.title_bar_left);
  12. titleBarRightBtn = (Button) findViewById(R.id.title_bar_right);
  13. titleBarTitle = (TextView) findViewById(R.id.title_bar_title);
  14. TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.CustomTitleBar);
  15. if(typedArray!=null){
  16. //titleBar背景色
  17. int titleBarBackGround=typedArray.getResourceId(R.styleable.CustomTitleBar_title_background_color, Color.BLUE);
  18. setBackgroundColor(titleBarBackGround);
  19. //获取是否要显示左边按钮
  20. boolean leftButtonVisible = typedArray.getBoolean(R.styleable.CustomTitleBar_left_button_visible, true);
  21. if (leftButtonVisible) {
  22. titleBarLeftBtn.setVisibility(View.VISIBLE);
  23. } else {
  24. titleBarLeftBtn.setVisibility(View.INVISIBLE);
  25. }
  26. //设置左边按钮的文字
  27. String leftButtonText = typedArray.getString(R.styleable.CustomTitleBar_left_button_text);
  28. if (!TextUtils.isEmpty(leftButtonText)) {
  29. titleBarLeftBtn.setText(leftButtonText);
  30. //设置左边按钮文字颜色
  31. int leftButtonTextColor = typedArray.getColor(R.styleable.CustomTitleBar_left_button_text_color, Color.WHITE);
  32. titleBarLeftBtn.setTextColor(leftButtonTextColor);
  33. } else {
  34. //设置左边图片icon 这里是二选一 要么只能是文字 要么只能是图片
  35. int leftButtonDrawable = typedArray.getResourceId(R.styleable.CustomTitleBar_left_button_drawable, R.mipmap.titlebar_back_icon);
  36. if (leftButtonDrawable != -1) {
  37. titleBarLeftBtn.setBackgroundResource(leftButtonDrawable);
  38. }
  39. }
  40. //先获取标题是否要显示图片icon
  41. int titleTextDrawable = typedArray.getResourceId(R.styleable.CustomTitleBar_title_text_drawable, -1);
  42. if (titleTextDrawable != -1) {
  43. titleBarTitle.setBackgroundResource(titleTextDrawable);
  44. } else {
  45. //如果不是图片标题 则获取文字标题
  46. String titleText = typedArray.getString(R.styleable.CustomTitleBar_title_text);
  47. if (!TextUtils.isEmpty(titleText)) {
  48. titleBarTitle.setText(titleText);
  49. }
  50. //获取标题显示颜色
  51. int titleTextColor = typedArray.getColor(R.styleable.CustomTitleBar_title_text_color, Color.WHITE);
  52. titleBarTitle.setTextColor(titleTextColor);
  53. }
  54. //获取是否要显示右边按钮
  55. boolean rightButtonVisible = typedArray.getBoolean(R.styleable.CustomTitleBar_right_button_visible, true);
  56. if (rightButtonVisible) {
  57. titleBarRightBtn.setVisibility(View.VISIBLE);
  58. } else {
  59. titleBarRightBtn.setVisibility(View.INVISIBLE);
  60. }
  61. //设置右边按钮的文字
  62. String rightButtonText = typedArray.getString(R.styleable.CustomTitleBar_right_button_text);
  63. if (!TextUtils.isEmpty(rightButtonText)) {
  64. titleBarRightBtn.setText(rightButtonText);
  65. //设置右边按钮文字颜色
  66. int rightButtonTextColor = typedArray.getColor(R.styleable.CustomTitleBar_right_button_text_color, Color.BLUE);
  67. titleBarRightBtn.setTextColor(rightButtonTextColor);
  68. } else {
  69. //设置右边图片icon 这里是二选一 要么只能是文字 要么只能是图片
  70. int rightButtonDrawable = typedArray.getResourceId(R.styleable.CustomTitleBar_right_button_drawable, -1);
  71. if (rightButtonDrawable != -1) {
  72. titleBarRightBtn.setBackgroundResource(rightButtonDrawable);
  73. }
  74. }
  75. typedArray.recycle();
  76. }
  77. }
  78. public void setTitleClickListener(OnClickListener onClickListener) {
  79. if (onClickListener != null) {
  80. titleBarLeftBtn.setOnClickListener(onClickListener);
  81. titleBarRightBtn.setOnClickListener(onClickListener);
  82. }
  83. }
  84. public Button getTitleBarLeftBtn() {
  85. return titleBarLeftBtn;
  86. }
  87. public Button getTitleBarRightBtn() {
  88. return titleBarRightBtn;
  89. }
  90. public TextView getTitleBarTitle() {
  91. return titleBarTitle;
  92. }
  93. }
复制代码

4.正确地使用它

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:orientation="vertical">
  7. <com.mumubin.demoproject.view.CustomTitleBar
  8. android:id="@+id/ctb_view"
  9. android:layout_width="match_parent"
  10. android:layout_height="45dp"
  11. app:right_button_drawable="@mipmap/sure"
  12. app:title_text="@string/app_name" />
  13. <com.mumubin.demoproject.view.CustomTitleBar
  14. android:layout_width="match_parent"
  15. android:layout_height="45dp"
  16. android:layout_marginTop="4dp"
  17. app:title_background_color="@color/colorPrimary"
  18. app:title_text="@string/app_name"
  19. app:title_text_color="@color/colorAccent"
  20. app:left_button_text="左边"
  21. app:right_button_text="右边"/>
  22. <com.mumubin.demoproject.view.CustomTitleBar
  23. android:layout_width="match_parent"
  24. android:layout_height="45dp"
  25. android:layout_marginTop="4dp"
  26. app:title_text_drawable="@mipmap/ic_launcher"
  27. app:title_background_color="@color/colorAccent"
  28. app:left_button_text="左边"
  29. app:right_button_text="右边"/>
  30. </LinearLayout>
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。



回复

使用道具 举报