Android-自定义控件

1.autoCompleteTextview

  [1]在布局中声明

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:tools="http://schemas.android.com/tools"
4. android:id="@+id/activity_main"
5. android:layout_width="match_parent"
6. android:layout_height="match_parent"
7. tools:context="com.itheima.myapplication.MainActivity">
9. <AutoCompleteTextView
10. android:id="@+id/actv"
11. android:layout_width="match_parent"
12. android:completionThreshold="1"
13. android:layout_height="wrap_content" />
14. </RelativeLayout>

 [2]这个控件展示数据原理和listview一样 需要一个适配器  代码如下:

1. public class MainActivity extends AppCompatActivity {
3. //声明一个数组 声明的内容就是这个控件要展示的内容
4. private static final String[] COUNTRIES = new String[] {
5. "老张", "老方", "老黎", "老毕", "老冯","老邱","aaa","aab"
6. };
8. @Override
9. protected void onCreate(Bundle savedInstanceState) {
10. super.onCreate(savedInstanceState);
11. setContentView(R.layout.activity_main);
13. //1.找到控件
14. AutoCompleteTextView actv = (AutoCompleteTextView) findViewById(R.id.actv);
16. //2.声明适配器 actv这个控件展示数据和listview一样 也需要适配器 参数2:使用系统提供好的一个布局
17. ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
18. android.R.layout.simple_dropdown_item_1line, COUNTRIES);
20. //3.actv和适配器关联
21. actv.setAdapter(adapter);
23. }
24. }

    1. ff
    
    

2.button和imageButton:

   

3.自定义控件的方式

 [1]通过原生的控件进行组合达到自定义的需求

 [2]定义一个类继承View

 [3]定义一个类继承ViewGroup

4.下拉列表

需求分析  通过edittext button  popupwindow listview组合达到自定义需求

代码实现步骤

[1]画UI 

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:tools="http://schemas.android.com/tools"
4. android:id="@+id/activity_main"
5. android:layout_width="match_parent"
6. android:layout_height="match_parent"
7. android:gravity="center_horizontal"
8. tools:context="itheima.a2_.MainActivity">
10. <EditText
11. android:id="@+id/et_number"
12. android:layout_width="250dp"
13. android:layout_height="wrap_content" />
15. <ImageButton
16. android:id="@+id/ib_down"
17. android:layout_width="wrap_content"
18. android:layout_height="wrap_content"
19. android:layout_alignRight="@id/et_number"
20. android:background="@null"
21. android:src="@drawable/down_arrow" />
23. </RelativeLayout>

[2]初始化popupwindow  

1. //弹出一个popupwindow
2. private void showpopUpWindow() {
4. //0.准备一个listview 给popupwindow使用
5. ListView view = initListView();
6. //1.创建一个popupwindow
7. // 参数1:View 指定popupwindow具体展示什么样的内容 -->展示listview
8. //参数2 3:宽 和 高 popupwindow的宽和高 宽应该和edittext一样宽 高自定义
9. PopupWindow pw = new PopupWindow(view,et_number.getWidth(),250,true);
10. //2.展示出来 展示到edittext 下面
11. pw.showAsDropDown(et_number);
13. }

 [3]准备popupwindow要展示的内容--->listview  先画listview条目的布局

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:padding="5dp"
5. android:layout_height="wrap_content">
7. <ImageView
8. android:layout_width="wrap_content"
9. android:layout_height="wrap_content"
10. android:src="@drawable/user"
11. />
13. <TextView
14. android:id="@+id/tv_content"
15. android:layout_width="0dp"
16. android:layout_height="wrap_content"
17. android:layout_weight="1"
18. android:text="哈哈"
19. android:gravity="center_horizontal"
20. android:textSize="25sp"
21. android:textColor="#000"
22. />
24. <ImageButton
25. android:id="@+id/ib_delete"
26. android:layout_width="wrap_content"
27. android:layout_height="wrap_content"
28. android:src="@drawable/delete"
29. android:background="@null"
30. />
32. </LinearLayout>

 [4]展示listviet的数据

1. private ListView initListView() {
2. //1.通过打气筒把一个布局转换为一个view对象
3. ListView listview = (ListView) View.inflate(getApplicationContext(), R.layout.listviewbg, null);
4. //2.给listview指定分割线
5. listview.setDivider(new ColorDrawable(Color.GRAY));
6. //3.设置分割线高度
7. listview.setDividerHeight(1);
9. //2.把lists集合里面的数据展示到listview上
10. listview.setAdapter(new MyAdapter());
11. return listview;
12. }
14. //定义listview的适配器
15. class MyAdapter extends BaseAdapter{
16. //listview一共要展示多少个条目
17. @Override
18. public int getCount() {
19. return lists.size();
20. }
22. @Override
23. public Object getItem(int position) {
24. return null;
25. }
27. @Override
28. public long getItemId(int position) {
29. return 0;
30. }
32. //获取一view 用来展示listview每个条目的内容
33. @Override
34. public View getView(int position, View convertView, ViewGroup parent) {
35. //1.对listview优化
36. View view;
37. if (convertView == null){
38. view = View.inflate(getApplicationContext(),R.layout.list_item,null);
39. }else{
40. view = convertView;
41. }
42. //2.找到条目的控件
43. TextView tv_content = (TextView) view.findViewById(R.id.tv_content);
44. ImageButton ib_delete = (ImageButton) view.findViewById(R.id.ib_delete);
45. //3.更新数据
46. tv_content.setText(lists.get(position));
48. //4.给按钮设置点击事件
49. ib_delete.setOnClickListener(new View.OnClickListener() {
50. @Override
51. public void onClick(View v) {
52. Toast.makeText(MainActivity.this, "delete", Toast.LENGTH_SHORT).show();
53. }
54. });
55. return view;
56. }
57. }

[5]点击listview的条目 把点击条目的数据取出来展示到edittext上

1. listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
2. @Override
3. public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
4. //6.把点击条目的数据取出来 数据在哪里存着就取哪里取
5. String data = lists.get(position);
6. //7.展示到EditText 控件上
7. et_number.setText(data);
8. //8.关闭popupwindow
9. pw.dismiss();
12. }
13. });

注意:当listview 的条目上有button checkbox这些控件 会抢占条目的事件 ---->解决方案在条目的根布局上面加如下属性

1. android:descendantFocusability="blocksDescendants"

[6]点击删除按钮逻辑

1. ib_delete.setOnClickListener(new View.OnClickListener() {
2. @Override
3. public void onClick(View v) {
4. //6.把对应条目删除 把数据先在集合里面删除
5. lists.remove(position);
6. //7.通知适配器更新
7. notifyDataSetChanged();
9. }
10. });

5.view绘制流程

  [1]测量  

  measure方法完成对view测量 -->实际测量工作在onMeasure方法里面实现,因为measure方法是final的 -->最终调用setMeasuredDimension这个方法完成测量工作,当我们想自己对view进行测量的时候,重写 onMeasure方法,调用 setMeasuredDimension方法就可以了.

  [2]排版

       底层调用layout ---->setFrame方法完成对view摆放.

       view在屏幕占据的是一个矩形区域,view的职责是绘制和事件处理.

  [3]绘制 draw 

1.                1. Draw the background 画背景
2. * 2. If necessary, save the canvas' layers to prepare for fading 画图层 跳过
3. * 3. Draw view's content 画内容 -->重写onDraw
4. * 4. Draw children 画孩子 当继承ViewGropp的时候才涉及画孩子
5. * 5. If necessary, draw the fading edges and restore layers 跳过
6. * 6. Draw decorations (scrollbars for instance) 画滚动条

 [4]绘制实战

 4.1)画线

1. canvas.drawLine(10,20,50,70,paint);

4.2) 画圆

1. canvas.drawCircle(100,100,30,paint);

4.3)画图片

1. Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.haha);
2. canvas.drawBitmap(bitmap,0,0,null);

4.3)画三角形 三个点连接起来

1. Path path = new Path(); ///创建一个路径 可以把几个点连接起来
2. //定义三角形三个点
3. int x1=100,y1=0;
4. int x2 =0,y2=195;
5. int x3=195,y3=195;
7. //把上面三个点连接起来
8. path.moveTo(x1,y1);
9. path.lineTo(x2,y2);
10. path.lineTo(x3,y3);
11. path.lineTo(x1,y1);
12. canvas.drawPath(path,paint);

4.4)画弧

1. //5.画弧
2. RectF rf = new RectF(5,5,195,195);
3. canvas.drawArc(rf,0,mProgress,false,paint);

6.开关案例

   代码实现步骤

   [1]先在构造方法里面获取2张背景图片的宽和高

1. //这个类在布局中使用
2. public ToogleView(Context context, AttributeSet attrs) {
3. super(context, attrs);
4. //1.把准备好的2张图片 转换为bitmap对象
5. toogleBg = BitmapFactory.decodeResource(getResources(), R.drawable.toogle_background);
6. slideBg = BitmapFactory.decodeResource(getResources(), R.drawable.toogle_slidebg);
7. }

  [2]重写onMeasure方法对当前view进行测量  当前view的宽高和 toogleBg 一样

1. //对当前的view 自己测量 当前view的宽就是toogleBg的宽 view的高就是toogleBg的高
2. @Override
3. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
4. //自己测量
5. setMeasuredDimension(toogleBg.getWidth(),toogleBg.getHeight());
7. }

 [3]重写onDraw方法往当前的view上画内容 其实就是画图片

1. //代表往当前view上画内容--->实际上就是画图片
2. @Override
3. protected void onDraw(Canvas canvas) {
4. //1.画开关背景
5. canvas.drawBitmap(toogleBg,0,0,null);
6. //2.画滑动块背景
7. canvas.drawBitmap(slideBg,0,0,null);
8. }

[4]给开关定义监听事件  具体什么时候出发回调事件:

1. //定义接口回调
2. public interface OnToogleListener{
3. //回调方法
4. void onState(boolean state);
5. }
7. //定义监听器方法
8. public void setOnToogleListener(OnToogleListener listener){
9. //接收外面传递过来的实例
10. this.mListener = listener;
11. }

[5]处理滑动块滑动的逻辑  重写onTouchEvent方法 处理手指按下和移动的逻辑

1. @Override
2. public boolean onTouchEvent(MotionEvent event){
3. //1.获取触摸事件类型
4. int action = event.getAction();
5. switch (action){
6. case MotionEvent.ACTION_DOWN: //按下
7. //1.获取手指按下的坐标
8. downX = event.getX();
9. break;
10. case MotionEvent.ACTION_MOVE: //移动
11. //1.获取移动的坐标
12. float movex = event.getX();
13. //2.算出移动距离
14. float distancX = movex - downX;
15. //3.对slideLeftPosition 重新赋值
16. slideLeftPosition+=distancX;
17. //4.对滑动块的边界解析判断
18. if (slideLeftPosition <=0){
19. slideLeftPosition = 0;
20. }else if(slideLeftPosition >=slideRightMaxPosition){
21. slideLeftPosition = slideRightMaxPosition;
22. }
23. //5.改变一下起始点坐标
24. downX = movex;
25. break;
26. case MotionEvent.ACTION_UP: //抬起
27. break;
28. }
29. invalidate();//--->onDraw方法就会执行
30. return true; //让当前控件消费事件
31. }

[6]处理手指抬起的业务逻辑

1. case MotionEvent.ACTION_UP: //抬起
2. //1.获取开关背景中心点
3. float toogleBgCenter = toogleBg.getWidth()/2;
4. float slideBgCenter =slideLeftPosition + slideBg.getWidth()/2;
5. //2.做判断
6. if (slideBgCenter <= toogleBgCenter){
7. //说明开关是关闭状态
8. slideLeftPosition = 0;
9. }else{
10. slideLeftPosition = slideRightMaxPosition;
11. }
12. break;

[7]实现开关的功能.

1. //3.如果手指抬起了 实现开关 开关的功能
2. if (isHandup){
3. isHandup = false;
4. //4.当手指抬起的时候获取当前开关的状态
5. boolean isOpenTemp = slideLeftPosition > 0;
6. //5.对开关的状态进行判断 判断开关的状态是否发生了变化
7. if (isOpen!=isOpenTemp && mListener!=null){
8. //说明开关的状态发生了改变 并且监听器实例不为空 触发接口的回调方法
9. mListener.onState(isOpenTemp);
10. //6.改变开关默认状态
11. isOpen = isOpenTemp;
12. }
14. }

[8]自定义开关的属性 

   8.1)在res下定义一个attrs文件

1. <?xml version="1.0" encoding="utf-8"?>
2. <resources>
3. <declare-styleable name="toogleView">
4. <attr name="state" format="boolean" />
5. </declare-styleable>
7. </resources>

 8.2)自己声明一个命名空间.

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
4. xmlns:itheima="http://schemas.android.com/apk/res-auto"
5. xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
6. android:layout_width="match_parent" android:layout_height="match_parent"
7. tools:context="com.itheima.toogleview.MainActivity">
9. <com.itheima.toogleview.ToogleView
10. android:id="@+id/toogleview"
11. android:layout_width="wrap_content"
12. itheima:state="false"
13. android:layout_centerInParent="true"
14. android:layout_height="wrap_content" />
15. </RelativeLayout>

 8.3)在构造方法里面获取我们声明的属性值

1. //3.获取布局文件中声明的属性值
2. String nameSpace = "http://schemas.android.com/apk/res-auto";
3. boolean state = attrs.getAttributeBooleanValue(nameSpace, "state", false);

 8.4)更新开关的状态

1. //更新开关的状态
2. private void setToogleState(boolean state) {
3. if (state){
4. //说明开关是开的状态
5. slideLeftPosition = slideRightMaxPosition;
6. }else{
7. //说明开关是关的状态
8. slideLeftPosition = 0;
9. }
11. }