自定义view实现topbar

Posted 2020-10-14 郑哲

实现效果如下：

values/attrs.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <resources>
 3 
 4     <declare-styleable name="TopBar">
 5         <attr name="title" format="string"/>
 6         <attr name="titleTextSize" format="dimension"/>
 7         <attr name="titleTextColor" format="color"/>
 8         <attr name="leftTextColor" format="color"/>
 9         <attr name="leftBackground" format="reference|color"/>
10         <attr name="leftText" format="string"/>
11         <attr name="rightTextColor" format="color"/>
12         <attr name="rightBackground" format="reference|color"/>
13         <attr name="rightText" format="string"/>
14     </declare-styleable>
15 
16 </resources>

 

TopBar.java

  1 package sowell.oracle.com.viewdraw;
  2 
  3 import android.content.res.TypedArray;
  4 import android.graphics.Color;
  5 import android.graphics.drawable.Drawable;
  6 import android.graphics.drawable.GradientDrawable;
  7 import android.util.AttributeSet;
  8 import android.view.Gravity;
  9 import android.view.View;
 10 import android.view.ViewGroup;
 11 import android.widget.Button;
 12 import android.widget.RelativeLayout;
 13 import android.content.Context;
 14 import android.widget.TextView;
 15 import android.widget.Toast;
 16 
 17 /**
 18  * Created by 94965 on 2017/11/10.
 19  */
 20 
 21 public class TopBar extends RelativeLayout {
 22 
 23     public TypedArray ta;
 24     public Button mLeftButton;
 25     public Button mRightButton;
 26     public TextView mTitleView;
 27     public LayoutParams mLeftParams;
 28     public LayoutParams mRightParams;
 29     public LayoutParams mTitleParams;
 30     public topbarClickListener mListener;
 31 
 32 
 33     public TopBar(Context context){
 34         super(context);
 35     }
 36 
 37 
 38     public TopBar(Context context,AttributeSet attrs){
 39         super(context,attrs);
 40         ta=context.obtainStyledAttributes(attrs,R.styleable.TopBar);
 41         int mLeftTextColor=ta.getColor(R.styleable.TopBar_leftTextColor,0);
 42         float mTitleTextSize=ta.getDimension(R.styleable.TopBar_titleTextSize,0);
 43         int mTitleTextColor=ta.getColor(R.styleable.TopBar_titleTextColor,0);
 44         //Drawable mLeftBackGround=ta.getDrawable(R.styleable.TopBar_leftBackground);
 45         String mLeftText=ta.getString(R.styleable.TopBar_leftText);
 46         int mRightTextColor=ta.getColor(R.styleable.TopBar_rightTextColor,0);
 47         //Drawable mRightBackGround=ta.getDrawable(R.styleable.TopBar_rightBackground);
 48         String mRightText=ta.getString(R.styleable.TopBar_rightText);
 49         String mTitleText=ta.getString(R.styleable.TopBar_title);
 50         ta.recycle();
 51 
 52         mLeftButton=new Button(context);
 53         mRightButton=new Button(context);
 54         mTitleView=new TextView(context);
 55 
 56         //为创建的组件元素赋值
 57         //值来自我们在引用的xml文件中的对应属性的赋值
 58         mLeftButton.setTextColor(mLeftTextColor);
 59         //mLeftButton.setBackground(mLeftBackGround);
 60         mLeftButton.setText(mLeftText);
 61 
 62         mRightButton.setTextColor(mRightTextColor);
 63         //mRightButton.setBackground(mRightBackGround);
 64         mRightButton.setText(mRightText);
 65 
 66         mTitleView.setText(mTitleText);
 67         mTitleView.setTextSize(mTitleTextSize);
 68         mTitleView.setTextColor(mTitleTextColor);
 69         mTitleView.setGravity(Gravity.CENTER);
 70 
 71         //为组件元素设置相应的布局元素
 72         mLeftParams=new LayoutParams(
 73                 LayoutParams.WRAP_CONTENT,
 74                 LayoutParams.MATCH_PARENT
 75         );
 76         mLeftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,TRUE);
 77         addView(mLeftButton,mLeftParams);
 78 
 79         mRightParams=new LayoutParams(
 80                 LayoutParams.WRAP_CONTENT,
 81                 LayoutParams.MATCH_PARENT
 82         );
 83         mRightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,TRUE);
 84         addView(mRightButton,mRightParams);
 85 
 86         mTitleParams=new LayoutParams(
 87                 LayoutParams.WRAP_CONTENT,
 88                 LayoutParams.MATCH_PARENT
 89         );
 90         mTitleParams.addRule(RelativeLayout.CENTER_IN_PARENT,TRUE);
 91         addView(mTitleView,mTitleParams);
 92 
 93 
 94 
 95         //按钮的点击事件，不需要具体的实现
 96         //只需调用接口的方法，回调的时候，会有具体的实现
 97         mRightButton.setOnClickListener(new OnClickListener() {
 98             @Override
 99             public void onClick(View v) {
100                 mListener.leftClick();
101             }
102         });
103 
104         mLeftButton.setOnClickListener(new OnClickListener() {
105             @Override
106             public void onClick(View v) {
107                 mListener.rightClick();
108             }
109         });
110     }
111 
112 
113     public TopBar(Context context, AttributeSet attrs,int defStyle){
114         super(context,attrs,defStyle);
115 
116         //使用values中的attrs.xml来设置自定义view的属性
117         ta=context.obtainStyledAttributes(attrs,R.styleable.TopBar);
118         int mLeftTextColor=ta.getColor(R.styleable.TopBar_leftTextColor,0);
119         float mTitleTextSize=ta.getDimension(R.styleable.TopBar_titleTextSize,0);
120         int mTitleTextColor=ta.getColor(R.styleable.TopBar_titleTextColor,0);
121         //Drawable mLeftBackGround=ta.getDrawable(R.styleable.TopBar_leftBackground);
122         String mLeftText=ta.getString(R.styleable.TopBar_leftText);
123         int mRightTextColor=ta.getColor(R.styleable.TopBar_rightTextColor,0);
124         //Drawable mRightBackGround=ta.getDrawable(R.styleable.TopBar_rightBackground);
125         String mRightText=ta.getString(R.styleable.TopBar_rightText);
126         String mTitleText=ta.getString(R.styleable.TopBar_title);
127         ta.recycle();
128 
129         mLeftButton=new Button(context);
130         mRightButton=new Button(context);
131         mTitleView=new TextView(context);
132 
133         //为创建的组件元素赋值
134         //值来自我们在引用的xml文件中的对应属性的赋值
135         mLeftButton.setTextColor(mLeftTextColor);
136         //mLeftButton.setBackground(mLeftBackGround);
137         mLeftButton.setText(mLeftText);
138 
139         mRightButton.setTextColor(mRightTextColor);
140         //mRightButton.setBackground(mRightBackGround);
141         mRightButton.setText(mRightText);
142 
143         mTitleView.setText(mTitleText);
144         mTitleView.setTextSize(mTitleTextSize);
145         mTitleView.setTextColor(mTitleTextColor);
146         mTitleView.setGravity(Gravity.CENTER);
147 
148         //为组件元素设置相应的布局元素
149         mLeftParams=new LayoutParams(
150                 LayoutParams.WRAP_CONTENT,
151                 LayoutParams.MATCH_PARENT
152         );
153         mLeftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,TRUE);
154         addView(mLeftButton,mLeftParams);
155 
156         mRightParams=new LayoutParams(
157                 LayoutParams.WRAP_CONTENT,
158                 LayoutParams.MATCH_PARENT
159         );
160         mRightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,TRUE);
161         addView(mRightButton,mRightParams);
162 
163         mTitleParams=new LayoutParams(
164                 LayoutParams.WRAP_CONTENT,
165                 LayoutParams.MATCH_PARENT
166         );
167         mTitleParams.addRule(RelativeLayout.CENTER_IN_PARENT,TRUE);
168         addView(mTitleView,mTitleParams);
169 
170 
171 
172         //按钮的点击事件，不需要具体的实现
173         //只需调用接口的方法，回调的时候，会有具体的实现
174         mRightButton.setOnClickListener(new OnClickListener() {
175             @Override
176             public void onClick(View v) {
177                 mListener.leftClick();
178             }
179         });
180 
181         mLeftButton.setOnClickListener(new OnClickListener() {
182             @Override
183             public void onClick(View v) {
184                 mListener.rightClick();
185             }
186         });
187     }
188 
189     /**
190      *
191      * @param id Button id
192      * @param flag True显示，False隐藏
193      */
194 
195     public void setButtonVisable(int id,boolean flag){
196         if(flag){
197             if(id==0)
198                 mLeftButton.setVisibility(View.VISIBLE);
199             else
200                 mRightButton.setVisibility(View.VISIBLE);
201         }else{
202             if(id==0)
203                 mLeftButton.setVisibility(View.GONE);
204             else
205                 mRightButton.setVisibility(View.GONE);
206         }
207     }
208 
209 
210     //暴露一个方法给调用者来注册接口回调
211     //通过接口来获得回调者对接口方法的实现
212 
213     public void setOnTopbarClickListener(topbarClickListener mListener){
214         this.mListener=mListener;
215     }
216 
217 
218 
219     //接口对象，实现会调机制，在回调方法中
220     //通过映射的接口对象调用接口中的方法
221     //而不用去考虑如何实现，具体的实现由调用者去创建
222     public interface topbarClickListener{
223         //左按钮点击事件
224         void leftClick();
225         //右按钮点击事件
226         void rightClick();
227     }
233 }

 

activity_main.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:custom="http://schemas.android.com/apk/res-auto"
 4     xmlns:tools="http://schemas.android.com/tools"
 5     android:orientation="vertical"
 6     android:layout_width="match_parent"
 7     android:layout_height="match_parent"
 8 
 9     tools:context="sowell.oracle.com.viewdraw.MainActivity">
10 
11     <sowell.oracle.com.viewdraw.TopBar
12         android:id="@+id/tb"
13         android:layout_width="match_parent"
14         android:layout_height="40dp"
15         custom:leftText="Back"
16         custom:leftTextColor="#FFFFFF"
17         custom:rightText="More"
18         custom:rightTextColor="#FFFFFF"
19         custom:title="自定义标题"
20         custom:titleTextColor="#123412"
21         custom:titleTextSize="10sp"
22         >
23 
24     </sowell.oracle.com.viewdraw.TopBar>
25 
26     <!--<sowell.oracle.com.viewdraw.MyTextView
27         android:text="My TextView"
28         android:layout_width="wrap_content"
29         android:layout_height="wrap_content" />-->
30 </LinearLayout>

 

MainActivity.java

 1 package sowell.oracle.com.viewdraw;
 2 
 3 import android.content.Context;
 4 import android.graphics.Canvas;
 5 import android.graphics.Color;
 6 import android.graphics.Paint;
 7 import android.graphics.RectF;
 8 import android.support.v7.app.AppCompatActivity;
 9 import android.os.Bundle;
10 import android.view.View;
11 import android.widget.TextView;
12 import android.widget.Toast;
13 
14 
15 public class MainActivity extends AppCompatActivity {
16 
17 
18     public TopBar topBar;
19 
20     public void init(){
21         topBar=(TopBar)findViewById(R.id.tb);
22         topBar.setOnTopbarClickListener(new TopBar.topbarClickListener(){
23             @Override
24             public void rightClick() {
25                 Toast.makeText(MainActivity.this,"right",Toast.LENGTH_SHORT).show();
26             }
27 
28             @Override
29             public void leftClick() {
30                 Toast.makeText(MainActivity.this,"left",Toast.LENGTH_SHORT).show();
31             }
32         });
33 
34         topBar.setButtonVisable(0,true);
35         topBar.setButtonVisable(1,false);
36     }
37 
38 
39     @Override
40     protected void onCreate(Bundle savedInstanceState) {
41         super.onCreate(savedInstanceState);
42         setContentView(R.layout.activity_main);
43         init();
44     }
45 
46 }